Dynamic Portfolio Website

Build a personal portfolio website that generates its content using JavaScript. The goal is to practice thinking in data instead of hardcoding HTML.

Learning Objectives

By the end of this activity, students should be able to:

• Store portfolio information in JavaScript objects and arrays.
• Generate sections dynamically using loops.
• Manipulate the DOM to display content.
• Write reusable JavaScript instead of duplicated HTML.
• Organize code into reusable functions.

The Big Idea

Requirements

Your portfolio website must contain the following sections:

• Navigation Bar
• Hero Section
• About Me
• Projects or Hobbies
• Contact Me
• Footer

Each section should be generated or populated using JavaScript where appropriate.

Instructions

Example

Instead of writing:

<div>Project 1</div>
<div>Project 2</div>
<div>Project 3</div>

Store the data:

const projects = [
    { name: "Project 1" },
    { name: "Project 2" },
    { name: "Project 3" }
];

Then generate the HTML:

const projectsContainer = document.getElementById("projects-container");

projects.forEach(project => {
    const projectCard = document.createElement("div");

    projectCard.className = "project-card";
    projectCard.textContent = project.name;

    projectsContainer.appendChild(projectCard);
});

Your HTML only needs a container:

<section>
    <h2>Projects</h2>
    <div id="projects-container"></div>
</section>

Requirements Checklist

Before submitting, make sure your project includes:

• Navigation Bar
• Hero Section
• About Me Section
• Projects or Hobbies Section
• Contact Me Section
• Footer
• At least one array of objects
• At least one loop (for or forEach)
• DOM manipulation
• At least one reusable function
• No repeated hardcoded project or hobby HTML

Expected Output

Your finished portfolio should:

• Display your personal information.
• Show projects or hobbies generated from JavaScript data.
• Look organized and readable.
• Demonstrate the use of loops instead of duplicated HTML.

The appearance is flexible, but the JavaScript logic is the focus of this activity.

What to Submit

Submit the following:

1. GitHub Repository Link or Google Drive Link containing your source code.
2. Screenshot or Google Docs Link showing the AI prompts you used while building the project.

Grading Rubric