Why I Built My Portfolio
I wanted a single place to showcase my work beyond a resume — somewhere recruiters and collaborators could see real projects, my tech stack, and my personality as a developer. As someone who has won multiple hackathons and built production systems at Smartdings, I needed a space that could tell that story visually.
How I Built My Portfolio
Built with React 19, TypeScript, Vite, and Tailwind CSS, deployed on Firebase Hosting with a custom CI/CD pipeline via GitHub Actions. I used Cloudinary for asset hosting, Shadcn/UI for base components, and integrated Firebase Firestore to track real visitor locations shown on a live world map. Fonts are self-hosted (CentraNo2) and the app is a PWA with offline support.
Challenges in Creating My Portfolio
Several: making the design feel premium without a design team, building a live visitor map that performs well without leaking user data, getting CI/CD to work reliably (a Vite legacy plugin was silently requiring terser and breaking every pipeline build), and balancing animation-heavy glassmorphism UI with good Lighthouse/accessibility scores.
How I Overcame Those Challenges
Traced the CI failure to @vitejs/plugin-legacy internally calling terser regardless of the minify setting — fixed by removing the plugin entirely and using esbuild. For the visitor map, I anonymize coordinates server-side. For accessibility, I audited every component: replaced div role buttons with semantic <button> elements, added ARIA labels, focus-visible rings, a skip-navigation link, and proper heading hierarchy.
Inspiration
The dark glassmorphism aesthetic — slate/purple/cyan gradients, frosted-glass cards, and floating ambient blobs — was inspired by modern SaaS landing pages and developer portfolios that treat design as a product in itself. The animated typing text in the banner and the visitor world map came from wanting the site to feel alive, not static.
Lessons
That shipping a polished personal project is harder than shipping a feature at work — there's no product spec, no designer, no QA. I deepened my knowledge of Vite's build pipeline, Firebase Hosting configuration (rewrites, error pages, multi-site redirects), schema.org structured data for SEO identity graphs, and WCAG 2.1 accessibility requirements. I also learned that small things — canonical URLs, og:image:alt, twitter:creator — matter more for discoverability than expected.
Future Plans for My Portfolio
Add a blog/writing section to build topical authority for SEO, improve the projects section with live demo embeds, add a dark/light mode toggle, and expand the skills section with proficiency levels. On the technical side: improve Core Web Vitals scores further, add E2E tests, and potentially migrate to SSR for better SEO crawlability.
