A modern, responsive, accessible portfolio template built with Vite, React, TypeScript, Tailwind, Framer Motion, and Lucide icons.
- Install dependencies
npm install- Start the dev server
npm run dev- Build for production
npm run build- Preview the production build
npm run previewTo find unused dependencies, run:
depcheckTo remove them, run:
npm prune <package-name>To find unused code:
npm run knip/src
/components # Reusable UI components
/layouts # Navbar, Footer, layout shell
/pages # Route-level components
/hooks # Custom hooks
/styles # Global CSS (Tailwind)
/types # Shared TypeScript types
/projects # Project definitions
- Theme stored in localStorage under
themeand applied asdarkclass on<html>. - Toggle via the navbar switch.
- Semantic HTML, proper labels, and focus styles.
- Vite + React + TypeScript for fast DX and type safety
- Tailwind CSS for utility-first styling and theming (dark via class)
- React Router for client-side routing
- Framer Motion for subtle transitions
- Radix UI primitives (Switch) and Lucide icons for accessible, modern UI
Projects are rendered from typed data and support inline PDF viewing.
- Data files:
src/projects/data.tsexportingpersonalProjectsanduniversityProjects. - Types:
src/types/projects.ts. - Components used:
ProjectCard,PdfList,PdfViewerModal.
- Place PDFs under
public/projects/<group>/<slug>/reports/.- Example:
public/projects/fing/aagrafos/reports/Report 1.pdf.
- Example:
- Edit
src/projects/data.tsand add a newProjectentry with:slug,title,type("personal" | "university"),timestamp,description.- Optional:
tags,tech,siteUrl,attachments.
- For PDFs, provide
attachmentswith absolute hrefs starting with/projects/....
- Single PDF: card shows compact View and Download actions.
- Multiple PDFs: card shows a "Reports (N)" toggle with an animated list.
- PDFs open in an accessible modal via
<object>with graceful fallback to<embed>.
The contact page posts to FormSubmit using an environment-configured endpoint.
- Set the endpoint in a
.envfile (to send to your inbox):
VITE_FORMSUBMIT_ENDPOINT=https://formsubmit.co/ajax/<mail-address>