Start Building

Lesson 2: Portfolio Website & Branding

Your portfolio website is the hub where recruiters, hiring managers, and collaborators land when they look you up. In this lesson you will choose a platform, set up a simple site, and define a consistent brand so you look professional and memorable.

What You'll Learn

By the end of this lesson you will be able to:

  • Choose a portfolio platform that fits your skills and goals (no-code, static, or custom)
  • Define a personal brand: name, tagline, and visual style
  • Structure your site with a clear homepage, projects, about, and contact
  • Apply consistent branding across the site and social profiles
  • Launch a live URL you can add to your resume and LinkedIn

Why This Matters

Studios and publishers often spend under a minute on a first pass of your portfolio. A clear URL, recognizable name, and cohesive look help you stand out. Good branding also makes it easier to add new projects later without the site feeling scattered.

Step 1: Choose a Portfolio Platform

Pick one option that matches your time and technical comfort.

No-code / website builders

  • Carrd, Notion, Linktree-style: Very fast. One page with links to your games, ArtStation, GitHub, LinkedIn. Best if you want something live in under an hour and will link out to other places for detail.
  • Wix, Squarespace, Webflow: More control over layout and design. Good if you want a multi-page site with a custom look and are okay learning their editor.
  • Itch.io / ArtStation portfolio: If you already host games on Itch or art on ArtStation, you can use their profile and project pages as your main portfolio and add a simple custom domain or link-in-bio.

Code-based / static

  • GitHub Pages, Netlify, Vercel: Free hosting for static sites. Use a template (e.g. Jekyll, Hugo, or a game-dev portfolio theme) or a simple HTML/CSS site. Good if you are comfortable with Git and want full control and a programmer-friendly look.
  • Custom domain: Attach a domain like yourname.com or yourname.dev to any of the above for a more professional URL.

Pro tip: Start with one platform and one URL. You can always migrate later. Avoid maintaining multiple portfolio sites at once.

Common mistake: Spending months building a custom site before adding real projects. Get a simple site live first, then improve it as you add work.

Step 2: Define Your Personal Brand

Your brand is how you present yourself in one glance: name, tagline, and visual style.

Name

  • Use your real name (or a consistent professional alias) so people can find you on LinkedIn, Twitter, and at events.
  • If your name is common, add a middle initial or a short descriptor (e.g. "Jane Smith – Game Designer").

Tagline

  • One short line under your name that says what you do and who you are for.
  • Examples: "Gameplay programmer | Unity & C#" | "Technical artist for stylized games" | "Indie designer & narrative designer."
  • Use the same tagline (or a close variant) on your portfolio, LinkedIn, and Twitter.

Visual style

  • Colors: Pick 2–3 colors (e.g. background, text, accent). Keep them consistent across the site and profile pictures.
  • Fonts: One heading font and one body font. Avoid using more than two font families.
  • Tone: Match your discipline. Programmers often go minimal and readable; artists can lean more visual and mood-driven.

Mini-task: Write your name, tagline, and list your 2–3 brand colors and fonts. Save this in a short "brand guide" doc so you can reuse it everywhere.

Step 3: Structure Your Portfolio Site

A simple structure that works for most game devs:

Homepage

  • Your name and tagline
  • One short paragraph: who you are and what you do (use your career summary from Lesson 1)
  • Clear links or sections: Projects, About, Contact (or Resume)

Projects

  • 3–6 strongest projects. Each with: title, 1–2 sentence description, your role, tech/tools, and link or embed (playable build, video, or gallery).
  • Put your best or most relevant project first.

About

  • Short bio (a few sentences). Optional: photo, location, interests, what you are looking for (e.g. "Seeking junior programmer roles").

Contact

  • Email and/or a contact form. Optional: LinkedIn, Twitter, GitHub, ArtStation, Itch. Only include channels you check regularly.

Pro tip: Make the "Projects" section the main focus. Recruiters and leads care most about what you have built and what you did on each project.

Common mistake: Burying projects behind many clicks or hiding your contact info. Keep projects easy to find and contact obvious.

Step 4: Apply Consistent Branding

Use the same name, tagline, colors, and fonts across:

  • Your portfolio site
  • LinkedIn headline and summary
  • Twitter/X or other social bios
  • Email signature
  • Resume header (name and tagline)

If you use a logo or avatar, use the same one (or a close variant) everywhere. Consistency makes you easier to remember and looks professional.

Mini-task: Update at least two places (e.g. portfolio + LinkedIn) with the same tagline and a link to your portfolio URL.

Step 5: Launch and Share Your URL

  • Publish your site and get a live URL (e.g. yourname.github.io or yourname.com).
  • Test on mobile: many people will open your portfolio on a phone.
  • Add the URL to your resume, LinkedIn profile, and email signature.
  • In the next lessons you will fill this site with selected projects and optimized resume content.

Pro tip: Use a short, memorable URL. If you use a subdomain or path, keep it simple (e.g. sites.google.com/view/yourname is fine; avoid long random strings).

Troubleshooting

"I don't know what platform to pick."
If you code: try GitHub Pages or Netlify with a template. If you prefer no-code: start with Carrd or a single Notion page with links. You can always switch later.

"I'm not a designer."
Use a single-column layout, plenty of white space, and one accent color. Copy the structure from portfolios you like (don’t copy visuals) and focus on clarity over fancy design.

"I have no projects yet."
Use placeholders: "Project in progress – [brief description]. Coming [season/year]." Add one or two jam or school projects with a short note on your role. Then replace with stronger work as you complete it.

"My name is hard to spell or remember."
Use your name in the URL when possible and always spell it in your tagline or header. Consider a simple domain like firstnamelastname.com if available.

Summary

  • Choose one portfolio platform (no-code or code-based) and get a single live URL.
  • Define your brand: name, tagline, and 2–3 colors and fonts.
  • Structure your site with a clear homepage, projects, about, and contact.
  • Apply the same branding on your site, LinkedIn, and other profiles.
  • Launch your URL and add it to your resume and signatures.

Next lesson: Lesson 3: Project Selection & Documentation will help you choose which projects to showcase and how to document them for maximum impact.

Bookmark this lesson and revisit your portfolio every few months as you add projects. For more on building a career in games, see our career and portfolio guides.