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)