Rifa Tasfia Chowdhury - Portfolio

What it is:

A fully interactive personal portfolio that breaks away from the typical "resume website" mold. Think of it as a digital playground where my work and personality come together through cartoonified design, smooth animations, and interactive experiments.

The inspiration:

I wanted something that felt me - not just another Bootstrap template. The challenge was: could I create a portfolio that's professional enough to showcase real skills but fun enough that people actually want to click around? Turns out, yes. The anime-inspired aesthetic with warm yellows, oranges, and browns came from wanting something cozy yet energetic.

How I built it:

Built with React and TypeScript for the foundation, styled entirely with TailwindCSS v4, and brought to life with Motion (formerly Framer Motion) for animations. Every page follows a consistent "cartoon tech" design language - thick borders, 3D shadows, rounded corners, and bouncy interactions.

The portfolio system manages state through a simple router in App.tsx, switching between pages without any external routing library. Each major section lives in its own component with dedicated logic.

Challenges faced:

Making Conway's Game of Life responsive while keeping smooth 60fps updates Balancing "fun and animated" with "actually usable" - turns out you can have too much motion Creating a cohesive design system where every button, card, and interaction feels related Building a pixel art canvas from scratch with proper undo/redo and auto-save functionality

Tech stack used

React + TypeScript - Component architecture TailwindCSS v4 - All styling (zero custom CSS files) Motion/React - Entrance animations, hover effects, background animations Lucide React - Icon library shadcn/ui - Base component library (heavily customized) Canvas API - Pixel art board Unsplash API - Dynamic images

Features implemented

Core Pages: 🏠 Home - Hero section with floating animations, profile showcase, CTA buttons 📁 Projects - Grid of 9+ projects with detailed individual pages ✨ Cool Stuff - Interactive Socratic Bot (30 witty questions) + Monthly Book Rankings 👤 About - Terminal-style bio, collapsible file tree, animated stats, floating tech icons 🎨 Pixel Board - 32×32 interactive pixel art canvas with 12-color palette, undo/redo, auto-save, PNG export 💪 Skills - Categorized skills (Programming, Frameworks, Design, Electronics) with animated progress bars ☕ Buy Me a Coffee - Three-tier support system with animations

Interactive Elements:

Conway's Game of Life cellular automata (full-screen simulation) Clickable/draggable pixel art painting Collapsible Q&A bot with randomized questions Book ranking cards with hover effects Terminal typewriter effects

Custom elements or animations

Every interaction is animated: Staggered entrance animations (cards, buttons, text fade in sequentially) 3D button effects (lift on hover, press down on click) Rotating/pulsing icons and decorative elements Shimmer effects on gradients and progress bars Floating sparkles and background gradient blobs Typewriter text effects Spring physics on page transitions Color-coded skill progress bars with animated fills Social media cards that spin and bounce on hover

Design System:

Consistent 4px borders on everything 3D shadows (boxShadow: '0 Xpx 0 rgba(...)') Warm palette (yellows, oranges, ambers, browns) Rounded corners (mostly rounded-2xl, rounded-3xl, rounded-full) Hover states: scale up, lift up, slight rotation Gradient backgrounds with from-yellow-X to-orange-X

Built With

• api
• canvas
• framer
• lucide
• motion)
• motion/react
• react
• shadcn/ui
• tailwindcss
• typescript
• unsplash
• v4