LensEye is a simple, static, exploratory website created as a school project to experiment with basic front‑end concepts: semantic HTML, modular CSS, lightweight JavaScript, asset organization, and readable project structure. It is NOT a production application and does not process real data; all content is illustrative.
- Overview
- Features & Pages
- Tech Stack
- Project Structure
- Getting Started
- Assets & Fonts
- Limitations
- Possible Improvements
- Contributing
- Educational Notice & Licensing
The goal of this project was to practice:
- Organizing a multi‑page static site
- Separating page‑specific styles into dedicated CSS files
- Using simple JavaScript for page interactivity/statistics
- Managing fonts and image assets in logical folders
- Keeping the codebase easy to navigate for classmates and evaluators
Located under HTML/ plus a root index.html:
index.html: Entry point / landing layout.home.html: General introduction section.products.html: Showcase of mock eyewear products (static samples).stadistics.html: (Typo preserved from original) Simple statistics view driven byJS/stadistics.js.about_us.html: Brief team / mission explanation (placeholder content).contact.html: Static contact info (no real form backend).
Pure front‑end:
- HTML5 (semantic sections where possible)
- CSS3 (page‑specific styles in
CSS/) - Vanilla JavaScript (no build step, files in
JS/) - Local fonts (Montserrat, Open Sans) included under
Fonts/
No external frameworks, bundlers, or package managers are used.
index.html
HTML/
about_us.html
contact.html
home.html
products.html
stadistics.html
CSS/
index.css
home.css
products.css
stadistics.css
about_us.css
contact.css
JS/
index.js
home.js
stadistics.js
Fonts/
Montserrat/ (OFL.txt, README.txt, static/)
OpenSans/ (OFL.txt, README.txt, static/)
Images/
Banner/ Effects/ Glasses/
Since this is static, you only need a browser.
Option A – Open directly:
- Double‑click
index.htmlor open it via your browser.
Option B – Simple local server (recommended for consistent relative path handling):
# Python 3 (if available)
python -m http.server 8000
# Then visit: http://localhost:8000/On Windows with VS Code, you can also use an extension like "Live Server" to auto‑reload changes.
- Fonts are sourced from publicly available distributions (Montserrat & Open Sans). Their respective Open Font License (OFL) files are included in
Fonts/. - Images are placeholders for demonstration only; no commercial usage intended.
- No responsive testing beyond basic layout; mobile experience may be incomplete.
- No accessibility audit; ARIA roles and contrast may need improvement.
- No form handling or backend integration.
- Statistics page logic is minimal and not backed by real data.
- Add responsive breakpoints (mobile & tablet styles).
- Improve accessibility (alt text review, keyboard focus states, color contrast).
- Introduce a simple build step (minification) if scaling.
- Replace placeholder content with researched copy.
- Add a lightweight dark mode toggle using CSS variables.
This is a school exploration project; outside contributions are not expected. If used as a learning reference, feel free to fork and adapt. Please keep educational attribution.
This repository is for educational purposes only. It carries no warranty. Fonts retain their original OFL licensing (see included OFL.txt files). Other original content here can be reused for learning with attribution to the project author (GabMacN) unless replaced by proprietary assets.
Feel free to open issues for questions or clarifications related to the educational setup.