Kaylog
Creating my personal Portfolio: Comprehensive guide
Jun 22, 2022

Creating my personal Portfolio: Comprehensive guide

Short Introduction:

During a job search, the portfolio showcases your work to potential employers. It presents evidence of your relevant skills and abilities. Aditionally, portfolios are a great way to demonstrate the competencies you would list on a resume or talk about during an interview. They allow you to show and not just tell.

A little background about the creation my protfolio:

Because of how important portfolios are when it comes to software development professionals, I was encouraged to create one so I could share with others (specially potential contractors) my projects and software creations. It was not an easy task, since many of the knowledge I needed to create it was acquired mainly on my own, researching, facing many errors, watching several tutorials and almost giving up on many ocassions. Even so, I continued to put in all the effort I could, until finally, my personal projects-sharing space was created. PD: Shoutout to for being my guide throughout the majority of the process with one of his video tutorials on YouTube.

Content:

First phase

The installation instructions for each library and framework will be below.

To start off, let's talk about the libraries, frameworks and additional elements that were used in the creation of my portfolio. Before starting to code, I installed essentials for web development such as (You can use any other Javascript execution enviorment, E.g. which is relatively new and allegedly faster than Node JS) and which is my preferred code editor. Other tools were , which is the software I use to handle version control but there are other ways to handle version control E.g. using . All of the software previously mentioned can be downloaded directly from the internet (just hit the name of any you're interested in and it will take you directly to the official website 😉).

For the Front-end side I used a very popular framework called , additionally, they were libraries I installed to manage different client side (UI) functionalities, these are: (to be more specific, I used the material tools of this library), , , .

For the Back-end, most importantly I used Javascript as my main programming language. Adtionally, to store and handle the data on my website I used , which is a unified and headless content management system that allows users to work and build projects with their teams in real time, and also to store and deploy content across any presentation layer.

Now, let's see how to install each of the previously mentioned development tools:

npm i @mui/material

npm i framer-motion

npm i react-icons

npm i react-tooltip

Final note

The description of each method and function used in the project is within the code itself, so you all can understand what is the exact functionality of each individual piece that structurally composes the entire website.

Comment area

Related posts

Categories