Blackmorph Next.js Portfolio Website
How we built our own agency site on Next.js 16, React 19 and Tailwind CSS 4: static case studies, structured data and a Resend-powered contact flow.
Client
Blackmorph (Internal)
Services
Web Development
Industries
IT Services
Date
January 2026
Challenge
Building an agency website that demonstrates our engineering standards instead of just describing them.
Our own site is the first project most prospective clients look at, so it has to pass the same checks they would apply to any vendor: does it load quickly on a mid-range phone, can search engines understand it, is it usable with a keyboard and a screen reader, and does the contact form actually reach a person? It also has to present twelve case studies, a set of service pages and team profiles without becoming slow or difficult to maintain as the content grows.
Approach
We treated the site as a product rather than a brochure. Projects, services and team profiles live in typed TypeScript data files, and every page, the sitemap, the llms.txt summary and the JSON-LD structured data are generated from that same source, so they cannot drift out of sync.
Every route is statically generated at build time with the Next.js App Router, and unknown project slugs return a real 404 instead of rendering on demand. Tooling was kept lean: Bun for package management, Biome for linting and formatting, and the React Compiler to handle memoisation automatically instead of hand-written useMemo calls.
Solution
We built the website with Next.js 16 and React 19, using server components for page shells and metadata and client components only where interaction is needed — navigation, animations and forms. The design system combines scroll-driven reveal animations, parallax image dividers and micro-interactions with a light/dark colour switcher.
Images are stored as WebP and served through the Next.js image optimiser, which negotiates AVIF or WebP at responsive sizes, and each case study gets its own generated Open Graph card. The contact and newsletter forms run as Server Actions that escape input, apply rate limiting and deliver email through Resend using React Email templates.
Key
features
Statically generated case studies. Each project page is pre-rendered from typed data with its own title, meta description, canonical URL and a generated 1200×630 social sharing card.
Linked structured data. Organization, WebSite, BreadcrumbList and CreativeWork JSON-LD connect every case study to the company and to the service pages that reference it.
Server Action forms. Contact and newsletter submissions are checked, HTML-escaped and rate-limited on the server before Resend delivers them by email.
Light and dark themes. A colour switcher in the header lets visitors move the whole site between light and dark palettes.
Machine-readable site summaries. A generated sitemap, robots rules and an llms.txt route describe the site's pages for search engines and AI assistants.
Tech
stack
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- React Compiler
- Resend
- React Email
- Vercel
- Vercel Analytics
- Vercel Speed Insights
- Biome
- Bun
Results
Case studies, services and team pages are generated from one set of typed data files, so publishing a new project means editing a single file rather than several templates.
Every page ships with a canonical URL, sitemap entry and structured data produced automatically at build time.
Enquiries from the contact form arrive by email through Resend, with server-side checks that reject malformed and repeated submissions.
Real-user performance is monitored in production with Vercel Analytics and Speed Insights, so regressions show up after a deployment instead of going unnoticed.
Related
The service, sector and guides behind this project.
Custom web and mobile apps that replace the spreadsheets and WhatsApp threads running your orders, stock, billing and field teams.
Transform your vision into reality
