Agency Website4 Months · 2024

Digital Lab Services

Built a high-performance, fully animated agency website that helped a Lahore-based digital marketing firm enhance their digital presence.

What is it?

Digital Lab Services is a full-service digital marketing agency based in Lahore, Pakistan, offering web development, SEO, social media management, video editing, graphic design, and ads management. They needed a high-performance, visually compelling website that could credibly represent their brand, showcase their services, and convert visitors into paying clients. I was brought on as the sole freelance web developer and delivered a production-ready Next.js website with enhanced user experience and portfolio demonstration.

What I Did

I owned the entire engineering side, from architecting the project structure in the Next.js App Router to building every page, wiring up third-party integrations, and optimizing the final product for Core Web Vitals, SEO, and conversion. This was a solo freelance engagement where I handled everything from the first Figma review to the Vercel deployment.

  1. Planning & Architecture

    Mapped out the full site structure — pages, routing, component hierarchy, and data flow — before writing a single line of code. Chose Next.js App Router for its SSR/SSG capabilities, critical for SEO performance on a client-facing agency site.

  2. Design-to-Code

    Translated Figma designs into pixel-perfect, fully responsive React components using Tailwind CSS. Built a reusable component library covering layouts, service cards, navigation, forms, and CTA sections — ensuring design consistency across all pages.

  3. Animations & Interactions

    Implemented scroll-triggered animations, staggered entrance reveals, floating elements, and hover micro-interactions using GSAP and Framer Motion — giving the site a premium, agency-worthy feel that competitors couldn't match.

  4. Third-Party Integrations

    Integrated Cloudinary for optimised media delivery, Calendly for appointment booking, and a newsletter subscription flow — all without introducing performance regressions or slowing down the page.

  5. SEO & Performance Optimisation

    Ran Lighthouse audits, resolved Core Web Vitals issues, added structured metadata, Open Graph tags, and a dynamic sitemap for full SEO coverage. Deployed to Vercel with CI/CD. Final scores hit 90+ on Performance and 100 on SEO.

SEO Score
100
Accessibility Score
90+
Service Pages Built
9
User Experience Score
95%
  • Animated hero section with kinetic GSAP typography
  • 7 dedicated service pages with rich, SEO-optimised content
  • 5-step visual process timeline with scroll animations
  • Client testimonials and social proof section
  • Blog with dynamic routing and CMS-ready architecture
  • Team showcase section
  • Calendly appointment booking integration
  • Fully responsive across all screen sizes and devices
  • Optimised Core Web Vitals — 90+ Lighthouse Performance
  • Full SEO implementation: metadata, Open Graph, sitemap, structured data

Ready to build something amazing?

Interested in learning more about this project or starting a new full-stack development journey? Let's talk.