A modern, full-stack personal portfolio showcasing projects, experience, education, certifications, and testimonials. Built with performance, accessibility, and developer experience in mind.
- Interactive Hero Section - Immersive 3D/animated background with smooth animations
- Project Showcase - Dynamic project portfolio with detailed project pages, tags, and external links (live demo, GitHub, app downloads)
- Experience Timeline - Professional work history with detailed role descriptions
- Education & Certifications - Academic background and professional certifications
- Testimonials - OAuth-authenticated testimonial system with GitHub/Discord providers
- Admin Dashboard - Protected admin panel for managing portfolio content (jobs, projects, education, certificates, technologies)
- AI Resume Assistant - Interactive chatbot powered by TanStack AI to answer questions about the resume
- Live Presence - Discord presence integration via Lanyard API
- Theme System - Dark/light/auto theme with SSR-safe hydration
- Responsive Design - Fully responsive across desktop, tablet, and mobile
- Performance Optimized - Code splitting, lazy loading, optimized assets, and aggressive caching
- 3D Visual Effects - Custom Three.js components (Strands, DotGrid, etc.)
This portfolio is built with TanStack Start, a full-stack React meta-framework. It follows a type-safe, server-first architecture with file-based routing.
| Category | Technologies |
|---|---|
| Framework | TanStack Start, React 19, TypeScript |
| Styling | Tailwind CSS v4, shadcn/ui (via registry), Lucide React, Motion |
| 3D Graphics | Three.js, React Three Fiber, React Three Drei, React Three Rapier, Meshline |
| Routing | TanStack Router (file-based, type-safe) |
| Database | PostgreSQL (Neon), Drizzle ORM |
| Authentication | OAuth (GitHub, Discord) with custom session tokens |
| AI Integration | TanStack AI (supports OpenAI, Anthropic, Gemini, Ollama) |
| Data Fetching | TanStack Router SSR + custom services/repositories |
| Build Tool | Vite |
| Deployment | Netlify |
| Linting/Formatting | Biome |
| Testing | Vitest, React Testing Library |
vertsan/
├── public/ # Static assets (images, videos, resume, fonts, etc.)
├── src/
│ ├── components/ # React components
│ │ ├── admin/ # Admin dashboard components
│ │ ├── sections/ # Page section components (Hero, WhatICanDo, Testimonials, etc.)
│ │ ├── ui/ # shadcn/ui components
│ │ └── Lanyard/ # Discord presence components
│ ├── db/ # Database schema, client, and migrations
│ │ └── schema.ts # Drizzle ORM schema definitions
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions, helpers, and configurations
│ ├── registry/ # shadcn/ui component registry
│ ├── repositories/ # Data access layer (abstraction over services)
│ ├── routes/ # TanStack Router file-based routes
│ │ ├── __root.tsx # Root layout with meta tags, theme, devtools
│ │ ├── index.tsx # Home page
│ │ ├── projects.* # Projects routes (list + detail)
│ │ ├── admin.* # Protected admin routes
│ │ ├── api.* # API route handlers (server functions)
│ │ └── *.tsx # Other pages
│ ├── services/ # Business logic layer
│ ├── styles.css # Global styles (Tailwind v4)
│ ├── router.tsx # Router configuration
│ └── routeTree.gen.ts # Auto-generated route tree
├── drizzle/ # Drizzle migrations
├── netlify.toml # Netlify config
├── package.json # Dependencies and scripts
├── vite.config.ts # Vite configuration
└── biome.json # Biome config
- Server Routes (
src/routes/api.*) handle API requests using TanStack Start's server handlers - Services (
src/services/*.service.ts) contain business logic and validation - Repositories (
src/repositories/*.ts) provide a clean data access abstraction - Database - Drizzle ORM queries PostgreSQL (Neon DB)
- Frontend - TanStack Router with SSR fetches data on the server when possible, falling back to client-side fetching
- Theme Management - SSR-safe theme initialization via inline script in root layout, persisted in localStorage with light/dark/auto modes
- Admin Auth - Password-based login with cookie-based sessions; OAuth flow for testimonials
- Testimonials - GitHub/Discord OAuth integration to allow visitors to leave authenticated testimonials
- Presence - Real-time Discord status via Lanyard API
- Caching - In-memory cache in public API routes (60s TTL) with appropriate HTTP cache headers
- Code Splitting - Lazy-loaded route sections for optimal bundle size
- 3D Effects - Custom components with Three.js, optimized with proper cleanup and reduced motion support
-
Clone the repository
git clone https://github.com/vertsan/vertsan.git cd vertsan -
Install dependencies
pnpm install
-
Set up environment variables
Create a
.envfile in the root directory:# Database DATABASE_URL=postgresql://username:password@host:port/database # Admin Authentication ADMIN_SECRET=your-secure-admin-secret # OAuth (for testimonials) GITHUB_CLIENT_ID=your-github-client-id GITHUB_CLIENT_SECRET=your-github-client-secret DISCORD_CLIENT_ID=your-discord-client-id DISCORD_CLIENT_SECRET=your-discord-client-secret OAUTH_REDIRECT_URI=http://localhost:3000/api/auth # AI Resume Assistant (optional) OPENAI_API_KEY=your-openai-api-key ANTHROPIC_API_KEY=your-anthropic-api-key GEMINI_API_KEY=your-gemini-api-key # Cloudinary (for image uploads, optional) CLOUDINARY_CLOUD_NAME=your-cloud-name CLOUDINARY_API_KEY=your-api-key CLOUDINARY_API_SECRET=your-api-secret
-
Set up the database
pnpm db:generate pnpm db:migrate # or pnpm db:push pnpm seed # optional
-
Start the development server
pnpm dev
App available at http://localhost:3000.
| Script | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm preview |
Preview production build |
pnpm test |
Run tests |
pnpm lint |
Lint code |
pnpm format |
Format code |
pnpm check |
Lint + format |
pnpm db:generate |
Generate migrations |
pnpm db:migrate |
Apply migrations |
pnpm db:push |
Push schema |
pnpm seed |
Seed database |
Configured for Netlify with netlify.toml (build: vite build, publish: dist/client). Set environment variables in the Netlify dashboard and deploy on push to main.
Admin dashboard at /admin for managing projects, jobs, education, certificates, and technologies.
pnpm test- Website: https://vertsan.netlify.app
- Email: itsanvert@gmail.com
- LinkedIn: https://linkedin.com/in/vertsan
- GitHub: https://github.com/vertsan
Built by Vert San