Lesson Learned from Creating my Portfolio Site

My goal for this week was to create a portfolio site to showcase myself and all of the projects that I have worked on. I wanted to practice my HTML and CSS skills and not rely on a UI frameworks like Material UI. This blogpost will explore the things that I learned while creating my portfolio site in React.

You can check out the finished site here:

https://jbharwood.github.io/joseph-harwood

I followed this blogpost to host my site on Github:

How to deploy your react application to GitHub-pages in less than 5 minutes

One interesting problem for hosting this site was that using ReactRouter to change pages didn’t work like you would expect, so I had to use HashRouter to make it work. It adds a # to the front of the route in the URL, not ideal, but it works.

Each of my projects has a youtube demo. This is the code to embed a youtube video on your site:

<div
  className="video"
  style={{
  position: "relative",
  paddingBottom: "30%" /* 16:9 56.25%*/,
  paddingTop: "15%",
  height: 0
  }}
>
  <iframe
    style={{
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%"
    }}
    src={`https://www.youtube.com/embed/2W2vGLwA6d0`}
    frameBorder="0"
  />
</div>

You can get the embedded youtube video that you want like this:

Click share

Click Embed

Copy the src url and out it into the code snippet that you copy from above

I used Flexbox in the About page in the Projects section on my project.

Flexbox is a useful CSS technique to allow you to organize objects in a parent container. One of the most annoying parts about using HTML/CSS is trying to get things organized how you want it in a box layout. Below is the CSS that i used to get the layout above:

.wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}
.header {
  background: #e1e3e8;
  border: solid;
  border-color: #1C2B33;
  border-bottom: none;
}
.footer {
  background: #e1e3e8;
  border: solid;
  border-color: #1C2B33;
}
.main {
  text-align: center;
  background: #e1e3e8;
  border: solid;
  border-color: #1C2B33;
  border-bottom: none;
  border-right: none;
  border-left: none;
}
.aside-1 {
  background: #e1e3e8;
  border: solid;
  border-color: #1C2B33;
  border-bottom: none;
  display: flex;
  align-items: center;
  text-align: center;
}
.project_images {
  display:flex;
  margin-left:auto;
  margin-right:auto;
}
.project_image {
  height: 7vh;
  border-radius: 3px;
  /* margin: 0.8vw; */
}
#img1 {
  margin-left:auto;
  margin-right: 10%;
}
#img2 {
  margin-right: 10%;
}
#img3 {
  margin-right: 10%;
}
.aside-2 {
  background: #e1e3e8;
  border: solid;
  border-color: #1C2B33;
  border-bottom: none;
}
@media all and (min-width: 600px) {
  .aside { flex: 1 0 0; }
}
@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

The interesting Flexbox bits are:

.wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}
@media all and (min-width: 600px) {
  .aside { flex: 1 0 0; }
}
@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

The React component div:

<div className="bodyContainer">
      <div className="wrapper">
        <header className="header">Quizalcoatl</header>
        <article className="main">
          <p>Snake trivia game incorporating a trivia element to the traditional snake game</p>
        </article>
        <aside className="aside aside-1">
          <div className="project_images">
            <img align="left" src={rails} alt="Rails" title="Rails" className="project_image" id="img3"/>
            <img align="left" src={javascript} alt="Javascript" title="Javascript" className="project_image" id="img2"/>
          </div>
        </aside>
        <aside className="aside aside-2">
          <a href="https://github.com/jbharwood/quizalcoatl-frontend" target="_blank"> Frontend </a> <br/>
          <a href="https://github.com/jbharwood/quizalcoatl-backend" target="_blank"> Backend </a>
        </aside>
        <footer className="footer">
          <div
                className="video"
                style={{
                  position: "relative",
                  paddingBottom: "30%" /* 16:9 56.25%*/,
                  paddingTop: "15%",
                  height: 0
                }}
              >
                <iframe
                  style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "100%"
                  }}
                  src={`https://www.youtube.com/embed/2W2vGLwA6d0`}
                  frameBorder="0"
                />
          </div>
        </footer>
      </div>
    </div>

I modeled my Projects section after this model:

I followed this guide on Flexbox’s site:

A Complete Guide to Flexbox | CSS-Tricks

Feel free to poke around in my Github repo if you need a closer look at how to use Flexbox:

jbharwood/joseph-harwood

Happy coding!