DEV Community

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

Posted on

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

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. You can check out my portfolio at My portfolio website 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.
  2. Sign Up on GitHub: Your code’s new home.
  3. Install Git: For version control.
  4. Basic HTML, and CSS Knowledge: You're good to go if you know how to create a basic webpage! πŸ‘

Image description

Actual Implementation πŸ’»
Let’s get our hands dirty with some code!

  1. Create Profile Images πŸ–ΌοΈ:
  • Choose your best photos (because first impressions matter!).

  • Visit pfp maker, upload your photos, and customize them. Download your stylish new profile pics.

  1. Set Up GitHub Repository πŸ› οΈ:
  • create a new repository on GitHub.
  1. Clone Your GitHub Repository Locally πŸ–₯️:
  • Open your command prompt and run:
git clone https://github.com/YourUsername/YourRepoName.git
Enter fullscreen mode Exit fullscreen mode

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

  1. Clone My Repository:
  • In a different folder, clone my repository:
git clone https://github.com/Abhiz2411/abhijit-zende-portfolio.git
Enter fullscreen mode Exit fullscreen mode

This is where all the magic happens! 🎩✨

  1. Copy Files πŸ“:
  • Copy all the files (except the .git folder) from my repository to your repository.
  1. Customize Your Website 🎨:
  • Open the project in VSCode.

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

  1. Track and Commit Your Changes πŸ”: Run these commands in the VSCode terminal:
git add .
git commit -m "Initial commit: Portfolio website"
Enter fullscreen mode Exit fullscreen mode
  1. Push Your Changes to GitHub πŸš€: Push the code to your GitHub repository
git push origin main
Enter fullscreen mode Exit fullscreen mode
  1. Deploy on Vercel 🌐:
  • Sign up on Vercel using GitHub.

  • 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 🌟

  • Minimalistic Design: Clean and simple, just like your morning coffee. β˜•
  • Consistent Styling: Because nobody likes a messy wardrobe. πŸ‘”πŸ‘—
  • Only HTML, CSS, and JS: No frameworks, no libraries β€” just pure code. πŸ’»
  • Beginner-Friendly: Perfect for those just starting. πŸ†•
  • Smooth Animations: Like butter on toast. 🧈
  • Great Profile Pics: Thanks to PFP Maker! πŸ“Έ
  • Fast Loading: No one likes waiting in the digital world. ⏩
  • SEO Friendly: Helps you get noticed by search engines. 🌐
  • Easily Customizable: Make it yours! πŸ› οΈ

Extra Feature: Dark Mode/Light Mode Switch πŸŒ—
Because who doesn’t love a good theme toggle?

Credits πŸ™
Theme Inspiration: Check out 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! πŸŽ‰

Top comments (0)