Developer Portfolio

Install

The whole page lands in app/templates/developer-portfolio/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

1. 1

   Nav Bar and Hero

   A sticky nav bar with a headline that surfaces character by character, an availability badge and two action buttons — a self-contained portfolio opening.

   hero
2. 2

   Featured Projects

   Six representative projects as gradient thumbnails and window mock-ups; hovering opens the write-up, tech tags and headline results.

   gallery
3. 3

   About Me

   A portrait colour block with floating tags and three paragraphs of self-introduction, summed up by four figures on years, projects shipped and community reach.

   content
4. 4

   Skills and Toolbox

   Front-end, back-end and infrastructure proficiency shown as progress bars, over a tag cloud of everyday tools.

   features
5. 5

   Career Timeline

   A left-right alternating timeline threading four roles, its centre line lighting up progressively on scroll with each stage's highlights.

   timeline
6. 6

   Work With Me

   A centred call-to-action card on a glow and grid backdrop, built around a gradient headline and an email contact button.

   cta
7. 7

   Footer

   The brand mark and a short self-introduction, with navigation links, social links and the copyright notice.

   footer

Included in these starter kits

A kit packs this template together with the components it needs, an SEO skeleton and the form fields a Taiwanese storefront has to collect — all behind a single install command.

• Personal brand kit