Don’t Be the Party Loner: Build and Host Your Portfolio Website for Free in 2024πŸŽ‰

Abhijit ZendeAbhijit Zende
3 min read

In 2024, not having a portfolio website is like being the only person at a party without a smartphone β€” awkward and out of place! πŸ˜… But don’t worry, creating a professional portfolio website is easier than you think. Plus, hosting on Vercel is free, and I’ve got all the code ready for you. Check out my portfolio at Abhijit Zende portfolio to see what you’ll be building! So let’s get started!

Prerequisites πŸ“‹

Before diving into the fun stuff, let’s get the basics out of the way:

  1. Install VSCode: This will be your go-to code editor. Need help? Check this guide for VS code

  2. Sign Up on GitHub: Your code’s new home. Here’s how to create an account.

  3. Install Git: For version control. Learn how to install Git.

  4. Basic HTML, and CSS Knowledge: You're good to go if you know how to create a basic webpage! πŸ‘

Figure showing tech stack of the portfolio website project

Actual Implementation πŸ’»

Let’s get our hands dirty with some code!

  1. Create Profile Images πŸ–ΌοΈ:

    1. Choose your best photos (because first impressions matter!).

    2. Visit PFP maker, upload your photos, and customize them. Download your stylish new profile pics.

  2. Set Up GitHub Repository πŸ› οΈ:

    1. Create a new repository on GitHub. Need help?
  3. Clone Your GitHub Repository Locally πŸ–₯️:

    1. Open your command prompt and run:

       git clone https://github.com/YourUsername/YourRepoName.git
      

      Replace YourUsername and YourRepoName with your GitHub username and repository name.

  4. Clone My Repository:

    1. In a different folder, clone my repository:

       git clone https://github.com/Abhiz2411/abhijit-zende-portfolio.git
      

      This is where all the magic happens! 🎩✨

  5. Copy Files πŸ“:

    1. Copy all the files (except the .git folder) from my repository to your repository.
  6. Customize Your Website 🎨:

    1. Open the project in VSCode.

    2. Replace my images with yours and update the content with your information. It’s like putting your face on my body β€” creepy but effective!

  7. Track and Commit Your Changes πŸ”:

    1. Run these commands in the VSCode terminal:

       git add .
       git commit -m "Initial commit: Portfolio website"
      
  8. Push Your Changes to GitHub πŸš€:

    1. Push the code to your GitHub repository

       git push origin main
      
  9. Deploy on Vercel 🌐:

    1. Sign up on Vercel using GitHub.

    2. Create a new project and link it to your GitHub repository. Follow the simple steps, and voila! Your minimalistic portfolio website is live and free!

FAQ Help πŸ’‘

Features of My Website 🌟

  1. Minimalistic Design: Clean and simple, just like your morning coffee. β˜•

  2. Consistent Styling: Because nobody likes a messy wardrobe. πŸ‘”πŸ‘—

  3. Only HTML, CSS, and JS: No frameworks, no libraries β€” just pure code. πŸ’»

  4. Beginner-Friendly: Perfect for those just starting. πŸ†•

  5. Smooth Animations: Like butter on toast. 🧈

  6. Great Profile Pics: Thanks to PFP Maker! πŸ“Έ

  7. Fast Loading: No one likes waiting in the digital world. ⏩

  8. SEO Friendly: Helps you get noticed by search engines. 🌐

  9. Easily Customizable: Make it yours! πŸ› οΈ

Extra Feature: Dark Mode/Light Mode Switch πŸŒ—

Because who doesn’t love a good theme toggle? Tutorial to add dark mode with single line of code

Credits πŸ™

Theme Inspiration: Check out this awesome tutorial.

And there you have it! Your very own portfolio website. Remember, having a portfolio is like having a superpower in the tech world. It showcases your skills and projects, helping you stand out to potential employers or clients. So don’t be the party loner β€” join the crowd and build your online presence today!

Check out my portfolio at My portfolio website link, If you have any questions or need further assistance, feel free to contact me at abhijitzende75@gmail.com.

Happy coding! πŸŽ‰

1
Subscribe to my newsletter

Read articles from Abhijit Zende directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Abhijit Zende
Abhijit Zende