https://github.com/juaniv2002/personal_website

My personal portfolio site – a responsive, accessible, and SEO-optimized static website built with HTML, CSS & vanilla JavaScript, showcasing Flutter, Moodle and full-stack projects.
https://github.com/juaniv2002/personal_website

github-pages portfolio-website projects showcase-website

Last synced: 7 months ago
JSON representation

My personal portfolio site – a responsive, accessible, and SEO-optimized static website built with HTML, CSS & vanilla JavaScript, showcasing Flutter, Moodle and full-stack projects.

• Host: GitHub
• URL: https://github.com/juaniv2002/personal_website
• Owner: JuaniV2002
• Created: 2025-05-20T18:50:05.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2025-06-07T03:38:43.000Z (8 months ago)
• Last Synced: 2025-06-07T04:27:03.107Z (8 months ago)
• Topics: github-pages, portfolio-website, projects, showcase-website
• Language: HTML
• Homepage: http://juani.me/
• Size: 2.94 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Juani Villanueva – Personal website

![Lighthouse 100/100 Audit](assets/images/lighthouse_100_audit.jpg)

Welcome to my personal portfolio website!  

This project showcases my journey as a Computer Science student and web developer, with a focus on responsiveness, modern web interface, and a refined, user-centric experience.

---

## Features

- **Modern Glassmorphism Design**  

  Sleek, frosted-glass cards, headers, and buttons throughout—delivering a fresh, high-end, and accessible look.

- **100% Responsive**  

  Crafted from the ground up to look and work perfectly on any device—desktop, tablet, or mobile. No breakpoints left behind.

- **Consistent Design Language**  

  Every element aligns to a strict system of spacing, corner radius, and typography—no jarring visual jumps, just smooth, predictable UX.

- **Responsive Light/Dark Mode**  

  Your eyes, your rules. The entire UI adapts seamlessly for light and dark preferences—automatically.

- **Fluid Animations**  

  Subtle, performant transitions and hover effects everywhere—smooth bento grid reveal, glassy button glows, and playful card pops.

- **SEO & Accessibility First**  

  - [x] **100/100 Lighthouse scores** (Performance, Accessibility, Best Practices, SEO)  

  - ARIA labels and semantic HTML, to be usable by everyone.

  - Open Graph & Twitter Card metadata for rich sharing.

- **Zero Frameworks**  

  No React, Vue, or Svelte.  

  Just pure, hand-crafted HTML, CSS, and JavaScript. Lean, portable, and fast.

---

## Tech Stack

- **HTML5** – Semantic, accessible structure.

- **CSS3** – Modern layout (Grid, Flexbox), custom properties, glassmorphism, dark mode, responsive breakpoints.

- **JavaScript (ES6+)** – Animations and interactivity.