How I Made My Portfolio Website

Does the world need another how-to listicle? Sure, why not.

how-to listicles for dayz

Step 1 — Create a GitHub Repo

Always the first step. First things first, that’s what I always say.

Step 2 — Choose Your Tools

It’s a good idea at the outset of any web project to think about and decide on what your stack is gonna be. Some jobs require hammers, some require chainsaws, and some require mixing bowls and big wooden spoons. A hammer is a bad choice if you’re making cupcakes, but a great choice if you’re hanging a picture frame.

For my portfolio website, I decided to go with a simple Bootstrap frontend. I love Ruby on Rails for backend projects, and I love React for frontend projects, but this particular site isn’t going to require a database or a backend of any kind, and React would probably be overkill for a simple portfolio site. So jQuery it is, with some Bootstrap for easy responsiveness.

Step 3 — Documentation and Getting Started

In the past, I’d often copy and paste entire old projects to start new ones, but these days I’m getting in the habit of starting from scratch.

This way I do more adding and less deleting, which is a lot more fun, and probably more efficient too.

For this project, I’m going with the latest version of Bootstrap, which has a nice introduction here, where they offer a easy to copy and paste starter template.

I like the simplicity of the Bootstrap CDN, so I’m going with that.

Bootstrap also offers some examples, which is an easy way to get started.

I like that fixed navbar, so I’m gonna add that chunk of code to my index.html file, and create a stylesheet.css file.

Then I’m gonna delete that form from the navbar, cuz I don’t need that.

Also I’m gonna rename the navbar-brand anchor tag. Gotta personalize this bad boy. Who’s site? My site! Sorry. I’m on coffee.

I’m also gonna replace some of the other default example text. Personalize, personalize. Then I’m gonna open up my index.html file in the browser. Coding is so fun. We get to see what we’re working on right away, and know how it will eventually look when it’s live on the www.

Here’s what we got so far:

first draft in the browser — wtf is a “portofolio”?

Off to a good start!

Step 4 — Save Early, Save Often

Saving my progress with some Git commands.

git add .
git commit -m "created index and stylesheet"
git push

I won’t keep showing these commands, but I will mention just once: save early, save often. Mantras are mantras for a reason.

Step 5— Get It Up On The Web

Most people would leave this step to the very end, but I like to get something online as early as possible. Dealing with web hosting and DNS stuff can be a hassle, so the sooner I can get something, anything, online, the better I feel. Then it motivates me to keep improving it, since it’s up there for anyone to see, though really no one’ll see it till you ask them too.

I’ll save all the boring web hosting instructions for whoever you use for your web hosting, and end this step with a pic:

wowzers, i’m on the world wide web!

Oh yeah. Check out that URL. I’m online, baby!

Cool, we’ve got some HTML and some CSS on the internet.

Now let’s get that first draft of my portfolio website inching toward something closer to the final draft I have in my head.

Step 6 — Flesh It Out

Since I did the above chunk of text in a container, I’m gonna add a few more containers.

These will act as a basic layout for now, a placeholder that I’ll tweak in the future.

I’m planning on having 7 pages on my site, so I gave each container an id.

I also updated my navbar with hrefs, so each list item on my navbar now directs the browser to that container, or page.

now with multiple pages

After learning about React Router and how to navigate React apps, going back to navigating old school HTML is a piece of cake! I realize that the Virtual DOM is the future, but the old school DOM is so simple. All it takes is an id and an href to go from one place on your site to another.

Step 7 — Adding Background Images and Style

Cool cool cool.

OK, so now what?

I’ll probably keep my different pages in containers, but remove the jumbotron div class from each. I plan on doing that later.

First I want to throw in a placeholder image between each page.

My goal for this personal portfolio page is to have something really visually stimulating, something that shows off my personality and sense of humor.

The internet is a fun, colorful place, and I want my site to reflect my appreciation for how overstimulating the internet can be.

I want my site to be a little garish, even obnoxious. I’ve already got a boring old LinkedIn profile and GitHub profile. Like those, my personal portfolio page will also link to and advertise my coding projects, but it will do it with a little more flare, charisma, and overkill. I want my site to burn some eyeballs. I want it to make your Grandma say “Oh my” and your grandkids say “Hell yeah!” Basically, I want my site to be “cool”. There’s nothing less cool than admitted to wanting to make something cool, but there you have it. I’m nothing if not honest, uncool, and desperate to impress. Hire me!

But for now, a placeholder image between each page. I chose a picture of some trees, because I like trees.

trees add pizzazz

I also like the Parallax effect, so I’m using that as well.

Step 8 — Text

Now that I’ve got my seven pages in place, I want to add text to each page.

For now, it’s just plain old HTML. Nothing fancy. Not even gonna stylize my text with cool fonts. Just the default font size and font family for Bootstrap wrapped in some H1 and p tags.

For example, here’s my Skills page:

skills page, simple unordered list

Nothing fancy. Just some list items in an unordered list.

Step 9 — Apps

Now that I’ve got my seven pages in place, with some text on each page, I want to start stylizing each page.

My goal is to make each page its own simple app.

In other words, I want to give each page a little bundle of code that makes it do something interesting, to make my website an entertaining, engaging experience for my visitors, and for myself. Cuz if I can’t entertain myself, who can I entertain?!?!?!?!.

OK, calm down. So far my website’s been nothing but HTML and CSS. But all this talk about “interesting” and “entertaining” and “engaging” means it’s time to turn it up a notch. Time for some Javascript.

For example:

var words = [
"crazy",
"sexy",
"cool",
];
var count = 0;
function rotateWord() {
  var current_word = words[count]; 
  $("#rotate_word").html(current_word); 
  count++; 
  if (count == words.length) { count = 0; } 
  setTimeout(rotateWord, 2000); 
}
rotateWord();

On my home page, I’m gonna have a simple sentence saying:

Ethan Ryan is great.

And then every 2 seconds, the word ‘great’ will be replaced by the words in my array of words, so I can not-so-subtly boast about how great I am.

Hey, it’s my site. Where else am I gonna boast about myself? I’m not an ego manic though. I limited my array to a very reasonable 120 words.

Ethan Ryan is many things.

Bam, one app done. I want every page to have some sort of function on display, something happening that users can watch or play with.

One done, six to go.

Step 10 — More Background Pics and Gifs

After adding some more simple apps to each page, I styled the rest of the site with more pics and gifs, giving visitors something to look at while they scroll through the site. I also added a lil animation effect into the NavBar. CSS animations are really fun and really easy to use.

Check out my personal portfolio site here: www.ethanryan.com.

Enjoy!