Homework 3: Portfolio

A portfolio is a collection of your work that showcases your skills, experience, and accomplishments. In this homework, you will create a your own portfolio website with your knowledge of HTML, CSS, and JavaScript. You will be able to use this portfolio as a starting point for your own personal website, which you can continue to build on and improve throughout the course on your own time.

Installation & Basic Requirements

This project will use the following dependencies:

• TypeScript
• serve
• eslint/prettier

The starter code will provide a package.json file and dist folder for you to work in. You will run serve up your portfolio locally with the npm start script defined in the package.json file. This will be a good chance to apply TypeScript to web development contexts, and will help you get familiar with the types of DOM elements and types you will be working with.

You are free to install any other dependencies you would like to use for your portfolio, but make sure to include them in your package.json file so that we can install them when grading your submission. You are also free to use any CSS frameworks or libraries you would like to use for your portfolio, but make sure to include them in your package.json file as well.

Examples

While all you have to work with is HTML/CSS/JS, you can look to other portfolio websites for inspiration for the style and layout of your portfolio. Here are some examples of portfolio websites that you can look at for inspiration:

• Voravich Silapachairueng
• Brittany Chiang
• Michael Mannucci
• Joel Califa

Feel free to get creative! You can do a lot with basic HTML and CSS layouts, and you are free to install CSS frameworks or other libraries to help you with your design.

HTML

You should begin by implementing the HTML structure of your portfolio. You are required to make the following 4 pages as separate HTML files:

• A home page: This should be the main landing page of your portfolio.
• An about page: This should provide information about you and your background.
• A contact page: This should include a form for visitors to reach out to you.
• A projects page: This should showcase your projects and work.

Add content to these pages as you see fit. If possible, include real links to projects/project repositories and images of your work.

You will link these pages together with navigation links. Use the <a> tag to create links between your pages, and make sure to use relative paths to link to the other HTML files in your project. You should also include a navigation bar on each page that allows users to easily navigate between the different pages of your portfolio.

CSS

You may find it useful to work on your CSS alongside your HTML. You should maintain a consistent style across all pages of your portfolio, so it is important to have a clear and organized CSS structure. You can use a single CSS file for all pages, or you can use separate CSS files for each page. Make sure to link your CSS files in the <head> of each HTML file.

You should aim to create a visually appealing and user-friendly interface. We will not be grading or looking for "pretty" designs, but designs that are clear and easy to use. Make something that shows your own personality as a developer!

Your CSS should cover the following aspects:

• Makes use of at least one flexbox, if not more to properly layout elements
• Consider using a proper color scheme for your app, using built-in colors or hex/RGB codes
• Use at least 1 CSS variable (useful for aliasing color names and other values)
• Make use of the box model with proper margins, padding, and borders where applicable
• Use at least 1 CSS pseudo-class (e.g., :hover, :focus, :nth-child()) to style elements based on their state or position in the DOM
• BONUS: Uses media queries to create a responsive design for 3 different screen sizes (mobile, tablet, and desktop)

Functionality

Finally, implement the JavaScript functionality of your portfolio. This includes the following features:

• In your contact page, implement a form that allows users to submit their messages. Include a name, email, and message fields, and when a user submits, validate that the information isn't empty, and that the email is in the correct format. If a validation error occurs, error feedback should be given to the user. When the form is submitted, the message should be sent to your email address. (You don't need to implement full email sending, you may just use a mailto: link to your email)
• Include one interactive element that changes the UI of the page that uses JavaScript. This may be, for instance, a button that toggles between light and dark mode, a hamburger menu that opens/closes navigation links on mobile, or an image carousel.
• Include one dynamic element that updates based on user interaction or external data. For instance, the current year in the footer, a search bar for your skills from a JSON file, or some element that updates on scroll bar progress.

README

Answer the provided reflection questions within the starter code README file. In this reflection, you will also indicate whether or not you used AI, and also document your usage of AI as well. Please don't forget this step, as it is important feedback for the homework and the content of the course!

Submission

Submit your code through Gradescope as a .zip file that contains your project. Make sure your project includes all files you worked on during this homework and your README.md file, all config files for TS, eslint, and prettier, your test script, and the every JSON file used in the tests. You should NOT include the node_modules folder in the .zip file (feel free to delete it before submission), as it is quite heavy and we will reinstall the dependencies for grading anyways. Make sure the submitted file structure within your submission is exactly or similar to the file structure you used to run and develop the project. Points will be taken off for malformed project structures in the final submission!

Before you submit, make sure you lint your code for style errors using the command npm run lint. More details on style can be found in the style guide. We will take -1 points for every style error remaining in the submission for the submitted files. Since this project requires you to make your own ESLint, we will use your linting rules instead of the standard rules we would apply, so make sure you pass your own set of style rules!

For this homework, we've provided a rubric file named RUBRIC.md in the starter code. Make sure to read through it carefully and ensure that your submission meets all the requirements outlined in the rubric. This will help you maximize your score and ensure that you've covered all necessary aspects of the assignment.