A portfolio site for a full-stack engineer, rebuilt from a CMS-driven app into a fully static Next.js site with real-time 3D, scroll-driven motion and a light and dark theme, scoring 90+ on mobile Lighthouse performance and 100 on accessibility.
The project in short
imihir.com is the portfolio of a full-stack engineer: career, ventures, client work, stack and resume in one place. We rebuilt it from the ground up as a fully static Next.js site with an interactive 3D hero, scroll-driven motion and a light and dark theme.
The brief was a site that feels memorable on a large screen and still loads fast and reads cleanly on a phone, with no server process to keep alive.
What we were solving
The previous site was a Next.js 14 and Bootstrap frontend over a Laravel CMS and MySQL database, run as a Node process behind a proxy. That meant a database, a CMS and a running app to maintain for what is mostly read-only content, and 102 MB of unoptimised images to serve.
The new design called for real-time 3D and rich motion, which usually costs speed and accessibility, especially on phones and older devices.
What we set out to do
- A memorable first screen without hurting load time
- Lighthouse 90+ for performance on mobile, and 100 for accessibility, best practices and SEO
- No database or Node process in production: plain static files
- Full respect for reduced-motion settings and low-power devices
- Light and dark themes, and every old URL kept working
What we built
We moved the site to Next.js 15 with the App Router and React 19, exported as static HTML. All content (career, projects, testimonials, stack) lives in JSON files checked against Zod schemas at build time, so a missing field or bad date fails the build instead of reaching the live site.
The 3D scenes (a hero workspace, a venture scene and a tech constellation) use three.js through React Three Fiber, and are loaded only when they are needed. A GPU check picks a quality level for the device, and phones get a lighter layout.
What it does
- Interactive 3D hero, venture scene and tech-stack constellation
- Scroll-driven reveals with GSAP, ScrollTrigger and Lenis smooth scrolling, loaded lazily
- Page transitions with the View Transitions API
- Reduced-motion fallbacks for every animation
- Light and dark theme
- Project pages with device mockups for each client build
- Stylized illustrations made with OpenAI image generation, in place of photos
- 13 social sharing images generated at build time, JSON-LD structured data and a sitemap
How we built it
The codebase is TypeScript throughout, styled with Tailwind CSS 4. Old content was migrated by script: projects and testimonials came across from the previous database, and 102 MB of images became 7 MB of WebP. A build script turns a redirect list into 30 permanent redirects so every old URL still lands on the right page.
Continuous integration runs lint, type checks and a full build on every change. The output is plain static files served by OpenLiteSpeed on a Linux VPS, with no application process running.
Where it stands now
Every page scores 90 or more for performance on mobile Lighthouse, and 100 for accessibility, best practices and SEO. The home page scores 95, 100, 100 and 100 on mobile and 100 across the board on desktop, with 123 KB of JavaScript on first load despite the 3D and motion.
With no database or Node process in production, there is nothing to patch or restart: the site is a folder of files, and old links still work.