Sujal Dhere — Portfolio

A dark editorial brutalist portfolio built with Next.js 14.

Design Direction

• Aesthetic: Dark editorial / typographic brutalism
• Palette: Near-black #0a0a08 bg, cream #e8e0c8 text, mint #b8f5a0 accent
• Fonts: Bebas Neue (display) + DM Serif Display (italic headings) + DM Mono (UI/body)
• Effects: Noise overlay, grid backgrounds, marquee ticker, animated skill bars, hover glows

Pages

Route	Description
/	Home — Hero, Marquee, Work, Skills, About strip, Contact
/about	Full about — Bio, Timeline, Values, CTA

Getting Started

# Install dependencies
npm install

# Start dev server
npm run dev
# → http://localhost:3000

# Build for production
npm run build
npm start

Customization Checklist

src/pages/index.js

• PROJECTS array — replace with your real projects + GitHub links
• SKILLS array — adjust tech stack names, icons, and proficiency levels
• Hero stats (12+ projects, 2+ years, 9+ technologies) — update to match you
• Contact email — replace sujal.dhere@email.com with your real email
• GitHub/LinkedIn/Twitter links in the Contact section

src/pages/about.js

• TIMELINE — add your real experience and journey entries
• Bio paragraphs — write in your own voice
• About card details (location, email, GitHub handle)
• VALUES — update to reflect your own working principles

Assets

• Add public/favicon.ico — your favicon
• Add public/sujal-dhere-cv.pdf — your CV for the download button
• Add public/og-image.png (1200×630) — for social sharing

Deployment

Vercel (recommended — zero config)

npx vercel

Netlify

npm run build
# Upload the `.next` folder or connect GitHub repo

Tech Stack

• Framework: Next.js 14 (Pages Router)
• Styling: Global CSS with CSS custom properties (no Tailwind)
• Fonts: Google Fonts (Bebas Neue, DM Serif Display, DM Mono)
• Animations: CSS animations + keyframes (no JS animation libraries)