Bhupesh L D — Portfolio

A sharp, minimal personal portfolio built with pure HTML, CSS, and vanilla JS. No framework bloat — just clean brutalist typography, smooth animations, and a cinematic loading screen.

✦ Live Site

dev-bhupesh.netlify.app

---

Features

• Brutalist minimal design — Bebas Neue + DM Mono + DM Sans. Black on off-white. Zero gradients, zero purple.
• Cinematic loader — animated engineer avatar builds the page with a typing animation, progress bar, and curtain-wipe reveal
• Custom cursor — dot + lagging ring, disappears on mobile
• Scroll-triggered reveals — IntersectionObserver fade-ups on every section
• Full invert hover — project rows and skill tiles flip black-on-white on hover
• Fully responsive — collapses cleanly to mobile with no layout breakage

---

Sections

1. Hero — name, role tags, photo/monogram, location dot, and social links
2. About — bio + 4 stat counters (internships, projects, SQL problems, target LPA)
3. Skills — 16-item grid with category labels and hover invert
4. Projects — 5 featured projects in a full-width row list with tags and arrow links
5. Experience — 3 internships in a date/content two-column layout
6. Certifications — 6 certs in a bordered grid
7. Contact — big headline + email + social links

---

Stack

Layer	Tech
Markup	HTML5
Styling	Vanilla CSS (CSS variables, keyframes, grid, flex)
Interactivity	Vanilla JS (IntersectionObserver, RAF cursor)
Fonts	Bebas Neue · DM Mono · DM Sans (Google Fonts)
Deployment	Netlify (drag & drop)

No React. No Tailwind. No Framer Motion. No dependencies.

---

Getting Started

No build step needed — it's a single file.

git clone https://github.com/bhupeshhackco/PortfolioDeploy-REACT
cd PortfolioDeploy-REACT

# just open it
open index.html

Or drag index.html straight into your browser.

---

Customization

Swap your photo

Find this line in the hero section and replace the src:

<img src="YOUR_PHOTO.jpg" alt="Bhupesh L D" ...>

If the image fails to load, it automatically falls back to the BLD monogram.

Update content

All content is inline in index.html — search for the section comment you want:

<!-- HERO -->
<!-- ABOUT -->
<!-- SKILLS -->
<!-- PROJECTS -->
<!-- EXPERIENCE -->
<!-- CERTIFICATIONS -->
<!-- CONTACT -->

Loader timing

In the script at the bottom, edit the steps array to change progress bar labels or speed:

const steps = [
  { pct: 20,  label: 'initializing...' },
  { pct: 45,  label: 'loading assets...' },
  ...
];

---

Deployment

Netlify (recommended — 10 seconds)

1. Go to netlify.com
2. Drag and drop index.html onto the deploy zone
3. Done — live URL generated instantly

Vercel

npx vercel --prod

GitHub Pages

Push to main and enable Pages in repo settings → set source to / (root).

---

About

Built by Bhupesh L D — BE ECE student at Panimalar Engineering College (2023–2027).
Flutter Dev Intern @ UptoSkills · ex-AI/ML & ServiceNow Intern @ Edunet Foundation (AICTE + IBM SkillsBuild).

📧 bhupeshdhana2006@gmail.com
🌐 dev-bhupesh.netlify.app
🐙 github.com/bhupeshhackco

---

Built without slop.