How to Create Your Own Portfolio Site

Using HTML, CSS and React


In April of 2018 I had just graduated from a coding bootcamp and began the process of applying to my first job within the tech industry. Let's just say that after countless interviews and applications submitted; interviewing posed harder than the bootcamp itself. I already had been actively posting to both Github and Dribbble, hoping to have my work viewed by some of the companies I had applied to.

The problem was hoping technical recruiters were navigating between my Github and my Dribbble and not getting lost on how I could fit within their origanization. I needed a way to quick yet affectively showcase my design work as well as communicate my logic when solving a development issue.



Step 1: Determine What You Want The User To View.


Sitting down I determined the website needed to encompass both my Github works and Dribbble designs but leave room for changes later down the line. Drawing the attention to the center of the page where the work would sit and keeping things clean and open where also some of the later goals.

Process Time: 43 mins


Step 2: Create Your Wireframes (Plus add some detail).

Let's start by creating wireframes.

You can use the Sketch App for iOS, InVision, The Notepad App, or Pencil and Paper to creat them!

The challenge with creating the wireframes for this project was how the work should be displayed. I have technically created this website about 4 times now with each version getting better over time. With so many design templates online its easy to be swayed one way or another but you have to remember what your goal was when initially creating your website.



Draw the draft of the page design before you add any details! Remember most websites have the following:

  • Header
  • Navigation Bar
  • Main Content
  • Side Content
  • A Footer

Process Time: 23 hours


Step 3: Development

For this website you need to know the basics of HTML, CSS, and JavaScript.

After downloading Visual Studio Code - I personally used GatbsyJS to start crafting my project. The first time I started coding I layed out all of the HTML and CSS thanks to W3Schools helpful references and tutorials. When I finished though I realized it wasn't responsive: mistake #1.

So I went back to the drawing board and began to understand what JSX was and how I could use it to my advantage.

JSX- basically helps XML/HTML be cool with React/JavaScript being in the same room. After looking at what seemed like a million tutorials I understood how my first attempt had failed and started using the full power of React to fix what I already had.

Process Time: 80 hours


Conclusion


This is a brief of the tools, hours, and work that I put in to build this site. I couldn't dare cover everything it took to build it in a 5 min read. I plan on adding even more, like discounts on products I use, products from myself that I think would help you advance in the areas of design and development and more! If you have any questions, need any tips, feel free to reach out to me and I'll pour what I have into you! If you like what you see and really don't feel like building your own site is something you want to do, reach out! Let's get a coffee, have a phone call and build that site!