Skip to content
Codexa
Framework: Vite + React + TypeScriptDifficulty: beginner

Developer portfolio (React)

A one-page portfolio with a tag-filtered project grid, about section, and a mailto contact form.

All content lives in src/data.ts (profile, links, projects) so updating the site is a data change. The project grid filters by technology tag with accessible toggle buttons, and the contact form composes a mailto link instead of posting anywhere — no backend needed to deploy it to Codexa static hosting.

  • react
  • portfolio
  • personal-site
  • tailwind
Use this templateMore portfolios templates

This preview is the template's actual file tree and source code — exactly what is copied into a new project. Codexa does not publish screenshots or mock-ups of templates; run the project to see it rendered.

Files10 files

src/data.ts18 lines
export type Project = { title: string; summary: string; tags: string[]; url?: string };

export const profile = {
  name: "Your Name",
  role: "Full-stack developer",
  intro: "I build web applications with React, Node and PostgreSQL. Replace this with two sentences about what you do.",
  email: "you@example.com",
  links: [
    { label: "GitHub", href: "https://github.com/your-handle" },
    { label: "LinkedIn", href: "https://www.linkedin.com/in/your-handle" },
  ],
};

export const projects: Project[] = [
  { title: "Inventory tracker", summary: "Barcode scanning and low-stock alerts for a small warehouse.", tags: ["React", "Node"] },
  { title: "Clinic scheduler", summary: "Appointment booking with reminders and a staff calendar.", tags: ["TypeScript", "PostgreSQL"] },
  { title: "Design tokens CLI", summary: "Generates CSS variables and Tailwind themes from a JSON source.", tags: ["Node", "Tooling"] },
];

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

PackageVersion
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
Opens at
/
Difficulty
beginner

Projects run in an isolated sandbox with a live preview. Read the projects documentation for details on settings, snapshots and deployment.

More portfolios templates

View all
  • Framework: Static HTML/CSS/JSDifficulty: beginner

    Personal portfolio

    A single-page portfolio with projects grid and contact section. No build step.

    • html
    • css
    • portfolio

    3 files

    Use templatePreview

Need the raw data? GET /api/v1/templates/vite-react-portfolio returns this template with its files.

Build on Developer portfolio (React)

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Start Building FreeAll templates