File-based routing based on TanStack Start and TanStack Router, including pages for home, about, experience, works list and detail, and contact
ViteReactPortfolio
tanstack-portfolio-developer — Vite Portfolio Template
By fabrizio-ferrentino
A personal portfolio template based on TanStack Start and React, supporting multiple themes and English-Italian bilingual content, with content data extracted into replaceable configuration files.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-13View source
What stands out
A quick read of the recorded project description.
Built-in English and Italian copy, with a language switching component
Multiple light/dark themes and a custom theme selector, with theme definitions centralized in src/lib/themes.ts
Site information, work experience, project data, and translation copy are extracted into separate files under src/lib for easy replacement with personal content
Uses shadcn/ui and Radix UI components, together with Tailwind CSS and CSS variable design tokens
Static Open Graph and Twitter meta tags in index.html for crawlers that do not execute JavaScript
Template Details
This is a personal portfolio website template built with TanStack Start, React, Vite, and Tailwind CSS. The repository contains only the source code; personal experience, project content, and contact information have been removed or generalized. The page structure covers home, about, experience, works list and work detail, and contact pages, with routing organized by TanStack Router using file-based routing. The template includes two sets of copy in English and Italian, and provides language switching and multiple light/dark theme switching entries.
Separation of content and configuration is its main organizational approach: site metadata and work experience are placed in src/lib/site.ts, project data in src/lib/works.ts, translation copy in src/lib/i18n.tsx, theme definitions in src/lib/themes.ts, and design tokens as CSS variables in src/styles.css. To adapt it to your own portfolio, you need to replace the data in these files rather than modify the page components.
Limitations to note: the repository does not contain any personal data, nor does it include ready-to-use content; SEO and Open Graph meta tags are static tags written in index.html, which you need to update yourself and prepare an /og.png image; the licenses for third-party assets such as demo images, fonts, and icons need to be checked separately, as the MIT license only covers the code itself.
ViteReactPortfolio
Is it right for your project?
Use Cases
- Developers need a starting point for a personal portfolio site with replaceable data to showcase experience, projects, and contact information
- Want the portfolio to provide both English and Italian versions
- Personal sites that need multiple light/dark themes or theme switching functionality
- Projects using TanStack Start and file-based routing to build a static SPA and deploy to Vercel
Suitable For
- Developers familiar with React, TypeScript, and Tailwind CSS who are willing to directly edit configuration files to replace content
- Individuals who need a bilingual portfolio and want to maintain translation copy themselves
- Developers who want to reference TanStack Start file routing and how themes and i18n are organized
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js 20+ or Bun 1.x, and one package manager from bun, npm, pnpm, or yarn
- 2
After cloning the repository, install dependencies, start the development server with npm run dev, and use npm run build and npm run preview for production build and local preview
- 3
To replace personal content, edit src/lib/site.ts, src/lib/works.ts, and src/lib/i18n.tsx; themes and design tokens are in src/lib/themes.ts and src/styles.css respectively
- 4
SEO and Open Graph meta tags are written in index.html; update them accordingly and provide a 1200×630 /og.png in public/
- 5
The licenses for third-party assets such as demo images, fonts, and icons need to be checked separately; the MIT license only covers the code
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domain, hosting, database, payment, or AI may incur additional charges.
- The repository contains only source code; personal data (work descriptions, project content, contact information, etc.) has been removed or generalized, so it does not include ready-to-use actual content and must be replaced with your own information.
- Before use, you must replace the personal data in src/lib/site.ts, src/lib/works.ts, and src/lib/i18n.tsx; the template itself does not contain ready-made content.
- You need to provide a real /og.png image (1200×630) in the public/ directory yourself; otherwise the Open Graph meta tags lack the corresponding image resource.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
This repository contains the source code only. Personal data (job descriptions, project content, contact details, etc.) has been removed or genericized
Original README
just replace the personal data in `src/lib/site.ts`, `src/lib/works.ts`, and `src/lib/i18n.tsx`.
Original README
https://github.com/fabrizio-ferrentino/tanstack-portfolio-developer/blob/main/LICENSEhttps://github.com/fabrizio-ferrentino/tanstack-portfolio-developer/blob/main/README.mdremember to provide a real `/og.png` (1200×630) in `public/`.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 88 / 100
- Technologies
- Vite · React
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-06-10
- Screenshot last checked
- 2026-10-13
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: 47b65e6f52430513deacae03ef8f7602ed109cdea2b0baff50d55a37bab3ae39
2026-10-13T03:23:25.091Z
Source file / repository# Personal Portfolio
My personal portfolio website, built with **TanStack Start**, **React 19**, and **Tailwind CSS v4**.
Showcases my experience, projects, and contact information with full internationalization (English / Italian) and multiple theme support.
> ⚠️ This repository contains the source code only. Personal data (job descriptions, project content, contact details, etc.) has been removed or genericized — feel free to fork and adapt it to your own profile — just replace the personal data in `src/lib/site.ts`, `src/lib/works.ts`, and `src/lib/i18n.tsx`.
---
<p align="center">
<a href="https://fabrizioferrentino.dev">
<img src="https://img.shields.io/badge/Demo-Live%20Preview-blue?style=for-the-badge&logo=vercel" alt="Live Demo" />
</a>
<a href="https://github.com/fabrizio-ferrentino/tanstack-portfolio-developer/issues">
<img src="https://img.shields.io/badge/Report%20Bug-red?style=for-the-badge&logo=github/new?labels=bug" alt="Report Bug" />
</a>
<a href="https://github.com/fabrizio-ferrentino/tanstack-portfolio-developer/issues">
<img src="https://img.shields.io/badge/Request%20Feature-brightgreen?style=for-the-badge&logo=github" alt="Request Feature" />
</a>
</p>
## 📸 Screenshot
<table width="100%">
<tr>
<td width="33.3%" align="center">
<img src="https://github.com/user-attachments/assets/54551551-f200-4ae2-bf66-95d846044080" alt="Desktop Light View" width="100%" />
</td>
<td width="33.3%" align="center">
<img width="1879" height="929" alt="Screenshot 2026-06-06 150423" src="https://github.com/user-attachments/assets/b3731f0f-dbec-4a85-89dc-eac88d87aa1a" />
</td>
<td width="33.3%" align="center">
<img src="https://github.com/user-attachments/assets/175e4c4e-efa4-43f5-9722-ba4b2767b98f" alt="Alternative View" width="100%" />
</td>
</tr>
</table>
## ✨ Features
- ⚡ **Static SPA build** powered by TanStack Start v1 + Vite 7 (SSR-capable, deployed as static on Vercel)
- 🎨 **Multiple themes** with a custom theme picker (light / dark variants)
- 🌍 **i18n** — English and Italian, with a language toggle
- 🧭 **File-based routing** with type-safe navigation (TanStack Router)
- 🎯 **Animated active-link indicator** in the navigation bar
- 📱 **Fully responsive** design, mobile-first
- ♿ **Accessible** components built on Radix UI primitives (shadcn/ui)
- 🔍 **SEO-friendly** with static Open Graph / Twitter meta tags in `index.html` for crawler compatibility
- 🎭 Smooth page transitions and micro-interactions
---
## 🛠️ Tech Stack
| Category | Technology |
| --------------- | ------------------------------------------------------- |
| Framework | [TanStack Start](https://tanstack.com/start) (v1) |
| UI Library | [React 19](https://react.dev) |
| Build Tool | [Vite 7](https://vitejs.dev) |
| Routing | [TanStack Router](https://tanstack.com/router) |
| Styling | [Tailwind CSS v4](https://tailwindcss.com) |
| Components | [shadcn/ui](https://ui.shadcn.com) + Radix UI |
| Icons | [Lucide React](https://lucide.dev) |
| Forms & Schema | React Hook Form + Zod |
| Language | TypeScript (strict mode) |
| Deploy Target | [Vercel](https://vercel.com) (static SPA) |
---
## 🚀 Getting Started
### Prerequisites
- **Node.js** 20+ (or **Bun** 1.x)
- A package manager: `bun`, `npm`, `pnpm`, or `yarn`
### Installation
```bash
# Clone the repository
git clone https://github.com/fabrizio-ferrentino/tanstack-portfolio-developer.git
cd tanstack-portfolio-developer
# Install dependencies
npm install
# or: bun install
```
### Development
```bash
npm run dev
# or: bun run dev
```
The site will be available at the URL printed in the terminal (Vite default: [http://localhost:5173](http://localhost:5173)).
### Production Build
```bash
npm run build
npm run preview
```
---
## 📁 Project Structure
```
src/
├── components/ # Reusable React components
│ ├── ui/ # shadcn/ui primitives
│ ├── SiteLayout.tsx # Main layout (nav + footer)
│ ├── ThemePicker.tsx
│ └── LanguageToggle.tsx
├── hooks/ # Custom React hooks
├── lib/ # Utilities, configs, and data
│ ├── i18n.tsx # Internationalization context & dictionaries
│ ├── themes.ts # Theme definitions
│ ├── site.ts # Site metadata & job history
│ └── works.ts # Projects data
├── routes/ # File-based routes (TanStack Router)
│ ├── __root.tsx # Root layout
│ ├── index.tsx # Home (/)
│ ├── about.tsx # About (/about)
│ ├── experience.tsx # Experience (/experience)
│ ├── works.index.tsx # Works listing (/works)
│ ├── works.$slug.tsx # Single work (/works/:slug)
│ └── contact.tsx # Contact (/contact)
├── styles.css # Tailwind v4 + design tokens
└── router.tsx # Router configuration
index.html # Static SEO + Open Graph meta tags
vercel.json # Vercel SPA rewrites
```
---
## 🎨 Customization
### Personal Information
Edit `src/lib/site.ts` to update:
- Name, role, location
- Social links (GitHub, GitLab, LinkedIn, etc.)
- Job history (with English / Italian translations)
### Projects
Edit `src/lib/works.ts` to add or modify portfolio items.
### Theme & Colors
Design tokens (colors, spacing, shadows) are defined as CSS variables in `src/styles.css` using the `oklch` color space. Add or tweak themes in `src/lib/themes.ts`.
### Translations
i18n strings live in `src/lib/i18n.tsx`. Add new keys to both `en` and `it` dictionaries.
### SEO & Open Graph
Static meta tags (title, description, Open Graph, Twitter Card) are defined in `index.html` so that crawlers and social platforms (LinkedIn, X/Twitter, Facebook, WhatsApp) can read them without executing JavaScript. Update them there when changing site-wide metadata, and remember to provide a real `/og.png` (1200×630) in `public/`.
---
## 📜 Scripts
| Command | Description |
| ------------------ | ------------------------------------ |
| `npm run dev` | Start the dev server with HMR |
| `npm run build` | Production build |
| `npm run preview` | Preview the production build locally |
| `npm run lint` | Run ESLint |
| `npm run format` | Format the codebase with Prettier |
---
## 📄 License
Released under the [MIT License](./LICENSE). Free to use as a starting point for your own portfolio — attribution is appreciated but not required.
## 💖 Support
If you like this repository please give it a star! ⭐
Explore similar templates
Compare previews and descriptions within the same stack and category.
Resumify
Resumify is a browser-based resume builder built with React, TypeScript, and Vite.
Vite · Portfolio
showlit
Showlit is a personal website template built with React, Vite, TypeScript, Tailwind CSS, and shadcn/ui.
Vite · Portfolio
folium
A developer portfolio template built with Vite, React, TypeScript, and Tailwind CSS.
Vite · Portfolio
kurizu-discord
A personal portfolio website built with React and Vite that mimics the Discord desktop app, organizing projects, skills, and experience into customizable channels, threads, a member list, and emoji reactions.
Vite · Portfolio
about-me-personal-portfolio-website-template
AboutMe is a free personal website template built with Bootstrap and Vite, released under the MIT license. It provides a single-page index.html with organized src directories for images, JavaScript, and SCSS, along with npm scripts for development and build.
Vite · Portfolio
HackFolio
HackFolio is a hacker-style personal portfolio template for ethical hackers, penetration testers, bug bounty hunters, red teamers, and cybersecurity professionals.
Vite · Portfolio