Building My Portfolio

AGAIN

@mjordancodes

by: mJordan

My Normal Process

  • Ugg. I can't show anyone because I have to add it to my portfolio and I built my portfolio in *some language I never used before or since*
  • Hey! I just built a super cool thing!
  • Fine. I'll just rebuild my portfolio in *another language I never used before and never will use again*, and then I can add this new project.
  • OH BOY! I get to design a new portfolio!
  • Ugg. Do I really have to design the whole thing? I'm so excited about this *language I never used before and will never use again* and I just want to start building!
  • Hey look! I created a thing and the first page or two is pretty neat.

@mjordancodes

My New Process

  1. Asking Questions

@mjordancodes

Motivation

@mjordancodes

Why am I building a portfolio?

To show off who I am

Make a portfolio that is a true expression of yourself. Programming is in a lot of ways a creative field, so use your creativity!

Motivation (Self Reflection)

@mjordancodes

Who am I?

  • Front End Developer
  • Photographer / Graphic Designer in a previous life
  • Weird
  • Community Leader and member
  • Mentor / Teacher
  • Rubber Duck Lover
  • Reader
  • Dog Mom AF

The User

@mjordancodes

Who do I want looking at my site?

My mom!

Create user personas: fictional representation of my ideal user

History

@mjordancodes

What works on my current site?

  • Hard to know where to go / what to do
  • Poorly implemented design
  • Nearly impossible to find a way to contact me

What doesn't work on my current site?

  • I did a creative thing on the home page that I think is cool
  • The information is good (once you can find it!)

My New Process

1. Asking Questions

@mjordancodes

2. Finding Inspiration

Looking at other people's sites

@mjordancodes

awwwards - don't just look at the portfolio sites. Check out everything and find bits and pieces you like!

Bestfolios - there are articles and resources to check out as well

I also keep a bookmark folder called "Portfolio Inspiration" and throw sites in there all the time. Even when not in portfolio building time.

CodePen - I love exploring this site for all the cool little things I didn't know I was looking for. Save all my favorites for inspiration later on.

My New Process

1. Asking Questions

@mjordancodes

2. Finding Inspiration

3. The Design Process

Time to Show Off

@mjordancodes

  • Front End Developer
  • Photographer / Graphic Designer in a previous life
  • Weird
  • Community Leader and member
  • Mentor / Teacher
  • Rubber Duck Lover
  • Reader
  • Dog Mom AF

Clean code. Link to see code on github

Easter eggs!  Create my own illustrations

add a random fish

Highlight this work in my about section. More illustrations!

Add more rubber ducks

List books read / reading

Replace entire site with pictures of my puppies

Putting all the bits together

1. Site Map

2. Wireframe

3. Mockup

4. Gather Assets

@mjordancodes

My New Process

1. Asking Questions

@mjordancodes

2. Finding Inspiration

3. The Design Process

4. Picking a Stack

What stack is the newest/coolest

Stop. Please just stop.

@mjordancodes

Use the tools you use every day OR keep it simple.

I have spent the last year working in React. I will probably continue working in React for a while, or other JavaScript Frameworks. Gatsby is a super cool static site generator (AND SO MUCH MORE!) that is react based and I have tried once or twice already.

Have a damn good reason for every piece of tech that you decide to use. How does it help with your motivation?

Best tools for THIS job

@mjordancodes

JAMstack all the things

The Front End

@mjordancodes

I have spent the last year working in React. I will probably continue working in React for a while, or other JavaScript Frameworks. Gatsby is a super cool static site generator (AND SO MUCH MORE!) that is react based and I have tried once or twice already.

Please help me deploy my site

@mjordancodes

I have lost track of the number of super cool awesome rad projects I have built that live exclusively on my computer because deployment is HARD.

 

Netlify makes it so easy. And once I set up the automatic bits, I NEVER have to think about it again. Just                                 and life is good.

$ git push

Sometimes I don't want to write Code

@mjordancodes

Netlify CMS to the rescue! Now I can use a CMS and publish content when I don't want to write code, OR I can create markdown files in my normal text editor and publish with my normal git workflow.

My New Process

1. Asking Questions

@mjordancodes

2. Finding Inspiration

3. The Design Process

4. Picking a Stack

5. FINALLY!

You have permission to start writing code.

My New Process

1. Asking Questions

@mjordancodes

2. Finding Inspiration

3. The Design Process

4. Picking a Stack

5. Start Coding

6. BONUS: add cool things. Like sprinkles on top.

Greensock is my Sprinkles

@mjordancodes

Handy Articles & Links