Minimal 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 minimal-portfolio

   Prefer to copy the files manually?

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

   $npm i gsap @gsap/react motion @phosphor-icons/react 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/minimal-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 "Minimal 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/minimal-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 `.margin` 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 `.margin` class and the `--margin-*` 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/minimal-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:
   - The fictional person, contact links, timezone, experience and projects live in content.ts. Replace all sample destinations with my real links. The calendar defaults to an email request; set person.calendar to my booking page if I have one.
   - The banner is assets/banner.jpg. Adjust hero.banner.position and alt text when replacing it. Set person.avatar to an imported portrait, or leave it null for initials.
   - Project covers are static coded mockups in components/project-covers.tsx. Replace their sample text or use my screenshots. Project mail links invite questions by default; set website and repo to real project destinations.
   - The activity heatmap is seeded sample data, labeled as such. Replace generateActivity in sections/activity.tsx with my real GitHub data before removing the sample label.
   - Retain the bundled LICENSE when copying or distributing this template. Technology icons are local SVGs in assets/tech.

4. 4

   Run it

   $npm run dev

   Then open localhost:3000.