Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rishabh Shenoy - Portfolio Website

A modern, responsive, and visually appealing personal portfolio website showcasing projects, skills, experience, and education.

🚀 Live Demo

Visit Portfolio

✨ Features

  • Responsive Design: Fully optimized for desktop, tablet, and mobile devices
  • Interactive Project Gallery: Hover effects with smooth animations and transitions
  • Project Filtering: Filter projects by category (MERN Stack, AI/ML, Applications, etc.)
  • All Projects Page: Comprehensive gallery of all completed projects with isotope filtering
  • Skills Showcase: Visual representation of technical skills
  • Experience Timeline: Professional experience displayed in an elegant timeline format
  • Education Section: Educational background with institutional details
  • Contact Form: Functional contact form with EmailJS integration
  • Smooth Animations: Scroll reveal animations and vanilla tilt effects
  • Modern UI/UX: Premium design with gradients, shadows, and glass morphism effects
  • Dark Theme: Eye-friendly dark interface with yellow accent colors

🛠️ Tech Stack

Frontend

  • HTML5 - Semantic markup
  • CSS3 - Advanced styling with gradients, animations, and transitions
  • JavaScript - Vanilla JS for interactivity
  • jQuery - DOM manipulation and event handling

Libraries & Plugins

  • Font Awesome 5 - Icon library
  • Particles.js - Animated particle background
  • Vanilla Tilt.js - 3D tilt effect on cards
  • Scroll Reveal - Scroll animations
  • Isotope - Project filtering and layout
  • Typed.js - Text typing animation
  • EmailJS - Email notification service

📁 Project Structure

Portfolio-Website/
├── index.html                 # Main portfolio page
├── README.md                  # Project documentation
├── assets/
│   ├── css/
│   │   ├── style.css         # Main portfolio styles
│   │   └── 404.css           # Error page styles
│   ├── js/
│   │   ├── script.js         # Main portfolio logic
│   │   ├── app.js            # Particles.js configuration
│   │   ├── particles.min.js   # Particle animation library
│   │   └── 404.js            # Error page logic
│   └── images/
│       ├── projects/         # Project screenshots
│       └── [other images]    # Portfolio images
├── projects/
│   ├── index.html            # Projects page
│   ├── all.html              # All projects gallery
│   ├── projects.json         # Projects data
│   ├── style.css             # Projects page styles
│   ├── script.js             # Projects page logic
│   └── all-script.js         # All projects page logic
├── experience/
│   ├── index.html            # Experience page
│   ├── style.css             # Experience page styles
│   └── script.js             # Experience page logic
└── 404.html                  # Error page

📋 Skills & Technologies

Languages

  • JavaScript (ES6+)
  • HTML5
  • CSS3

Frontend Frameworks & Libraries

  • React.js
  • Node.js
  • Express.js
  • MongoDB
  • MySQL
  • PostgreSQL

Tools & Platforms

  • Git & GitHub
  • Netlify
  • VS Code
  • Firebase

🎨 Key Sections

1. Home

  • Hero section with typing animation
  • Call-to-action button
  • Social media links
  • Particle background animation

2. About

  • Personal introduction
  • Brief background
  • Professional summary
  • Resume download link

3. Skills

  • Visual skill representation
  • Organized by categories
  • Interactive skill cards

4. Education

  • Educational qualifications
  • Institution details
  • Time period information
  • Responsive card layout

5. Projects

  • Featured projects with hover effects
  • Project descriptions
  • Live demo and code links
  • Category filtering
  • Full projects gallery page

6. Experience

  • Professional experience timeline
  • Company and role information
  • Employment duration
  • Detailed descriptions

7. Contact

  • Contact form with validation
  • Email integration
  • Contact information
  • Social media links

🎯 Features Highlights

Interactive Cards

  • Smooth hover animations
  • Image brightness dimming
  • Content slide-up effect
  • Top-right positioned action buttons
  • Premium shadow effects

Project Gallery

  • Isotope filtering system
  • Multiple category filters
  • Responsive grid layout
  • Enhanced visual design
  • Image lazy loading support

Navigation

  • Fixed header with glassmorphism
  • Smooth scroll behavior
  • Active link indicators
  • Mobile hamburger menu
  • Responsive navbar

Animations

  • Scroll reveal effects
  • Vanilla tilt 3D effects
  • Smooth transitions
  • Hover state animations
  • Loading animations

📱 Responsive Design

  • Desktop: Optimized for 1920x1080 and larger
  • Tablet: Responsive design for 768px - 1024px
  • Mobile: Full optimization for devices below 768px
  • Touch-friendly: Easy navigation and interaction on touch devices

🚀 Deployment

This portfolio is deployed on Netlify and can be accessed at:

Deploy Your Own

  1. Fork or clone this repository
  2. Ensure all files are properly structured
  3. Connect repository to Netlify
  4. Configure build settings (no build required)
  5. Deploy!

🔧 Installation & Setup

Prerequisites

  • Web browser (Chrome, Firefox, Safari, Edge)
  • Text editor (VS Code recommended)
  • Live server extension (for local development)

Local Development

  1. Clone the repository
git clone https://github.com/CodingEnthusiastic/Portfolio-Website.git
  1. Navigate to project directory
cd Portfolio-Website
  1. Open with live server
# Using VS Code Live Server
# Right-click index.html > Open with Live Server
  1. Access in browser
http://localhost:5500

📊 Performance Optimization

  • Optimized images with proper formats
  • CSS minification
  • JavaScript bundling
  • Lazy loading support
  • Fast CDN delivery via Netlify

🔐 Security

  • No sensitive data hardcoded
  • EmailJS integration for secure form submission
  • Content Security Policy headers
  • HTTPS enabled

📝 Content Management

Update Projects

Edit projects/projects.json:

{
  "name": "Project Name",
  "desc": "Project description",
  "image": "image_filename",
  "category": "category-name",
  "links": {
    "view": "live_url",
    "code": "github_url"
  }
}

Update Skills

Edit skills.json:

{
  "name": "Skill Name",
  "icon": "icon_url"
}

🎓 Learning Resources

This portfolio demonstrates:

  • Responsive web design principles
  • Modern CSS techniques (Flexbox, Grid, Gradients)
  • JavaScript DOM manipulation
  • API integration (EmailJS)
  • Performance optimization
  • SEO best practices

📞 Contact

Feel free to reach out for opportunities, collaborations, or just a friendly chat!

📄 License

This project is open source and available for personal use. Feel free to use it as inspiration for your own portfolio!

🙏 Acknowledgments

  • Font Awesome for icons
  • Particles.js for particle effects
  • Vanilla Tilt for tilt effects
  • Scroll Reveal for scroll animations
  • Isotope for filtering
  • Typed.js for typing animation
  • EmailJS for email service
  • Netlify for hosting

🐛 Known Issues & TODOs

  • Add loading indicators for projects
  • Implement dark/light mode toggle
  • Add search functionality to projects
  • Add pagination for projects list
  • Mobile menu close on link click
  • Add more detailed project case studies

📈 Future Enhancements

  • Blog section for technical articles
  • Video gallery for project demos
  • Testimonials section
  • Newsletter subscription
  • Advanced analytics
  • Multi-language support
  • PWA capabilities

🎉 Version History

v1.0 (Current)

  • Initial portfolio launch
  • Complete project showcase
  • Responsive design
  • Interactive features
  • Premium styling

Made with ❤️ by Rishabh Shenoy

Last Updated: January 2026

About

A modern, responsive, and visually appealing personal portfolio website showcasing projects, skills, experience, and education.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages