How I Created my Complete Portfolio Website in less than 2 hours 🤯 ( No Clickbait )
Tags: career, css, javascript, portfolio
Published: 2021-10-26 14:09:11

Few days before, I created an OpenSource Project called **[Dopefolio](https://github.com/rammcodes/dopefolio)** and wrote an Article about it **[here](https://dev.to/rammcodes/i-created-an-opensource-portfolio-template-for-developers-1ij9/)** explaining the project. 🚀 

I decided to use **Dopefolio** to build my own Portfolio Website 🥳 as **[Dopefolio](https://github.com/rammcodes/dopefolio)** is an OpenSource Portfolio Website Template for Developers.

**Fun Fact**: I was able to build my Entire Portfolio Website in Less than 2 hours 🤯 and in this **Article**, I'm going to explain how I was able to build my **[Portfolio Website](https://rammaheshwari.com)** so quickly 🤘

<div align="center">
  <img src="https://i.ibb.co/XZMvdV2/Untitled-design-3.jpg" alt="Ram Maheshwari Portfolio Site Preview" width="100%" style="margin: 0;"/>
</div>

---

First, let's see what are the minimum requirements that we will need to build the portfolio site and it's not much 😉

#### All we need is ⬇️
- Basic Knowledge of HTML
- Basic Knowledge of GIT
- NodeJs Installed locally

and that's it, that's all you need in order for you to build a professional portfolio website as soon as possible ✌️

---

### I followed these 3 steps to build my **[Portfolio Site](https://rammaheshwari.com)** in less than 2 hours

1. Cloned the **[Dopefolio](https://github.com/rammcodes/dopefolio)** Repository
2. Updated the Text, Theme Color, and Images inside the **html** files based on my information.
3. Hosted the website online on Netlify ( Optional )

> **Note**: Everything regarding the setup and modifying the Dopefolio repo is already explained in the README.md file of Repository

---

### Step 1:

For step 1, all we need is to have some basic understanding of GIT so we can clone the Repository, and then we can remove the git origin to a new origin in our own Github account.

<div align="center">
  <img src="https://i.ibb.co/9ZsL9F8/Fire-Shot-Capture-086-rammcodes-Dopefolio-Dopefolio-Portfolio-Template-for-Developers-github-com.png" alt="Dopefolio Github Repo" width="100%" style="margin: 0;"/>
</div>

---

### Step 2:

For step 2, we need some basic understanding of HTML so we can change the text and images inside the HTML files. 

**Note**: I have used mockups for my project images instead of just using regular images. If you like to use mockups as well, then you can generate them for free on websites like **[Media Modifier](https://mediamodifier.com/)**, **[Smart Mockups](https://smartmockups.com/)**, etc.

<div align="center">
  <img src="https://i.ibb.co/pQMWnFp/Copy-of-Add-a-subheading.jpg" alt="With and Without Mockup" width="100%" style="margin: 0;"/>
</div>

---

### Step 3 ( Optional )

If you like to host your site online so other people can use it then you can do it very quickly using **[Netlify](https://netlify.com)**

Netlify makes it very easier to **host** the website online and it's also **free** to host website on Netlify.

The **README.md** file of the **Dopefolio** repo already provides the instruction for hosting the site on **Netlify**.

<div align="center">
  <img src="https://cdn.sanity.io/images/ti7si9cx/production/656e951d31f3dc0f061a57466d01def70a81a6af-1500x1000.gif?w=1382" alt="Netlify" width="100%" style="margin: 0;"/>
</div>

---

#### So, after following all the steps, I ended up building my own **[Portfolio Website](https://rammaheshwari.com)** 🥳

<div align="center">
  <img src="https://i.ibb.co/wNQdX3P/Untitled-design-2.gif" alt="Netlify" width="100%" style="margin: 0;"/>
</div>

Feel free to check the website **[here](https://rammaheshwari.com)** and share your feedback on it 😸

I hope you find this post to be helpful and thanks for reading it 😇

---

## P.S. ✌️

If you are looking to hire a developer at your company then feel free to contact me on my **[Website](https://rammaheshwari.com)** or **[Linkedin Profile](https://linkedin.com/in/rammcodes)** as I'm also open to Job Opportunities 😇

---

Please **React** with ❤️ + 🦄 + 🔖 , As it takes time to create such content so it will be very helpful if you show some love to this post.

Share your feedback by **Commenting** below 💬

Drop me a **Follow** for more **Awesome** content related to **Web Development** and **Programming** 🙌

Feel free to **Connect** or **Follow** me on my **[Linkedin Profile](https://linkedin.com/in/rammcodes)** 🙌

### **Thank you for your support** ❤️