Components

The parts this site is built from

Every component in this portfolio, rendered live. Grab the source of any one with a single click.

67 components · 11 groups

General

CopyCommand

src/components/CopyCommand.tsx

Terminal-style install command with a copy button.

Download

CopyEmailButton

src/components/CopyEmailButton.tsx

Copies the contact email to the clipboard with a tooltip confirmation.

Download

UI primitives

KAKA

ABC

Avatar

src/components/ui/avatar.tsx

Image avatar with fallback initials, sizes, and grouping.

Avatar
AvatarImage
AvatarFallback
AvatarGroup
AvatarGroupCount
AvatarBadge

Download

DefaultSecondaryOutlineDestructive

Badge

src/components/ui/badge.tsx

Small status label in several variants.

Badge
badgeVariants

Download

Button

src/components/ui/button.tsx

Token-driven button with default, outline, secondary, ghost, and link variants.

Button
buttonVariants

Download

Project brief

Scope, timeline, and deliverables.

A short summary of the work goes here.

Card

src/components/ui/card.tsx

Composable card with header, content, and footer slots.

Card
CardHeader
CardFooter
CardTitle
CardAction
CardDescription
CardContent

Download

Dialog

src/components/ui/dialog.tsx

Accessible modal dialog built on Base UI.

Dialog
DialogClose
DialogContent
DialogDescription
DialogFooter
DialogHeader
DialogOverlay
DialogPortal
DialogTitle
DialogTrigger

Download

Selected work

Section heading

Eyebrow

src/components/ui/eyebrow.tsx

Small uppercase label that sits above a section heading.

Download

Input

src/components/ui/input.tsx

Text input styled with the site's border and ring tokens.

Download

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

ScrollArea

src/components/ui/scroll-area.tsx

Scrollable region with a styled scrollbar.

ScrollArea
ScrollBar

Download

Select

src/components/ui/select.tsx

Dropdown select built on Base UI.

Select
SelectContent
SelectGroup
SelectItem
SelectLabel
SelectScrollDownButton
SelectScrollUpButton
SelectSeparator
SelectTrigger
SelectValue

Download

Horizontal

Blog

Projects

Contact

Separator

src/components/ui/separator.tsx

Horizontal or vertical divider.

Download

Sheet

src/components/ui/sheet.tsx

Slide-in panel used for the mobile navigation.

Sheet
SheetTrigger
SheetClose
SheetContent
SheetHeader
SheetFooter
SheetTitle
SheetDescription

Download

Skeleton

src/components/ui/skeleton.tsx

Loading placeholder.

Download

Textarea

src/components/ui/textarea.tsx

Multi-line text input.

Download

Layout

Section

src/components/layout/Section.tsx

Shared section wrapper: consistent vertical rhythm and a max-w-5xl column.

Download

Animation

AnimatedGradient

src/components/animation/AnimatedGradient.tsx

Slowly shifting gradient background.

Download

Floating

FloatingElement

src/components/animation/FloatingElement.tsx

Gently bobs its children up and down.

Download

MagneticButton

src/components/animation/MagneticButton.tsx

Pulls its child toward the cursor on hover.

Download

ScrollReveal

src/components/animation/ScrollReveal.tsx

Fades and slides content in as it enters the viewport.

Download

Move your cursor

The spotlight follows it.

SpotlightCard

src/components/animation/SpotlightCard.tsx

Card with a soft light that follows the cursor.

Download

Hover to tilt

Follows the cursor in 3D.

TiltCard

src/components/animation/TiltCard.tsx

3D tilt on hover, with an optional glow.

Download

Icons

X
Instagram
GitHub
PyPI

BrandIcons

src/components/icons/BrandIcons.tsx

Inline SVG brand marks (lucide-react v1 ships none).

XIcon
InstagramIcon
GitHubIcon
PyPIIcon

Download

Homepage sections

BuildingInPublic

src/components/sections/home/BuildingInPublic.tsx

Homepage "building in public" section with live GitHub activity.

GitHubActivity
GitHubActivitySkeleton
BuildingInPublic

Download

FinalCta

src/components/sections/home/FinalCta.tsx

Closing call-to-action section.

Download

For founders & hiring managers

What you get when you hire me.

Ships end-to-end — frontend, backend, and e-commerce systems, not just UI.
Comfortable owning a build solo — from idea to deployed product — without a large team.
Four developer tools published on PyPI — sentinel-recon, scribe-gen, atlas-world-intel, utopia-analyzer.
3+ years of hands-on e-commerce experience — Shopify custom themes and headless commerce.
Fixed-price, scoped upfront — no surprise invoices.

View Projects Get in Touch

ForFounders

src/components/sections/home/ForFounders.tsx

"For founders" section with the working-together points.

Download

Hero

src/components/sections/home/Hero.tsx

Homepage hero.

Download

Packages

Open source and installable.

Small tools that solve real problems.

All packages

PyPIsentinel-recon
Cybersecurity recon CLI toolkit for ethical security assessment.
PyPIscribe-gen
AI CLI for blog generation, SEO scoring, and content repurposing.
PyPIatlas-world-intel
Explore countries, economies, and geography from your terminal.
PyPIutopia-analyzer
Turns a GitHub profile into a developer intelligence report with portfolio scoring.

Packages

src/components/sections/home/Packages.tsx

Published PyPI packages with install commands (PackageList is reused on /packages).

PackageList
Packages

Download

Services

src/components/sections/home/Services.tsx

Services overview section.

Download

Stack

src/components/sections/home/Stack.tsx

Tech stack section.

Download

StatsRow

src/components/sections/home/StatsRow.tsx

Count-up stats row.

Download

Selected work

All projects

Flagship

MNEMO

AI-powered learning platform

A neuroscience-inspired learning platform that turns any material into interactive quizzes, tracks what you actually retain, and adapts as you go.

AI Powered
Interactive Quizzes
Modern Dashboard
Real-time Updates

Explore Project Live Demo

Work

src/components/sections/home/Work.tsx

Selected work section.

Download

Writing

src/components/sections/home/Writing.tsx

Latest writing section, pulled from the blog.

Download

Projects

MNEMO
AI
AI-powered learning platform
Neuroscience-inspired learning platform with interactive quizzes and intelligent assistance.
Live Demo Case study
SENTINEL
CLI
Cybersecurity recon CLI
Toolkit for ethical security assessment.
PyPI Case study
SCRIBE
CLI
AI content CLI
Blog generation, SEO scoring, and content repurposing from the terminal.
PyPI Case study
ATLAS
CLI
World intelligence CLI
Explore countries, economies, currencies, and geography from the terminal.
PyPI Case study
ECLIPSE
CLI
Space intelligence terminal
Live ISS tracking, rocket launches, NASA picture of the day, and an AI cosmic assistant.
Case study
UTOPIA
CLI
GitHub profile intelligence
Turns any GitHub profile into a developer intelligence report with portfolio scoring and an AI recruiter simulation.
PyPI Case study
Vitra
Brand
Cinematic brand experience
Celebrating 100 years of Panton design.
Case study
Studio Atlas
Brand
Architecture studio brand
Identity and digital presence for an architecture studio.
Case study

BuildingList

src/components/projects/BuildingList.tsx

"What I'm building" list on the projects page.

Download

sentinel-recon

v1.0.0

pypi.org/project/sentinel-recon

Cybersecurity recon CLI toolkit for ethical security assessment.

161downloads

Features

website scanner with a security score
SSL, DNS, and security header checks
port scanning and IP geolocation
Markdown and PDF reports

Python
Typer
Rich

PyPI GitHub

atlas-world-intel

v1.0.0

pypi.org/project/atlas-world-intel

World intelligence CLI for countries, economies, and geography.

159downloads

Features

country lookup and comparisons
world rankings by population and area
live currency conversion
geography quiz and AI explanations

Python
Typer
Rich

PyPI GitHub

scribe-gen

v0.1.0

pypi.org/project/scribe-gen

AI CLI for blog generation, SEO scoring, and content repurposing.

141downloads

Features

titles, outlines, and full drafts
SEO analyzer using real readability math
social repurposing for LinkedIn and X
Markdown and PDF export

Python
Typer
Rich

PyPI GitHub

CliTools

src/components/projects/CliTools.tsx

Grid of published CLI tools with install commands.

Download

Full-Stack Developer · Freelance
2023 — Present
- building websites, web applications, and e-commerce stores end to end
- owning the full stack — frontend, backend, and deployment — without a large team
- [ADD REAL DETAIL] — number of clients or products shipped in this period
- [ADD REAL DETAIL] — any verified outcome (conversion lift, retainers, revenue)
- Next.js
- TypeScript
- Tailwind CSS
- Shopify
E-commerce Developer · Self-employed
2022 — 2023
- developed and customized Shopify themes and product pages
- focused on conversion-oriented storefronts and headless commerce
- [ADD REAL DETAIL] — stores shipped in this period
- [ADD REAL DETAIL] — any verified conversion or sales impact
- Shopify
- Liquid
- JavaScript
- CSS

ExperienceTimeline

src/components/projects/ExperienceTimeline.tsx

Vertical experience timeline.

Download

MNEMO

ActiveAI

AI-powered neuroscience-inspired learning platform improving memory retention through interactive quizzes, intelligent assistance, and personalized experiences. Built as a full product — dashboard, auth, and real-time updates — not a static course site.

mnemo-brain.vercel.app

Key features

AI-powered assistance
interactive quizzes
modern dashboard
real-time updates

Stack

Next.js
TypeScript
Tailwind CSS

Case study GitHub

SENTINEL

Open SourceCLI

Cybersecurity intelligence CLI toolkit for ethical security assessment, published on PyPI. It inspects SSL certificates, DNS records, security headers, and open ports, then exports a report from the terminal.

pip install sentinel-recon

Key features

website scanner with a security score
SSL certificate and expiry checks
DNS lookup and security header analysis
port scanning and IP geolocation
report export to Markdown or PDF

Stack

Python
Typer
Rich

Case study GitHub PyPI

SCRIBE

Open SourceCLI

AI-powered CLI for blog generation, SEO scoring, and content repurposing. It covers the whole pipeline from the terminal: titles, outlines, full drafts, SEO analysis, tone shifting, and export.

pip install scribe-gen

Key features

title and outline generation
full drafts in five different tones
SEO analyzer using real readability math
social repurposing for LinkedIn, X, and Facebook
Markdown and PDF export

Stack

Python
Typer
Rich

Case study GitHub PyPI

ATLAS

Open SourceCLI

World intelligence CLI for exploring countries, economies, currencies, and geography from the terminal. Live lookups sit next to interactive sessions so reference data is one command away.

pip install atlas-world-intel

Key features

country lookup and profiles
side-by-side country comparisons
world rankings by population and area
live currency conversion
geography quiz and AI explanations

Stack

Python
Typer
Rich

Case study GitHub PyPI

ECLIPSE

Open SourceCLI

Space intelligence terminal with live ISS tracking, rocket launch schedules, NASA's picture of the day, a planet database, and an AI-powered cosmic assistant.

Key features

live ISS position, speed, and crew count
NASA picture of the day
upcoming rocket launch schedule
planet database with fuzzy name matching
AI cosmic assistant with SQLite-backed caching

Stack

Python
Typer
Rich

Case study GitHub

UTOPIA

Open SourceCLI

Transforms any GitHub profile into a developer intelligence report, featuring portfolio scoring, an AI recruiter simulation, a roast mode, and a 30-day improvement plan.

pip install utopia-analyzer

Key features

portfolio scoring on quality and consistency
AI recruiter simulation
roast mode for blunt, constructive feedback
30-day improvement plan

Stack

Python
Click
Rich

Case study GitHub PyPI

Vitra

Case StudyBrand

Cinematic brand experience celebrating 100 years of Panton design. A scroll-driven narrative, large typographic moments, and a monochrome palette keep the focus on form.

Key features

scroll-driven narrative built on GSAP ScrollTrigger
large typographic moments and slow parallax
monochrome palette that keeps focus on form
fully responsive with reduced-motion support

Stack

Next.js
Framer Motion
GSAP

Case study

Studio Atlas

Case StudyBrand

Brand identity and digital presence for an architecture studio. Minimal and image-forward, with a quiet identity that matches the precision of the work.

Key features

visual identity system
image-forward responsive website
Sanity CMS integration
strict grid with generous whitespace

Stack

Next.js
Sanity
Tailwind CSS

Case study

FeaturedProjectCards

src/components/projects/FeaturedProjectCards.tsx

Featured project cards with stack pills and links.

Download

AICLIBrandLiveIn development

ProjectBadges

src/components/projects/ProjectBadges.tsx

Category and status pills for project cards.

CategoryBadge
StatusBadge

Download

No projects yet.

ProjectCard

src/components/projects/ProjectCard.tsx

Project card linking to a case study.

Download

ProjectsList

src/components/projects/ProjectsList.tsx

Filterable grid of project cards.

Download

Blog

No posts yet.

BlogCard

src/components/blog/BlogCard.tsx

Post card used on the blog index, rendered with the latest real post.

Download

BlogList

src/components/blog/BlogList.tsx

Chronological list of posts on the blog index.

Download

Content

Rendered from Markdown

Supports bold, italics, links, and inline code.

Lists
Code blocks
Images and tables

MarkdownRenderer

src/components/content/MarkdownRenderer.tsx

Renders Markdown for blog posts and project case studies.

Download

Contact

Book a 20-min intro call

[ADD BOOKING LINK] — drop a Cal.com or Calendly URL into bookingUrl in src/lib/site.ts. Until then this jumps to the form. Or email realkhizararain7@gmail.com.

BookingButton

src/components/contact/BookingButton.tsx

Booking CTA — falls back to a placeholder until a booking link is set.

Download

ContactForm

src/components/contact/ContactForm.tsx

Contact form with service chips, validation, and an API-backed submit.

Download

MNEMO case study

Architecture

Built for scale from the ground up

A clean, layered architecture that separates concerns and scales with the product.

Next.js App Router

Server-side rendering, route handling, and SEO.

TypeScript Layer

Type safety across components and API calls.

TailwindCSS Design System

Consistent, responsive styling at scale.

Supabase Backend

Database, real-time subscriptions, and authentication.

Vercel Edge

Global deployment, caching, and performance optimization.

Data FlowUserNext.jsSupabase

Architecture

src/components/mnemo/Architecture.tsx

MNEMO system architecture diagram.

Download

AuthShowcase

src/components/mnemo/AuthShowcase.tsx

MNEMO authentication screens.

Download

ChatShowcase

src/components/mnemo/ChatShowcase.tsx

MNEMO chat interface showcase.

Download

CtaSection

src/components/mnemo/CtaSection.tsx

MNEMO closing call-to-action.

Download

DashboardShowcase

src/components/mnemo/DashboardShowcase.tsx

MNEMO dashboard showcase.

Download

Development Journey

From idea to launch-ready product

Discovery

Identifying the gap

I started by researching how people actually learn and retain information, then identified the weaknesses in traditional platforms.

Build

Engineering the foundation

Next.js, TypeScript, Tailwind, and Supabase were chosen to create a scalable, type-safe, and performant foundation.

Iterate

Testing and refining

I iterated on the quiz engine, dashboard layout, auth flow, and mobile responsiveness until the experience felt polished.

Launch

Shipping to production

MNEMO was deployed on Vercel with optimized images, accessibility in mind, and a clear product narrative.

Challenges

Building a production-grade learning platform came with real engineering challenges that shaped the final architecture.

Structuring quiz state so progress, scoring, and retry logic remain clean and predictable.

Integrating Supabase real-time updates with optimistic UI patterns.

Optimizing image loading, rendering, and API calls for performance.

Prioritizing keyboard navigation, color contrast, and semantic markup for accessibility.

DevelopmentJourney

src/components/mnemo/DevelopmentJourney.tsx

MNEMO development journey timeline.

Download

Features

Everything a modern learning platform needs

A complete feature set built to feel like a premium SaaS product from day one.

AI Learning System

Intelligent assistance that adapts explanations to each learner's level and needs.

Interactive Quiz System

Dynamic quizzes with real-time feedback, scoring, and retry logic.

User Dashboard

A central hub for progress, stats, and recommended learning paths.

Authentication

Secure sign up, sign in, and session management via Supabase Auth.

Real Time Updates

Live data sync across the app for a seamless experience.

Responsive Design

Fully optimized for desktop, tablet, and mobile.

Personalized Learning

Tailored recommendations based on performance and goals.

Analytics

Clear visual insights into learning habits and improvement.

Progress Tracking

Goal-oriented tracking that keeps learners motivated.

Modern UI/UX

Clean, accessible, and delightful interface.

FeaturesBento

src/components/mnemo/FeaturesBento.tsx

MNEMO features bento grid.

Download

How It Works

From sign up to mastery

A simple, five-step loop that turns passive studying into active, measurable learning.

Sign Up

Create a secure account with Supabase Auth in seconds.

Explore Dashboard

View progress, analytics, and recommended learning paths.

Take a Quiz

Answer interactive questions and receive instant feedback.

Ask AI

Get personalized explanations whenever a concept is unclear.

Track Progress

Watch your retention and performance improve over time.

Designed for the way human memory actually works.

HowItWorks

src/components/mnemo/HowItWorks.tsx

MNEMO "how it works" steps.

Download

MnemoHero

src/components/mnemo/MnemoHero.tsx

MNEMO case study hero.

Download

MNEMO

MnemoLogo

src/components/mnemo/MnemoLogo.tsx

MNEMO logo mark with optional wordmark.

Download

PerformanceMetrics

src/components/mnemo/PerformanceMetrics.tsx

MNEMO performance metrics.

Download

The Problem

Learning platforms are broken

Traditional education tools treat every learner the same, missing the science behind how memory actually works.

Passive Consumption

Learners read or watch content without active engagement or reinforcement.

Generic Pacing

One-size-fits-all schedules ignore individual memory and learning curves.

Weak Feedback Loops

Delayed or shallow feedback makes it hard to know what actually stuck.

No Retention Strategy

Traditional platforms rarely revisit concepts at the right interval.

ProblemStatement

src/components/mnemo/ProblemStatement.tsx

MNEMO problem statement.

Download

QuizShowcase

src/components/mnemo/QuizShowcase.tsx

MNEMO quiz interface showcase.

Download

Roadmap

src/components/mnemo/Roadmap.tsx

MNEMO product roadmap.

Download

ScreenshotsGallery

src/components/mnemo/ScreenshotsGallery.tsx

MNEMO screenshots gallery.

Download

Technologies

Modern stack, modern results

Every technology was chosen for performance, reliability, and developer experience.

Frontend

NextJS

React framework for production-grade web apps.

Typescript

Type-safe development across the entire codebase.

TailwindCSS

Utility-first styling for rapid, consistent design.

Backend

Supabase

PostgreSQL database, real-time subscriptions, and edge functions.

Authentication

Supabase Auth

Secure authentication and session management.

Deployment

Vercel

Global edge deployment with optimized performance.

UI & Motion

Framer Motion

Smooth animations and interactive transitions.

Lucide Icons

Crisp, consistent iconography throughout the app.

TechStack

src/components/mnemo/TechStack.tsx

MNEMO tech stack.

Download

VideoShowcase

src/components/mnemo/VideoShowcase.tsx

MNEMO video walkthrough.

Download

AI Powered

Neuroscience-backed

What is MNEMO?

A learning platform that adapts to how you think

MNEMO is a production-grade AI learning platform that combines intelligent assistance, interactive quizzes, and real-time analytics into a cohesive, modern experience. It is designed for learners who want more than passive content — they want measurable improvement.

AI-assisted explanations adapted to your level

Interactive quizzes with instant feedback

Real-time progress tracking and analytics

Personalized learning paths and recommendations

WhatIsMnemo

src/components/mnemo/WhatIsMnemo.tsx

MNEMO overview section.

Download

Why I Built It

More than a portfolio piece

MNEMO was built to prove I can design, ship, and scale a production-grade AI application from zero to launch.

Startup-Grade Product

Built to demonstrate product thinking, engineering depth, and launch-ready quality at a YC level.

Real-World Impact

Focuses on a genuine problem: making learning active, measurable, and personalized with AI.

Technical Showcase

Combines modern frontend engineering with real backend infrastructure, auth, and deployment.

Trusted patterns from

Linear·Vercel·Stripe·Supabase

WhyBuilt

src/components/mnemo/WhyBuilt.tsx

Why MNEMO was built.

Download

The parts this site is built from

CopyCommand

CopyEmailButton

Avatar

Badge

Button

Card

Dialog

Eyebrow

Input

ScrollArea

Select

Separator

Sheet

Skeleton

Textarea

Tooltip

Footer

Navbar

Section

AnimatedGradient

FloatingElement

MagneticButton

ScrollReveal

SpotlightCard

TiltCard

BrandIcons

BuildingInPublic

FinalCta

ForFounders

Hero

Packages

Services

Stack

StatsRow

Work

Writing

BuildingList

CliTools

ExperienceTimeline

FeaturedProjectCards

ProjectBadges

ProjectCard

ProjectsList

BlogCard

BlogList

Rendered from Markdown

MarkdownRenderer

BookingButton

ContactForm

Architecture

AuthShowcase

ChatShowcase

CtaSection

DashboardShowcase

DevelopmentJourney

FeaturesBento

HowItWorks