DEV Community: ibtihel ben salah

My Third portfolio

ibtihel ben salah — Sun, 16 Mar 2025 09:36:17 +0000

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:

Start with user needs: Each site was designed with its specific audience in mind
Prototype before coding: Wireframing and design mockups saved development time
Performance matters: Optimizing images and implementing efficient animations improved user experience
Component reusability: Building modular components accelerated development across projects
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 ?

This One Library Will Save You 15 Hours – You Only Need to Copy and Paste.

ibtihel ben salah — Sat, 22 Feb 2025 15:08:33 +0000

If you're a React developer using Framer Motion and Tailwind CSS, you know how powerful these tools are for building stunning, animated UIs. But even with these frameworks, creating custom animations from scratch can be time-consuming. Enter Motion-Primitives – a library of beautifully designed, easy-to-integrate motion components that will save you hours of work.

Motion-Primitives is built specifically for engineers and designers who want to add polished animations to their projects without the hassle. With its copy-paste workflow, you can skip the installation and setup process entirely. Just copy the code, paste it into your project, and you're done.

Why Motion-Primitives is a Game-Changer

Built for Framer Motion + Tailwind CSS: Seamlessly integrates with your existing stack.
Beautifully Designed: Every component is crafted with aesthetics and usability in mind.
Copy-Paste Workflow: No installation or setup required – just copy and paste.
Time-Saving: Save up to 4 hours (or more!) by reusing pre-built components.
Customizable: Start with a template and tweak it to fit your design.

What’s in the Box?

Motion-Primitives offers a growing library of components, including:

Page transitions
Hover effects
Scroll-triggered animations
Loading spinners
Micro-interactions

And because it’s built with Tailwind CSS, styling is a breeze.

A Note on the Beta

Motion-Primitives is currently in beta, which means new components and updates are being released regularly. While this is an exciting time to get involved, keep in mind that the library is still evolving. Expect significant improvements and new features as the project grows.

How to Get Started

Browse the Motion-Primitives library or Click .
Copy the code snippet for the component you need.
Paste it into your React project.
Customize it with Tailwind CSS or leave it as is!

With Motion-Primitives, you can focus on what really matters: building amazing user experiences. So why spend hours writing animation code when you can copy, paste, and save yourself 4 hours (or more) on every project?

The one mistake that cost me 1.5 year and 10 000$

ibtihel ben salah — Sat, 01 Feb 2025 15:01:33 +0000

1.5 years ago, I set out to learn Node.js by building a fullstack e-commerce app using the MERN stack. It sounded like the perfect project at the time—challenging, practical, and impressive on a
portfolio. But looking back, I regret it.

Don’t get me wrong: the project wasn’t a waste of time. I learned a lot about Express, MongoDB, and API integrations. I even gained some experience with payment gateways and inventory management. But here’s the problem: I wasn’t trying to become an e-commerce expert. I was trying to learn Node.js.

Instead of focusing on mastering Node.js fundamentals, I spent most of my time debugging e-commerce-specific features. The complexity of the project became a distraction, pulling me away from my original learning goals.

What I Should Have Done Instead

In hindsight, I should have started with smaller, more focused projects that aligned with my goal of learning Node.js.

These projects would have allowed me to deeply understand Node.js without getting bogged down by unnecessary complexity. Once I had a solid foundation, I could have gradually taken on more ambitious projects, like an e-commerce app.

Lessons Learned

This experience taught me two important lessons:

Start Small

It's tempting to jump into big, flashy projects, but mastering the basics is far more important. Small, focused projects allow you to build a strong foundation before tackling complexity.
Align Projects with Learning Goals

Choose projects that directly help you learn the skills you’re targeting. If your goal is to learn Node.js, don’t let yourself get distracted by features or technologies that aren’t relevant to that goal.

Final Thoughts

While I don’t regret the effort I put into the e-commerce app, I do regret not being more intentional about my learning journey. It’s a reminder that growth comes from focused, deliberate practice—not just ambitious projects.

What about you? Have you ever started a project that didn’t align with your learning goals? What did you do differently afterward? Let’s chat in the comments!