GordaoMod | ExpoStacker

LIVE PRODUCT

gordaomod.expostacker.com.br

live preview

Official premium resource store for FiveM with 216 resources, 10 categories, cyber design and automatic deploy

Use now Architecture

Tech stack: HTML5 CSS3 Vanilla JS Cloudflare Pages FiveM Acessibilidade

216
Products: 10
Categories: <1s
Deploy

Client

GordaoMod

Sector

Gaming Tech

Timeline

4 semanas (estimado) · 2026-06-13

Live product

Use now

Results

Client-reported results during rollout

216 Products published

Baseline: Complete catalog exposed

10 Categories organized

Baseline: Tab navigation

5 Pages published

Baseline: Home, checkout, specs, download, resources

<1 min Deploy

Baseline: GitHub Actions + Cloudflare Pages

Client-reported data

The challenge

A FiveM server owner visits GordaoMod and finds 216 premium resources organized into 10 categories. They browse tabs, search by name, open a product's technical specs and read all details in a detailed modal. The cyber/tech design with purple accents, Orbitron and Rajdhani fonts, and responsive card grid conveys professionalism. Deploy is automatic on every push to main via GitHub Actions and Cloudflare Pages.

A GordaoMod precisava de uma loja online profissional para comercializar scripts, mods, spoofer e recursos premium para servidores GTA V Roleplay FiveM. O desafio era apresentar 216 recursos em 10 categorias com navegacao fluida, ficha tecnica detalhada, busca rapida e design cyber/tech sem depender de frameworks pesados. A solucao deveria ser leve, acessivel, otimizada para SEO e com deploy automatico no ecossistema ExpoStacker.

The approach

We chose a purely static solution: HTML5 for semantic structure, CSS3 with variables and media queries for responsive cyber/tech design, and Vanilla JS for interactions (tabs, search, modal). All products are rendered in the static HTML with full descriptions in data attributes, ensuring the site works without a backend. Deploy on Cloudflare Pages with a build that copies assets to dist/, optimized cache via _headers and SEO with meta tags, OG, canonical and robots.txt.

The solution

GordaoMod is a complete static store for FiveM resources, with 216 resources, 10 categories, modal technical specs, search, cyber design and automatic deploy on Cloudflare Pages.

216 resources in 10 categories: Best Sellers, Protection and Spoofer, Factions and Crime, Jobs and Economy, Entertainment, Vehicles, Properties and Shops, UI and Appearance, Communication, Admin and Utilities
5 HTML pages: home with catalog, checkout, technical specs, download and resources
Dynamic tab navigation with real-time search by title
Technical specs modal with full description, price and video (when available)
Cyber/tech design with purple accents (#c026d3), Orbitron and Rajdhani fonts, dark background and glow effects
Accessibility optimizations: skip link, ARIA labels, semantic headings, focus visible, reduced motion
SEO: meta description, canonical, Open Graph, Twitter Cards, robots.txt, sitemap and favicon
Responsiveness for desktop, tablet and mobile with 480px and 768px breakpoints
Automatic deploy: git push main -> GitHub Actions -> build -> Cloudflare Pages
Optimized cache via _headers for CSS, JS and images

Timeline

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Semana 1

Descoberta

Mapping of 216 resources from backup
Selection of public store version
Audit of responsiveness, SEO and accessibility

Semana 2

Correcoes

Encoding and special character fix
SEO review (meta, OG, canonical)
Accessibility improvements (ARIA, skip link, focus)

Semana 3

Deploy

Creation of build and workflow
Cloudflare Pages and CNAME configuration
Automatic deploy of gordaomod.expostacker.com.br

Semana 4

Portfolio

Creation of case and hero SVG
Integration with ExpoStacker main site
Build and PT/EN validation

Methodology

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

ExpoStacker standards review before deploy

Defensive fixes without breaking visuals

Incremental deploy and route validation

Case creation documenting techniques and decisions

Architecture

GitHub

push main

GitHub Actions

build -> dist/

Cloudflare Pages

gordaomod.expostacker.com.br

HTML5

CSS3

Vanilla JS

_headers

robots.txt

→ Client: browser with HTML5/CSS3/JS
→ Host: Cloudflare Pages (global CDN)
→ Build: node build.js copies files to dist/
→ CI/CD: GitHub Actions runs npm ci, npm run build and deploys to Pages
→ Domain: gordaomod.expostacker.com.br via proxied CNAME on Cloudflare

Conceptual diagram — does not reflect real implementation

Tech stack

Technical choices and what was left out.

ecommerce

HTML5

Why: Accessible semantic structure indexable by search engines

Rejected alternative: JSX/Templates rendered on the server

CSS3

Why: Cyber design with variables, grid, flexbox and media queries without external libraries

Rejected alternative: Tailwind or Bootstrap would add dependencies and unused classes

Vanilla JS

Why: Lightweight interactions for tabs, search and modal with zero bundle

Rejected alternative: React/Vue would add hydration and build time

ecommerce

Cloudflare Pages

Why: Global CDN, custom domain and automatic deploy with no cost

Rejected alternative: Netlify/Vercel with bandwidth and build time limits

GitHub Actions

Why: Native CI/CD to the repo without additional tools

Rejected alternative: CircleCI/Travis would require more configuration and cost

Decision log

What I chose, what I rejected, and why.

HTML5 + CSS3 + Vanilla JS instead of framework

Why: A digital resource store with static pages doesn't need complex reactivity. Pure HTML, CSS and JS results in instant loading, zero bundle and simple maintenance without heavy build.

Rejected alternatives: We evaluated Astro and Next.js, but the site is a single page with static content. Adding a framework would increase build, hydration and deploy time without real benefit.

Products inline in HTML instead of separate JSON

Why: Keeping 216 resources in static HTML ensures the site works on any CDN without depending on additional requests. The build copies everything to dist/ and deploy is single.

Rejected alternatives: We considered extracting products to a JSON and loading via JS, but that would add an extra request and complexity. For the first version, inline is simpler.

Security and access

Security and privacy

Cloudflare credentials kept in .deploy.env and never committed
GitHub secrets injected by workflow, no hardcoded values
robots.txt guides crawlers and exposes sitemap
Cache and headers configured via _headers to avoid exposing sensitive files

Lessons learned

Not everything went as planned.

— Static sites with a lot of inline content require attention to HTML size and performance. For future versions, extracting products to JSON and loading on demand can significantly reduce initial load time.