Create simple web portfolio with GitHub Codespaces support

[Copilot]

Overview

Built a complete, modern, and responsive web portfolio from scratch, specifically designed for seamless development with GitHub Codespaces. The portfolio is ready to use out-of-the-box with no build tools required.

What's Included

Core Portfolio Files

• index.html - Complete HTML structure with Hero, About, Projects, and Contact sections
• styles.css - Modern CSS with responsive design, animations, and gradient backgrounds
• script.js - Interactive JavaScript for mobile navigation, smooth scrolling, and scroll animations

Development Setup

• .devcontainer/devcontainer.json - Full GitHub Codespaces configuration with:

  • Live Server extension for instant preview
  • Prettier and ESLint for code quality
  • Pre-configured ports (5500, 3000, 8080)
  • Format on save enabled
  • Node.js LTS environment

• .gitignore - Properly excludes OS files, editor configurations, and build artifacts

• README.md - Comprehensive documentation with setup instructions and customization guide

Features

✨ Modern Design

• Clean, professional UI with purple/indigo gradient color scheme
• Smooth fade-in animations and transitions
• Hover effects on interactive elements

📱 Fully Responsive

• Mobile-first approach
• Hamburger menu for mobile devices
• Breakpoints for desktop (>768px), tablet (481-768px), and mobile (≤480px)

🚀 GitHub Codespaces Ready

• Zero configuration required
• Open in Codespaces and start coding immediately
• Live Server auto-configured for instant preview
• Helpful VS Code extensions pre-installed

🎯 Easy to Customize

• No build tools or framework dependencies
• Simple HTML, CSS, and JavaScript
• CSS variables for quick theme changes
• Clear section structure for easy content updates

Screenshots

Desktop View - Hero Section

Desktop View - About & Projects Sections

Desktop View - Contact Section

Mobile View - Responsive Design

How to Use

1. In GitHub Codespaces (Recommended):

   • Click "Code" → "Open with Codespaces" → "New codespace"
   • Wait for environment to initialize
   • Right-click index.html and select "Open with Live Server"
   • Portfolio opens in a new browser tab

2. Locally:

   • Clone the repository
   • Open index.html in a browser or use a local server
   • Start customizing with your own content

Customization

The portfolio is designed to be easily customizable:

• Personal info: Edit names, titles, and descriptions in index.html
• Skills: Update the skill tags in the About section
• Projects: Replace project titles, descriptions, and links
• Colors: Modify CSS variables in styles.css to match your brand
• Contact: Update email and social media links

Technical Details

• Pure web technologies: HTML5, CSS3, JavaScript (ES6+)
• No dependencies: No npm packages or build process required
• Browser support: All modern browsers (Chrome, Firefox, Safari, Edge)
• Accessibility: Semantic HTML with proper heading structure
• Performance: Lightweight (< 16KB total size)

---

Built with ❤️ for GitHub Codespaces development

Original prompt

a simple web portfolio intentioned to be developed with codespaces!

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.