Portfolios · React
Software engineer
Dark, monospace portfolio for a software engineer with projects, open-source work and experience.

What you get
A dark portfolio for a backend or infrastructure engineer: open-source projects, what they work on, a short stats band, a career timeline and a contact form. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
/** The shape of src/site.ts: every word, colour and section of this site lives there. */import type { IconName } from "./Icon"; export type Link = { label: string; href: string }; export type Visual = | { type: "tiles"; tones: string[]; caption?: string } | { type: "mock"; title: string; rows: { label: string; value: string; tone?: string }[]; footer?: string } | { type: "card"; tone: string; title: string; lines: string[] } | { type: "none" }; export type Section = | { kind: "hero"; variant: "split" | "center" | "editorial"; eyebrow?: string; title: string; text: string; primary: Link; secondary?: Link; visual: Visual; note?: string } | { kind: "features"; id?: string; eyebrow?: string; title: string; text?: string; columns?: 2 | 3 | 4; items: { title: string; text: string; icon: IconName }[] } | { kind: "split"; id?: string; eyebrow?: string; title: string; text: string; bullets: string[]; visual: Visual; reverse?: boolean } | { kind: "menu"; id?: string; eyebrow?: string; title: string; text?: string; groups: { name: string; items: { name: string; text?: string; price: string }[] }[] } | { kind: "pricing"; id?: string; eyebrow?: string; title: string; text?: string; plans: { name: string; price: string; period?: string; text: string; features: string[]; featured?: boolean; cta: Link }[] } | { kind: "gallery"; id?: string; eyebrow?: string; title: string; text?: string; items: { title: string; caption?: string; tone: string }[] } | { kind: "projects"; id?: string; eyebrow?: string; title: string; items: { title: string; tag: string; year: string; tone: string }[] } | { kind: "quotes"; id?: string; eyebrow?: string; title: string; items: { quote: string; name: string; role: string }[] } | { kind: "stats"; id?: string; items: { value: string; label: string }[] } | { kind: "steps"; id?: string; eyebrow?: string; title: string; items: { title: string; text: string }[] } | { kind: "team"; id?: string; eyebrow?: string; title: string; items: { name: string; role: string; tone: string }[] } | { kind: "timeline"; id?: string; eyebrow?: string; title: string; items: { period: string; title: string; text: string }[] } | { kind: "faq"; id?: string; eyebrow?: string; title: string; items: { q: string; a: string }[] } | { kind: "products"; id?: string; eyebrow?: string; title: string; text?: string; currency: string; items: { name: string; price: number; category: string; tone: string; text: string; badge?: string }[] } | { kind: "hours"; id?: string; eyebrow?: string; title: string; text?: string; rows: { day: string; time: string }[]; address: string; phone?: string; email?: string } | { kind: "cta"; id?: string; title: string; text: string; primary: Link; secondary?: Link } | { kind: "contact"; id?: string; eyebrow?: string; title: string; text: string; fields: ("name" | "email" | "phone" | "date" | "guests" | "company" | "message")[]; button: string }; export type Site = { brand: string; nav: Link[]; navCta?: Link; sections: Section[]; footer: { text: string; columns?: { title: string; links: string[] }[]; legal: string };};Remix
Remix this template
Describe what to change and the agent starts from Software engineer's files. The box is already started for you: finish “Start from Software engineer and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Brand design studio
Bold dark site for an independent brand and identity studio, with case work, services and team.

Product designer
Case-study portfolio for a product designer, with process, experience timeline and references.

3D & motion designer
High-contrast dark portfolio for a 3D and motion designer, with reels, projects, rates and process.
Build on Software engineer
Create a free account, start from this template, and ask the AI agent to turn it into your app.