Award-style portfolio website featuring a custom pixel-art hero animation, smooth GSAP scrolling, and a premium aesthetic.

→ View Live Site

This isn't your typical portfolio template. The hero section features a custom pixel-art animation where I prototyped each grid cell in Figma first, then brought it to life with JavaScript and GSAP.

Why it's cool:

• 🎮 Each pixel is individually animated in sequence
• 🎨 Designed in Figma before coding (design-first approach)
• ⚡ Smooth 60fps animation using GSAP
• 📱 Fully responsive across all devices

Frontend: HTML5, CSS3, JavaScript (ES6+)
Animations: GSAP (ScrollTrigger, Timeline)
Design: Figma (prototyping), Custom pixel grid
Hosting: Vercel

No frameworks. Just vanilla JS and creative problem-solving.

1. Design Phase

   • Prototyped the pixel grid in Figma
   • Tested different letter formations and spacing
   • Planned the animation sequence frame-by-frame

2. Development

   • Built a CSS grid system for the pixels
   • Used GSAP timeline to animate each cell individually
   • Added stagger effects for smooth transitions
   • Optimized for performance (60fps on all devices)

3. Why This Matters
   Most developers skip the design phase. I spent time in Figma first to ensure the animation would look exactly right before writing any code.

✅ Custom Pixel Hero – Figma-designed, hand-crafted animation
✅ Smooth Scrolling – GSAP-powered butter-smooth experience
✅ Premium Design – Modern aesthetics, clean typography
✅ Performance – 60fps animations, optimized assets
✅ Responsive – Works beautifully on mobile, tablet, desktop

The pixel hero animation that animates each cell individually with GSAP

Building Pixanaive taught me:

• Design → Code workflow – Prototyping animations in Figma before building saves time
• GSAP mastery – Complex timeline sequences with stagger effects
• Performance optimization – Keeping 60fps with hundreds of animated elements
• Vanilla JS power – You don't need React for impressive web experiences

pixanaive/
├── index.html          # Main page
├── css/
│   └── style.css       # All styles
├── js/
│   ├── main.js         # Core logic
│   └── animations.js   # GSAP animations
└── assets/
    └── images/         # Optimized assets

Lighthouse Scores:

• Performance: 95+
• Accessibility: 100
• Best Practices: 95+
• SEO: 100

Optimized for:

• Fast loading (< 2s)
• Smooth animations (60fps)
• Mobile performance
• Cross-browser compatibility

This project was inspired by award-winning sites like:

• Awwwards winners (premium aesthetics)
• Retro gaming pixel art (hero section)
• Modern agency portfolios (clean layout)

This project demonstrates:

✅ Design thinking – Figma prototyping before development
✅ Animation skills – Complex GSAP timeline animations
✅ Performance focus – Optimized for speed and smoothness
✅ Attention to detail – Pixel-perfect implementation

Perfect for frontend developer roles requiring strong design + animation skills.

# Clone the repo
git clone https://github.com/muana8877/Pixanaive.git

# Open in browser (no build needed!)
open index.html

That's it. No npm, no build step. Just open and run.

Built by Mahnoor Akbar

• Portfolio: mahnoor-akbar.vercel.app
• GitHub: @muana8877
• Email: [email protected]

💼 Open to remote frontend opportunities

MIT License – free to use for learning!