Game Developer's Portfolio

Portfolio Website Foundations

Lecture 1 in Chapter 2

Website Essentials

Teacher notes - Teach some design tools such as Figma, Adobe XD, or Sketch; Introduce the concept of wireframes and mockups; Teach about any website framework such as Next.js, React, or WordPress; Talk about how to host using gh-pages or any other hosting service; - In class activity teach them how to publish a simple website using gh-pages and react;

Tools and Frameworks

There are many tools and frameworks available for building a portfolio website. Some popular options include:

Design Tools

  • Figma: A web-based design tool that allows you to create wireframes, mockups, and prototypes. Search for some free templates to start your design here.
  • Adobe XD: A design tool that allows you to create wireframes, mockups, and prototypes.
  • Sketch: A design tool that allows you to create wireframes, mockups, and prototypes.

Website Frameworks

  • React: A JavaScript library for building user interfaces. It is client side rendering, which means you can host on any file server such as git hub pages.
  • Next.js: A React framework for building static and dynamic websites. It is server side rendering, which requires a server always running.
  • WordPress: A content management system that allows you to create and manage websites without coding. It is a PhP server side rendering, which requires some specific hosting services, but it is pretty common and easy to use.

Portfolio Website Structure

When building your portfolio website, it's important to think about the structure of your content. Here are some common sections that you may want to include:

Head or Summary

  • A brief introduction to who you are and what you do.
  • A photo of yourself.
Warning

Avoid bravado and be humble. People like to work with humble people. You can be bold without being naive. Let the bravado statements for when you become a senior. If you write bravados right in the beginning of your portfolio, and you are still a junior, you are just communicating that you will be hard to work with. A senior developer reading your portfolio is more interested in developers eager to learn, humble, and looking for guidance so they will have a easier life hiring you.

Tip

Using a selfie or a photo with a group of people. Use a professional headshot.

About

  • A more detailed description of your background, skills, and experience.

You can merge the Head and About sections if you are not comfortable with the idea of having a photo of yourself in the website.

Skills

Avoid using percentage graphs to showcase your proficiency on specific tech stack or tool. The main reason is: how do you grade of your ability as 80%, 100% or 30%? Worse than that, how can the reader be sure of that? If you want to do that, it is better to apply for certificates, there are plenty on linkedin or specialized sites.

Project Showcase

  • A gallery of your projects, with descriptions and links to more information.

It is pretty common to have more than 3 nice works, but it is a good practice to showcase only the best works you made. You can have a link to a page with all your projects, and name "Experiments", "Prototypes", "Old Works", etc. But the main page should have only the best ones.

Projects

There are chances of your reader clicking exactly on the worst one and have a bad first impression of you. In your showcase section, avoid showcasing bad work. Invite some of your friends to help you select the best ones to showcase.

I suggest showcasing your projects in a column of cards, with a title, a screenshot or gif, a brief description, and a button to more information talking about the game. Dont use carousels, they are bad for SEO and for user experience. Should I Use a Carousel

Achievements

  • A list of your accomplishments, such as awards, certifications, or publications.

Testimonials

  • Positive feedback from clients, colleagues, or employers.

Sometimes this section is not necessary, but it is a good practice to have it. If you have a good feedback from a client, professor, bosses/leaders, peers/colleagues, you can ask them to write a short text for you. It is a good practice to have a link to the LinkedIn profile of the person who wrote the testimonial.

Testimonials

The philosophy of having testimonials is to use the authority of the person who wrote it to give more credibility to your work. If you have a testimonial from a person who is not known in the industry, it is better to not showcase it.

Contact

  • How to get in touch with you, such as an email address or contact form.

You can tell the reader the best way to contact you, but the easiest way is to have a contact form. You can use a service like Formspree to create a contact form that sends you an email when someone fills it out.

Explicitly state what people should expect if they contact you and what they can expect from your return. Ex.: If you aim to be a freelance, state your offer and ask for them to briefly state the job activity, time frame and the rate they are willing to pay. If you are looking for a full-time position, the most common way is to just share your email, so they can contact you.

Another option is to list all of your social medias, but dont overuse this. Nowadays we have a bunch of them, so if you list all of them, there is chances, you are not active there and the link will guide the reader to a empty and haunted house and they will not engage.

Resume

  • A link to your resume or CV.
Tip

You can have a page for your CV as a webpage because you are creating a webpage. But always test if your CV is being printed correctly or add use a library to generate a PDF version of your webpage CV section. Suggestion: use react-to-print to generate a PDF version of your CV page.

Blog

  • A link to your blog or articles that you have written.

In order to increase the relevance of your portfolio, you can write articles about your projects, your process, your learnings, etc. It is a good practice to have a blog section in your portfolio.

Things you can write about:

  • Featured posts/content and call to action to read your ongoing content production
  • Explain your process in designing a game or piece of software
  • Explain some interesting details you learn or describe your knowledge explorations.

Project Details Pages

  • A page for each project with more detailed information, such as screenshots, videos, and code samples.
  • A link to the live project or demo.
  • Reasoning behind the project, what you learned, what you would do differently, etc.
Tip

Clearly explain why you were relevant for that project! Why project is important for you, what you learned, and what you would do differently next time. This shows that you are reflective and always looking to improve.

General tips

  • Keep the Target Audience in Mind
    • Take Advantage of Your Homepage
    • Make Your Portfolio Scannable
    • Minimize Clicks
  • Remember UX and UI
    • Go Mobile or Go Home
    • Optimize Website Performance
    • Remember Accessibility
  • Showcase Your Best Work and Skills
    • Share Your Code and Live Projects
    • OR Provide Code Samples and GIFs
    • Boast Freelance and Personal Projects
    • BUT Be Selective
    • Prove that You Are on The Same Page
  • Show Your Personality
    • Use Custom Domain
    • Make Use of Introductory Statement
    • Use Your Tone of Voice
    • Share Your Motivation (Optional)
  • Maintain Personal Brand
    • Keep Portfolio Up-to-Date
    • Include Testimonials
  • Encourage Communication
    • Call-to-action button or link to contact

reference