Sal's Personal Portfolio Website is a Vite + React 18 + TypeScript portfolio template that compiles MDX case studies and blog posts into a static-style SPA with built-in SEO and AI-crawler support. Created by Sal Anvarov and MIT-licensed, it is designed as a deploy-ready starting point for a personal portfolio and blog.
What is Personal Portfolio?
The template takes MDX files under content/case-studies and content/posts as input and builds a client-side routed React application with pages for the portfolio, blog, and contact. It runs on Vite and React 18, uses TanStack Router for routing, Redux Toolkit with redux-persist for state, and SCSS + Bootstrap 5 + Iconoir for styling. The project is authored by Sal Anvarov and published on GitHub with a live preview at https://www.sal-anvarov.com/.
Key Features
- Tech stack — Vite + React 18 + TypeScript, TanStack Router for client-side routing, Redux Toolkit state with redux-persist, SCSS + Bootstrap 5 + Iconoir styling, and Framer Motion + AOS animations.
- MDX content pipeline — Case studies and blog posts are authored as MDX under content/ and bundled at build time using @mdx-js/rollup and import.meta.glob, so no CMS is required.
- SEO and AI-SEO — Includes /robots.txt with explicit Allow rules for Googlebot, Bingbot, plus AI crawlers (GPTBot, ClaudeBot, PerplexityBot); a build-time generated /sitemap.xml; an /llms.txt index; and per-route JSON-LD structured data (Person, WebSite, BlogPosting, CreativeWork).
- Env-variable integrations — Hotjar, Google Tag Manager, Microsoft Clarity, DebugBear RUM, Vercel Analytics, Formspree, Disqus, and Calendly are all activated through VITE_ environment variables; missing variables cause the script to no-op.
- One-click deployment — Preconfigured netlify.toml and vercel.json for Vite SPAs with rewrite rules, plus Deploy buttons for Netlify and Vercel.
- Dark and light theming — Global SCSS styles and a ThemeProvider in src/providers support switching between dark and light modes.
Who is it for?
- Developers who want a modern React portfolio with a blog and case-study setup without building from scratch.
- Freelancers and creatives who need to publish MDX content and control SEO metadata per page.
- Indie hackers seeking a fast, static-deployable portfolio with optional analytics and a contact form.
What can you do with it?
- Publish case studies and blog posts: Drop MDX files into content/case-studies or content/posts, and the build generates routes, sitemap entries, and JSON-LD schemas automatically.
- Enable site analytics: Set VITE_ENABLE_TRACKING=true and add IDs for Hotjar, GTM, Clarity, or DebugBear to load analytics without code changes.
- Collect contact submissions: Configure VITE_FORMSPREE_FORM_ID to make the /contact page send messages through Formspree.
- Offer scheduling: Set VITE_CALENDLY_URL to show a Calendly popup from the "Chat with Sal" CTA.
How does it work?
Clone the repository, copy .env.example to .env.local, fill in the integrations you want, run npm install and npm run dev for local development at http://localhost:4200. A production build runs npm run build, which type-checks and bundles to dist/, then deploy to Netlify or Vercel using the included configuration files.
Testing and Maintenance
The project includes npm run lint for ESLint and npm run typecheck for TypeScript checks. The repository is open to contributions via pull requests, and the codebase is licensed under MIT.
