As important as having a good CV is, having a place showing the work you are doing, or you have done might be more important. If you only have it on a repo on Github or saved on your laptop, it’s no good if you don’t show it.
It might be scary at first, and you might feel unsure what you have is worth sharing but it’s for different reasons:
- You can keep track of your progress and really compare what you could achieve months or years ago and appreciate all the progress you’ve made.
- It will force you to practice more.
- It will show what you are capable of.
- Also, recruiters prefer to see something pretty or interesting (or both) in the middle of reviewing CVs.
My first portfolio
Inspiration
Where to start and how to organise all the ideas might be tough and overwhelming. A habit I’ve got is to check Dribbble. I’m still training my eye so definitely this helps massively to see what is a trend or a good way to organise your site.
Tech stack
Checking on Github it’s been nearly a year I’ve built my first portfolio which you can find here.
I built this portfolio using mostly Tailwind CSS and plain HTML. I decided to pick Tailwind over other options such as Bootstrap or Materialize, just to learn something new. I think that’s one of the wonders of tech, you can pick something new and give it a go.
Even though I used mostly Bootstrap in my Bootcamp projects I decided I wanted to try Tailwind as everyone I follow on Twitter was talking wonders about it, and now I know why.
Tailwind is way more flexible and not as opinionated as Boostrap (you might end up having to use !important way too often on your CSS) and it often behaves in unexpected ways. With Tailwind you’ll have all the control over your classes and your CSS will be really small or even inexistent.
Deployment
If your site is static and your budget is tight you can always deploy it on Github Pages your URL will include your username and the name of your repo:
https://carolinacobo.github.io/portfolio/Once you push to it it will automatically deploy or redeploy, easy right?
But if you are willing to pay for a domain you can always get a more personal one with your name or something that you feel represents your brand. I used my name for my portfolio so if someone searches my name they’ll get to my portfolio.
To do the deployment and get the domain I used Vercel. I found the domain I wanted and bought it for $20 a year, which for me has paid off. But there are great options that are free.
You only need to go to the site, register, and in the Dashboard, you will find different options on the dashboard to buy the domain, then link your repo and configure the deployment.
You can also have free domains on Github, and once it’s linked to your Github account it will be really similar to using Github Pages.
My new portfolio
A few days ago I finished my new portfolio, which you can see here. You may notice that the structure is really similar to my first one, but there are major changes in what’s built on. The tech stack I used was:
- React
- Tailwind CSS
- Next.js
Why did I use these technologies?
React is one of the most used frameworks worldwide and also in my current role, I’m working with both React and Tailwind. Any opportunity I might have to work with them I’ll take it, as I know it will benefit me in both my professional and personal work.
Next.js is an open-source development framework that is built on top of Node.js. This allows React-based web applications functionalities such as server-side rendering and generating static websites, which for blogs or portfolios is great. This wasn’t entirely impossible to do before having Next.js, and it required a lot of tweaking with issues related to caching, server load, etc.
On the technical side, Next.js will only load the Javascript that is needed on every page, which makes for much faster page loading times as it won’t load for anything the user is not asking for.
It can also help you with incremental static regeneration and static site generation. Another way of building more SEO friendly websites and applications, and that means that the site can be easily found.
Other options
There are other tools that can be used as I mentioned above:
- Bootstrap might be easier if you are using it already in other projects. In my opinion, Tailwind is better and the documentation is easier to follow than in Bootstrap.
- Wix or WordPress are easy, and you can personalise them but you may have to pay to have a better layout that will look different to the free ones. Here you can find a tutorial on how to build on Wix and Portfolio Themes on WordPress if you want somewhere to start.
Conclusion
If it’s your first attempt, start with something easy and simple, you can always improve it or just make it brand new! I think having a showcase of your work will take you a long way.
You can also ask for help from other people, I did when I needed some support as it can be frustrating feeling stuck or not knowing how to solve some problems you might come across.
Also, I know writing or working on side projects while working full time might be difficult, but it’s also really rewarding having it all together and showing the world what you are capable of!
Thanks for reading, I really appreciate your time! 🎉 If you need any help please reach out!
Next week I’ll be sharing another post about personalising the Readme file on Github and how I’m starting to get into the habit of writing, so please subscribe so you will receive it on your email when it’s out!
If you have any questions feel free to drop me a message on LinkedIn or send me an email. 😊
Top comments (0)