HomePortfolioAgency Portfolio
Agency Portfolio

Our Own Agency Portfolio — Dark, Fast and Built to Convert

The most honest test of an agency's skill is their own website. We built Oryx Web Studio as a premium dark-mode portfolio — animated, fast-loading, fully responsive and designed from the ground up to convert visitors into enquiries.

Next.jsTailwind CSSDark ModeAnimationsVercelConversion Design

Project Details

ClientOryx Digital (internal)
CategoryAgency Portfolio
Timeline8 days
FrameworkNext.js + Tailwind
DesignDark premium UI
StatusLive
GreenCore Web Vitals
<2sLoad Speed
PremiumDark UI
100%Mobile
8 DaysBuilt
0Template Used
The Challenge

What problem needed solving

Every project starts with understanding the real problem — not just the requested deliverable.

🚫 The Problems
Agency had no professional online presence — losing potential clients who Googled us
Previous site was generic — looked like every other Hubli web agency
No portfolio showcase with measurable project results
No conversion funnel — visitors had no clear next step after browsing
Poor mobile performance — not optimised for phone browsing
No differentiation from competitors — design did not communicate premium positioning
✅ Our Solutions
Built from scratch — zero templates, custom design in every component
Chose dark-mode premium aesthetic to stand out in a sea of light-background agency sites
Built a results-first portfolio section leading with measurable outcomes, not just screenshots
Clear conversion funnel: hero → services → portfolio → pricing → contact/WhatsApp
Next.js + Tailwind for perfect mobile-first performance at every breakpoint
Animated sections using CSS and Framer Motion — purposeful motion, not decoration
Project Timeline

How the project unfolded

From the first WhatsApp message to a live, indexed, ranking website.

1
Day 1

Design Direction

Decided on dark premium UI after auditing 40 competitor agency sites. Chose to differentiate on visual confidence rather than compete on "affordable" messaging.

2
Day 2–3

Component Architecture

Built the Next.js project structure, Tailwind config, color tokens and reusable component library.

3
Day 4–5

Core Pages

Hero, services, portfolio, process and pricing sections built with full responsive behavior at all breakpoints.

4
Day 6

Animations & Interactions

Scroll-triggered section reveals, hover micro-interactions and hero animation added with performance budget in mind.

5
Day 7

Performance Audit

PageSpeed audit. Image optimisation. Core Web Vitals green on all metrics. Lighthouse score above 95 on mobile.

6
Day 8

Deploy & Verify

Deployed to Vercel. Custom domain configured. Google Search Console submitted. All social meta tags verified.

Technology Used

Tools and stack behind this project

Every technology choice was made deliberately — based on what the project required, not what was trendy.

🚀Next.js 14
🌧Tailwind CSS
Framer Motion
Vercel
📄Custom CSS
📊Google Analytics
🔍Google Search Console
🌟Figma (wireframes)
Before & After

The measurable transformation

❌ Before
Generic light-background design indistinguishable from competitors
No portfolio with measurable outcomes
No clear conversion path through the page
Poor mobile performance — unoptimised images
No animations — flat, static layout
Template-based — nothing custom or memorable
✅ After
Premium dark-mode UI — visually distinctive in the Hubli agency market
Results-first portfolio — every case card leads with numbers, not just screenshots
Clear conversion funnel — every section leads logically to the next
Green Core Web Vitals — sub-2s load on mobile across all pages
Purposeful animations — section reveals and hover states that feel premium
Custom coded — every component built from scratch, nothing templated
Results

Measurable outcomes from this project

Green

Core Web Vitals

LCP, FID and CLS all green on Lighthouse mobile test

📈
<2s

Load Speed

Mobile page load including all animations and images

🌟
100%

Custom Design

Zero templates — every component designed from scratch

📱
100%

Mobile Responsive

Pixel-perfect at every breakpoint from 320px to 1920px

🚀
95+

Lighthouse Score

Performance score on mobile — above industry average

8 Days

Delivery

Brief to live, deployed on Vercel with custom domain

Key Learnings

What this project taught us

Every project produces insights we carry into the next one — making each project better than the last.

Dark UI requires a higher standard of execution

On a light background, average design is forgiven. On a dark background, every spacing error, colour inconsistency and uneven typography is immediately visible. This project raised our design discipline permanently.

Portfolio metrics matter more than portfolio aesthetics

We AB-tested two portfolio section formats. The version leading with numbers (164K impressions, 50K pilgrims) produced 3x more WhatsApp enquiries than the version leading with project screenshots. Proof beats beauty.

Performance budget discipline produces better design

Allocating a strict animation performance budget (no jank above 60fps, no LCP above 2.5s) forced us to make every animation earn its place — resulting in a more purposeful, less cluttered motion design.

An agency's own site is their most honest pitch

When a client Googles us after a referral, this site is what they see. A mediocre self-built site undermines every sales conversation. This project taught us to invest in our own digital presence as seriously as any client project.

More Projects

Other case studies

Want a premium website that converts visitors into enquiries?

This is what we build for our own agency — imagine what we can build for your business. WhatsApp us for a free quote.

WhatsApp Us → 📞 +91 72599 53308