Modernize Your Portfolio with Bootstrap and GitHub Copilot

Gwendolyn Vongkasemsiri and Garrett Berliner walk through a practical refresh of a portfolio website using GitHub Copilot and Bootstrap 5.

Overview

The video demonstrates how to modernize an existing portfolio site by prompting GitHub Copilot for design and interaction improvements, then implementing the changes with Bootstrap 5.

What they improve

• Responsive layout updates using Bootstrap 5
• More accessible navigation
• Animated cards for portfolio items
• Hover animations and shadow styling
• Converting a skills list into badge-style UI
• Adding a footer link back to the top
• Making the footer sticky

How Copilot is used

• Reviewing the current site and identifying UI/UX gaps
• Asking Copilot for modernization options
• Comparing approaches (Bootstrap vs Tailwind CSS vs web components)
• Prompting Copilot to implement the chosen approach (Bootstrap 5)
• Iterating on styling details (animations, hover effects, shadows, badges, footer behavior)

Episode context and resources

• Series: Build your personal brand with Copilot (Episode 9 of 10)
• Continue the series: https://aka.ms/student-learning-series-website
• Prompts, code, and episode artifacts: https://aka.ms/student-learning-series
• Learn more about GitHub Copilot: https://aka.ms/StudentAI-GitHubCopilotApp

Presenters

• Gwendolyn Vongkasemsiri (Cybersecurity Program Manager at Microsoft): https://www.linkedin.com/in/cyb3rvalkyrie/
• Gwendolyn on YouTube: https://www.youtube.com/@cyb3rvalkyrie
• Garrett Berliner (Technical Program Manager at Microsoft): https://www.linkedin.com/in/garrettberliner/