A fast, responsive MERN‑focused portfolio built with React + Vite + Tailwind CSS. Clean sections, reusable components, and a recruiter‑friendly layout.

Live Demo: https://main--shikharsinghportfolio.netlify.app/

Tip: Add a social preview image in Settings → Social preview so links look great when shared.

• Hero + About with photo and CTAs
• Skills grid (badges + short blurbs)
• Projects with tech stack, highlights, and links
• Experience / Education (optional sections)
• Hobbies / Interests (optional)
• Contact with social links
• Responsive layout & keyboard‑navigable focus states
• Fast loads with Vite; minimal global CSS
• Consistent blue gradient background per section (easy to tweak)

This repo favors readable, reusable components and avoids heavy global styles. Section backgrounds are implemented as a repeating light→dark→light blue gradient for visual rhythm.

• React 18, Vite, Tailwind CSS
• Icons: your choice (e.g., Lucide / Heroicons)
• Deployed on Netlify (drag‑and‑drop or CI)

portfolio/
├─ public/            # static assets
├─ src/
│  ├─ css/            # global styles (minimal)
│  ├─ dataset/        # structured data (e.g., featuredData.js)
│  ├─ components/     # Header, Footer, Home, Featured, Skills, etc.
│  ├─ App.jsx         # app shell & routes (if any)
│  └─ index.jsx       # entry
├─ package.json
└─ README.md

# Node.js 18+ (20+ recommended)

# 1) Install deps
npm install

# 2) Start dev server
npm run dev
# → http://localhost:5173

# 3) Build for production
npm run build

# 4) Preview build locally
npm run preview

Update these files to customize content quickly:

• src/components/Header.jsx – logo, nav links
• src/components/Footer.jsx – social icons & copyright
• src/components/Home.jsx – hero section copy & buttons
• src/components/Featured.jsx – featured projects list
• src/dataset/featuredData.js – project cards (title, description, links, stack)
• src/components/Skills.jsx – skills grid (names + short blurbs)
• src/components/Education.jsx – schools & degrees (optional)

Theme / Backgrounds

• Section blue gradient: edit Tailwind classes or a small helper in css/ to keep the “light → dark → light” cycle.
• Global font: set once in index.css (e.g., Inter/Poppins via Google Fonts).

# Run ESLint (if configured)
npm run lint

# Format with Prettier (if configured)
npm run format

Add a simple GitHub Action for CI (install + build) to show a status badge here if you’d like.

Place images in public/ or /docs and reference them here.

Section	Preview
Home / Hero
Projects
Skills

• Live: https://main--shikharsinghportfolio.netlify.app/
• Resume: (add a public link)
• LinkedIn: (add your profile link)

Option A: Drag & drop

1. npm run build → upload the dist/ folder to Netlify.

Option B: Connect repo

1. New site from Git → GitHub → choose this repo
2. Build command: npm run build · Publish dir: dist
3. (Optional) Add a Deploy Status badge to this README.

• Dark mode toggle
• Animations (Framer Motion) for section reveals
• Blog/Notes page with Markdown posts
• Lighthouse 95+ across the board

PRs welcome for accessibility & performance improvements. For major changes, please open an issue first to discuss what you’d like to change.

MIT © Shikhar Singh

Shikhar Singh — Full‑Stack (MERN) • Indore, India 📧 [email protected]

If this portfolio helped you, consider giving the repo a ⭐ and saying hi on LinkedIn.