Production-grade React + TypeScript portfolio
Built with Vite, Tailwind CSS v4, Framer Motion &more.
- 📖 About This Project
- ✨ Live Demo
- 🛠️ Tech Stack
- 🌟 Features
- 🗂️ Featured Projects
- 📸 Preview
- 🚀 Getting Started
- 📧 EmailJS Setup
- 📄 Resume
- 🌐 Deployment
- 📂 Project Structure
- 🎨 Color System
- ⚡ Performance Checklist
- 🔐 Credibility Notes
- 🤝 Contributing
- 📜 License
This repository is the front-end component of the full Portfolio Website project. It is part of a monorepo structure that contains shared tooling and configuration alongside the front-end application.
Portfolio-website/ # Monorepo root
├── front-end/ # ★ You are here — React + Vite SPA
│ ├── src/ # Application source code
│ ├── public/ # Static assets (images, resume)
│ ├── index.html # HTML entry point
│ ├── package.json # Front-end dependencies
│ └── vite.config.js # Vite configuration
├── package.json # Root workspace config (shared deps)
├── package-lock.json # Lockfile
└── PORTFOLIO_REVIEW.md # Project review ¬es
The root package.json hosts shared workspace dependencies (e.g., Radix UI, Framer Motion, Lucide React), while the front-end/ directory is the deployable SPA built with Vite + React + TypeScript.
🔗 View Live Portfolio → (Add your deployed URL here)
| Category | Technology |
|---|---|
| Framework | Vite + React 18 + TypeScript |
| Styling | Tailwind CSS v4 |
| Animation | Framer Motion |
| Icons | React Icons |
| Contact | EmailJS |
| SEO | react-helmet-async, JSON-LD schema (Person) |
| Deploy | Static SPA (Vercel / Netlify) |
- Full-screen Hero with a dynamic typing effect
- Light/Dark mode toggle with localStorage persistence
- Scroll progress bar & back-to-top button
- Reduced-motion support — respects prefers-reduced-motion
- Real stat counters — 3 projects, 50+ LeetCode, 12+ technologies
- Skills displayed as clean badges (no fabricated percentage bars)
- Projects section with category filter, tech badges &feature lists
- Experience timeline — real internship at SaiKet Systems + certifications
- Live GitHub API integration with graceful fallback on rate limits
- EmailJS contact form with success/error states and form validation
- Keyboard focus states throughout
- Semantic HTML structure
- Meta tags, Open Graph, Twitter Cards, JSON-LD Person schema
Three real-world applications built with modern technologies:
| Category | Full Stack |
| Description | Automated financial transaction matching using Levenshtein Distance, Jaro-Winkler, and N-Gram Similarity algorithms. Features fraud detection, JWT authentication, RBAC, and automated PDF/Excel report generation. |
| Tech Stack | React.js Node.js Express.js MongoDB JWT RBAC AI |
| Features | Fuzzy matching algorithms · Fraud detection engine · JWT Authentication · Role-Based Access Control · PDF & Excel Reports |
| Links | GitHub · Live Demo |
| Category | AI/ML |
| Description | Full-stack expense management platform with OCR receipt scanning, AI-powered duplicate detection, analytics dashboard, Docker Compose deployment, and email notifications. |
| Tech Stack | React.js Node.js MongoDB OCR Docker Cloudinary Tailwind CSS |
| Features | OCR receipt scanning · Expense analytics dashboard · AI duplicate detection · Email notifications · Docker Compose deployment |
| Links | GitHub |
| Category | Web App |
| Description | Real-time GitHub analytics application that retrieves repositories, followers, stars, and profile insights using the GitHub REST API with optimized API handling and a responsive UI. |
| Tech Stack | React.js GitHub API REST API JavaScript Tailwind CSS |
| Features | Real-time GitHub data · Profile analytics · Repository insights · Fast API fetching · Responsive UI |
| Links | GitHub · Live Demo |
Screenshots coming soon — replace this section with actual images.
Ensure you have the following installed:
- Node.js 18.x (recommended: 20.x LTS)
- npm 9.x (comes with Node.js) or yarn / pnpm
# Clone the repository
git clone https://github.com/your-username/portfolio-website.git
cd portfolio-website/front-end
# Install dependencies
npm install# Start the development server (default: http://localhost:5173)
npm run dev# Create an optimized production build
npm run build
# Preview the production build locally
npm run previewThe contact form uses EmailJS to send messages directly to your inbox without a backend server.
-
Create a free account at emailjs.com
-
Create an Email Service (Gmail, Outlook, Yahoo, etc.)
-
Create an Email Template with the following variables:
- {{name}} — sender's name
- {{email}} — sender's email address
- {{message}} — sender's message
-
Update the values in src/components/Contact.jsx:
// Replace these with your own EmailJS credentials const SERVICE_ID = "service_oy89oay"; // → Your Service ID const TEMPLATE_ID = "template_n3jkqyj"; // → Your Template ID const PUBLIC_KEY = "dq0aee7luMmW4hzxQ"; // → Your Public Key
⚠️ Security Note: The public key is safe to expose in client-side code — EmailJS is designed for this. Never expose your private/secret key.
- Place your resume PDF in the public/ folder
- Name it Jay_Avgune_Resume.pdf
- The "Download Resume" button in the Hero section will link to this file
| Step | Action |
|---|---|
| 1 | Push the repository to GitHub |
| 2 | Go to Vercel and import your GitHub repo |
| 3 | Configure the following settings: |
| • Framework Preset: Vite | |
| • Build Command: npm run build | |
| • Output Directory: dist | |
| 4 | Click Deploy — done! |
| Step | Action |
|---|---|
| 1 | Push the repository to GitHub |
| 2 | Go to Netlify and import your GitHub repo |
| 3 | Configure the following settings: |
| • Build Command: npm run build | |
| • Publish Directory: dist | |
| 4 | Click Deploy |
For SPA routing, create a _redirects file in public/ with: /* /index.html 200
front-end/
├── public/ # Static assets
│ ├── personal.png # Profile picture
│ └── Jay_Avgune_Resume.pdf # Resume (add yours here)
├── src/
│ ├── components/ # React components
│ │ ├── About.jsx # About section with stat counters
│ │ ├── BackToTop.jsx # Scroll-to-top button
│ │ ├── Contact.jsx # EmailJS contact form
│ │ ├── Experience.jsx # Experience timeline
│ │ ├── Footer.jsx # Site footer
│ │ ├── GitHubStats.jsx # Live GitHub stats
│ │ ├── Hero.jsx # Hero section with typing effect
│ │ ├── Navbar.jsx # Navigation bar
│ │ ├── Projects.jsx # Project showcase with filters
│ │ ├── ScrollProgress.jsx # Scroll progress indicator
│ │ ├── Skills.jsx # Skills badge grid
│ │ └── ThemeToggle.jsx # Light/dark mode toggle
│ ├── hooks/ # Custom React hooks
│ │ ├── useGitHubStats.js # GitHub API data fetching
│ │ ├── useReducedMotion.js # Motion preference detection
│ │ └── useTheme.jsx # Theme state management
│ ├── App.jsx # Root application component
│ ├── main.jsx # Application entry point
│ └── style.css # Global styles / Tailwind imports
├── index.html # HTML entry point
├── package.json # Dependencies & scripts
└── vite.config.js # Vite configuration
| Token | Hex | Usage |
|---|---|---|
| neon-cyan | #22d3ee | Primary accent, links, active states |
| neon-purple | #8b5cf6 | Secondary accent, gradient |
| neon-pink | #fb7185 | Tertiary accent, highlights |
| neon-blue | #38bdf8 | Button gradients, GitHub section |
| dark-bg | #050508 | Dark mode background |
| light-bg | #f8f9fc | Light mode background |
- Lazy loading images — loading="lazy" on all images
- Code splitting — automatic via Vite's built-in code splitting
- CSS minification — handled by Tailwind + Vite
- Font preconnect — link rel="preconnect" in head
- Reduced-motion — prefers-reduced-motion media query
- Semantic HTML — proper landmark elements & heading hierarchy
- Accessible focus states — visible focus outlines throughout
- ✅ All project claims are real and link to actual GitHub repositories
- ✅ Stat counters use real numbers (3 projects, 50+ LeetCode problems solved, 12+ technologies)
- ✅ No fabricated testimonials, employment history, or percentage-based skill bars
- ✅ GitHub stats are fetched live from the public API with graceful fallback on rate limits
- ✅ The internship at SaiKet Systems (Feb–Mar 2026) is genuine
- ✅ All certifications listed are verifiable
Contributions, issues, and feature requests are welcome!
- Fork the repository
- Create a feature branch (git checkout -b feature/amazing-feature)
- Commit your changes (git commit -m 'Add amazing feature')
- Push to the branch (git push origin feature/amazing-feature)
- Open a Pull Request
This project is open source and available under the MIT License.
Made with by Jay Avgune