All work

2026

Niel Dev Portfolio v2

A static-first developer portfolio that combines selected work, professional experience, and learning projects in a responsive, content-driven site with a distinctive personal visual identity.

Role
Frontend Developer
Categories
Web
Screenshot of the niel.dev portfolio homepage with its dark visual system, responsive navigation, and developer persona.

Preview

View the live portfolio

Problem

A portfolio needs to make technical experience easy to explore without becoming difficult to maintain. I wanted a site that could present case studies, professional experience, and smaller learning projects in a clear, responsive format while still feeling recognisably personal.

Approach

I built the site as a static-first Astro application. Astro owns routing, layouts, metadata, and content loading, while Svelte is used only for focused interactive sections such as the work archive filters, persona display, and motion-enabled experience areas.

Project entries are stored in typed Astro content collections, so each case study follows the same structure for its summary, role, categories, technology stack, and long-form content. The work archive supports categories including Web, Mobile, and Lab / Learn, making experiments and learning projects discoverable alongside product work.

The interface pairs a dark, Japan-inspired visual direction with a custom developer persona and pixel-art details. It is responsive, includes accessible navigation, a light/dark theme toggle, and reduced-motion support. Animation relies on CSS, Svelte, and browser features to keep the experience polished without adding unnecessary weight.

Outcome

The result is a maintainable portfolio foundation that statically generates project pages and lets new case studies be published by adding a Markdown file. It gives selected work, professional history, and learning projects a coherent home while making the personal brand feel more memorable.

A personal touch

The experience is anchored by a pixel-art developer character that gives the portfolio a more distinctive, human identity.

Pixel-art Niel character wearing glasses, a dark jacket, and an ID badge while holding a code tablet

Responsibilities

  • Designed and implemented the static-first Astro architecture, layouts, and global visual system.
  • Built interactive Svelte islands for project filtering, persona presentation, and progressive motion.
  • Created typed content collections and reusable templates for consistent case studies.
  • Added responsive navigation, theme controls, and reduced-motion handling.
  • Structured the work archive to surface Web, Mobile, and Lab / Learn projects.