YakadawedaMetal Fabrication Portfolio & Quotation Platform
A modern, responsive portfolio and quotation request platform for a metal fabrication business, built with Next.js, React, TypeScript, and Tailwind CSS. Features a dynamic project gallery, categorized services, and an integrated contact/quotation system.
Category
Full Stack
My Role
Full Stack Developer – designed the architecture
Core Stack
Next.js 14, TypeScript +3
Status
In Progress
Problem & Goal
The client needed a professional online presence to showcase their diverse metal fabrication projects and allow potential customers to easily request quotations. Existing solutions were either too generic or lacked the ability to organize a large portfolio and handle structured quote requests.
What I Built
Key features and functionality implemented in this project
Dynamic portfolio gallery with categorized images
Service pages with subservice navigation
Integrated contact and quotation request forms
Responsive design for all devices
SEO-friendly routing and metadata
Reusable component architecture
Client-side form validation
UI Gallery
A square-format gallery with layered details and progressive loading, tuned to stay sharp across mobile, tablet, and desktop viewing experiences.
Built to Perform
High Performance
Optimized with lazy loading, code splitting, and image optimization for 95+ Lighthouse performance scores.
SEO Optimized
Structured metadata, Open Graph tags, schema markup, and canonical URLs for maximum search engine visibility.
Fully Responsive
Pixel-perfect layout from 320px mobile screens to 4K displays, with accessible UI patterns throughout.
Challenges & Solutions
Technical obstacles encountered and how they were overcome
Organizing a large, image-heavy portfolio into meaningful categories while maintaining fast load times.
Implemented lazy loading and optimized image delivery using Next.js Image component and a well-structured public assets directory.
Ensuring users could easily request quotations and contact the business from any device.
Built custom, accessible forms with validation and integrated them with Next.js API routes for seamless backend handling.
Results & Impact
My Role
Full Stack Developer
Full StackFull Stack Developer – designed the architecture, implemented the Next.js frontend, built reusable UI components, and integrated the quotation/contact API endpoints.
Explore Yakadaweda
Check out the live deployment or explore the full source code on GitHub.