My Third portfolio

Building My Web Development Portfolio: A Journey with Next.js, Tailwind CSS, and Framer Motion

As a front-end developer with over three years of experience, I've created several portfolio pieces that showcase my skills in modern web development technologies. In this article, I'll take you through three distinct projects I designed and built from scratch using Next.js, Tailwind CSS, and Framer Motion.

Why These Technologies?

Before diving into the projects themselves, let me explain why I chose this particular tech stack:

• Next.js: Provides server-side rendering capabilities, optimized performance, and an excellent developer experience
• Tailwind CSS: Offers utility-first approach to styling that speeds up development while maintaining consistency
• Framer Motion: Enables smooth, sophisticated animations that enhance user experience without compromising performance

This combination has allowed me to create responsive, performant websites with engaging animations while maintaining clean, maintainable code.

Project 1: Personal Portfolio Website

My personal portfolio at ibtihelbensalah.vercel.app features a minimalist design with elegant typography and a clear information hierarchy. I wanted to create a site that reflects my aesthetic sensibilities while effectively showcasing my skills and projects.

Design Process

I began with a simple concept: a clean, typography-focused layout with strategic use of white space. The cream background provides warmth while maintaining readability, and the distinctive typeface adds personality without sacrificing professionalism.

Technical Implementation

For this project, I used:

• Next.js for routing and page structure
• Tailwind CSS for responsive layout and styling
• Framer Motion for subtle page transitions and element animations
• Custom React components for skill tags and project cards

The site is fully responsive, with optimized layouts for mobile, tablet, and desktop views. Performance was a priority, so I implemented image optimization and code splitting to ensure fast load times.

Project 2: AURALUX Travel Website

AURALUX demonstrates my ability to create content-rich, visually engaging websites for specific industries. This travel site features high-quality imagery, clear navigation, and organized content sections.

Design Process

For this travel website, I focused on creating an immersive experience that would inspire visitors to explore destinations. I used a harmonious color palette anchored by natural landscape imagery and created a balanced layout that showcases featured destinations and hotels.

Technical Implementation

Key technical aspects include:

• Dynamic routing with Next.js for destination and hotel pages
• Responsive grid layouts with Tailwind CSS
• Scroll animations using Framer Motion to reveal content as users explore the page
• Custom carousel components for showcasing destinations and properties
• Optimized image loading for improved performance

Project 3: Restaurant Template

The restaurant template demonstrates my versatility with a completely different aesthetic. It features a retro, playful design with bold typography and vibrant colors.

Design Process

For this project, I wanted to create a fun, engaging experience that reflects the personality of a casual dining establishment. The checkered pattern, bold typography, and bright color scheme work together to create an inviting, memorable brand identity.

Technical Implementation

Technical highlights include:

• Next.js for page structure and API routes for menu items
• Custom Tailwind configuration to implement the specific color palette
• Framer Motion animations for menu item transitions and interactive elements
• Responsive design for various device sizes
• Interactive menu filtering functionality

Lessons Learned

Throughout these projects, I've refined my approach to both design and development:

1. Start with user needs: Each site was designed with its specific audience in mind
2. Prototype before coding: Wireframing and design mockups saved development time
3. Performance matters: Optimizing images and implementing efficient animations improved user experience
4. Component reusability: Building modular components accelerated development across projects
5. Responsive from the start: Designing with multiple device sizes in mind from the beginning prevented rework

Conclusion

What do you think of it do you have any advices ?