# Introduction

A portfolio is where you present your projects, skills, and a brief introduction about yourself in an engaging and simple way using various web development technologies.

Building your own personal portfolio can be both enjoyable and challenging. It serves as a valuable opportunity to not only test your web development skills but also to attract potential employers or clients.

Choosing the appropriate tools to construct your personal portfolio is crucial to align with your intended goals of showcasing your work.

In this blog, I will share my personal experience and provide guidance on how I built my personal portfolio from scratch using HTML, CSS and vanilla JavaScript.

**Why not used frameworks or libraries like ReactJS?**

I didn't use frameworks like ReactJS or Bootstrap because I didn't want this project to be bloated with unnecessary libraries and components that I wouldn't use.

## Defining the Requirements

**What are the necessary requirements in a personal portfolio?**

A complete portfolio should include sections such as an `about me` section, a showcase of your `projects`, `contact information`, and a display of your `skills`.

Before you start developing, it is important to carefully plan how are you going to present these requirements to your audiences.

Here's a piece of advice: Your portfolio should have a personal touch and reflect your unique taste and style.

In short, your portfolio should define who you are in a single webpage.

## Setting Up the Development Environment

At this point, I assume you are already familiar with using Git, Github, and a code editor like Visual Studio Code. These are the tools that we will be using to set up our development environment.

**Step 1.** Create a `new Github repository` and name it anything you want. I named mine "my-portfolio".

![new-github-repo](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/github_repo.webp)

**Step 2.** Copy the `SSH` code generated to clone the repository in your local computer.

![copy-github-ssh](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/github_ssh.webp)

**Step 3.** Clone the repository in your computer using `git clone [SSH CODE HERE]`

![git-clone-the-repository](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/git_clone.webp)

**Step 4.** Open the cloned repository in your computer using the code editor of your choice. I used VS Code. I just type `code .` in the command line and it will open. *Awesome!*

![initial-project-look](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/vscode_project_initial.PNG)

Note that the project only contains the `README.md` file that we created in Github earlier.

##  Designing the Layout

Before we delve into coding, it is essential to design the layout of your portfolio.

When users visit a website, the initial impression they receive is its visual appearance. That is why prioritizing the visual appeal of your personal portfolio is crucial.

Thankfully, numerous online tools are available to assist you in designing the visual aspects of your portfolio. However, before resorting to those tools, it's important not to overlook the classic approach to design – using pen and paper.

Visualize how you want your portfolio to look by using pen and paper. This is where your creativity comes into play. Write down and sketch every design idea you have. Let your imagination run wild!

After you have documented your ideas, let's use a popular design tool called [Figma](https://www.figma.com/) to transform your imagination into reality!

I personally utilized Figma to design the layout of my personal portfolio. It is incredibly user-friendly and straightforward to use. Here is an example of how my initial design appeared in Figma:

![my-figma-portfolio-design](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/figma_design.webp)

Please note that I developed this portfolio website with a mobile-first design approach in mind. This means that I prioritized how it would appear on mobile devices before incorporating styles suitable for larger screen devices such as tablets and desktops.

You can directly view the design in Figma by clicking on the following link: [my-figma-portfolio-design](https://www.figma.com/community/file/1248105114067528955).

## Implementing the Structure with HTML

Ready your gears, as we will now officially dive into coding!

We will use HTML to build the basic structure of our portfolio. Using HTML, we will create the header, project, skill, and contact sections.

**Quick tip:**
You can install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension in VS Code so you don't have to refresh the webpage everytime you commit changes.

### Header
Create the header section where the navigation section resides.

I used a completely open-source library, [Ionicons](https://ionic.io/ionicons) to create icons in the header like: 

`burger menu` 

```html
<ion-icon name="menu-outline"></ion-icon>
```

and `close` symbols.

```html
<ion-icon name="close-outline"></ion-icon>
```

**How to use Ionicons?**

> Place the following `<script>` near the end of your page, right before the closing `</body>` tag, to enable them.

```html
    
    <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script>
```

As an alternative, you can use [Google Material Icons](https://fonts.google.com/icons) for free  in your project.

### Hero Section

The hero section is one of the most crucial parts of your personal portfolio. It is the first thing that users see when they visit your site, so it should grab their attention and be visually appealing.

In my approach, I prioritize simplicity by incorporating a picture of myself along with a brief description of what I do.

### Projects

The projects showcased in my portfolio are ones that I have built throughout the past year. I intentionally excluded exercises from coding tutorials, such as calculators, tic-tac-toe games, and to-do lists, as they are not considered necessary.

It is recommended to include projects that you have deployed in production, allowing other users to view and interact with them.

In my portfolio, I feature a game that I developed and published on Steam, along with various websites built using React frameworks and other web technologies.

### Skill

I included skills such as programming languages that I have acquired while developing websites and games.

You should add yours and **be honest** about it. 

If you are not comfortable or proficient in a specific technology or programming language, it is best to refrain from including it or else it might bite you in the future.

Only include tools or technologies that you are knowledgeable about and have previous experience building with.

### Contact Information and Form

How can clients or potential employers reach out to you if you don't have contact details in your portfolio? 

Don't forget to include your email. If you're not comfortable putting your contact number, then it's alright not to put it.

Additionally, if you wish to incorporate a form on your portfolio where clients or potential employers can message you directly, you can utilize [Formspree](https://formspree.io/). By binding Formspree with your email address, you can conveniently receive and view the messages sent through the form.

**How to use Formspree with your HTML form?**

Just set your form’s action to their endpoint and that's it. This is how it looks on my form:

```html
<form
  action="https://formspree.io/f/xjvdrvak"
  method="POST"
  class="contact-form"
>
```

Obviously, you need to create an account with them to use their API. It's free, so don't worry.

### About Me

What is a portfolio without an *about me* section? This is where you describe details about yourself, like hobbies, interests, and things outside of your professional work.

Make it personal and relevant to you, so others won't misunderstand you as an AI or something.🤣

## Styling with CSS

Adding visual effects and colors using CSS is crucial, as this will amaze visitors to your website.

To style my portfolio, I used **custom properties or CSS variables** which I added at the `:root` of my `style.css` file.  
 
Some of these are shown below:

```css
:root {
  /*colors*/
  --sea-blue: hsl(197, 100%, 29%);
  --pine-green: hsl(175, 98%, 24%);

  color-scheme: light dark; /* both supported */

  /*typography*/
  --ff-oleo: "Oleo Script Swash Caps", cursive;
  --ff-poppins: "Poppins", sans-serif;

  /**box shadow*/
  --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
  --shadow-2: 0 4px 28px hsla(216, 14%, 14%, 0.07);
}
```

CSS variables are very helpful in writing your CSS styles. 

For instance, it allow a value to be stored in one place, then referenced in multiple other places.

I can access the variable `--sea-blue` written at the `:root` like so:

```css
.buttonColor {
    color: var(--sea-blue);
}
```

Also, the other benefit of custom properties is that they can serve as a semantic identifier. It is easier to understand `--sea-blue` than `hsl(197, 100%, 29%),` isn't it?

## Adding Interactivity with JavaScript

JavaScript can make your portfolio engaging and interactive. By adding scroll reveal effects and button click functions, it can increase the user experience.

By using the following script, you can achieve a scroll effect on the header section specifically for mobile devices.

```js
/**
 * HEADER
 * active header when window scroll down to 100px
 */

const header = document.querySelector("[data-header]");

window.addEventListener("scroll", function () {
  if (window.scrollY > 100) {
    header.classList.add("active");
  } else {
    header.classList.remove("active");
  }
});
```

See the header showing up when I scroll down to 100px.

![header-scroll-effect](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/portfolio_header.gif)

Also, I have this scroll reveal effect using the code below.

```JS
/**
 * Scroll Reveal
 *
 */

const revealElements = document.querySelectorAll("[data-reveal]");
const revealDelayElements = document.querySelectorAll("[data-reveal-delay]");

const reveal = function () {
  for (let i = 0, len = revealElements.length; i < len; i++) {
    if (revealElements[i].getBoundingClientRect().top < window.innerHeight) {
      revealElements[i].classList.add("revealed");
    }
  }
};

for (let i = 0, len = revealDelayElements.length; i < len; i++) {
  revealDelayElements[i].style.transitionDelay =
    revealDelayElements[i].dataset.revealDelay;
}

window.addEventListener("scroll", reveal);
window.addEventListener("load", reveal);

```

This is triggered when the website first load and when the user scroll down.

![scroll-reveal-effect](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/scroll_reveal_effects.gif)

You can copy the code above and test it on your portfolio website. Don't forget to git commit and push your changes to your main repository on Github!

## Deploying the Portfolio

After putting everything up, it's time to deploy the website on a hosting platform. There are many hosts out there, but the best and free I've seen so far is Github Pages.

To deploy your website in Github Pages is fairly easy. Just go to the `Settings` tab of your repository.

![github repository settings](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/github_settings.PNG)

Click `Pages` 

![github pages](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/github_pages.PNG)

From the dropdown menu, select `main` branch and then press `Save`

![github main branch](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/github_main_branch.png)

Wait for a little while, refresh the current page, and you'll see your new website deployed. Congratulations! 🎉

![github pages live deployed](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/github_pages_live.png)

**Quick tip:** You can also create your own custom domain name with Github Pages.

You can check the live demo and code repository of the complete portfolio website below:

Live Demo: [https://www.naknamu.com/](https://www.naknamu.com/)   
Github Repository: [source code](https://github.com/naknamu/humble-portfolio)

# Conclusion

Developing your own portfolio website takes a lot of effort, but it's all worth it in the end when you see the final result.

Using HTML, CSS, and JS makes creating the portfolio simple and not bloated with unnecessary features from other frameworks. Also, the performance and loading of your website are quite fast. So it's a good decision to just use these three technologies when thinking of developing your own portfolio.

That's all, folks! Thank you for reading, and I hope you learned something new in this article!👋