Author: Danyan Gu
Email: gu.dany@northeastern.edu
Class: CS5610 Web Development: Class link
Semester: Spring 2026
Northeastern University
Live Website: Link to deployed website
Video Link: Link to YouTube Page
Google Slides: Link to presentation PPT
Design Document: Link to design document
This project is a personal portfolio website built with vanilla HTML5, CSS3, and ES6+ JavaScript modules. The website showcases my professional journey, technical skills, personal interests, and project portfolio in an engaging and interactive format.
Key Goals:
- Create a responsive, accessible, and visually appealing portfolio
- Demonstrate proficiency in modern web development technologies
- Implement interactive features using vanilla JavaScript
- Showcase creative design with custom animations and particle effects
- Provide a comprehensive overview of my career, skills, and personality
- Particle Background System: Custom-built particle animation engine using Canvas API and requestAnimationFrame for smooth, performant animations
- 3D Flip Cards: Interactive cards with 3D transformation effects showcasing education, skills, and navigation
- Interactive Timeline: Career journey visualization with hover-activated descriptions
- Honeycomb Project Grid: Image gallery with overlay effects and hover animations
- ES6+ Modules: Modular JavaScript architecture with import/export
- CSS Custom Properties: Theme system using CSS variables for consistent styling
- Responsive Design: Mobile-first approach using Flexbox and CSS Grid
- Semantic HTML5: Proper use of semantic tags (nav, article, section, etc.)
- Accessibility: Alt text for all images, proper ARIA labels
- Performance: Optimized animations using CSS transforms and requestAnimationFrame
Hero section with animated particle background and greeting cards
Interactive timeline and flip cards displaying career journey
Honeycomb grid layout showcasing portfolio projects
Colorful, playful design highlighting hobbies and interests
- Node.js (v14 or higher)
- npm (comes with Node.js)
- Modern web browser (Chrome, Firefox, Safari, or Edge)
-
Clone the repository
git clone https://github.com/Jihe377/personal-portfolio.git cd personal-portfolio -
Install dependencies
npm install
-
Run linting (optional, to check code quality)
npm run lint
-
Format code (optional, to ensure consistent formatting)
npm run format
-
Open the website
- Simply open
index.htmlin your browser - Or use a local server:
# Using Python 3 python -m http.server 8000 # Using Node.js http-server (install with: npm install -g http-server) http-server -p 8000
- Then navigate to
http://localhost:8000
- Simply open
personal-portfolio/
├── index.html # Home page
├── experience.html # Experience/Career page
├── projects.html # Projects showcase
├── life.html # Personal interests (AI generated)
├── css/
│ ├── main.css # Global styles and variables
│ ├── cards.css # Flip card components
│ ├── timeline.css # Timeline component
│ ├── animation.css # Keyframe animations
│ └── life.css # Life page specific styles
├── js/
│ ├── main.js # Main entry point
│ └── Particles.js # Particle system class
├── imgs/ # Images and assets
├── package.json # Project dependencies
├── .eslintrc.json # ESLint configuration
├── .prettierrc # Prettier configuration
├── LICENSE # MIT License
└── README.md # This file
This project leveraged Generative AI tools to accelerate development, improve code quality, and generate creative content. Below is a detailed account of all AI assistance used in this project.
- Version: Claude 3.5 Sonnet (December 2024)
- Platform: Claude.ai
Usage Details:
a) Code Development & Debugging
-
Prompts Used:
- "Help me create a particle animation system using Canvas API and vanilla JavaScript"
- "I'm having issues with my CSS flexbox layout where the timeline is not aligning properly with the flip cards. Here's my code..."
- "How can I implement 3D flip card animations using CSS transforms?"
- "My timeline items are not hovering correctly. Can you help debug this CSS issue?"
-
How It Was Used:
- Assisted in architecting the Particles.js class structure
- Provided solutions for CSS layout challenges
- Helped debug JavaScript module import/export issues
- Explained CSS properties like
perspective,transform-style: preserve-3d, andbackface-visibility - Suggested best practices for responsive design
b) Content Generation for Life Page
-
Prompts Used:
- "Generate creative, colorful hobby cards for a personal website about reading, fitness, and loving pets"
- "Create fun facts and quotes for a 'Life' section of a portfolio website"
-
How It Was Used:
- Generated the initial HTML structure and content for life.html
- Created the colorful, playful design concepts for hobby cards
- Suggested animations and visual effects for the Life page
Fully AI-Generated:
- Life page (life.html and life.css) - Content and design concepts
- Fun facts section text
- Quote in the Life page
AI-Assisted:
- Particle animation system architecture (human-written with AI guidance)
- CSS layout solutions (human-implemented with AI suggestions)
- README documentation (human-edited with AI drafts)
Fully Human-Created:
- Overall website design and color scheme
- Personal content (career history, education, skills)
- Project descriptions and portfolio items
- All HTML structure and semantic markup decisions
- Final code organization and file structure
This project is licensed under the MIT License - see the LICENSE file for details.
- Live Website: https://jihe377.github.io/personal-portfolio/
- GitHub Repository: https://github.com/Jihe377/personal-portfolio
- LinkedIn: Danyan Gu
- Email: gu.dany@northeastern.edu
- Northeastern University CS5610 for project guidelines and requirements
- Claude AI for development assistance and content generation
- Google Fonts for Playfair Display and Work Sans typefaces
- MDN Web Docs for comprehensive web development documentation