โ† Back to Projects

Construction Co

Livebusiness

A professional construction company website with an animated project gallery, service breakdown, scroll-triggered AOS animations, and a Resend-powered contact form.

๐ŸŒ Live Site๐Ÿ“ GitHub RepoBy Kyle Parsotan ยท 2025

Problem

Construction firms need a credible, visually rich online presence to win client trust and showcase completed work. Heavy image sites often suffer from poor performance and zero interactivity.

Solution

Built a performant Next.js site with server-side image optimization via next/image. AOS (Animate On Scroll) and Framer Motion add visual depth without sacrificing performance. The project gallery uses a responsive CSS Grid. Resend delivers contact form submissions to the business email.

Tech Stack

Frontend
Next.jsTailwindCSSFramer MotionAOSFlexbox
Backend
Resend (email)
DevOps
Vercel

Architecture

Frontend

Next.js App Router with next/image for optimized lazy-loaded project photos. AOS library adds scroll-triggered fade/slide-up animations on service cards and gallery items, initialized in a client component useEffect. Framer Motion handles hero section entrance animations. CSS Grid lays out the project gallery in a masonry-like responsive grid. TailwindCSS drives all spacing and responsive breakpoints.

Backend

Next.js API Route (/api/contact) validates the form and sends a formatted email via Resend. No persistent data storage.

Database

None.

Features

Future Improvements

By Kyle Parsotan ยท 2025

Get to Work

Contact me for freelance work, full-time opportunities! I'm always open to discussing new projects, creative ideas, or opportunities to be part of your visions.