Portfolio Website (React)

A responsive, animated personal portfolio website built with React showcasing projects, services, and professional experience.

Overview

This is a single-page application (SPA) portfolio website designed to present professional work, services, and background. The site features smooth animations, responsive design for all devices, and an intuitive navigation system. It serves as a digital resume and project showcase for potential clients and employers.

Why this project? To build hands-on experience with React fundamentals, component-based architecture, multi-page navigation, animations, and deploying a production-ready web application.

Live Demo

Visit the deployed website: https://main-react-five.vercel.app

Key Features

Responsive Design: Fully responsive layout that works seamlessly on desktop, tablet, and mobile devices
Multi-Page Navigation: Single Page Application with React Router for smooth navigation between sections
Animated Hero Section: Typewriter effect that rotates through dynamic text
Scroll Animations: AOS (Animate On Scroll) library for reveal animations as content comes into view
Portfolio Filtering: Filter projects by category (all, marketing, design, development)
Contact Form: Interactive contact form for visitor communication
Testimonials Section: Carousel displaying client/colleague testimonials
Responsive Navigation: Hamburger menu for mobile devices
Material Design Icons: Professional icons from Material-UI
CV Download: One-click download for CV/resume
Statistics Counter: Animated counters for key metrics

Tech Stack

Category	Technology
Frontend Framework	React 18
Routing	React Router DOM v5
UI Library	Material-UI (MUI) v5
Animations	AOS, Framer Motion, Typewriter Effect
Carousel	react-slick with slick-carousel
Styling	CSS + Emotion (@emotion/react, @emotion/styled)
Build Tool	Create React App (Vite alternative available)
Deployment	Vercel

Project Structure

MainREACT/
├── public/
│   ├── photos/              # Portfolio and about images
│   │   ├── vinaay.jpg
│   │   ├── portfolio1.gif
│   │   ├── portfolio2.gif
│   │   ├── portfolio3.gif
│   │   ├── blog.gif
│   │   └── My_cv.pdf
│   └── index.html
│
├── src/
│   ├── components/
│   │   ├── common/
│   │   │   ├── Header.jsx           # Navigation header with responsive menu
│   │   │   ├── Footer.jsx           # Footer with social links
│   │   │   └── Heading.jsx          # Reusable section heading component
│   │   ├── home/
│   │   │   ├── Home.jsx             # Main home page composition
│   │   │   └── Hero.jsx             # Hero section with typewriter effect
│   │   ├── pages/
│   │   │   ├── Pages.jsx            # Router configuration
│   │   │   ├── About.jsx            # About me section
│   │   │   ├── Services.jsx         # Services offered
│   │   │   ├── Portfolio.jsx        # Projects with category filtering
│   │   │   ├── Counter.jsx          # Statistics/metrics section
│   │   │   ├── Testimonials.jsx     # Client testimonials
│   │   │   ├── Blog.jsx             # Blog posts section
│   │   │   └── Contact.jsx          # Contact form and info
│   │   └── data/
│   │       ├── dummydata.js         # All content data (hardcoded)
│   │       └── images/
│   ├── App.js                        # Main app component with AOS initialization
│   ├── App.css                       # Global styles
│   ├── index.js                      # React DOM render
│   └── index.css                     # Global CSS
│
├── package.json
├── .gitignore
└── README.md

Installation

Prerequisites

Node.js (v14+) and npm
Git

Step 1: Clone Repository

git clone https://github.com/vinay5ain/MainREACT.git
cd MainREACT

Step 2: Install Dependencies

npm install

Step 3: Start Development Server

npm start

The application will open at http://localhost:3000

Step 4: Build for Production

npm run build

This creates an optimized production build in the build/ directory.

How It Works

Page Load: App initializes with AOS (Animate On Scroll) to enable scroll-triggered animations
Navigation: Header component renders responsive navigation from dummydata.js, React Router switches between pages
Hero Section: Displays intro text with typewriter effect cycling through name, title, and description
Content Sections: About, Services, Portfolio, Testimonials, Blog, and Contact sections load from dummy data
Portfolio Filtering: Users click category buttons to filter projects (state managed with useState)
Animations:
- AOS animations trigger as sections scroll into view
- Framer Motion for advanced animations where needed
- Typewriter effect for dynamic text rotation
Mobile Responsiveness: Hamburger menu appears on small screens; navigation hides on toggle
Form Submission: Contact form currently accepts input (backend integration would be next step)

Components & Sections

Hero Section

Typewriter effect with dynamic text rotation
Call-to-action CV download button
Scroll animations

About Section

Personal bio and background
Profile image
CV download option

Services Section

Three service cards (Creative Design, Clean Code, Responsive Design)
Icon-based representation

Portfolio Section

Project showcase with images
Dynamic category filtering
Overlay effect on hover

Counter/Statistics Section

Animated counters for key metrics
Icons and descriptions

Testimonials Section

Client/colleague testimonials with carousel
Profile images and titles

Blog Section

Blog post cards with dates and authors
Featured blog images

Contact Section

Contact form (Name, Email, Subject, Message)
Contact information (Address, Phone, Email)
Social media links

Data Structure

All content is stored in src/components/data/dummydata.js:

// Example structure
export const portfolio = [
  {
    id: 1,
    cover: "../photos/portfolio1.gif",
    name: "Brand",
    category: "marketing",
    title: "Brex Logo",
  },
  // ... more items
]

export const services = [
  {
    id: 1,
    icon: <Settings />,
    title: "Creative Design",
    desc: "Service description",
  },
  // ... more services
]

To customize content, edit the relevant array in dummydata.js.

Responsive Design

The site is fully responsive with:

Desktop: Full horizontal navigation, multi-column layouts
Tablet: Optimized grid layouts, touch-friendly buttons
Mobile: Hamburger menu, single-column layouts, stack design

Breakpoints are defined in the CSS files and respond to viewport size changes.

Deployment

Deployed on Vercel

The project is already deployed and live at: https://main-react-five.vercel.app

To deploy your own version to Vercel:

Push your code to GitHub
Go to https://vercel.com and sign up
Import your GitHub repository
Vercel will auto-detect React and build settings
Click "Deploy"

The site will be live with auto-deployment on every push to main branch.

Challenges & Learning

React Component Composition

Challenge: Building a cohesive portfolio from multiple components
Learning: Component reusability, prop drilling, and composition patterns for organizing complex UIs

Responsive Design

Challenge: Making animations and layouts work across all device sizes
Learning: CSS media queries, flexible layouts, and mobile-first design principles

React Router Implementation

Challenge: Managing multi-page navigation in a single-page application
Solution: React Router v5 for declarative route configuration
Learning: Route structure, navigation links, and switching between components

Animation Timing

Challenge: Coordinating multiple animation libraries (AOS, Framer Motion, Typewriter)
Solution: Careful timing with data-aos attributes and useEffect hooks
Learning: Performance implications of animations, animation synchronization, and user experience considerations

State Management

Challenge: Managing UI state (responsive menu, portfolio filters) across components
Solution: Local component state with useState
Learning: When to use local vs. global state, and component-level state management patterns

Content Management

Challenge: Making it easy to update portfolio content without touching JSX
Solution: Centralized data in dummydata.js with .map() to render
Learning: Data-driven UI architecture, separation of concerns, and scalability for future backend integration

Future Improvements

Backend Integration: Connect to a backend API/CMS for dynamic content management instead of hardcoded data
Contact Form Backend: Implement email functionality for contact form submissions
Blog System: Build a dynamic blog with markdown support and categorization
Dark Mode: Add theme switching between light and dark modes
SEO Optimization: Add meta tags, structured data, and improve search engine visibility
Performance: Implement lazy loading for images and code splitting
Analytics: Add Google Analytics or similar to track visitor engagement
Testing: Add unit and integration tests using Jest and React Testing Library
CMS Integration: Connect to Headless CMS (Strapi, Contentful) for easy content updates
Database: Store testimonials, projects, and blog posts in a database instead of hardcoded data

What This Project Demonstrates

✓ React Fundamentals: Component-based architecture, hooks (useState, useEffect), component composition
✓ React Router: Multi-page SPA navigation with declarative routing
✓ Responsive Design: CSS media queries and flexible layouts for all devices
✓ Third-Party Libraries Integration: Seamlessly using AOS, Framer Motion, Material-UI, and react-slick
✓ Animations: Implementing multiple animation techniques (scroll-triggered, typewriter, counters)
✓ Mobile-First Development: Hamburger menus, responsive navigation, touch-friendly UI
✓ Data-Driven UI: Using .map() to render dynamic content from data structures
✓ Production Deployment: Deploying to Vercel with CI/CD pipeline
✓ UI/UX Design: Creating an attractive, professional portfolio website
✓ Git & GitHub: Version control and repository management

Author

Vinay Kumar Sain

GitHub: @vinay5ain
Email: kumarsainvinay15@gmail.com
Location: Ghaziabad, India

Last Updated: September 2025
License: Not specified

Name		Name	Last commit message	Last commit date
public		public
src		src
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Latest commit

History

Folders and files

Repository files navigation

Portfolio Website (React)

Overview

Live Demo

Key Features

Tech Stack

Project Structure

Installation

Prerequisites

Step 1: Clone Repository

Step 2: Install Dependencies

Step 3: Start Development Server

Step 4: Build for Production

How It Works

Components & Sections

Hero Section

About Section

Services Section

Portfolio Section

Counter/Statistics Section

Testimonials Section

Blog Section

Contact Section

Data Structure

Responsive Design

Deployment

Deployed on Vercel

Challenges & Learning

React Component Composition

Responsive Design

React Router Implementation

Animation Timing

State Management

Content Management

Future Improvements

What This Project Demonstrates

Author

About

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages