Tianhao Luo - Personal Website

A modern, responsive personal website showcasing Tianhao Luo's profile, gallery, and documents.

🌟 Features

Design & Layout

• Modern, Professional Design: Clean and contemporary UI with beautiful typography
• Fully Responsive: Optimized for desktop, tablet, and mobile devices
• Smooth Animations: CSS animations and scroll-triggered effects
• Interactive Elements: Hover effects, transitions, and dynamic content

Sections

1. Hero Section: Eye-catching introduction with profile image and call-to-action buttons
2. About Section: Professional description with highlighted achievements
3. Gallery: Interactive photo gallery with modal lightbox functionality
4. Documents: Easy access to CV/Research documents and transcript
5. Contact: Contact form and information section
6. Footer: Simple footer with navigation links

Interactive Features

• Mobile Navigation: Hamburger menu for mobile devices
• Smooth Scrolling: Navigation links scroll smoothly to sections
• Image Gallery Modal: Click on gallery images to view them in full size
• Contact Form: Functional contact form with validation
• Scroll Animations: Elements animate into view as you scroll
• Active Navigation: Current section is highlighted in navigation

📁 File Structure

Tianhao Website/
├── index.html          # Main HTML file
├── styles.css          # Comprehensive CSS styling
├── script.js           # JavaScript functionality
├── README.md           # This documentation file
├── CV Research.pdf     # Curriculum Vitae and Research portfolio
├── Transcript.pdf      # Academic transcript
├── DSC02098.JPG       # Profile/Gallery image 1
├── DSC02239.JPG       # Gallery image 2
├── DSC02958.JPG       # Gallery image 3
└── DSC03429.JPG       # Gallery image 4

🚀 How to Use

1. Open the Website: Simply open index.html in any modern web browser
2. Navigate: Use the navigation menu to jump to different sections
3. View Gallery: Click on any image in the gallery to view it in full size
4. Download Documents: Click the download buttons in the Documents section to view PDFs
5. Contact: Fill out the contact form to send a message

🎨 Customization

Colors

The website uses a modern color palette:

• Primary Blue: #2563eb
• Secondary Purple: #7c3aed
• Background Gray: #f8fafc
• Text Colors: Various shades of gray for hierarchy

Fonts

• Primary Font: Inter (Google Fonts)
• Icons: Font Awesome 6.0

Modifying Content

Update Profile Information

Edit the index.html file:

• Change the name in the navigation logo and hero section
• Update the about section description
• Modify contact information

Add/Remove Gallery Images

1. Add new images to the folder
2. Update the gallery section in index.html with new image references
3. Ensure images are optimized for web (recommended: under 1MB each)

Update Documents

1. Replace CV Research.pdf and Transcript.pdf with new files
2. Update the document titles and descriptions in the HTML if needed

🔧 Technical Details

Browser Compatibility

• Chrome (recommended)
• Firefox
• Safari
• Edge
• Mobile browsers

Dependencies

• Google Fonts (Inter)
• Font Awesome Icons
• No JavaScript frameworks required

Performance

• Optimized CSS with modern techniques
• Efficient JavaScript with event delegation
• Responsive images and lazy loading ready

📱 Mobile Features

• Touch-friendly navigation
• Optimized image sizes for mobile
• Responsive form layout
• Mobile-specific animations

🎯 SEO Features

• Semantic HTML structure
• Proper heading hierarchy
• Alt text for images
• Meta tags for search engines

💻 Development Notes

CSS Features Used

• CSS Grid and Flexbox for layouts
• CSS Variables for consistent theming
• CSS Animations and Transforms
• Media queries for responsive design
• CSS backdrop-filter for modern effects

JavaScript Features

• Modern ES6+ syntax
• Intersection Observer API for scroll animations
• Event delegation for performance
• Form validation and notification system

🚀 Going Live

To make this website live on the internet:

1. GitHub Pages: Upload to a GitHub repository and enable GitHub Pages
2. Netlify: Drag and drop the folder to Netlify for instant hosting
3. Vercel: Connect your repository for automatic deployments
4. Traditional Hosting: Upload files to any web hosting service

📄 License

This website template is free to use and modify for personal purposes.

---

Created with ❤️ for Tianhao Luo

For any questions or modifications, feel free to edit the code directly or reach out for assistance.