About this Site

Here's a bit of detail about the tech and inner workings of this site in particular

GitHub

I want to start by mentioning that in addition to all the other projects on my GitHub account, the source code for this site is on GitHub as well: https://github.com/DaveKeith/vercel-portfolio.
react-logo

ReactJS

ReactJS relies on JSX components to render HTML elements to create a single page application. This can be very convienent when needing to reuse various elements and their functionalities. Also simplifies dynamically creating elements.

  • NextJS

    I see NextJS as a library that takes React to the next level. With the various libraries offered by NextJS, we can improve our routing features (particularly dynamic routing), we can more easily utilize images, and we can even add additional html elements such as head and script.

CSS

A portfolio page should have great styling. Fortunately, I have the skills in CSS (Cascading Style Sheets) to make this site look good. Here are several notalbe features:

  • SCSS

    SCSS is a preprocessor derived from SASS (hence the acronym Sassy CSS). It allows use of variables, functions, and mixins which allow for more reusable and readable stylistic components. My personal favorite use for it is in responsive design, the way that it eases the transition to various screen sizes without exponentially increasing the amount of CSS code needed.

  • Bootstrap

    I like Bootstrap in that it's a well-documented, well-known CSS framework centered around modern design. The documentation can be found here: https://getbootstrap.com. This site utilizes Bootstrap utilities for base features such as font styles, utilities (shorthand, simple, readable classes to modify an element’s appearance), and more advanced features such as a carousell. Additionally, this site uses a sizable list of Bootstrap icons: https://icons.getbootstrap.com.

Hosting

vercel-logo

  • Vercel

    For the client side of this application, I'm hosting with Vercel. Why Vercel? Well, I previously worked with GitHub pages, but once I learned ReactJS, I wanted to show off those skills in a portfolio. Unfortunately GitHub pages wouldn't work with ReactJS so I turned to Heroku to create my portfolio as it was a free resource and allowed me to show off my ReactJS skillset.

    However, there were shortcomings with Heroku:

    • The page took around 30 seconds to load.
    • It works independently from GitHub. It would be nice if you could link the repositories somehow.

    Turns out that Vercel, the organization that brought us NextJS also hosts for free (up to a certain point), and solves the issues that plagued me with Heroku.

  • Firebase

    For the server portion of this application I'm using Firebase to host. It made sense as my previous portfolio used a json data file in a static public folder, which functions differently in a NextJS app, and Firebase allows you to upload a json file.