Building a Portfolio Site

Building a portfolio site doesn’t have to be hard, and in fact for a simple one page static portfolio site, there’s really not very much javascript needed at all. Today I’m going to go over how I built my own portfolio site.

The only javascript I actually used for this is the landing page. I like to have a landing page as it feels nice to click through to the main page. This is just a simple icon which when clicked activates an animation. In this case, I have two animations that run one after another.

//Landing
let landing = document.querySelector(".landing");
//Main
let mainBody = document.querySelector("#main");
mainBody.style.display = "none";
//Event Listeners
landing.addEventListener("click", () => {
    landing.style.webkitAnimationPlayState = "running";
});
landing.addEventListener("webkitAnimationEnd", () => {
    mainBody.style.display = "flex";
    mainBody.style.webkitAnimationPlayState = "running";
});

The HTML:

<img class="landing" src="./public/Blackburnian.png">
<div id="main">
  ...
</div>

The CSS:

.landing {
    position: fixed;
    top: calc(50% - 72px);
    left: calc(50% - 72px);
    clip-path: circle(120px at center);
    animation: circle-in 0.5s ease-in paused 1 forwards;
}
@keyframes circle-in {
    100% {clip-path: circle(0px at center);}
}
#main {
    font-family: "04Font";
    display: flex;
    width: 100vw;
    height: 90vh;
    left: 0px;
    opacity: 0;
    animation: circle-out 0.5s ease-in paused 1 forwards;
}
@keyframes circle-out {
    100% {opacity: 1;}
}

Within the main div, I separated the site into three main sections: left, middle, and right. The middle is just a divider line, and all the sections are organized horizontally. The left side just holds the about page, and the right holds links to my projects. To get the project-container to scroll, I just use overflow-y: scroll. To style the scrollbar:

::-webkit-scrollbar {
  width: 24px;
}
/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #0d556b;
  background-clip: content-box;
  border-radius: 10px;
  border: 3px solid transparent;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #297a92;
}

Getting the pixel style on the buttons is just a simple use of box-shadow:

  box-shadow: 
     2px 0px orange,
     -2px 0px orange,
     0px -2px orange,
     0px 2px orange;

To get the stylable icons for links to other sites like github or linkedin, I used Font Awesome to put the the icons in my HTML:

<a href="https://github.com/Tororoi" target="_blank">
  <span class="tooltip">GitHub</span>
  <i class="fab fa-github" id="icon"></i>
</a>