Myportfolio

Inspiration

The Bento grid pattern was the main design inspiration. Its modular, card-based structure lets each section (About, Projects, Skills, Experience) be a self-contained unit while forming a cohesive whole. This approach made the portfolio more organized and visually engaging. The goal was a single-page site that tells my story: experience, projects, skills, and personality, all within a Bento-style grid.

What it does

It is a developer portfolio to showcase my work and who i am.

How we built it

Tech Stack: Next.js 15 (App Router) React 19 TypeScript Tailwind CSS 4 Framer Motion React Icons Architecture: Bento grid layout: Implemented a card-based grid system where each section is a modular component, inspired by the Bento grid design pattern. This creates a clean, organized structure that’s easy to scan and navigate. Single-page layout: All sections on one page using a CSS grid with Bento-style card components. Component structure: Modular components with reusable motion animations, each acting as an independent card in the grid. Responsive design: Mobile-first with breakpoints for tablets and desktops, maintaining the Bento grid aesthetic across all screen sizes. Animations: Staggered entry animations, hover effects, and smooth transitions to bring the Bento cards to life. Project carousel: Horizontal scroll with snap points and visual indicators, contained within its own Bento card. Key Features: Bento grid-based layout with 3-column desktop and 2-column mobile Modular card components for each section (About, Projects, Skills, Experience, etc.) Horizontal project carousel with scroll indicators Professional experience timeline Interactive tech stack showcase with hover animations Personal touches: Spotify playlist, development mantra, learning goals Smooth scroll behavior Contact section with email integration

Challenges we ran into

Bento grid implementation: Creating a balanced grid where each card has appropriate sizing and spacing while maintaining visual harmony. Solution: Used CSS Grid with fractional units and carefully planned card spans to create a cohesive Bento-style layout. Layout complexity: Balancing the grid across different screen sizes while keeping content readable and maintaining the Bento aesthetic. Solution: Used CSS Grid with responsive breakpoints and flexible column spans, ensuring each Bento card adapts gracefully. Carousel implementation: Creating a smooth horizontal scroll that works across devices within a Bento card. Solution: Implemented CSS snap scrolling with hidden scrollbars and visual indicators, keeping it contained within the Projects Bento card. Animation performance: Ensuring animations were smooth without impacting performance, especially with multiple Bento cards animating simultaneously. Solution: Used Framer Motion’s optimized animations and staggered delays to create a cascading effect across the Bento grid. Responsive design: Making the Bento grid layout work on mobile without losing functionality or visual appeal. Solution: Created separate mobile and desktop layouts with conditional rendering, maintaining the Bento card structure on all devices. TypeScript integration: Typing Framer Motion components and dynamic imports. Solution: Used proper TypeScript types and dynamic imports for code splitting. Visual hierarchy: Organizing information so important content stands out within the Bento grid. Solution: Used color accents (green), spacing, and typography to guide attention, with larger cards for key sections.

Accomplishments that we're proud of

What we learned

Bento grid design patterns: How to structure content in modular, card-based layouts that are both functional and visually appealing. Framer Motion: Implemented staggered animations, hover effects, and smooth transitions to improve interactivity. Next.js 15 App Router: Used the latest features, including dynamic imports and optimized image handling. Responsive grid layouts: Built a flexible grid that adapts across screen sizes while maintaining visual hierarchy. Horizontal scrolling: Created a carousel with snap scrolling and hidden scrollbars for a clean UX. Performance: Optimized animations and images to keep the site fast and smooth