simple-portfolio

Personal portfolio website for Kavan Gondalia

🌐 Live Demo

✨ Overview

A full-screen, scroll-snap portfolio built with React and TypeScript. It blends a warm earthy palette with smooth motion and responsive layouts across mobile and desktop.

🧭 Table of Contents

• Features
• Sections
• Tech Stack
• Quick Start
• Scripts
• Customize Content
• Project Structure
• Deployment
• License

🚀 Features

• 🧲 Scroll-snap sections with anchor-based navigation
• 📱 Responsive layouts with a 768px breakpoint
• 🧩 SVG-based loading animation
• 🌊 Scroll-reveal motion using Framer Motion useInView
• 🗂️ Tabbed career timeline (Work, Co-Curricular, Education)
• 🧪 Projects grid with tags and external links
• 🏆 Achievements section with competitive programming profiles

🧩 Sections

Section	Description
Hero	Greeting, tagline, profile photo, CTA button
About Me	Bio and skills (side-by-side on desktop, stacked on mobile)
Skills (mobile)	Languages, Frameworks/Libraries, Tools/Technologies
Career	Work experience, co-curricular roles, education timeline
Projects	Project cards with descriptions, tags, and links
Achievements	CP accounts, hackathon wins, certifications, social links

🧰 Tech Stack

Technology	Usage
React 18	UI framework
TypeScript	Type safety
Vite 6	Build tool and dev server
Tailwind CSS v4	Utility-first styling
Framer Motion 12	Animations
React Icons	Icon library
simplebar-react	Custom scrollbars
Inria Sans	Font

⚡ Quick Start

Prerequisites

• Node.js (>= 18)
• Yarn 1.22+

Install

yarn install

Development

yarn dev

Starts the Vite dev server with HMR at http://localhost:5173.

Build

yarn build

Runs tsc -b followed by vite build. Output goes to dist/.

Preview

yarn preview

Serves the built dist/ folder locally.

📜 Scripts

Command	Description
yarn dev	Start the Vite dev server
yarn build	Type-check and build for production
yarn preview	Preview the production build
yarn lint	Run ESLint across the project

🛠️ Customize Content

• Navigation links: src/constants/navbar.ts
• Skills data: src/constants/skills.ts
• Career timeline: src/constants/career.ts
• Projects list: src/constants/projects.ts
• Achievements: src/constants/achievements.ts
• Social links: src/constants/socials.tsx

🧱 Project Structure

src/
├── components/       # Reusable UI components (Reveal, Loader, Divider, etc.)
├── constants/        # Static data (navbar, skills, career, projects, etc.)
├── contexts/         # React context providers (ScreenSize)
├── sections/         # Full-viewport page sections (Hero, About, Career, etc.)
├── App.tsx           # Root component
├── main.tsx          # Entry point
└── index.css         # Tailwind + custom theme

📦 Deployment

Build the project and deploy the dist/ directory to any static hosting provider (Vercel, Netlify, GitHub Pages, etc.).

The live site is hosted at kavania2002.in.

📄 License

MIT