My first portfolio was a single HTML file, a CSS stylesheet, and a handful of vanilla JavaScript functions. It lived on Netlify, it loaded fast, and it did its job. So why rebuild it?
Because I had outgrown it — and I needed something that showed where I was going, not where I had been.
Where It Started
I graduated with a B.S. in Computer Science from St. Mary's College of Tagum Inc. in May 2024. During my OJT at Nuevasoltech, I worked on Facebook cover photo banners and social card postcards for Tagum City festival campaigns, a mobile app icon library, and design presentations. I liked the visual side of the work, but I kept wanting to push pixels in code, not just Canva.
After graduation I took a break. In January 2026, I started relearning web development from scratch — HTML, CSS, and JavaScript, starting from W3Schools while figuring out how modern websites are actually built and deployed. That's when I found Claude Code, a CLI-integrated AI tool that became my main coding partner throughout the process. It helped me write and review code, understand project structure, and ship real deployed websites.
By February 2026, I had my first project live: a simple portfolio at cairelportfolio.netlify.app. HTML, CSS, vanilla JS. Web3Forms for the contact form. Nothing fancy — but it was mine and it was online.
That was version 1. This is version 2.
Why Next.js?
The honest answer: I wanted to learn it properly, and a portfolio is the best low-stakes project to do that on.
Next.js with the App Router gives you a lot for free:
- Static generation — every page pre-rendered at build time, served from Vercel's edge CDN
- TypeScript first — the whole project is typed, and it forces you to think clearly about data shapes
- File-based routing — pages, layouts, and API routes just... exist, where they should be
- MDX blog support — this post exists because I can drop
.mdxfiles into a folder
The jump from vanilla JS to a typed React app is significant. TypeScript caught bugs in my project data structures before I ever ran the dev server. That alone made the setup cost worth it.
The Stack
Next.js · TypeScript · Tailwind CSS v4 · Framer Motion · GSAP
Framer Motion handles the scroll-triggered animations — the staggered hero entrance, the section reveals, the project card fade-ins. The goal was motion that felt intentional without being distracting.
Design tokens live in globals.css as CSS custom properties. Every colour, spacing value, and shadow references a variable. Dark and light mode are two sets of tokens toggled by a class — no JavaScript logic needed at the component level.
What I Built Along the Way
While learning the stack, I built three other projects that are now in the portfolio:
nameischester — my personal site with 29 themed sections covering anime, games, music, stats, and community features like polls, a guestbook, whispers, secrets, and a time capsule. Static HTML, CSS, and JavaScript on the front, an Express API on Render, Supabase PostgreSQL on the back, plus two color themes (Slate, Crimson) with a Lights Off mode, an in-site Groq AI assistant, and full PWA support. The frontend lives on Vercel.
ServiceFlow — a service request and reporting system with role-based access for admins and users, reporting dashboards, and a full admin panel. Built with Next.js, Drizzle ORM, Auth.js, PostgreSQL, and Recharts.
Project ALICE — a bilingual (EN/JA) AI desktop assistant in Python. Wake-word detection via OpenWakeWord, speaker verification, and full PC control. Uses Groq, Gemini, and OpenRouter for the LLM brain, Faster-Whisper for speech-to-text, and Edge-TTS for voice output. Still in progress, but the most technically ambitious thing I've worked on.
What I Learned
Component-based architecture is not just a pattern — it changes how you think about UI. What used to be three duplicated HTML blocks is now one ProjectCard component fed by a data array. Adding a new project to this portfolio meant editing one file.
TypeScript is not optional for me anymore. It slows you down for the first hour and saves you hours every week after that.
Framer Motion taught me to think about motion as a design tool, not an afterthought. Scroll-triggered animations guide attention. They should earn their place.
Claude Code taught me that the fastest way to grow as a developer is to have something that can review your code, explain what's wrong, and push you to write it better — every single session.
What's Next
I'm looking for my first developer role. Everything in this portfolio — the projects, the blog, the chat widget powered by Groq — is where I am right now, and it's moving fast.
If you're building your own portfolio and starting from scratch: just start. Version 1 doesn't need to be good. It needs to exist.
Mine existed. Now it's version 2.