COBARUMO — Civil Engineering & Construction

1. General Overview:
COBARUMO is a company specialized in building construction, roadworks, and infrastructure development. Led by Daniel WANVO (Civil Engineering Technician), it operates in a sector where credibility, execution quality, on-site safety, and deadline compliance are paramount to winning contracts.

The project entailed designing and building a professional web platform enabling the company to showcase its expertise and transform its digital footprint into a high-impact sales tool, streamlining contact with prospective clients, partners, and institutional stakeholders.

2. Context & Problem Statement:
In civil engineering and construction, clients require immediate proof of technical rigor and track record. Without a structured showcase, COBARUMO faced critical limitations:

• Lack of visibility: Online prospects had limited channels to discover the company's projects.
• Fragmented expertise: Capabilities across civil engineering, roadworks, and urban renovations were scattered.
• Commercial credibility: A polished digital presence was essential to compete for formal tenders.
• Partner acquisition: Institutional decision-makers need frictionless access to verified credentials.

Central Challenge Solved:
How to design a professional web showcase that effectively presents COBARUMO's expertise, reinforces brand authority, and unlocks business opportunities in construction?

3. Project Goals:

• Strengthen digital presence: Create an authoritative online home highlighting COBARUMO's positioning.
• Showcase core competencies: Clearly display the 4 pillars (Structural, Renovation, Roadworks, Project supervision).
• Streamline client acquisition: Equip prospects with necessary insights to request tailored estimates.
• Accessible user experience: Clean, responsive navigation fully adapted to mobile devices on active job sites.

4. Needs Analysis Matrix:

5. UX/UI Design & Information Architecture:

• Home (/): Value proposition, immersive hero slider, key stats (120+ projects, 85+ team members), services preview, and featured works.
• About (/about): Corporate vision, safety culture, and leadership profile of Daniel WANVO.
• Portfolio (/portfolio): Comprehensive gallery of delivered projects (Healthcare, Residential, Roadworks, Offices).
• Services & Details (/services/details): In-depth specifications across all 4 operational domains.
• Quote Request (/devis) & Contact (/contact): Direct contact channels (phone, detailed form, email).

6. Technical Development, Stack & My Role:
Engineered with React and Next.js paired with Tailwind CSS for component reuse, fast rendering, and crisp architectural aesthetics.
My Key Contribution: I was primarily responsible for frontend integration and responsive design:

• Mobile-first UI Integration: Meticulous responsive adaptation ensuring smooth reading on smartphones and tablets, essential for project leads reviewing specifications on active construction sites.
• Modular React Architecture: Building decoupled, reusable components (touch sliders, service cards, project showcases, FAQ accordions, quote funnel).
• Civil Engineering Brand Immersion: Custom blueprint loading experience with animated metric ruler graphics and sleek hover interactions.
• Media Optimization: Modern responsive image pipeline with lazy loading for heavy site photography to preserve instant load speeds.

7. Delivered Features Matrix:

8. Production Deployment:
Deployed with continuous delivery on Netlify featuring automated bundle optimization, SSL encryption, and high availability.

11. Technical Challenges & Lessons Learned:

• Heavy Media Optimization: High-resolution construction visuals demanded aggressive performance tuning (WebP/AVIF compression via next/image, lazy loading, responsive srcset) maintaining LCP under 1.5s.
• Architectural Brand Immersion: Custom loading animation uniting blueprint grid graphics with an animated metric measurement ruler.
• Smooth Touch Navigation: Touch-first responsive carousels (Hero slider with thumbnail previews, services track) tailored for on-site mobile review.
• Component Modularity: Decoupled component architecture enabling effortless portfolio additions.

9. Quality Assurance & Testing Suite:

• Functional Tests: Verification of user journeys, anchor links, form submissions, and modal interactions.
• Responsive Audits: Seamless cross-device verification across smartphones, tablets, and desktop displays.
• Performance & Core Web Vitals: High Lighthouse scores across Performance, Accessibility, and Best Practices.
• Technical SEO: Canonical tags, OpenGraph cards, Twitter preview cards, and Schema.org microdata (Organization & Person).

The delivered solution provides COBARUMO with immediate competitive advantages:

• Authoritative Brand Presence: Modern architectural aesthetics commanding trust from project owners and tender committees.
• True Cross-Device Usability: Flawless performance on mobile, tablet, and desktop for direct on-site consultation.
• Frictionless Inquiries: Decision-makers locate relevant capabilities in under 3 clicks and can submit detailed quote requests seamlessly.
• Modular Scalability: Clean component architecture designed for rapid additions of future projects and blog updates.

10. Results & Delivered Value:

• For the Company: A flagship digital asset to centralize portfolio accomplishments and elevate brand reputation.
• For Prospects: Instant comprehension of services and direct access to credentials before scheduling meetings.
• For Business Development: An official platform (cobarumo.netlify.app) directly integrated into commercial tender proposals.

12. Project Summary Card: