Day 01 - Creating a Unique Portfolio

Welcome to part 1 of building a unique portfolio! Today we'll be learning how to identify your brand identity.

Remember to check in at events.mlh.io/events/11950!

Intro - Whoami

I am a Coach @MLH
I also teach CS and robotics for grades 6-12
I like Star Wars, indie games, and lettuce

mlh portrait

What type of workshop is this?

First day is less coding, more templates + learning resources
Workshops will support each other, but 100% attendance is not mandatory!

Technical things we'll do today

Learn how to craft your brand identity
Learn how to prototype like a designer with tldraw + figma
Learn how to add cool libraries like:
- P5
- Swapy
- Reveal
- Reactflow
- Mercury Framework

Agenda

Looking at cool portfolio sites
Classifying cool portfolio sites
Identifying what makes us unique
Some cool libraries to make interactions cool
Actually building a small thing with each library

No need to take notes!

This slide deck and all the resources in it will be available to you via the MLH discord server in the #announcements channel.

Looking at cool portfolio sites

Looking for:

Can we tell what they do professionally?
Can we see what they're interested in / like as a person?
Am I going to remember this experience?

Develoepr Portfolios

Types of Portfolio Layouts

Whiteboarding time! I'll backfill this slide deck with the categories and a link to the whiteboard afterwards.

Design Trends

Brutalism / Neo-Brutalism
Neo Morphism
Skeuomorphism
Flat Design
Typography
Glassmorphism
Animation / Motion Design
Illustration + 3D Design
Minimalism
Bauhaus
Bento
Swiss Design

Identifying what makes us unique

How to craft your creative identity

"How to find your style

By: Andy J. Pizza

Create a collection of who you are
- Identity
- Taste
- Experiments
- Experiences
Pick an influence and an identity

Designing our own

Quick disclaimer, I started ahead of time hehe

FigJam Figma

Cool libraries revisited!

Sandboxes

Learning a new library? Build a mini-project following their tutorial

Working prototype to refer back to
Avoid tutorial hell
Building something small that is beyond the tutorial
Don't like it? Don't use it.