A dark-themed, animation-rich personal portfolio built to showcase full-stack web development, mobile app development, and creative design work.
This portfolio is built with React, TypeScript, Vite, Tailwind CSS, and Framer Motion — designed around a bold black-and-lime-green visual identity, smooth scroll-driven animations, and an interactive 3D tech stack section powered by physics simulation.
| Tool | Purpose |
|---|---|
| React 18 + TypeScript | Component architecture & type safety |
| Vite | Lightning-fast build tool |
| Tailwind CSS | Utility-first responsive styling |
| Framer Motion | Scroll animations, transitions, text effects |
| React Three Fiber + Rapier | 3D physics-based tech stack visualization |
| Lucide React | Icon system |
| # | Section | Description |
|---|---|---|
| 01 | Welcome Screen | Animated intro video on first load |
| 02 | Hero | Full-bleed video background, name, tagline, sound toggle |
| 03 | About | Bio, social links, animated CV download |
| 04 | Tech Stack | Interactive 3D physics balls representing skills |
| 05 | Projects | Sticky-stacking scroll cards for featured work |
| 06 | Services | UI/UX, development, AI integration, and support offerings |
| 07 | Contact | Email, WhatsApp, LinkedIn, and GitHub |
git clone https://github.com/BuildsByAliyan/portfolio.git
cd portfolio
npm install --legacy-peer-deps
npm run dev # → http://localhost:5173npm run build # production build → /dist
npm run preview # preview the production build locallyThis project auto-deploys to Vercel on every push to main.
git add .
git commit -m "your message"
git pushNo environment variables required. Vercel handles install, build, and output automatically via vercel.json.
portfolio/
├── public/ # static assets — images, videos, CV
├── .github/
│ └── github-banner.jpg # README banner image
└── src/
├── App.tsx # composes all sections
├── main.tsx # React entry point
├── index.css # global styles
└── components/
├── WelcomeScreen.tsx # intro video screen
├── HeroSection.tsx # navbar + hero video + name
├── AboutSection.tsx # bio, socials, CV download
├── TextEffect.tsx # word-by-word text reveal animation
├── TechStackSection.tsx # 3D physics skill balls
├── ProjectsSection.tsx # sticky project cards
├── ServicesSection.tsx # services list
├── ContactSection.tsx # contact methods
├── FadeIn.tsx # scroll-reveal wrapper
└── Magnet.tsx # magnetic hover effect
| Project | Live Demo | Stack |
|---|---|---|
| Trend In Law | View Live | HTML, CSS, JavaScript |
| Libaas Studio | View Live | HTML, CSS, JavaScript |
| Smart QR Hub | View Repo | React, QR Libraries |
| Want to change | Edit this file |
|---|---|
| Name, nav links, hero text | src/components/HeroSection.tsx |
| Bio, CV link, social links | src/components/AboutSection.tsx |
| Services list | src/components/ServicesSection.tsx |
| Tech stack icons | src/components/TechStackSection.tsx |
| Projects & screenshots | src/components/ProjectsSection.tsx |
| Contact methods | src/components/ContactSection.tsx |
| Theme colours, fonts | src/index.css, tailwind.config.js |
| Page title, meta tags | index.html |
