Why should you have your portfolio? Because why not!

Portfolios are awesome! Is there any easier way for us developers to convert our personalities into a bunch of HTML, CSS & Javascript? You can write blogs, rant about anything, give your projects a professional showcase. And not to forget the optimization of your online presence - which is golden for any job-seeker, freelancer, or an indiehacker.

This piece is but a humble guide on how to set up your portfolio with a minimum amount of work. This is how I did it, and anyone who wants the same & has basic HTML & CSS skills, be my guest for the ride. 🚀

Step1: Building A Website

Option A: Code up your static site

The easiest way to get started is to use a static site - written in plain HTML, CSS & minimal JS/jquery. You can use tweak some of the freely available templates. Or if you really want to show off your skills - you can create something original & truly yours.

For layouts & design inspirations, you can also look around the personal websites of amazing people out there in the community. The idea is to keep the website simple & aesthetic - with minimal effort.
Show your personal site/blog keeps on popping up on Hackernews frequently and can be a great source of inspiration.

Link: frequent HN queries on portfolio showoffs

Option B: Use static site generators

If you don't want to go through the hassle of coding up entire HTML pages, the other choice is to use the static site generators like Hugo, Jekyll, or Gatsby. They have a simple learning curve & amazing documentation. And provide you a wide variety of themes to be customized accordingly.

Personal Note: I built my first site with hugo - up and running in just a few minutes. But dropped it later, as the confinement of themes just didn't felt right to me.

Once you're satisfied with your website design, it's time to go live!

Step2: Deploying the Site

If you've used any back-end frameworks while building the website (which I haven't) you can deploy the server with Heroku, AWS, Google Cloud for practically free.
But if it's just html & css; Netlify, Github Pages, or Firebase are the easiest way to go. I've used all three of them in past, and it's just a matter of minutes when your site will be alive using them.

Though you can choose your domain name here ( if available ofc ), but the only compromise is the custom suffix you're gonna get in URL. The next section is about avoiding that.

(Optional) Buying A Domain Name

Well, there's nothing beats having a .com behind your name, does it? 😎

Even if you're not lucky (with a common name), you can easily get your name's domain at dirt-cheap prices (as low as $10-12). If yourname.com is taken, the Beast Search Mode on namecheap.com (don't go on the name, it's really cool) can suggest you the next best available options in similar price range.

There's been a lot of debate on using your real name/nickname vs pseudo-name as your domain name. In my opinion, it's best to go with your original name, as it's one's first identity & people are more likely to search you by your name unless your pseudo-name is more famous online( ahem...PewDiePie).

So now your portfolio is up & shining, it's done, right? But wait, you type your name in google search & your portfolio isn't even on the last search of the last page. All you can see is your (and namesakes) profiles on other platforms & a bunch of things you've signed into a few years back.

What the hell happened? What was the point of a tree falling in the forest if no one's there to listen to its sound!

Step3: Making Your Site Visible to the World

Here are a few well-proven tips to increase your SEO:

• Google search works on backlinks.Means, the more branded sources pointing to your site, the higher is it's rank.So, add your amazing site in all of your social media profiles.
• Also content is the key here.So you should keep on writing more content to your site - like blogs/videos/photographs. And post them on the platforms with a wider audience, which point to your site- to let google's crawler know that your site exists.
• Another tip: Give your website url as meta-content in every image or file.Eg:

<img src="img.jpg" alt="www.aayush4vedi.com">

( ͡° ͜ʖ ͡°)

Keep doing this and let's hope you will see your site on the top google search result in few weeks.