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
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.
Every project on the site is a full case study rather than a thumbnail, and all of them share one structure because they come from one typed data file. The site ships as static HTML, so the motion costs nothing on load, and a call is one click from any page.
12
case studies from one typed data file
The grid, every case-study page, the sitemap and the social previews render from a single array.
0
CMS or database to maintain
Every page is built statically at deploy time, and the type checker refuses a build if a section is missing.
1
click from any case study to a booked call
An embedded Cal.com calendar sits on the contact screen alongside the message form.
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.