+
+ {/* window header */}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
new file mode 100644
index 0000000..c6a9021
--- /dev/null
+++ b/src/components/ThemeProvider.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return
+
+
+ {/* tabs */}
+
+
+
+
+
+
+
+ fikri@dev-terminal
+
+
+
+
+ {/* terminal body */}
+ bash
+ server
+ logs
+
+ {lines.map((line, i) => (
+
+ {line}
+ ))}
+
+ {typing && (
+
+ {typing}
+
+
+ |
+
+
+ )}
+
+ {/* Subtle top highlight to simulate glassmorphism lighting */}
+
+
+ {/* Header */}
+
+
+ {/* Footer info */}
+
+
+
+
+
+
+ + Welcome Back +
++ Enter your credentials to access the admin panel +
++ © {new Date().getFullYear()} Fikri Maulana. All rights reserved. +
+
+
+ {/* Left: Text content */}
+
+ {stats.map((stat, index) => {
+ const Icon = stat.icon;
+ let displayValue = stat.value;
+
+ // Use animated values based on index
+ if (index === 0) displayValue = `${yearsCount}+`;
+ else if (index === 1) displayValue = `${systemsCount}+`;
+ else if (index === 2) displayValue = `${modulesCount}+`;
+ else if (index === 3) displayValue = `${deploymentsCount}+`;
+
+ return (
+
+
+ );
+ })}
+
+ {/* Quote card */}
+
+
+
+
+
+
+
+
+ About Me
+
+
+
+
+ Engineering Beyond
+
+ Just Code +
+
+
+
+
+ {/* Skill badges */}
+
+ {skills.map((skill) => (
+
+ {skill}
+
+ ))}
+
+
+
+ {/* Right: Stats grid */}
+ + Just Code +
+ I'm a Fullstack Developer with 3+ years of experience building production-ready web applications using{" "} + Next.js and{" "} + NestJS. + My experience includes developing WhatsApp chatbot integrations, + building high-traffic lottery web applications, creating internal business dashboards, + and contributing to ERP-based POS systems. + +
+ ++ My expertise spans scalable frontend architecture with Next.js, + Zustand, Tailwind CSS, and Framer Motion, as well as secure + backend systems using{" "} + NestJS,{" "} + PostgreSQL, + and MongoDB + . +
+ ++ I focus on writing clean, maintainable code while ensuring + performance, validation, and system reliability. Every feature I + build is designed with scalability and long-term maintainability + in mind. +
+ ++ Whether it's architecting an internal dashboard from scratch, + optimizing complex database queries, or designing modular + backend systems — I bring both execution and engineering + thinking to every project. +
+
+
+ + {displayValue} +
+{stat.label}
++ "I focus on writing clean, maintainable code while thinking about how systems grow over time. I value good architecture, scalability, and building solutions that are easy for teams to maintain." +
++ — Engineering Philosophy +
+
+ {/* Header */}
+
+
+
+ Get in Touch
+
+
+ Let's Build Something
+
+ Together +
+
+ Have a project in mind? Let's talk about how I can help you build something
+ remarkable.
+
+
+
+ + Together +
+ {/* Left: Contact info */}
+
+ {contactInfo.map((item) => {
+ const Icon = item.icon
+ return (
+
+
+ {/* Right: Form */}
+
+
+
+
+
+ )
+ })}
+
+
+
+
+
+ {item.label}
+{item.value}
+
+
+ + I'm currently open to{' '} + freelance projects,{' '} + full-time positions, and + interesting technical collaborations. +
+
+
+ {status === 'success' ? (
+
+
+ ) : (
+
+
+ )}
+
+
+
+
+ + Message Sent! +
++ Thank you for reaching out. I'll get back to you within 24 hours. +
+ +
+
+
+
+
+
+ {errors.name && (
+
+ {errors.name.message}
+ )} +
+
+
+ {errors.email && (
+
+ {errors.email.message}
+ )} +
+
+
+ {errors.subject && (
+
+
+ {errors.subject.message}
+ )} +
+
+
+ {errors.message && (
+
+
+ {status === 'error' && (
+ {errors.message.message}
+ )} ++ {errorMsg} +
+ )} + + +
+
+
+
+
+
+
+
+ {!isCollapsed && (
+
+ AdminPanel
+
+ )}
+
+
+ {dashboardLinks.map((link) => {
+ const Icon = link.icon;
+ const isActive =
+ link.href === "/dashboard"
+ ? pathname === "/dashboard"
+ : pathname.startsWith(link.href);
+
+ return (
+
+
+
+
+ {!isCollapsed && (
+
+
+
+ Theme
+
+
+ )}
+ {isCollapsed && (
+
+
+ )}
+
+
+
+
+
+ {/* Mobile Sidebar Off-Canvas */}
+
+
+
+ AdminPanel
+
+
+
+
+
+ setMobileOpen(false)}
+ >
+
+
+
+
+
+ AdminPanel
+
+
+
+
+
+ Navigation
+
+ {dashboardLinks.map((link) => {
+ const Icon = link.icon;
+ const isActive =
+ link.href === "/dashboard"
+ ? pathname === "/dashboard"
+ : pathname.startsWith(link.href);
+
+ return (
+ setMobileOpen(false)}
+ className={cn(
+ "flex items-center gap-3 px-3 py-3 rounded-lg transition-colors",
+ isActive
+ ? "bg-primary/10 text-primary font-medium"
+ : "text-foreground-muted hover:bg-surface-elevated hover:text-foreground",
+ )}
+ >
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+
+
+
+
+ + {exp.role} +
+{exp.company}
+
+
+ + {exp.description} +
+ + {/* Highlights */} +-
+ {exp.highlights.map((h) => (
+
-
+
+ {h} +
+ ))}
+
+ {exp.techStack.map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+ {/* Header */}
+
+
+
+ Career
+
+
+ Experience
+
+
+
+ {/* Timeline */}
+
+ {/* Vertical line */}
+
+
+ {experiences.map((exp, i) => (
+
+
+
+
+ {/* Scroll indicator */}
+ {showScrollIndicator && (
+
+ )}
+
+
+ {/* Status badge */}
+
+
+
+ {/* Lottie animation */}
+
+ {loadingAnimation && (
+
+
+ {/* Main headline */}
+
+
+ {HeroData.headline || "Building Systems"}
+
+
+ + {HeroData.headline2 || "That Scale."} + +
+
+ {/* Tagline */}
+
+ {HeroData.tagline1 ||
+ "Senior Fullstack Engineer — Next.js & NestJS Specialist"}
+
+
+
+ {HeroData.tagline2 ||
+ "I architect and ship production-grade web applications with a focus on clean architecture, performance, and developer experience."}
+
+
+ {/* CTA Buttons */}
+
+
+ View Projects
+
+
+
+
+ Contact Me
+
+
+
+ {/* Social links */}
+
+
+
+
+
+
+ 3+ yrs experience
+
+
+
+
+ {/* Right Section: Photo - Desktop Only */}
+
+
+ {/* Window frame */}
+
+
+
+ + + {HeroData.badge || "Available for opportunities"} +
++ + {HeroData.headline2 || "That Scale."} + +
+
+ {/* Window header */}
+
+
+ {/* Floating card decor */}
+
+
+
+ {/* Image content */}
+
+
+
+
+
+
+ portfolio.jpg
+
+
+ 
+
+
+
+
+ {/* Floating card decor */}
+
+
+
+
+
+
+
+ 10+ Projects
+Completed successfully
+
+
+
+ {/* Terminal Window */}
+
+
+
+
+
+
+
+ Production Systems
+Built & Maintained
+
+
+
+ {NavLinks.map((link) => (
+ setMobileOpen(false)}
+ className="px-4 py-3 text-foreground-muted hover:text-foreground rounded-lg hover:bg-surface-elevated transition-colors"
+ >
+ {link.label}
+
+ ))}
+ setMobileOpen(false)}
+ className="mt-2 px-4 py-3 text-center font-medium bg-accent text-background rounded-lg"
+ >
+ Download CV
+
+
+
+ {/* Header */}
+
+ {principles.map((p) => {
+ const Icon = p.icon;
+ return (
+
+
+ );
+ })}
+
+
+ {/* Code snippet preview */}
+
+ {/* macOS-style title bar */}
+
+ {codeSnippet}
+
+ ) : (
+
+ )}
+
+
+
+
+ System Design
+
+
+ Engineering
+ Principles
+
+
+ I aim to build systems that are clean, maintainable, and ready to grow as products evolve.
+ These principles guide how I structure applications and approach technical decisions.
+
+
+
+ {/* Principles Grid */}
+
+
+
+
+
+ {p.tag}
+
+ + {p.title} +
++ {p.description} +
+
+
+
+ {/* Syntax-highlighted code */}
+ {mounted ? (
+
+
+
+
+
+
+ user.service.ts
+
+
+ Clean Architecture Example
+
+
+ {/* Header */}
+
+
+
+ Work
+
+
+
+ {/* Grid */}
+ + Featured Projects +
++ Production-grade systems I've built — from concept to deployment +
+
+ {projects.map((project, index) => (
+
+
+ {/* View more */}
+
+
+ {/* Header */}
+
+ {categories.map((category) => (
+
+
+ ))}
+
+
+
+
+ Technology
+
+
+ My Tech Stack
+
+
+ Battle-tested tools and frameworks I use to build production systems
+
+
+
+ {/* Grid */}
+ + {category.label} +
+
+ {category.tech.map((item) => {
+ const Icon = item.Icon;
+ return (
+
+
+
+ );
+ })}
+
+ {project.imageUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+
+ {/* Content */}
+
+
+ )}
+
+ {/* Gradient overlay */}
+
+
+ {/* Action links on hover */}
+
+
+ {Array.from({ length: 9 }).map((_, i) => (
+
+ ))}
+
+
+
+
+
+
+
+ + {project.title} +
++ {project.description} +
+ + {/* Tech stack tags */} +
+ {project.techStack.map((tech) => (
+
+ {tech}
+
+ ))}
+
+