Tayyab Sohail · Software engineering
A personal site where every project is a full case study, generated from one typed data file.
Category
Website
Year
2025
Capabilities
Web
Industry
Software engineering
The problem
A CV lists technologies; it does not show how a product was built or what changed after it shipped. Most portfolio sites are a grid of thumbnails with nothing behind them, and keeping a dozen project pages consistent by hand is where they fall apart.
Our approach
We treated the portfolio like a product. Every project is a typed record with problem, approach, architecture, features, challenges and outcomes, and the site renders the grid, the case-study pages, the sitemap and the social previews from that one array.
Inside the product
More than one screen.
2 more screens from Tayyab Sohail Portfolio, captured at device size.
Tech stack
Tools and frameworks, grouped by layer.
Contact
A message form and an embedded Cal.com booking on one screen.
On the phone
Home
Tech stack
Contact
How it is built
Architecture
Next.js App Router with static generation for every case-study route. Project data lives in one TypeScript array so the type checker refuses a build when a section is missing. Motion runs on Framer Motion after first paint; call booking is an embedded Cal.com widget.
Key features
Challenges & solutions
Where it got hard.
Challenge
Twelve hand-written case studies drifted apart in structure and tone.
Solution
One typed schema for all projects, with the compiler failing the build when a field is missing.
Challenge
Animated pages tend to score badly on load and layout stability.
Solution
Static generation, fonts loaded through next/font and motion that starts only after the first paint.
Results
What shipping it changed.
Stack
Frontend
- Next.js
- TypeScript
- React
Styling & motion
- TailwindCSS
- Framer Motion
Booking
- Cal.com
Hosting
- Vercel
Let's talk
We can usually tell within one call whether the approach above transfers to your problem, and what would need to change.