Secure. Scalable. Intelligent solutions for a digital-first world.
NovaTech Solutions is a modern platform showcasing cloud infrastructure, AI-driven automation, and enterprise-grade security — designed for clarity, speed, and trust.
Built to feel like a real product, it now includes route-level performance tuning, progressive assets, and production CI audits.
Designed for elegance and speed, it features:
- ☁️ Cloud/AI/Security service overviews with clean information architecture
- 🧠 Live demos: sentiment AI, security feed, infra monitoring
- 🎛️ Visual styleguide with reusable components (Buttons, Tabs, Cards, Inputs)
- 🌙 Light/Dark mode with system detection + local persistence
- 🧪 CI-run Cypress E2E tests for smoke & forms
Built as a portfolio project that behaves like a real product.
👉 https://novatech.quimromero.com/
- ✅ Route-level code splitting (React.lazy + Suspense) to reduce initial JS
- 🚫 Removed root-level
AnimatePresenceso motion libs don’t ship on first paint - ⚡ Critical CSS inlined for the hero to improve FCP/LCP
- 🔤 Google Fonts optimized (preconnect + preload +
display=swap) - 🖼️ Logos in WebP (120×40 with explicit
width/height, lazy-loaded) - 📱 PWA assets: full favicon set,
site.webmanifest, mask icon, theme-color - 🔍 SEO via React Helmet Async
- ♿ Semantic landmarks, labels and reduced-motion–friendly animations
- 📱 Fully responsive, mobile-first
- 🧪 Cypress E2E + GitHub Actions CI
- 📊 (Showcase route) Charts with Recharts/Chart.js — loaded only when needed
| Tech | Role |
|---|---|
| React + Vite | Core framework & build tooling |
| React Router DOM | Routing (code-split routes) |
| Tailwind CSS | Utility-first styling + design tokens |
| Framer Motion | Scoped animations (below the fold) |
| Recharts + Chart.js | Visualization demos in /showcase |
| React Hook Form + Yup | Validated contact form |
| React Helmet Async | Meta tags & SEO |
| Cypress | E2E testing |
| GitHub Actions | CI (dev server + tests) |
| Lighthouse CI (LHCI) | Perf/Accessibility audits (CI) |
src/components/– Reusable UI (charts, modals, tabs, demos)pages/– Code-split routes: Home, About, Contact, Showcase, Bloghooks/– Dark mode, debounced input, scroll utilsdata/– Blog posts, services
public/– Favicons & PWA assets (favicon.ico,favicon-192.png,favicon-512.png,apple-touch-icon.png,mask-icon.svg,site.webmanifest,browserconfig.xml)cypress/– E2E specs & config
NovaTech runs Cypress on each PR and push to main via GitHub Actions.
Currently tested
- ✅ Smoke: home renders and CTA visible
- ✅ Contact form renders, validates and shows success
Coming soon
- 🧠 Sentiment analysis interaction flow
- 🔒 Security feed filters & distribution chart assertions
- 📈 Infra chart time-series assertions
🧪 CI status: https://github.com/quim-romero/novatech/actions
Accessibility
- Semantic sections/roles, labeled controls, consistent focus states.
- Planned: automated audits with
cypress-axein CI.
Performance
- Largest Contentful Paint improved via:
- Critical CSS inlined for the hero
- Google Fonts preconnect + preload +
display=swap - Route-level code splitting (charts/motion only in
/showcase) - WebP logos at 120×40 with explicit dimensions + lazy loading
- Lighthouse CI thresholds (CI) target ≥0.90 on key categories (see
.lighthouserc/ LHCI config).
Generate locally:
npm run build
npm run lhci| Home | About | Security Feed |
|---|---|---|
 |
 |
 |
- 🧠 Handcrafted UI — no templates or UI kits
- 🎯 Built to demonstrate product thinking: performance, accessibility, maintainability
- 🧰 Includes PWA assets, favicons and manifest for installability checks
Looking for a frontend engineer who blends design clarity with engineering precision?
NovaTech bridges powerful tech with human-centered design — empowering digital growth with trust, speed and intelligence.