Build a Portfolio Website from Your Resume with GitHub Copilot
Ashley Steitz and Ahmed Ghaddah walk through a beginner-friendly workflow for generating and refining a personal portfolio site using GitHub Copilot.
Overview
This episode demonstrates how to:
- Review a sample resume and use it as the source material for a portfolio site.
- Open the GitHub Copilot app and write a prompt that guides Copilot to ask clarifying questions.
- Upload the resume, choose a design direction, and generate a starter site.
- Generate the initial site files:
- HTML
- CSS
- JavaScript
- Open the generated files and preview the website.
- Add a resume preview interaction (preview on hover).
- Personalize the site styling (for example, applying school colors).
- Add dark mode and light mode.
- Add sun and moon icons to a theme switcher.
- Ask Copilot for improvements and iterate on the result.
Series context and resources
- Series page (Episode 3 and full series): https://aka.ms/student-learning-series-website
- Download prompts, code, and episode artifacts: https://aka.ms/student-learning-series
- Learn more about GitHub Copilot: https://aka.ms/StudentAI-GitHubCopilotApp
Episode outline (timestamps)
- 0:00 Welcome and what you'll build
- 0:31 Reviewing the sample resume
- 1:11 Opening the GitHub Copilot app
- 2:03 Writing the prompt and asking clarifying questions
- 3:00 Uploading the resume and choosing a design
- 5:02 Generating the HTML, CSS, and JavaScript
- 7:01 Opening the generated files and website
- 8:01 Adding a resume preview on hover
- 9:01 Customizing the site with school colors
- 10:00 Adding dark and light modes
- 11:00 Adding sun and moon icons to the theme switcher
- 12:02 Asking Copilot for improvements and wrapping up