"Websites Built to Perform — On Every Screen, Everywhere."
Plain HTML5, CSS3, and vanilla modern JavaScript (ES6+) build of the Vertexa Digital Agency web platform. No heavy frameworks, no build step overhead, and zero runtime dependencies.
Vertexa Digital Agency designs, builds, revamps, and hosts modern, ultra-responsive websites engineered to scale with businesses. Owned and operated by Debjit Das and Upasana Roy, the agency delivers senior-level engineering and design with zero junior handoffs.
This repository contains the complete production code for the agency's website:
- Repository:
https://github.com/debjit-dev/vertexa.git - Design Philosophy: Confident, modern, technical-but-plain-spoken, with rich aesthetics, fluid typography, subtle micro-interactions, and hardware-accelerated animations.
- Architecture: Frameworkless static website deployable to any edge CDN or static host.
- Dark & Light Mode Engine: System preference auto-detection (
prefers-color-scheme), manual toggle in the navigation bar, anti-FOUC inline head script, and persistent state saved vialocalStorage. - 3D Device Parallax: Interactive multi-device mockup stage on the homepage hero that responds smoothly to cursor coordinates with responsive depth perspective.
- Micro-Animations & Smooth Transitions: Polished hover states, animated gradients, glassmorphism headers, and cubic-bezier transitions throughout.
- Authentic Brand Photography: Complete media library with real photography, high-resolution device screens, agency founder portraits, and custom SVG vector iconography.
- Single-Source Header & Footer: Modular DOM injection in
assets/js/main.jsguarantees consistent navigation links, service mega-menus, active page indicators (data-page), and mobile drawer navigation across all 15 pages. - Interactive Case Study Modals: Deep-dive project modal dialogs detailing 01. Challenge, 02. Vertexa Solution, and 03. Measurable Results alongside key performance metrics.
- Portfolio Category Filtering: Instant client-side filtering by service category (All, Website Development, Revamp & SEO, Scalable Builds, Hosting).
- Testimonial Carousel: Multi-slide customer reviews with auto-play, pause on hover/focus, dot navigation, previous/next controls, and native touch swipe support.
- Animated Metric Counters: Hardware-accelerated counting animations triggered via
IntersectionObserverwhen statistics scroll into view. - Interactive Discovery Call Scheduler: Interactive appointment slot selection on the contact page that automatically pre-populates form inquiry fields.
- Accessible FAQ Accordions: Smooth collapsible accordions with full ARIA disclosure state management (
aria-expanded). - Cookie Consent Banner: Lightweight, non-tracking privacy preferences banner with accept/decline modes stored locally.
- Core Web Vitals Optimized: Sub-second load times, WebP responsive image sets with explicit aspect ratios, and asynchronous script loading.
- Complete SEO Metadata: Canonical URLs, Open Graph tags, Twitter Card tags, and semantic schema markup (
OrganizationJSON-LD). - Crawling & Indexing: Production-ready
sitemap.xmlandrobots.txt. - Accessibility (a11y): Skip links for keyboard navigators, WCAG 2.1 AA compliant color contrast ratios, screen-reader labels, and Esc key handlers on all overlays and drawers.
vertexa/
├── 404.html # Custom branded 404 error page
├── about.html # About Us, philosophy, history & founders
├── blog.html # Engineering & design insights
├── careers.html # Culture, open roles & application info
├── contact.html # Inquiry form & discovery call scheduler
├── index.html # Agency homepage with full interactive hero
├── portfolio.html # Filterable case study showcase & modal triggers
├── pricing.html # Pricing packages, comparison & interactive quote form
├── privacy-policy.html # Privacy policy & data protection terms
├── robots.txt # Search engine crawler instructions
├── sitemap.xml # XML sitemap for search engine indexing
├── terms.html # Terms of service & contract standards
│
├── services.html # Services overview hub
├── services/ # Dedicated deep-dive service pages
│ ├── hosting-solutions.html # Global edge hosting, CDN, SSL & 99.9% uptime
│ ├── scalable-web-development.html # High-traffic architectures & modular frontend
│ ├── website-development.html # Bespoke web development from scratch
│ └── website-revamp-seo.html # Legacy site modernization & technical SEO
│
└── assets/
├── css/
│ └── style.css # Unified design system, CSS tokens & dark/light themes
├── data/
│ └── brand-assets.json # Brand guide, color hexes, typography & breakpoints
├── images/
│ ├── logo.svg # Scalable agency vector mark
│ └── team/
│ ├── debjit-das.jpg # Co-Founder & Technical Director portrait
│ └── upasana-roy.jpg # Co-Founder & Strategy Lead portrait
└── js/
└── main.js # Comprehensive vanilla JS interactivity engine
All tokens are centralized in assets/css/style.css via CSS Custom Properties and documented in assets/data/brand-assets.json:
| Role | Variable | Hex / Light | Dark Mode Value | Usage |
|---|---|---|---|---|
| Primary Navy | --navy |
#0B1F3A |
#0E223D |
Headers, navbar, primary branding |
| Signal Blue | --blue |
#1E5FA8 |
#3B82F6 |
Secondary buttons, link accents, icons |
| Accent Teal | --teal |
#2FB6A6 |
#2FB6A6 |
High-impact CTAs, highlights, badges |
| Teal Hover | --teal-hover |
#23907F |
#38D1BE |
Button and interactive hover state |
| Neutral Off-White | --offwhite |
#F2F5F8 |
#151F2E |
Alternating section backgrounds |
| Ink / Text | --ink |
#1B2430 |
#E2E8F0 |
Body typography and headings |
| Card Surface | --white |
#FFFFFF |
#1E293B |
Card surfaces, modals, containers |
- Headings:
Sora, sans-serif (Weights: 600, 700, 800) - Body:
Inter, sans-serif (Weights: 400, 500, 600, 700)
Because the navigation bar, footer partials, and internal assets utilize root-absolute paths (/assets/..., /about.html, etc.), the site must be previewed through a local HTTP web server rather than opening files directly via the file:// protocol.
git clone https://github.com/debjit-dev/vertexa.git
cd vertexa-
Using Python 3:
python3 -m http.server 8000 # or on Windows: python -m http.server 8000 -
Using Node.js (
npx):npx serve . # or with live reloading: npx live-server
-
Using VS Code / IDE:
Right-clickindex.htmland select "Open with Live Server".
Navigate to:
http://localhost:8000
The project requires no compilation, bundler, or build step. Simply point your hosting platform's web root to the repository directory:
- GitHub Pages: Go to Settings → Pages, select the
mainbranch and/ (root)folder. - Vercel: Import the GitHub repository
debjit-dev/vertexaas a Static Site with default settings. - Netlify: Connect the repository, leave the build command blank, and set publish directory to
.or root. - Cloudflare Pages / AWS S3 + CloudFront: Deploy directory contents directly to the edge.
Client-side validation and honeypot anti-spam protection are built into assets/js/main.js. Before production launch, update the form endpoint constant near line 389:
// assets/js/main.js
const FORM_ENDPOINT = "https://example.com/api/form-handler";
// Replace with your Formspree, Getform, or custom serverless webhook URLCase studies rendered in the interactive modal dialog are configured within the CASE_STUDIES object in assets/js/main.js. Adding or updating an entry automatically links to any card with a matching data-case-id="..." attribute in portfolio.html or index.html.
To add or adjust links in the navigation bar, mega menu, or footer, modify NAV_ITEMS and renderFooter() in assets/js/main.js. Changes immediately propagate across all pages.
- Debjit Das — Co-Founder & Technical Director
- Upasana Roy — Co-Founder & Strategy / Design Lead
📍 Headquarters: Salt Lake Sector V, Kolkata, West Bengal, India
🌐 Website: https://github.com/debjit-dev/vertexa.git
This project is licensed under the MIT License — see the LICENSE file or headers for details.