A Neo-Brutalist developer portfolio — raw borders, bold typography, cinematic GSAP animations, and zero fluff. Built by a 2nd-year BSc IT student who ships production-grade apps while doing homework.
| Section | Description |
|---|---|
 |
Cinematic letter-by-letter GSAP reveal · Wave hover animation · Split loader exit |
 |
Bio · Facts panel · Interest tags · Hover-flip cards |
 |
Animated progress bars · Floating tech tag cloud |
 |
4 featured live projects · Hover fill effect · Live stamps |
 |
Timeline layout · Animated slide-in from left |
 |
Inline resume viewer · One-click PDF download |
 |
FormSubmit · Dual email CC · Clean success state |
┌─────────────────────────────────────────────────────────┐
│ │
│ NEO-BRUTALISM ── Hard borders. Bold type. │
│ No gradients. Raw honesty. │
│ │
│ Palette: #f4efe4 Cream background │
│ #111111 Pure black │
│ #ff3500 Red accent │
│ #1d4ed8 Blue accent │
│ #15803d Green accent │
│ │
│ Typography: Syne 800 → Display headings │
│ IBM Plex Mono → Body / code / labels │
│ │
└─────────────────────────────────────────────────────────┘
Animations & Interactions
| Feature | Details |
|---|---|
| Split Loader Exit | Top panel flies up, bottom flies down — dramatic cinematic reveal |
| SHAHNAWAZ Letter Reveal | Each of 9 letters enters from a unique direction and rotation |
| SHAIKH Wipe | Opacity and translate slide reveal on second name line |
| Letter Wave Hover | Hover name — letters ripple red left-to-right, elastic snap back |
| Red Scan Line | Sweeps across the name after reveal |
| Corner Brackets | Decorative UI brackets pop in with back.out spring |
| Dot Grid Background | Subtle radial dot pattern fades in behind hero text |
| Stat Counters | Count up only after visible — no layout shake |
| Magnetic Buttons | Buttons elastically pull toward cursor on hover |
| Custom Cursor | Triangle to Circle to Diamond — changes shape per hover context |
| Dual Marquees | Tech stack (black) and motto (red), opposite scroll directions |
| Skill Bars | Scroll-triggered animated fills with colored accent tip |
| Tech Cloud | Tags pop in with staggered back.out spring animation |
| Checkerboard Cards | Project cards enter from alternating left and right directions |
| Section Titles | Alternate slide-in from left and right on scroll |
| Keyboard Nav | Press 1 to 5 to jump to any section instantly |
Technical Features
| Feature | Details |
|---|---|
| Zero Build Step | Single index.html — open in browser, no npm required |
| FormSubmit | Real email delivery, CC to 2 addresses, no backend needed |
| URL Cleanup | history.replaceState clears ?sent=true after success |
| GSAP ScrollTrigger | Scroll animations fire once — no repeat on scroll back |
| Noise Texture | SVG feTurbulence overlay adds subtle depth |
| Prefers Reduced Motion | Marquees pause for accessibility |
| Mobile Responsive | Hamburger menu, fluid clamp() type, fully stacked grid |
| 30-test Suite | Node.js tests verify structure, content, links, performance |
| GitHub Actions CI/CD | Auto-deploys to Pages on every push to main |
| # | Project | Stack | Status |
|---|---|---|---|
| 01 | Devora | JS · Groq AI · GitHub API |  |
| 02 | OtakuVault | Supabase · HTML/CSS/JS · Netlify | |
| 03 | PortfolioForge | Multi-LLM · PDF.js · GitHub Pages | |
| 04 | AutoReadme | GitHub API · LLaMA 3.3 · Vanilla JS | |
portfolio/
│
├── index.html # Full portfolio — HTML + CSS + JS
├── icon.png # Favicon
├── photo.jpeg # Profile photo
├── cv.shahnawaz.pdf # Resume PDF
│
├── package.json # Dev scripts + dependencies
├── .gitignore # Ignores node_modules, secrets
├── LICENSE # MIT License
├── CONTRIBUTING.md # Contribution guide
│
├── tests/
│ └── portfolio.test.js # 30-test Node.js suite (no framework)
│
└── .github/
└── workflows/
└── ci.yml # Tests → Validate → Links → Deploy
node tests/portfolio.test.jsStructure ✓ DOCTYPE ✓ lang ✓ title ✓ viewport ✓ charset ✓ OG tags
Content ✓ Name ✓ Email ✓ LinkedIn ✓ Dates ✓ Projects ✓ No stale
Links & Assets ✓ Devora ✓ OtakuVault ✓ PortfolioForge ✓ AutoReadme ✓ CV
Performance ✓ No trail injection ✓ GSAP CDN ✓ ScrollTrigger ✓ a11y
Clean Code ✓ No dark mode ✓ No blog ✓ No testimonials ✓ No prog bar
────────────────────────────────────────
30 passed | 0 failed | 30 total
────────────────────────────────────────
# Clone
git clone https://github.com/shaikhshahnawaz13/portfolio.git
cd portfolio
# Open directly — zero setup needed
start index.html # Windows
open index.html # macOS
# OR start a dev server with live reload
npm install && npm run dev
# → http://localhost:3000
# Run tests
npm test
| Layer | Technology | Why |
|---|---|---|
| Markup | Semantic HTML5 | Zero dependencies, single file |
| Styling | CSS3 · Variables · Grid | No framework bloat |
| Animations | GSAP 3 + ScrollTrigger | Buttery smooth, industry standard |
| Display Font | Syne 800 | Bold, geometric, distinctive |
| Mono Font | IBM Plex Mono | Clean, techy, readable |
| Forms | FormSubmit.co | Free, no backend, dual email CC |
| Hosting | GitHub Pages | Free CDN, custom domain ready |
| CI/CD | GitHub Actions | Auto-deploy on every push |
| Testing | Node.js built-in | 30 tests, zero framework |
git push origin main
│
▼
┌──────────────────────────────────────────────┐
│ GitHub Actions CI │
│ │
│ ✅ Run Portfolio Tests ← gates deploy │
│ ⚠️ Validate HTML (warning only) │
│ ✅ Check Broken Links (non-blocking) │
│ ✅ File Size Check (warn >500KB) │
│ │
│ ✅ Deploy to GitHub Pages │
│ → shaikhshahnawaz13.github.io/portfolio│
└──────────────────────────────────────────────┘
Contributions welcome! See CONTRIBUTING.md for the full guide.
git clone https://github.com/shaikhshahnawaz13/portfolio.git
cd portfolio
# Edit index.html
node tests/portfolio.test.js # make sure all 30 pass
# Open a PRWhat's welcome: bug fixes · accessibility · performance · layout issues · mobile glitches
MIT © 2025 Shahnawaz Shaikh — free to use, fork, and build on.
