Mayur Nakum - Frontend Developer Portfolio

A modern, responsive portfolio website built with Next.js, TypeScript, and Tailwind CSS. This project showcases my skills, projects, and experience as a frontend developer.

🚀 Live Demo

View Portfolio

🛠️ Tech Stack

Framework: Next.js 14 (App Router)
Language: TypeScript
Styling: Tailwind CSS
Icons: Lucide React
Deployment: Vercel
Analytics: Vercel Analytics & Speed Insights

📁 Project Structure

mayur_portfolio/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Global layout wrapper
│   │   ├── globals.css         # Global styles & Tailwind imports
│   │   ├── page.tsx            # Home page
│   │   ├── about/
│   │   │   └── page.tsx        # About page
│   │   ├── projects/
│   │   │   └── page.tsx        # Projects showcase page
│   │   ├── contact/
│   │   │   └── page.tsx        # Contact page
│   │   └── provider/
│   │       └── NoSSRProvider.tsx
│   ├── components/
│   │   ├── Header.tsx          # Navigation header
│   │   ├── Footer.tsx          # Footer with social links
│   │   ├── Menubar.tsx         # Navigation menu component
│   │   ├── SocialsMenu.tsx     # Social media links
│   │   ├── ScrollingUpButton.tsx # Scroll navigation buttons
│   │   ├── MyProjects.tsx      # Projects grid component
│   │   ├── Experience.tsx      # Experience section
│   │   ├── MyStory.tsx         # Personal story section
│   │   ├── Skils.tsx           # Skills showcase
│   │   ├── ProjectBanner.tsx   # Project banner component
│   │   └── Myplace.tsx         # Location/mission component
│   ├── data/
│   │   └── projectData.ts      # Project data array
│   └── lib/
│       └── utils.ts            # Utility functions
├── image-sources/              # Full-size originals (never served)
│   ├── assets/projects/        # Project screenshots
│   ├── og/                     # Social card artwork
│   └── profile.jpg             # Profile image
├── public/                     # Everything here except icon/ + PDF is generated
│   ├── optimized/              # One WebP per image, served as-is
│   ├── og/                     # 1200x630 social cards
│   ├── icon/                   # SVG icons
│   ├── MayurResume.pdf         # Downloadable resume
│   └── profile.jpg             # Compressed profile image
├── scripts/
│   ├── optimize-images.mjs     # Builds public/ images from image-sources/
│   └── verify-images.mjs       # Post-build guard against /_next/image
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── README.md

🎨 UI Components & Features

Global Layout (`layout.tsx`)

Header: Sticky navigation with responsive mobile menu
Footer: Social links, navigation, and contact CTA
Scroll Buttons: Floating scroll-to-top and scroll-down buttons
Analytics: Vercel Analytics and Speed Insights integration

Navigation System

Header (Header.tsx):
- Logo with brand styling
- Responsive navigation menu
- Mobile hamburger menu with smooth transitions
- Contact button with icon
Menubar (Menubar.tsx): Reusable navigation component used in header and footer
SocialsMenu (SocialsMenu.tsx): Social media icons (Instagram, LinkedIn, GitHub)

Page Components

Home Page (`page.tsx`)

Hero Section: Animated background, profile image, and introduction
Key Features:
- Gradient text effects
- Floating decorative elements
- Call-to-action buttons
- Responsive image with hover effects
Sections: Experience, Project Banner, Skills, My Story

About Page (`about/page.tsx`)

Mission Statement: Personal values and goals
About Cards: Four key characteristics (Passionate, Goal-Oriented, User-Focused, Quality Driven)
Sections: Myplace, MyStory, Experience

Projects Page (`projects/page.tsx`)

Header Section: Project statistics and introduction
Projects Grid: Showcase of featured projects
Professional Note: Explanation of portfolio limitations due to client confidentiality
Features:
- Project cards with hover effects
- Live demo and source code links
- Technology tags
- Project status indicators

Contact Page (`contact/page.tsx`)

Contact Information: Email, phone, location, availability
Interactive Elements: Clickable contact methods
Call-to-Action: Project initiation and resume download
Features: Responsive layout with contact highlights

Interactive Components

ScrollingUpButton (`ScrollingUpButton.tsx`)

Scroll Up Button: Appears after scrolling, smooth scroll to top
Scroll Down Button: Initial prompt to explore content
Features: Animated scroll indicators, smooth transitions

MyProjects (`MyProjects.tsx`)

Project Cards: Grid layout with hover effects
Features:
- Image hover zoom effects
- Overlay with action buttons
- Technology stack tags
- Live demo and GitHub links
- Project status indicators
- Decorative hover elements

🎯 Key Features

Responsive Design

Mobile-first approach
Breakpoint-specific layouts (sm, md, lg, xl)
Flexible grid systems
Touch-friendly interactions

Performance Optimizations

Next.js Image optimization
Lazy loading for images
Efficient component rendering
Vercel edge caching

Accessibility

Semantic HTML structure
Proper heading hierarchy
Alt text for images
Keyboard navigation support
Focus management

SEO & Meta

Dynamic metadata for each page
OpenGraph and Twitter card support
Structured data for search engines
Optimized meta descriptions and keywords

🚀 Getting Started

Prerequisites

Node.js 18+
npm, yarn, or pnpm

Installation

Clone the repository

git clone https://github.com/yourusername/mayur_portfolio.git
cd mayur_portfolio

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Run the development server
```
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open your browser Navigate to http://localhost:3000

📝 Customization Guide

Adding New Projects

Edit src/data/projectData.ts:

{
  title: "Project Name",
  description: "Project description",
  image: "/assets/projects/project-image.jpg",
  technologies: ["React", "TypeScript", "Tailwind"],
  liveUrl: "https://project-demo.com",
  githubUrl: "https://github.com/username/project",
  status: "Live"
}

Images

Originals live in image-sources/; everything under public/optimized/ (plus public/og/*.jpg and public/profile.jpg) is generated. After adding or replacing an original, rebuild the derived assets and commit them:

npm run images

That script writes one WebP per image (only for originals the code actually references), the four 1200x630 social cards, and src/lib/image-manifest.json, which the custom next/image loader (src/lib/imageLoader.ts) reads. Images are therefore plain CDN files and never consume Vercel's metered image transformations. npm run build runs scripts/verify-images.mjs, which fails if a page reaches for /_next/image or references an image that is not on disk.

Do not add images.formats to next.config.mjs. Changing the format list invalidates every optimized image Vercel has cached, which is what exhausted the transformation quota and blanked the images in production.

Updating Personal Information

Profile Image: Replace image-sources/profile.jpg, then run npm run images
Resume: Replace public/MayurResume.pdf
Contact Info: Update in src/app/contact/page.tsx
Social Links: Edit src/components/SocialsMenu.tsx

Modifying Styling

Colors: Update Tailwind config in tailwind.config.ts
Components: Edit individual component files in src/components/
Global Styles: Modify src/app/globals.css

Adding New Pages

Create new directory in src/app/
Add page.tsx with metadata export
Update navigation in src/components/Menubar.tsx

🎨 Design System

Color Palette

Primary: Purple (#8B5CF6, #7C3AED)
Secondary: Gray (#4B5563, #6B7280)
Background: White (#FFFFFF), Light Gray (#F9FAFB)
Text: Dark Gray (#1F2937), Medium Gray (#4B5563)

Typography

Headings: Bold, large scale (text-4xl to text-8xl)
Body: Regular weight, readable line height
Font Family: System fonts (Inter, system-ui)

Spacing

Container: Responsive padding (px-4 md:px-8 lg:px-28)
Sections: Consistent vertical spacing (py-16, py-20, py-28)
Components: Flexible gap systems

📱 Responsive Breakpoints

Mobile: < 768px
Tablet: 768px - 1024px
Desktop: > 1024px
Large Desktop: > 1280px

🔧 Build & Deployment

Build for Production

npm run build

Deploy to Vercel

Connect your GitHub repository to Vercel
Configure build settings
Deploy automatically on push to main branch

Environment Variables

Create .env.local for local development:

NEXT_PUBLIC_SITE_URL=http://localhost:3000

📊 Performance Metrics

Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
Core Web Vitals: Optimized for all metrics
Bundle Size: Optimized with Next.js built-in optimizations

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Submit a pull request

📄 License

This project is open source and available under the MIT License.

📞 Contact

Email: mayurnakum07@gmail.com
LinkedIn: Mayur Nakum
GitHub: mayurnakum07
Instagram: @mayurnakum_07

Made with 💜 by Mayur Nakum

Name		Name	Last commit message	Last commit date
image-sources		image-sources
public		public
scripts		scripts
src		src
utils		utils
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation