As an aspiring developer or designer 😎 you'll have to showcase your great projects for hiring managers & recruiters through your portfolio. In today's article I'll show you how to create your very own portfolio and publish it FOR FREE! 🤩
Have a look at my own Portfolio website to get an idea of what yours will look like after you complete the tutorial! 😉
Design your portfolio website
In the first step you'll have to either design your website from scratch or edit a template. Feel free to work with any technology you'd like and any libraries you want. Be creative! 👨💻
Tip: Many websites out there provide free templates for any kind of website. You'll find a hand-made list at the end. If you're curious, I used HTML5UP for my website. 🌟
In this process, you'll have to gather your open source projects, clients case studies and any other works you've done that involve your professional skills. Make sure to write a little description of each project and insert a link to it if it's a website or GitHub repository. Your portfolio is also the best place to put links to all your social media accounts and give an insight of your education, career and social life. 🤓
Tip: Best work comes first! No need to fill it up with meaningless projects. Recruiters prefer quality over quantity.
Host your website
After you're done with coding your website (which takes usually 3-5 days) it's time to get it online! You have many option in this step, you can for example upload it to GitHub and get a GitHub pages link, simply. 🤷🏻♂️
Tip: Name your GitHub repository username.github.io and use your repository as host. 💫
Personally, I recommend Netlify or Vercel for hosting & deployment. My own portfolio is hosted on Netlify.
Why to choose Netlify 🎯
It provides VERY FAST deployment (Really. It's very fast!)
100 GB of traffic monthly for free (That's more than enough for a personal website)
Loading speeds are great thanks to their CDN. ⚡️
Tip: Netlify also provides FREE SSL Certificates 🔒 for your website provided by Let's Encrypt. It takes a couple minutes to see the green lock on your website and it doesn't need configuration at all.
Get a free domain name! 💲
The final step (and maybe the most interesting) to creating your amazing portfolio website is setting your domain name!
For this step we'll use the famous Freenom, a free domain provider that allows you to choose from a range of free domains: .tk .ml .ga .cf etc...
Tip: This step is better explained with a video. Here is the best tutorial out there, fast and straight to the point. Make sure to follow step-by-step.
Link Netlify with your new domain name ✔️
The steps to link your domain and host are pretty simple:
- Add a custom domain to your site on Netlify dashboard.
- Go add Netlify's nameservers to your domain name on freenom's dashboard.
- Click Verify DNS Configuration on the bottom of the page to launch the auto SSL Configuration. 🔒
- Wait a couple minutes (up to 10 minutes) and come back, you'll see that your website is live with a green lock!
- Congrats king/queen you did it! 👑
Tip: You can follow this step-by-step video tutorial if you encounter any problem or need further clarifications.
Conclusion
These are the steps you need to follow in order to get your portfolio website up and running. Thanks for your time and I hope to see all your portfolios in the comments section. Support me by sharing this article and following me on social media:
GitHub / LinkedIn / Twitter / Facebook
Fun fact: This is my first post here I hope you guys love it :)
Free templates for your websites 🆓
- html5up.net HTML5 Templates that are fully responsive and easy to customize.
- ThemeFisher Free Bootstrap Templates for a variety of uses.
- BootstrapMade Website templates for creative agency, design and photography.
Top comments (25)
This is very useful for anyone unfamiliar with personal website creation. I also appreciate the amount of free stuff that is available. Thanks for sharing, Jihed Kdiss
Thanks for sharing 👍 😊
I never made a portfolio I don't know if I ever will, but it's so affordable like this 😅
Hi,
Nice post and thank you for sharing. I've a free Next.js template for portfolios which you can find the explanation about it here
It's a very clean and neat design buddy I love it and the photoshoots are great as well. I'm wondering what technology did you use for the contact form?
Thanks, that's nice of you.
I've used MUI as the UI library, and the contact form is based on MUI
ButtonandTextFieldcomponents. For managing the form inputs, I've usedFormik, and it can be connected to an existing email for receiving form feedback withnodemailer.shrihari-portfolio.vercel.app/ Here is my portfolio , and if you guys want it you can use this as the template. ( Template link in the bottom of about)
Good job mate the design is lovely and the loading bar especially is creative i like it so much! I have a question how did you integrate the blogs from dev.to into the blogs section?
Dev to provides api s which can be used for that.
Nice post 🙌 but i can't access your portfolio site 😥
It's available here jihedkdiss.ml/ try again and let me know if you have any problems :D
still can't 😥 the server IP Address could not be found.
No problem mate there's always a solution. Since it's a single page I took a screenshot of the whole page using my browser and here's the link ibb.co/d29yrh9
wow cool, thank you. i wanna make this one 😆
Some good resources here.
Here's my portfolio website created with React Js and TailwindCss
portfolio-shubham-tiwari.netlify.app
I gave it a look and it's so good-looking and professional! The design is just amazing keep going bro. Consider grabbing a free domain from the tutorial ;)
Thank you
You can host on surge.sh too, very easy to remind domain.
rauldipeas.surge.sh
Great suggestion Raul! And your portfolio looks very creative keep up :D
Oh, I forget to mention that I used a HTML5Up template too.
html5up.net/aerial
It's just a hotsite, but thank You for the comment, I'll try to improve it soon!
Wanna see your portfolios guys!
You can visit mine here
Yours is absolutely the BEST I can't deny that. It's just amazing with all the extensions and useful tricks (dark mode, spotify, statistics...) keep up the good work buddy <3
Some comments may only be visible to logged-in visitors. Sign in to view all comments.