How to Build a Developer Portfolio with GitHub Copilot and Pages

Most developer portfolios rely on the same handful of static HTML templates, leading to a sea of identical grid layouts and generic color schemes. The solution is not to download another pre-built template, but to use GitHub Copilot to generate custom layouts and styles tailored to your projects. Using a template means you inherit someone else's structural choices, making it difficult to highlight unique project aspects.

A GitHub Pages developer portfolio is a static showcase of a developer's work, easily constructed through targeted prompts in GitHub Copilot. This method allows you to construct a custom site without starting from scratch. Instead of spending hours writing boilerplate HTML structure or fighting CSS alignments, you describe the layout you want, and the assistant drafts the base files.

Using an AI assistant to build your site shifts the focus from writing repetitive markup to refining design and hierarchy. You can request custom interactive elements, such as dynamic project filters or modal windows, that would take hours to configure manually. Curated community repositories like emmabostian/developer-portfolios serve as inspiration for developer portfolios, but using AI allows you to customize the layouts to match your projects.

GitHub Copilot supports quick styling generation with Tailwind CSS or custom CSS. To get the best results, you must write descriptive prompts that specify layout columns, spacing, colors, and responsive breakpoints. Writing a vague prompt like "create a portfolio" results in generic code. Instead, specify the exact sections, semantic HTML5 tags, and layout relationships you need.

For the index structure, start with a clean semantic prompt. Open a blank file named index.html and write a prompt in your code editor.

Here is an example prompt for the page structure:

<!-- Create a responsive developer portfolio page with a fixed navigation bar, a hero section containing a profile photo placeholder, a three-column project grid with hover effects, an about section, and a contact section. Use Tailwind CSS via CDN. -->

The code generator will produce a complete layout. Once you have the base HTML, you can prompt the assistant to add specific CSS classes or components.

For styling custom layouts, you can prompt the assistant inside your stylesheet or inline markup:

<!-- Add a custom hover transition to these project cards that lifts the card slightly, adds a subtle dark shadow, and changes the border color to blue. -->

By requesting specific layout patterns, you avoid the cookie-cutter appearance of standard downloads. You can customize navigation transitions, design layout cards with distinct border styles, or configure custom typography hierarchies.

Before publishing your site, you must build the local file structure and test it inside a browser environment. This ensures that all link paths are correct, styles load as expected, and interactive features function properly.

First, prepare a clean local workspace directory on your machine. Create three files: index.html for your markup, styles.css for custom style rules, and app.js for custom interactive logic. Open this directory in your code editor with the AI assistant active.

Second, generate the markup structure. Open the HTML file and write a comment describing the header, hero section, project gallery, and footer. Let the assistant generate the file, then review the output to make sure it uses clean tags.

Third, run a local development server to preview the site. You can use a code editor extension like Live Server, or run a local Python command in your terminal:

python3 -m http.server 8000

Open your browser and navigate to http://localhost:8000. Test the responsiveness by resizing the window, checking that your project cards stack correctly on smaller screen sizes.

If a component does not display correctly, highlight the problematic code block and ask the assistant for correction. For example, if your layout cards misalign on mobile, highlight the grid section and ask how to fix the responsive columns. Once the local preview displays correctly on desktop and mobile formats, the portfolio is ready for publication.

Manage developer assets in one shared workspace

Store your portfolio assets, project files, and design mockups in a secure workspace with version history, semantic search, and an MCP-ready server for your coding tools. Starts with a 14-day free trial.

Start 14-Day Trial

GitHub Pages is "a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website." GitHub Pages hosting is entirely free for public repositories, making it an excellent platform for hosting personal developer portfolios.

Here is a numbered list of the setup steps required to publish your site:

1. Create a public repository on GitHub. To host the site at your default domain, name the repository <username>.github.io, replacing <username> with your GitHub account name.
2. Set up your local git repository. Open your terminal in your workspace folder, initialize git, commit your files, and link the local directory to your remote GitHub repository.
3. Push the files to the remote main branch. Run the push command to upload your HTML, CSS, and asset files.
4. Configure GitHub Pages in repository settings. Navigate to your repository page on GitHub.com, select the Settings tab, click the Pages menu, choose the Deploy from a branch option, select the main branch as your source, and click Save.
5. View your live website. Within minutes, your site will be live at the provided deployment URL.

Once configured, every push to the main branch automatically updates your portfolio site, allowing you to showcase new projects instantly.

While GitHub Pages handles the static hosting of your site, developers need a place to store, version, and manage the raw source assets that go into their portfolios. These assets include high-resolution project screenshots, raw design documents, PDF resumes, demo videos, and codebase archives.

Initially, developers often store these assets in local folders, standard cloud storage buckets, or Google Drive. However, local storage offers no protection against hard drive failure, and standard cloud sync tools lack the version tracking needed when collaborating with external developers or coding assistants. If a coding agent overwrites an asset file, restoring a previous version becomes difficult.

For developers working with coding tools, Fastio provides persistent shared workspaces that resolve these issues. By storing your raw portfolio assets in a Fastio workspace, you can manage them alongside your code while maintaining full control over version history.

Fastio provides specific features that support your development asset pipeline:

• Granular permissions. You can set distinct access levels for folders and files, ensuring that raw drafts remain private while finished assets are shared.
• Durable file sharing. Instead of sending email attachments, you can create a custom File Share link for your resume PDF or project code. These shares are versioned, so recipients always view the current version, and you can revoke access or set expiration dates.
• File version history. Every file in your workspace keeps a complete history of changes, allowing you to restore earlier versions if a coding assistant makes an incorrect edit.
• Intelligence Mode. When enabled, files in the workspace are automatically indexed. You can use semantic search to locate a project file by its content or meaning, rather than searching through folders.

Hiring managers or clients can access these assets without creating a Fastio account. When sharing your portfolio assets, you can configure a branded portal so visitors view a clean interface containing only your work.

If you work with autonomous coding agents, they can access your workspaces using the remote Model Context Protocol server. The server runs at https://mcp.fast.io/mcp/key and authenticates via header tokens, letting your agents read, write, and index portfolio assets directly. To learn more about setting up agent workspaces, visit the marketing product page for storage for agents.