|
1 | | -# CeradonSystemsWebsite |
| 1 | +# Ceradon Systems Marketing Site |
| 2 | + |
| 3 | +A static, tactical marketing presence for Ceradon Systems and the Vantage product line. Built with Vite, vanilla JavaScript, and Tailwind via CDN to keep the footprint lean and deployment-ready for air-gapped environments. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- Dark, high-contrast UI aligned with Ceradon brand assets. |
| 8 | +- Vector-only brand assets (SVG) so the repo stays text-diff friendly in restricted pipelines. |
| 9 | +- Shared sticky header with responsive logo swap, accessible mobile nav, and footer links populated from JavaScript. |
| 10 | +- Seven content pages covering product, technology, company, IP, careers, contact, and privacy. |
| 11 | +- Offline-friendly contact workflow that copies the inquiry to the clipboard and launches a mailto link—no backend dependencies. |
| 12 | +- Assets, gallery placeholders, and diagram scaffolding ready for future pose-visualization overlays. |
| 13 | +- Robots and sitemap metadata for search hygiene, plus Open Graph/Twitter cards on every page. |
| 14 | + |
| 15 | +## Getting Started |
| 16 | + |
| 17 | +```bash |
| 18 | +npm install |
| 19 | +npm run dev |
| 20 | +``` |
| 21 | + |
| 22 | +The dev server runs at `http://localhost:5173` by default. All HTML pages are entry points; navigate directly to `/vantage.html`, `/technology.html`, etc. |
| 23 | + |
| 24 | +### Production Build |
| 25 | + |
| 26 | +```bash |
| 27 | +npm run build |
| 28 | +``` |
| 29 | + |
| 30 | +The static output is emitted to `dist/`. Serve the directory via any static host. No server-side processing is required. |
| 31 | + |
| 32 | +## Project Structure |
| 33 | + |
| 34 | +``` |
| 35 | +assets/ Brand images, gallery placeholders, architecture diagram stub |
| 36 | +src/main.js Initializes shared UI (nav states, mobile menu, contact form) |
| 37 | +src/ui.js Navigation logic, focus trapping, footer hydration |
| 38 | +styles/styles.css CSS variables, component overrides, focus styles |
| 39 | +*.html Individual marketing pages with shared header/footer |
| 40 | +robots.txt Basic crawler directives |
| 41 | +sitemap.xml Search indexing map |
| 42 | +vite.config.js Vite multi-page configuration |
| 43 | +``` |
| 44 | + |
| 45 | +## Accessibility & Performance |
| 46 | + |
| 47 | +- WCAG-compliant contrast with visible focus states and keyboard-friendly navigation. |
| 48 | +- Mobile menu includes overlay dismissal, ESC handling, and focus trapping. |
| 49 | +- Lazy-loading applied to gallery imagery. No third-party trackers are included. |
| 50 | +- Design keeps payload small for quick loads over limited links. |
| 51 | + |
| 52 | +## Customization Notes |
| 53 | + |
| 54 | +- Tailwind runs via CDN with a small configuration snippet in each page head for color tokens. |
| 55 | +- Update `FOOTER_LINKS` in `src/ui.js` if you add or rename pages; header markup must remain in sync with the provided snippet. |
| 56 | +- Replace placeholder imagery in `assets/` (`diagram.svg`, gallery files, founder portrait, map) with production visuals as they become available. |
| 57 | +- Extend the contact workflow with secure form handling when a backend endpoint is approved; current behavior is clipboard + mailto by design. |
| 58 | + |
0 commit comments