Developer portfolio

Set up

1. 1

   Download it

   For Next.js App Router with React 19, Tailwind CSS v4, and the @/ import alias.

   $npx senn-ui@latest add developer-portfolio

   Prefer to copy the files manually?

   Copy src/templates/developer-portfolio from GitHub, including its assets and license files. Install its packages:

   $npm i gsap @gsap/react motion @phosphor-icons/react @hugeicons/react @hugeicons/core-free-icons cn

   If your project has no src/lib/utils.ts (or lib/utils.ts), create it with:

   export { cn } from "cn";
2. 2

   Render the template

   Add this to src/app/page.tsx (or app/page.tsx if your project has no src folder).

   import Template from "@/templates/developer-portfolio/page"; export default function Home() { return <Template />; }
3. 3

   Make it yours with your AI agent

   Paste into Claude Code, Cursor, Codex or any coding agent. It asks about you and your work, then rewrites the copy, colors and images.

   PromptSkill

   Copy prompt

   I'm using the "Developer portfolio" template from Senn (open source, MIT). Make it my own portfolio, using my real work and personal information.
   
   The template lives in `src/templates/developer-portfolio/`:
   - `content.ts`: every word, number, link and image, plus the data the product mockups show. Most of the work happens here.
   - `theme.css`: colors and motion as CSS variables on the `.summit` class.
   - `page.tsx`: loads the fonts and puts the sections in order.
   - `assets/`: the template's photos, imported in content.ts.
   - `sections/` and `components/`: layout and animation. Leave these alone unless I ask.
   
   Steps:
   1. Before editing anything, ask me what you need to know in one short list: name, role, location and time zone, email and booking link, real projects with URLs and outcomes, work history, tech stack, GitHub activity source, availability, and preferred colors. Never invent employment, awards, project results or contribution counts. If I don't have something yet, leave a clear TODO in content.ts.
   2. Rewrite `content.ts` for my own portfolio. Keep the same structure and field names. Write specific, plain copy: concrete outcomes and real numbers, no filler, no buzzwords, sentence case headings.
   3. Rebrand: change the wordmark in content.ts, rename the `.summit` class and the `--summit-*` variables to my brand, and rename the page component.
   4. Update the colors in `theme.css` to my brand. Check that text stays readable on every photo, in both light and dark areas.
   5. Replace the photos in `assets/` with mine, or ask me for them. Keep the imports in content.ts in sync.
   6. If the page isn't rendered yet, render it on my home route: import the default export of `src/templates/developer-portfolio/page.tsx` in `app/page.tsx`.
   7. Keep every section, layout and animation. Don't add dependencies.
   8. Run the dev server and check the page at desktop and phone widths: no text overflowing, no single word alone on a heading's last line, every link and button pointing somewhere real.
   9. Preserve any bundled LICENSE and third party license files when adapting or distributing the template.
   
   Notes for this template:
   - Everything about the person (name, city, time zone, email, calendar link) lives in `person` in content.ts. The hero and footer clocks read `person.timeZone`.
   - Each project in `work.projects` picks a looping mini UI with `visual` (events, booking or notes) whose text lives in `visuals`. Rewrite that text so the mini UIs show my projects doing their job, or build a new visual in components/work-visuals.tsx.
   - Set a project's `tone` to "light" when its photo is pale, so its panels switch to frosted white with ink text.
   - The hero and contact photos join a flat sky colour above them (`--summit-sky`, `--summit-moss-sky` in theme.css). If you replace those photos, sample the new sky colour and update the tokens.

4. 4

   Run it

   $npm run dev

   Then open localhost:3000.