# Creating a portfolio website When you've created a bunch of coding projects, sometimes it's nice to create a portfolio website to link them all. If you have a project that is mature enough to be presented as a professional standalone experience, then it deserves its own domain name, but for a bunch of demos or work in progress, I've found this portfolio style works great. It gives you a convenient way to show your work and experiment. The goal of this post is to create a personal portfolio website for your coding projects, for example "fionacode.com", with a list of projects, each sitting at a subdomain like "fireworks.fionacode.com". For the rest of this post, we'll use `example.com` as the example. Replace that with your actual domain. Note: Why deploy each project to a subdomain like `project.example.com` rather than a path `example.com/project`? The subdomain allows each project to be published independently, which is useful if it uses different server technology (e.g. simple HTML pages vs Node.js). It also means you can very easily iterate and publish 1 project that you're working on. If the project grows up and needs its own domain, you can give it one by adding a custom domain to the Worker. First, get yourself a domain name if you don't have one already. Ideas could be `.com`, `code.com`, `games.com`, `studio[s].com`, etc. You can pick any extension. `.com` is the classic choice that never goes out of style. Try to get the shortest one you can and ideally 2 words (firstname/nickname + suffix like `fionacode.com` is a good formula IMO, a surprising number are available). If you register directly in Cloudflare, then there's less setup later when deploying your code there. We'll assume that each project is already its own Git repo (which it should be—go create those if they are not, and push to GitHub). For the deployment structure, here's one that I've found works well. You create a master project with a `home/` directory for the project list, and links to each other project as submodules at a path that will match the subdomain. ``` Portfolio Website /home (example.com) /project1 -> GitHub (project1.example.com) /project2 -> GitHub (project2.example.com) /project3 -> GitHub (project3.example.com) # etc... ``` To make this, create a new project directory (I use the domain name as the folder name for this, like `example.com`) and initialize Git. Then add each existing project as a submodule. Don't worry if you don't add them all at first; we'll update it later. First, copy the repository clone link from GitHub, then prompt: > Add `` as a submodule in the directory `project1/`. Tip: Think carefully about your desired project folder as we will re-use this as the subdomain. Lowercase, no spaces, keep it short. Dashes work but aren't highly recommended. In other words, `myproject`, not `MyProject`, `my-project` or `my project`. Once we deploy, this will then publish the project to `myproject.example.com`. As always, commit as you go: > Commit all submodules Then, build the portfolio. Add some personalization instructions to make it yours! > Create a portfolio website in `home/` to be published at `example.com` that links to each project's subdomain. The projects will themselves be hosted at `.example.com`. Use a theme for a _____ portfolio, including colors like _____ and ______. Tip: Be sure to personalize it a bit! For the theme, mention the type of portfolio, e.g. games, tech demos, etc. Commit once you're happy. ## Deploying to Cloudflare With our portfolio ready, let's deploy!
Registering the domain name

If this is the first time deploying, you’ll need to do the following:

  1. Create a Cloudflare.com account
  2. Click Buy Domain (or Add Domain, then Buy)
  3. Search for your desired .com (see the suggestions above for ideas), have a few options in case they are taken

With the domain name purchased, we can now deploy. The first time you deploy, you’ll need to authenticate wrangler, which the coding agent will likely prompt you to do, or you can run npx wrangler login from your console.

Ensure Wrangler is authenticated (this will save you some steps), and run: > Pull the latest changes from GitHub for each project, then using Wrangler to deploy Cloudflare Workers, publish `home/` to `example.com` and each project folder to a Worker on a subdomain `foldername.example.com`. The first part ("pull the latest changes") ensures any changes you made and pushed outside this portfolio master project will get included. Since we will be deploying this a lot, capture it into a skill for faster and more deterministic redeploying later: > Write a project skill called 'deploy-everything' to capture these steps. and > Commit the skill ## Adding more projects to the portfolio To add more projects, add the submodule as above, then run: > Update my portfolio website with all new projects. As always, when doing a process you will likely repeat, distill the chat context into a skill: > Write a project skill called `update-portfolio` to capture these steps and make it faster next time. Tip: Make sure to commit the skill when completed ("commit the skill"). Once the update is ready, re-deploy it. > deploy everything If you created a skill as suggested above, this will also pull in any updates to individual projects. Or, to explicitly deploy any project changes as well, include "Pull the latest changes from GitHub for each project". ## Other useful prompts When you have a lot of projects, it helps for each tab to have its own icon known as a favicon. I'm a big proponent of favicons—I tend to open a lot of tabs, and these help me to see which tab is what. Run this to make sure every project has a favicon! > In each folder, create an SVG favicon based on the content of the project if one does not exist. Add it to the website, commit and push. Then run "deploy everything" again so the new favicons appear on the live sites. Like the other processes above, it's smart to capture this into a skill for speed and reliability later: > Write a project skill called `add-favicon` to make this faster in the future. Tip: Make sure to commit the skill when completed ("commit the skill"). ## Conclusion So that's how to build a simple portfolio website for all your projects to share them with the world. Go build something!