Workshop 2: Portfolio Website Workshop

Welcome to the Portfolio Website Workshop! This hands-on session will teach you how to further enhance your portfolio using javascript.

Instructor

Ashley Lai - Tech Lead, Computer Science + Economics Sophomore.

What You'll Learn

• JavaScript Basics: DOM manipulation, event handling, and interactivity

What You'll Accomplish

By the end of this workshop, you'll have created:

• A professional portfolio homepage
• Responsive design that works on mobile and desktop
• Modern styling with gradients and animations
• Clean, semantic HTML structure
• Interactive JavaScript features, such as dynamically adding and displaying projects, dark/light mode toggle for user preference, and typing animation effect for your name or key headings
• A live website you can share with others (if time permits)

Project Structure

Workshop1/
├── index.html          # Main HTML file
├── style.css           # CSS styling
├── assets/             # Images and fonts
│   ├── head.jpg        # Profile picture
│   ├── todolist.png    # To do list picture
│   ├── budget.png      # Budget tracker picture    
│   ├── github.png      # GitHub icon. We might add this if we have time
└── README.md           # This file. 

Getting Started

Prerequisites

• A text editor (VS Code). We will install this.
• A web browser (Chrome, Firefox, Safari, or Edge)

Setup Instructions

1. Download the project files to your computer, or use Git.
2. Open index.html in your web browser to see the current design
3. Open the files in your text editor to start coding
4. Refresh your browser after making changes to see updates

Join our AnchorLink and follow us on Instagram to learn more!