Modern, responsive personal website showcasing my background in software engineering and chess.
- Modern Design: Clean, professional design with smooth animations and transitions
- Dark Mode: Toggle between light and dark themes with persistent preference storage
- Responsive: Fully responsive design that works on all devices
- Performance: Optimized with modern web standards and best practices
- Accessibility: WCAG AA compliant with proper semantic HTML
- Bootstrap 5.3.2: Modern CSS framework
- Font Awesome 6.5.1: Icon library
- Google Fonts: Inter & Poppins typography
- Vanilla JavaScript: No jQuery dependency
- CSS Variables: Dynamic theming support
- Hero: Eye-catching introduction with gradient background
- About: Personal introduction and background
- Projects: Card-based showcase of college projects
- Chess: Chess career highlights and resources
- Contact: Social media links and contact information
- Smooth scroll navigation
- Fade-in animations on scroll
- Hover effects on interactive elements
- Card-based project layouts with image zoom effects
- Glass morphism effects on navigation
- Responsive typography with clamp()
- Custom CSS variables for easy theming
The website includes a fully functional dark mode that:
- Persists user preference in localStorage
- Smoothly transitions between themes
- Adjusts all colors, shadows, and contrasts
- Accessible toggle in the navigation bar
- Mobile: < 576px
- Tablet: 576px - 991px
- Desktop: > 991px
The website uses:
- Semantic HTML5
- Modern CSS3 (Grid, Flexbox, Variables)
- ES6+ JavaScript
- Bootstrap 5 (no jQuery required)
├── index.html # Main HTML file
├── assets/
│ ├── site.css # Custom styles
│ ├── site.js # Interactive features
│ └── back.svg # Background SVG
├── *.jpg, *.png # Project images
└── README.md # This file
- Upgraded from Bootstrap 3 to Bootstrap 5
- Removed jQuery dependency
- Implemented modern design with improved UX
- Added dark mode support
- Improved accessibility and performance
- Redesigned with card-based layouts
- Added smooth animations and transitions
- Email: yliou@berkeley.edu
- GitHub: github.com/yliou
- LinkedIn: linkedin.com/in/yian-liou-2255748a
Built with ❤️ by Yian Liou