Next.js · DevOps · May 2026

Next.js 16 Portfolio: From Static HTML to Premium SPA

A behind‑the‑scenes look at upgrading a static HTML portfolio to a Next.js 16 single‑page application with interactive particles, scroll animations, and CI/CD deployment.

📅 May 2026⏱️ 10 min read🏷️ Next.js · DevOps

The journey

Why I rebuilt my portfolio in Next.js

My original portfolio was a simple static HTML/CSS site. It worked, but it lacked interactivity, maintainability, and SEO. Moving to Next.js 16 allowed me to leverage server‑side rendering, automatic code splitting, and a component‑based architecture – all while keeping the site blazing fast.

The result is a fully interactive SPA with particle canvas, typing effects, scroll‑reveal animations, and a custom 404 page – all deployed via GitHub Actions CI/CD.

Tech stack

⚛️ Next.js 16

App Router, React Server Components, and optimized builds.

🎨 Tailwind CSS + shadcn/ui

Utility‑first styling and accessible components.

✨ Framer Motion

Scroll‑based animations and micro‑interactions.

🚀 GitHub Actions

Automated CI/CD to GitHub Pages.

Interactive canvas

// Particle animation loop (simplified)
useEffect(() => {
  const canvas = canvasRef.current;
  const ctx = canvas.getContext('2d');
  let particles = [];
  
  function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, width, height);
    particles.forEach(p => { p.update(); p.draw(ctx); });
  }
  animate();
}, []);

The interactive particle canvas responds to cursor movement and creates a dynamic background that sets the tone for the entire site. It's built with vanilla JS and runs at a smooth 60fps.

CI/CD pipeline

⚙️

GitHub Actions workflow

On every push to main: npm install → npm run build → npm run export → deploy to gh-pages. Zero manual steps, automatic rollbacks, and full traceability.

Key takeaways

Migrating to Next.js improved SEO dramatically (thanks to SSR), reduced bounce rate, and made maintenance a joy. The developer experience with TypeScript + Tailwind is unmatched. If you're still on static HTML, take the leap – your future self will thank you.

Next.jsReactTailwind CSSFramer MotionGitHub ActionsCI/CD

See the live portfolio

Explore the interactive experience yourself.

Visit nilegazer00.github.io →

ConsoleReady — modern frontend architecture explained. © 2026