Project 1: Personal Portfolio Website

Step 1: Set Up Your Development Environment

Before you start coding, make sure you have:

• A GitHub account (free) - you'll need this for deployment
• A code editor like VS Code (recommended)
• Basic familiarity with using AI tools like GitHub Copilot or ChatGPT
  • Note: You can use browser-based AI tools like those on https://chatgpt.com/, https://claude.ai/, or https://gemini.google.com/, or you can use tools integrated with your code editor
  • We recommend using browser-based AI here unless you are already familiar with integrated tools. You'll likely notice some limitations and inconveniences from working in a limited chat environment, but these are good to be aware of.
  • Be mindful of your rate limits for whichever AI models you choose. Check your usage regularly, spread out your work across a few days, and be aware of when your rates reset.

Pro Tip: Enable GitHub Pages on your repository from the start - it's easier to set up early! (We'll discuss some of this in lecture, but we won't always give you step-by-step instructions for each assignment, so you should use your resources (including but not limited to AI) to achieve your goals. We strongly recommend office hours if you get stuck.)

Step 2: Plan Your Portfolio Structure

Start with a simple sketch or outline of what you want your site to include. Here are a few example features that you will probably want, though you may wish to add more:

• Navigation: You should have a navigation bar or other means of easily traversing your page
• Brief Introductory Section: Your name, brief intro, maybe a photo
• About Section: More details about who you are, your interests, skills
• Projects Section: Decide what information you want to include for each project (Include a description, at least one screenshot, and a link to the code when applicable)
• Contact Section: Email, GitHub, optionally LinkedIn or any other socials, maybe a contact form if you're feeling ambitious.

Step 3: Build Incrementally

Don't try to build and deploy everything at once. Follow this progression, and test locally as you go:

1. Basic HTML First: Create the basic structure and content
2. Styling (CSS etc.) Second: Make it look professional and responsive
3. (Optional) JavaScript: Add interactivity (animations, dark mode, etc.)
4. Polish: Optimize the user experience and clean up your code

Remember: Use AI to help with each step, but understand what the code does and modify it to fit your needs.

Step 4: Deploy and Test

Once you have a basic version working:

• Push your code to GitHub
• Enable GitHub Pages in your repository settings
• Test your live site on different devices and browsers
• Get feedback from classmates or friends

Your project will be graded on the following criteria:

• Required Content: All of the Content Requirements listed above are present and demonstrate reasonable effort.
• Design and Aesthetics: Evidence of effort to create a a clean, professional appearance with consistent styling.
• Technical Implementation & Deployment: Valid HTML/CSS; responsive design works on multiple devices; live on GitHub Pages; all links work; site loads properly; no broken functionality
• AI Usage & Documentation: AI usage documented in code comments and prompt log; code shows understanding and modification of AI suggestions

1. Check-in meeting with a TA (week 2) to get pre-deadline feedback. We'll send info on how to sign up for a time in a few days.
2. Project interview (on or shortly after the deadline). We'll be looking to see that you can describe your work transparently and take ownership of your creativve decisions.

Submit your project by the due date by ensuring your website is live and that you have submitted the Project 1 Google Form where you will share:

• The public-facing URL for your completed website
• A link to the github repository for your code, which must be accessible to all TAs and faculty (either make the repository public, or make it private and send collaborator invitations to each TA/faculty)
• A copy of your prompt log uploaded to your github repository: This is a text document that contains the prompts you used (simply copy-pasted) and the replies you received. This helps to document your process so that you can reflect on it later. Note: Your prompt log doesn't need to include the actual AI-produced files or any attached context; just the conversational text.
• This form will be how you tell us where your website is so it is very important that you complete it on time!

When you present your work, you should be prepared to discuss some or all of the following topics:

• What you learned about web development
• How you used AI tools in your process (and which ones you used)
• Challenges you faced and how you overcame them
• What you're proud of in your portfolio

What if I don't have any projects to showcase yet?

That's okay! If you have a 112 project, use that as your first example. Otherwise, include this portfolio website or a placeholder as your first project. You can add more as the semester progresses.

How do I deploy my site to GitHub Pages?

In short: Create a GitHub repository, push your code, go to Settings > Pages, select the main branch as source, and your site will be live at https://yourusername.github.io/repositoryname.

Can I use website templates or copy code, images, or text from other sources?

You can use templates as a starting point, but you must understand and modify the code yourself. Document any AI or external help in your code comments. You do not need to cite help from Prof. Taylor or the 15-113 TAs. Your page should include clearly visible citations for any images, text, or website templates.

What if my site doesn't look good on mobile?

It's ok if it doesn't look fantastic, but it should be reasonably functional, and AI can help with making your code responsive. Make sure to test on different devices and adjust for smaller screens if necessary.

Do I need to know JavaScript for this project?

No, JavaScript is optional for basic functionality, though it can help you add interactive features. Focus on HTML and CSS first, and add JS for interactivity if you have time.

What if I already have a portfolio website?

That's great! You have two options:

• Option 1: If your site meets all of the requirements for this assignment, you may use it as a starting point, but you should make some sort of major improvement to it with the help of AI. It is ok if this site is not served from Github Pages, but the code must be on Github somewhere and we must be able to easily find the repository from your webpage.
• Option 2: Make a new site from scratch that meets the requirements for this assignment. (Naturally, it's up to you whether or not you wish to use it as your main portfolio moving forward.)