React
Tailwind CSS
SaaS / AI
Smart CRM
A multi-tenant CRM with AI assistance built into the record, summarising history and surfacing the next action for every account.
- Next.js
- TypeScript
- PostgreSQL
- OpenAI
- +1
Next.js
PostgreSQL
OpenAIView Case Study
Case Study / Web Application
Portfolio Website / 6 weeks
Animated Developer Portfolio with GSAP
A modern, animated personal portfolio built with React 19, Vite and GSAP — glowing cards, magnetic buttons, particle backgrounds and micro-interactions throughout.
- 100% GSAP-driven motion. Every reveal, tilt and follower effect built with GSAP.
- 4+ Signature effects. Word flipper, split text, tilt cards, magnetic CTA and cursor follower.
- Live Deployed on Vercel. Ships and iterates continuously at abdullah-asim-dev.vercel.app.
- React
- Vite
- GSAP
- Tailwind CSS
- Framer Motion
Overview
Client Overview
Personal project — the developer's own showcase site
Services provided
- Web Application Development
- UI/UX Implementation
- Client
- Personal project — the developer's own showcase site
- Industry
- Professional Services
- Timeline
- 6 weeks
- Year
- 2026
- Platforms
- Web application
- Team
- 1 engineer, 1 designer
Challenge
Business Challenge
The situation before the engagement, in the client's terms.
A portfolio has to prove its own hype. The site had to feel as polished as the work it showcases — and it had to load fast and stay accessible while doing it.
- 01
Performance budget
Heavy animation libraries can wreck load time on a showcase site.
- 02
Mobile-first motion
Effects that feel great on desktop must degrade gracefully on phones.
- 03
Content that sells
Projects, skills and services had to be presented in an order that convinces.
Objectives
Engagement Objectives
What the build needed to achieve before implementation began.
Prove the developer's motion and UI skills with the site itself
Keep every effect performant on mobile as well as desktop
Present projects, skills and services in a convincing order
Make the whole thing easy to update as the portfolio grows
Solution Design
How We Solved It
The approach that addressed each challenge above.
Every animation was built with a performance budget in mind — GPU-friendly transforms, scroll-triggered reveals and motion that enhances, never obstructs.
- 01
Layered reveals
GSAP split and stagger text reveals give the page a signature rhythm.
- 02
Spotlight cards
3D tilt with a follow-the-cursor glow makes project cards tactile.
- 03
Micro-interactions
Magnetic buttons, cursor scaling and sheen effects reward every hover.
Capabilities
Key Features
What Portfolio Website does in day-to-day use.
Word-flip hero
Gradient text with flipping words that re-key the headline as you watch.
Split-text reveals
GSAP stagger animations reveal headings line by line on scroll.
3D tilt glow cards
Project cards tilt toward the cursor with a spotlight that follows it.
Magnetic CTA
The call-to-action button pulls toward the cursor with a sheen sweep.
Cursor follower
A custom cursor overlay that scales over interactive elements.
Particle background
Canvas particles and floating decorative icons behind the hero.
Technology Stack
Technology Stack
- React 19
- Vite 7
- TypeScript
- GSAP
- Framer Motion
- Scroll-triggered reveals
- Tailwind CSS v4
- Custom animations
- Responsive layout
Outcome
Results & Outcome
What changed for the business after launch.
100%
GSAP-driven motion
Every reveal, tilt and follower effect built with GSAP.
4+
Signature effects
Word flipper, split text, tilt cards, magnetic CTA and cursor follower.
Live
Deployed on Vercel
Ships and iterates continuously at abdullah-asim-dev.vercel.app.
Interface
A Closer Look
Screens from the delivered system.
The hero — gradient text, particle background and magnetic CTA. 
Project cards with 3D tilt and spotlight glow. 
Skills, services and contact with split-text reveals.
Conclusion
The Result
The portfolio became a live, animated showcase that visitors remember — the developer's own site, rebuilt with the same motion and polish it sells to clients.
- 100% GSAP-driven motion: Every reveal, tilt and follower effect built with GSAP.
- 4+ Signature effects: Word flipper, split text, tilt cards, magnetic CTA and cursor follower.
- Live Deployed on Vercel: Ships and iterates continuously at abdullah-asim-dev.vercel.app.
More work
Related Projects
Other systems built on similar foundations.
AI / Web Application
AI Resume Platform
A web platform that parses resumes into structured data, matches candidates to roles with an explainable score, and generates tailored documents.
- Next.js
- Python
- FastAPI
- OpenAI
- +1
View Case Study
Python
FastAPINext step
Want a System Like This?
Tell us what your business needs to automate and we'll map out a practical build.
hello@thedevrox.comWe reply to every enquiry within one business day.