Skip to content

gabmacn/project-lenseye-website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LensEye – Exploratory Mock Website

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.

Table of Contents

  1. Overview
  2. Features & Pages
  3. Tech Stack
  4. Project Structure
  5. Getting Started
  6. Assets & Fonts
  7. Limitations
  8. Possible Improvements
  9. Contributing
  10. Educational Notice & Licensing

1. Overview

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

2. Features & Pages

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 by JS/stadistics.js.
  • about_us.html: Brief team / mission explanation (placeholder content).
  • contact.html: Static contact info (no real form backend).

3. Tech Stack

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.

4. Project Structure (simplified)

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/

5. Getting Started

Since this is static, you only need a browser.

Option A – Open directly:

  1. Double‑click index.html or 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.

6. Assets & Fonts

  • 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.

7. Limitations

  • 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.

8. Possible Improvements

  • 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.

9. Contributing

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.

10. Educational Notice & Licensing

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.

About

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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors