Lumina AI Platform
A full-stack SaaS platform connecting AI enthusiasts. Built using Next.js Server Actions, PostgreSQL, and a completely custom glassmorphic design system.
Next.jsPostgreSQLTypeScript
Hi, I'm Abbas
Frontend Engineer & UI Designer
I specialize in building fast, scalable, and beautifully crafted web experiences. Combining clean architecture with pixel-perfect design.
Clean Code
React & Next.js
$
Powered by modern web technologies
▲ Next.js
React
TS TypeScript
Tailwind
01 — Engineering Arsenal
Skills & Tech Stack
A disciplined, production-ready stack focused on modern frontend architecture, high-performance user interfaces, and seamless user experiences.
01 / CORE ARCHITECTUREReact 19 & Next.js 15
Modern React & Type-Safe Architecture
Building high-performance, server-rendered applications with React 19, Next.js App Router, Server Actions, and strict TypeScript.
▲Next.js App Router
React 19 Server Actions
TSTypeScript Strict
Modern Web APIs
02 / SPEED
100 / 100
99+Core Web Vitals
Sub-second Largest Contentful Paint, zero layout shifts (CLS 0.0), and ultra-responsive interaction latency under 50ms.
⚡ LCP < 1.2s•INP < 50ms•CLS 0.0
03 / DESIGN SYSTEMSTailwind & Motion
Pixel-Perfect UI & 60fps Micro-interactions
Crafting tactile, accessible interfaces with custom design tokens, responsive typography, and fluid Framer Motion animations.
Tailwind CSS
Framer Motion 60fps
Design Tokens
WCAG a11y
04 / ECOSYSTEMFull-Stack Ready
Headless CMS, APIs & Developer Workflows
Production-ready backend integration with Payload CMS 3.0, strict Git workflows, Supabase, and automated deployment pipelines.
Payload CMS 3.0
Git & Clean CI/CD
REST & GraphQL
Python Scripting
02 — Portfolio
Featured Works
A curated selection of engineering projects where clean architecture meets fluid interface interaction.
Aura Analytics
A real-time financial analytics dashboard featuring complex data visualization, WebSockets for live market data, and a custom robust UI system built with Framer Motion.
React 19Framer MotionTypeScript
Nexus Commerce
A highly optimized, headless e-commerce storefront built with Next.js 14 App Router, Stripe integration, and Zustand. Achieved 98+ Core Web Vitals and lightning-fast SSR.
Next.jsTailwind CSSZustand
PrivateLive Preview
03 — About Me
Crafting digital experiences with purpose.
I'm a frontend developer focused on building modern, responsive and thoughtfully crafted web interfaces. My approach combines clean architecture, reusable components, and attention to visual detail.
Designing interfaces that feel fast, clear, and alive.
I enjoy transforming ideas into clean and engaging digital experiences. My focus is on building scalable React interfaces with thoughtful UI systems, smooth interactions, and strong attention to detail.
Beyond writing code, I care about structure, usability, and crafting products that feel refined in everyday use.
identity.json
{
"name":"Abbas SeyedAlHosseini",
"role":"Frontend Developer",
"focus":"React / UI Engineering",
"stack":"React · Tailwind · Motion",
"status":"Available for projects"
}UI Precision
Careful attention to layout, spacing, typography and interaction details to craft polished interfaces.
Frontend Architecture
Building scalable React components with clean structure and reusable patterns.
Performance Mindset
Creating responsive and smooth user experiences with efficient rendering and optimized UI.
Problem Solving
Turning complex product requirements into simple and intuitive user interfaces.
04 — Writing
Articles & Insights
Deep dives into frontend engineering, architecture, and developer experience.
Best Practices
Clean Code for Front-End Developers: 5 Habits to Level Up from Junior to Mid-Level
5 practical code quality patterns, component decomposition strategies, and TypeScript hygiene techniques to write production-ready frontend code.
Development / Web Development
Modern State Management in React: From useState to Zustand for Junior Developers
A clear breakdown of state categories in modern React applications: local state, context, server cache, and why Zustand is the go-to lightweight global store.
Development / Web Development
Why I Chose Payload CMS 3 for My Projects: Real-World Lessons with Next.js App Router and PostgreSQL
My real-world experience choosing Payload CMS 3 for projects that need a modern CMS, TypeScript, PostgreSQL, and an integrated architecture built around Next.js App Router. From Code-First development and the Local API to caching, migrations, authentication, and the trade-offs I encountered along the way.
UI/UX Design
Fluid Micro-Interactions with Framer Motion: A Practical Guide for Modern Front-End
How to take your interfaces from good to world-class using physics-based animations, layout transitions, and fluid interactions with Framer Motion without hurting web performance.
Architecture
Mastering React Server Components: A Junior Developer's Practical Guide to Next.js App Router
An accessible guide to understanding Server Components vs Client Components in Next.js, bundle size benefits, architectural mental models, and avoiding common hydration traps.