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
Industry
Software engineering
Optimization
Nothing done twice
How it is optimized
Nothing done twice
One typed data file generates the whole site.
The grid, every case-study page, the sitemap and the social previews are rendered from one array. There is no CMS or database to maintain, and the compiler refuses a build when a section is missing.
What keeps it lean
- 01One source of truth
- 02No CMS or database to run
- 03Errors caught at build time
Caching, batching and reuse instead of regenerating the same work.
The challenge
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. The portfolio needed to show the work properly and stay consistent without constant upkeep.
The work
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. It ships as static HTML, animates after first paint and books calls through an embedded Cal.com calendar.
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.
The impact
What became easier, better or more effective.
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. There is no CMS or database to maintain, 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
Optimization
Nothing done twice
Caching, batching and reuse instead of regenerating the same work.
Conscious AILet's talk
Tell us where you are. We'll say plainly what we would do next, and whether we're the right team for it.