Armin Fatehi

Production-Ready Web Application

This project is a personal portfolio website designed and developed to professionally showcase my skills, projects, and career journey. Rather than being a purely visual presentation, the website was built as a production-ready product, adhering to real-world standards of modern web applications.

The primary focus of the project is on user experience, performance, scalable architecture, and applying best practices in Next.js.

One of the key features is an AI Portfolio Assistant chatbot that lets visitors interactively ask about my skills, projects, career path, and contact information. Powered by Groq API and the Llama 3.3 model, it generates answers based on real portfolio data, with the API key securely stored in a server-side Route Handler.

Technologies

Next.js 16React 19TypeScript 5Tailwind CSS 3.4next-intlFramer MotionAOSGroq APILlama 3.3 70BRoute HandlerscreatePortalESLintPostCSSAutoprefixer

Features

Full multilingual support (Persian & English) with RTL/LTR layouts
Dark and light themes with system preference detection
Modern Next.js architecture using App Router with SSR/SSG
Clean, modern UI/UX with controlled animations
Clear separation of personal and organizational projects
Performance optimization via lazy loading and code splitting
SEO and accessibility best practices
AI chatbot for interactive Q&A based on real portfolio data (skills, projects, timeline, and contact)

My Role in Project

Designer & Front-End Developer (Next.js / React / TypeScript) Responsible for UI/UX design, project architecture, front-end implementation, performance optimization, internationalization, SEO, and AI chatbot development.

Challenges & Focus

Designing a scalable architecture for future growthImplementing internationalization with full RTL and LTR supportMaintaining high performance alongside UI animationsEnsuring SEO and accessibility in SSR/SSG environmentsClearly separating personal and organizational projects without exposing sensitive informationBuilding dynamic context from portfolio data for accurate AI responsesManaging mobile chat UX (keyboardvisualViewportand scroll lock)Keeping API keys secure on the server

Technical Decisions

Next.js App Router with a hybrid SSR & SSG approach

Chosen to improve SEO, reduce initial load time, and enable both static and dynamic pages based on content requirements.

next-intl for internationalization (i18n)

Selected for its strong support for multilingual routing, locale management, and full compatibility with the App Router. The project structure was designed to make adding new languages low-cost and scalable.

Tailwind CSS as the core design system

Used to maintain UI consistency, reduce unnecessary CSS, and provide precise control over responsive design across all pages.

Framer Motion & AOS with a performance-aware approach

Animations were executed in a controlled and lazy manner to enhance user experience without introducing unnecessary rendering overhead.

Strict ESLint rules and disciplined code structure

Applied to maintain code quality and prevent technical debt in a project intended to evolve over time.

AI Chatbot with Groq API and Llama 3.3

Enables interactive Q&A for visitors. A Next.js Route Handler forwards requests to the Groq API, and the system prompt is built from real portfolio data (skills, projects, timeline, contact) so the AI answers only from available information.

Dynamic context builder from portfolio data

The chat-context module reads skills, projects, and timelineEvents from data.ts along with next-intl translations to build a multilingual context for the AI. When site content changes, chatbot answers stay up to date automatically.

Optimizations & Solutions

Implemented code splitting and lazy loading for non-critical sections
Used dynamic imports to reduce the initial bundle size (including ChatBot)
Implemented dark and light theme support with system preference detection
Optimized semantic HTML structure to improve SEO and accessibility
Clear separation of UI, logic, and content layers for easier maintenance
Built chat UI with createPortal for fullscreen mobile experience and modal on desktop
Managed visualViewport and scroll lock for smooth UX when the mobile keyboard is open

Trade-offs & Engineering Considerations

Chose manual UI implementation over ready-made UI libraries to retain full control over design and performance
Avoided heavy animations in certain sections to prioritize performance and content readability
Accepted some architectural complexity to ensure long-term scalability and maintainability
Limited AI max_tokens and restricted context to portfolio data only to control cost and latency

Outcome

This project is a practical demonstration of how I approach the design and implementation of a real-world product—one that prioritizes not only visual quality, but also architecture, performance, scalability, and long-term maintainability. Adding the AI chatbot transforms the portfolio from a static page into an interactive experience where visitors can directly ask about skills and projects.

Back