Software Developer

My Portfolio – The Project That Says It All

Personal Project

Technologies Stack

  • Next.js

  • React.js

  • Tailwindcss

  • GSAP

  • Prismic CMS

  • Google Generative AI

Project Important Links
Go to my-portfolio figma

Overview

This wasn’t just a portfolio. It was a statement.

Built as my personal web presence, this site is where I showcase the kind of developer I am, beyond what a CV or LinkedIn title can tell you. It’s a space where design, code, and interactivity come together to prove that skill, creativity, and attention to detail speak louder than bullet points.

The goal? To give recruiters, clients, and curious humans a genuine sense of my technical depth, design sensibility, and problem-solving style, while offering a joyful and intuitive user experience.

Motivation

I built this portfolio because I believe one thing:

> "You can’t evaluate an engineer by a resume alone—look at their work."

This website is my work.

It reflects not just what I’ve done, but how I think, how I build, and how I collaborate. It's part portfolio, part playground, part proof-of-skill.

Tech Stack

  • Frontend: Next.js 15 (App Router), React, TypeScript
  • Styling & UI: Tailwind CSS, GSAP (Scroll animations), Custom SVG filters
  • Content: Prismic CMS (project content, case studies)
  • AI Chatbot: Vercel AI SDK + Google Generative AI (Gemini)
  • Touch & Carousel: `react-swipeable`, event delegation, swipe logic
  • Hosting & Deployment: Vercel
  • Design Approach: Mobile-first, responsive, animated, and performance-minded

Unique Features & Highlights

  • Visually rich UI with custom animations, neon-accented components, and fluid interactions
  • Mobile-first design, fully responsive across all screen sizes with consistent UX
  • AI-powered chatbot that helps visitors explore my skills, projects, and background
  • Custom carousels for services, work style, and values with swipe support
  • Technology stack carousel with hover interactions and fun microcopy
  • Testimonials component that adapts layout and logic across devices, complete with swiping and animation

Design & Development Challenges

Component Responsiveness

Creating components like Testimonials and the Process Carousel required a flexible architecture. Each had to function beautifully on both large screens and mobile devices, without sacrificing interactivity or breaking consistency.

Key elements:

  • Two unique layouts for testimonials (mobile vs. desktop)
  • Touch support using `react-swipeable` for fluid card navigation
  • Conditional layout rendering while preserving shared logic

Header Design Variants

The Header needed to be expressive but not intrusive:

  • On large screens: full animation, layered visuals, and a sticky scroll-friendly layout
  • On mobile: simplified structure with unique but clear design
  • All variants kept performance and UX principles in mind

Technologies Carousel Performance

This was one of the trickiest parts. The carousel needed to:

  • Auto-scroll smoothly
  • Pause on hover or touch
  • Display popups with custom messages + years of experience

Challenge:

Keep it clean, performant, and mobile-friendly.

Solution:

I used event delegation for hover/touch interactions, attaching a single listener to the parent container and determining hovered cards via `event.target`. On mobile, I implemented a separate touch-based logic to simulate hover behavior without adding performance weight.

AI Chatbot

I integrated a chatbot powered by Google Generative AI (via the Vercel AI SDK). It can:

  • Summarize my skills or experience
  • Suggest projects to explore
  • Answer questions like "What tech does Mojtaba use?"
  • Submitting an email message directly from the chat window

This gives users a fun and accessible way to engage with the portfolio—especially helpful for recruiters or busy visitors.

Outcomes

  • Launched and live at [mojtabadev.vercel.app](#)
  • Visitors are using the chatbot, navigating to projects, and reading case studies
  • Testimonial system live and receiving feedback
  • Multiple sections built as CMS-powered components for easier scaling
  • 100% responsive design across screen sizes and devices

Future Plans

  • Improving the chatbot’s capabilities
  • Adding case studies and interactive walkthroughs
  • Possibly releasing isolated components (like the testimonial carousel) as reusable packages

Final Thoughts

This portfolio was the most meta project I’ve built so far. It’s a portfolio about my projects, but also a project of its own. It’s where design meets development, where UX meets performance, and where AI meets accessibility.

> If you want to know what kind of developer I am; just look around.

> You’re inside my code right now.

Previous
Next