Skip to content

Latest commit

 

History

2 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

Xun Zhu - Portfolio Website

A modern, responsive portfolio website showcasing my experience as a Software Engineer. Built with clean HTML, CSS, and JavaScript featuring smooth animations and a professional design.

🌟 Features

  • Responsive Design: Fully responsive across all devices (desktop, tablet, mobile)
  • Modern UI/UX: Clean, professional design with smooth animations
  • Interactive Navigation: Smooth scrolling navigation with active link highlighting
  • Mobile-Friendly: Hamburger menu for mobile devices
  • Performance Optimized: Throttled scroll events and optimized animations
  • Accessibility: Semantic HTML and proper color contrast

🚀 Quick Start

  1. Clone or Download this repository to your local machine
  2. Open index.html in your web browser
  3. That's it! The website is ready to view

📁 Project Structure

portfolio/
├── index.html          # Main HTML file
├── styles.css          # CSS styles and animations
├── script.js           # JavaScript functionality
└── README.md           # This file

🛠️ Technologies Used

  • HTML5: Semantic markup and structure
  • CSS3: Modern styling with Flexbox and Grid
  • JavaScript (ES6+): Interactive functionality
  • Font Awesome: Icons for social links and contact info
  • Google Fonts: Inter font family for typography

📱 Sections

  1. Hero Section: Introduction with name, title, and contact links
  2. About: Personal information and location details
  3. Education: Academic background and degrees
  4. Experience: Professional work experience with detailed achievements
  5. Projects: Featured projects with technology stacks
  6. Skills: Technical skills organized by categories
  7. Contact: Contact information and social links

🎨 Customization

Updating Personal Information

  1. Personal Details: Edit the hero section in index.html
  2. Experience: Update the experience timeline with your work history
  3. Projects: Replace the projects with your own work
  4. Skills: Modify the skills section to match your expertise
  5. Contact Info: Update contact details and social links

Styling Customization

  • Colors: Modify the CSS variables in styles.css
  • Fonts: Change the Google Fonts import in index.html
  • Layout: Adjust grid layouts and spacing in the CSS
  • Animations: Customize animations in the CSS and JavaScript

Adding New Sections

  1. Add the HTML structure in index.html
  2. Add corresponding styles in styles.css
  3. Update navigation links if needed
  4. Add any interactive functionality in script.js

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages