Modern, responsive company landing page for MonTechs — built with React 18 + Vite.
- ⚡ Vite — lightning-fast dev server & optimized build
- ⚛️ React 18 — functional components, hooks, context API
- 🌗 Dark / Light theme — persisted via
localStorage, syncs with OS preference - 🌐 Bilingual (EN / VI) — language toggle persisted via
localStorage - 📱 Fully Responsive — mobile-first CSS, no external UI framework
- 🎨 CSS Design Tokens — centralized color & spacing system via CSS variables
- 🔝 Scroll-to-Top button — smooth UX on long pages
- 📦 Zero runtime dependencies beyond React itself
montechs-site/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ ├── Header/ # Sticky nav, language & theme toggles
│ │ ├── Hero/ # Hero banner section
│ │ ├── Services/ # Services offered
│ │ ├── Projects/ # Featured projects showcase
│ │ ├── TechStack/ # Technologies used
│ │ ├── About/ # About MonTechs
│ │ ├── Testimonials/ # Client testimonials
│ │ ├── Contact/ # Contact form section
│ │ ├── Footer/ # Site footer
│ │ ├── ScrollToTop/ # Floating scroll-to-top button
│ │ └── ThemeToggle/ # Dark/Light mode toggle button
│ ├── context/
│ │ ├── ThemeContext.jsx # Global theme state & toggle
│ │ └── LangContext.jsx # Global language state & toggle
│ ├── styles/
│ │ └── global.css # Global styles
│ ├── App.jsx
│ └── main.jsx
├── css/
│ ├── tokens.css # CSS design tokens (colors, spacing, etc.)
│ └── reset.css # CSS reset
├── index.html
├── vite.config.js
└── package.json
- Node.js 18+
- npm 9+
# Clone the repository
git clone https://github.com/Monkez/MonTechs-LandingPage.git
cd MonTechs-LandingPage
# Install dependencies
npm install
# Start development server (http://localhost:3000)
npm run devnpm run buildOutput is generated in the dist/ folder.
npm run preview- Push this repo to GitHub
- Go to vercel.com → New Project → Import
MonTechs-LandingPage - Vercel auto-detects Vite — no extra config needed
- Click Deploy ✅
Or via Vercel CLI:
npm i -g vercel
vercel --prodConfiguration file: vercel.json
- Go to render.com → New Static Site
- Connect your GitHub repo
Monkez/MonTechs-LandingPage - Set:
- Build Command:
npm run build - Publish Directory:
dist
- Build Command:
- Click Create Static Site ✅
Configuration file: render.yaml
The app uses a CSS variable-based token system. Theme is toggled via data-theme attribute on <html>:
[data-theme="dark"] { --bg-primary: #0d0d0d; ... }
[data-theme="light"] { --bg-primary: #ffffff; ... }Theme preference is persisted in localStorage under key mt_theme.
Two languages supported: English (en) and Vietnamese (vi).
Toggle is available in the Header. Preference is persisted in localStorage under key mt_lang.
| Technology | Version | Purpose |
|---|---|---|
| React | 18.3 | UI framework |
| Vite | 5.4 | Build tool & dev server |
| CSS Variables | — | Design token system |
| React Context | — | Theme & language state |
MIT © MonTechs