Jashvanthan Ashok - Software Engineering Portfolio

A modern, high-performance portfolio built with React 18 + Vite + Tailwind CSS, featuring futuristic glassmorphism, dynamic typing effects, interactive skill tags with percentage range reveals, floating morphing blob avatars, active scroll spy navigation, and Netlify Forms integration.

---

🚀 Quick Start

1. Install Dependencies

npm install

2. Run Development Server

npm run dev

Visit http://localhost:5173/ in your browser.

3. Build for Production

npm run build

The optimized production bundle will be generated in the dist/ directory.

4. Preview Production Build

npm run preview

---

📁 Project Structure

portfolio/
├── public/
│   ├── favicon.svg               # Glowing gradient SVG favicon
│   ├── profile.jpg               # Profile avatar image
│   ├── Jashvanthan_A_resume.pdf  # Resume download target
│   └── _redirects                # SPA redirect configuration for Netlify
├── src/
│   ├── components/
│   │   ├── Navbar.jsx            # Sticky navbar with blur and active indicator
│   │   ├── Hero.jsx              # Typing animation, hero CTAs & morph avatar
│   │   ├── About.jsx             # Introduction, Career Objective & Achievements
│   │   ├── Skills.jsx            # Interactive percentage range skill chips
│   │   ├── Experience.jsx        # Internships (InternPe & CodeSoft) & Learnings
│   │   ├── Projects.jsx          # Case study + project card grid
│   │   ├── FeaturedProject.jsx   # AI Smart Attendance case study card
│   │   ├── ProjectCard.jsx       # Modular project cards (PSR format)
│   │   ├── Certifications.jsx    # Certification badges with hover shimmer
│   │   ├── Contact.jsx           # Contact cards & Netlify Form
│   │   ├── Footer.jsx            # Footer with copyright & social links
│   │   ├── CustomCursor.jsx      # Fluid dual cursor with interactive hover
│   │   └── ScrollProgress.jsx    # Glowing top scroll progress bar
│   ├── data/
│   │   └── content.js            # Central content store for all data & text
│   ├── hooks/
│   │   ├── useScrollSpy.js       # Active section detector
│   │   ├── useTypingEffect.js    # Multi-phrase dynamic typing hook
│   │   └── useScrollReveal.js    # IntersectionObserver animation trigger
│   ├── styles/
│   │   └── index.css             # Glassmorphism, design tokens & responsive CSS
│   ├── App.jsx                   # Main application layout
│   └── main.jsx                  # React DOM root entrypoint
├── index.html                    # SEO tags, Open Graph & Google Fonts
├── netlify.toml                  # Netlify deployment configuration
├── package.json
├── tailwind.config.js
└── vite.config.js

---

⚙️ Editing Content & Adding Projects

All portfolio data (text, project descriptions, skills, experience, certifications, and contact links) is organized in a single file: 👉 src/data/content.js

To update your profile image or resume:

• Replace public/profile.jpg with your photo.
• Replace public/Jashvanthan_A_resume.pdf with your updated resume.

---

🌐 Deploying to Netlify

This repository is pre-configured for one-click deployment on Netlify:

1. Push your repository to GitHub.
2. In Netlify, click "Add new site" → "Import an existing project".
3. Select your GitHub repository.
4. Netlify will automatically detect settings from netlify.toml:
   • Build Command: npm run build
   • Publish directory: dist
5. Click Deploy Site.