A portfolio or personal website has become necessary nowadays, whether you want to freelance, find a job, or market your Saas product. You must surely build it at some point if you're a web developer. When It comes to a portfolio, every developer has their unique way of creating it using their favorite tools or remarkable frameworks. However, when it comes to portfolio sites, most are just front-end focused with little or no back end, but that was not the case for me.
Next.js is always my favorite option for building a web application, as It supports SSG and SSR. However, I also wanted a type-safe solution for my site, so I also decided to use the typescript! I’m a big fan of the typescript as It helps to code more efficiently and productively. Therefore, this article is not a tutorial but a walkthrough and breakthrough of my site.
💡 Note: If you don’t want to read till the end, you can visit the site here and view the source code here. Don’t forget to give a star to the project if you like it!
The Stack
Technologies that I used in my portfolio are:
- Nextjs (framework)
- Tailwind CSS (Styling)
- Typescript (Doesn’t need any explanation🤣)
- Hygraph (GraphQL headless CMS)
- Apollo-client (Caching and state management)
And there is no exception that I have used all these excellent techs in my portfolio!!!
💡 The contents in my portfolio are still a work in progress. However, I am working on them.
The About Page
The about page is the first page that people will see as they enter my portfolio. You can also label it as my portfolio's Home page or I*ndex* page.
Here people can find a bit about me, the services I provide, the pricing, clients I've worked with, testimonials, and some fun facts about me. Of course, there are a lot of sections that I could divide into multiple pages. However, I like this minimal approach where a single page contains a lot of information so that my client doesn't have to change page after page every time, which could also be tiresome. And all the data that you can see in the page are all dynamic, coming from the headless CMS I mentioned above.
The Resume Page
On the resume page, people can find my experience, education, skills, languages that I can speak, and my favorite quote as a web developer. Again most of these data are dynamically coming from my CMS.
The Works Page
The works page is an essential part of my portfolio. Here people can find all the projects I have worked with, and upon clicking on any project, a lightbox will open, where people can see all the other information necessary to know about the project. People can even find the project link and the GitHub link there, which will increase the chance to getting traffic to my projects and a star in my GitHub repo.
The lightbox is very heavy on content, So I've used markdown and tailwind's typography plugin
for styling. I didn't have to parse the markdown to HTML, as my CMS automatically does that for me. If you are curious to know how I did it, head over to my GitHub repo which I mentioned above.
The work page even uses cursor based pagination. You can even call it infinite scrolling. I’ve implemented it with the help of my CMS and apollo-client. Cursor-based pagination uses cursor and take to return a limited set of results before or after a specific cursor. The cursor marks your position in the result set and must have a unique value such as an ID or timestamp. To learn more about cursor based pagination, visit this link.
The Blogs Page
Here people can find all of my blogs I've written so far in dev.to. The data here comes from the dev.to API, not from my CMS. Suppose you want to learn about dev.to API functionalities like pagination, limit, posts per page, etc., you can visit the GitHub repo or their own docs.
Like the work page, the blog page also uses pagination. However, this time It is offset-based pagination where you have the total number of pages based on the total number of Items per page. To learn more about offset-based pagination, you can head to this page.
The Stats Page
The stats page is a simple dashboard for my portfolio where people can see the traffic on my portfolio, how many projects I've done, with who I've worked, etc. In addition, I've also added all of my social media links where people can connect with me.
Here I've used the google analytics API to get the traffic information. To see how I've implemented the API, visit this GitHub page or read this dev.to article by Jatin Sharma. His article helped me a lot, really recommend it👌.
The Guest Book
The Guest book page is the one I like the most in my portfolio. The central concept is that people can leave messages on the site for me and others. All of the messages get stored in the CMS, and wherever people will visit the page, all of the previous messages get fetched with the help of apollo-client. Here also, I am using cursor-based pagination(infinite scrolling) to avoid fetching all messages at once.
Here is what the page looks like -
The Contact Page
As It sounds, here people can find all the related information about how to contact me. It has a google map and a form to send me a direct message.
Conclusion
Overall, I like how the portfolio looks like. However, if something is wrong with the portfolio or something that I can improve, please let me know in the comment section. If you’re looking for the site, it’s deployed using Vercel https://portfolio-khaki-iota-89.vercel.app/, and the source code is available on the GitHub Repo.
Thanks for reading. See you in the next blog!😊🙌
Visit:
👨💻My Portfolio
🏞️My Fiverr
🌉My Github
Top comments (54)
You should know that using percentages to show skills is very bad idea.
Thanks for the feedback. Do you know any other way to present the skill? If so then please do tell me😊
Are you trying to represent your proficiency in each technology? Not opposed to the fuel gauge aesthetic, but agree the percentage numbers are confusing.
I'm thinking specifically of how Pluralsight measures and displays skills assessments. (historically)
Just list them w/o percentages.
Js, React, Node etc.
Or can use Icons.
Or Years of experience, that is also valid. So people know how long you have been working with the technology.
But even that can be skewed bad, as then people ask things in the range of "Oh you have 5 years of experience, that means you know everything right?" 🙄
i like the idea. it' cool, few things i would change :
Thanks for the feedback. Just one doubt, If the authentication is purely based on Oauth models how can I use a demo account there?😓
is that's not ok as i did here the demo user nims.devsecbbs.com ...
Your Google Analytics PRIVATE key is public on GitHub... That's terrible.
Yea I know. However, for some reason the env variable doesn't work in vercel env var settings. Works fine in the localhost.
You know that you have to set env variables at build time, right?
Well but you still shouldn't publish it... solve the issue. Working around that is even worse. (Reset the key and try to fix it on Vercel)
Thanks man, Now I've fixed it😊
Awesome! Have you reseted the key? Because it's still public in the history of GitHub if you haven't.
i appreciate the hard work you have put in and you have enlighten me to do my best as well ❤😊
Thank you mate, glad you found the article helpful👌
help me please
Go to github, and read the read.me. You will find the soluation there.😁
nothing helpfull in your github readme.md please tell us in detail how to add cloned hygraph link in the project, we dont know where to put the link.
Your project is Awesome but we also need proper guidance for jr.dev like me.
Hello, sorry for the trouble😊. I updated the project, and my readme file a bit. Check now If it helps🥂.
hi, mate
I can't run the project with readme
please share me detailed instruction
gracias investigue solo le faltaba un .env... otra duda como puedo usar en el blog desde hygraph
Wow what a great Portfolio. If I may ask why do you build it in full stack
Thanks, for liking the portfolio. I build It in fullstack so that I can have CRUD(create, read, update, delete) functionalities😊
Wow,I love the fact that you are putting your skills in to test. Keep it up man
Wow this is really wonderful...
But the typescript part 😅...needs explanation
It's just Javascript, however with types😊
I would like to create the same thing but understanding the code and what I'm doing, you know a good tutorial and thank you 😊
You will be able to make one much better than this, dont't worry.👍 There were lot of tutorials which I went through. However, tutorials are not enough unless you try something by yourself.
You are right, but there are difficult things that must be understood. After that, I do the creativity by myself haha
Amazing website! Thanks for sharing
No problem, glad you liked it😊
I see this repeated all the time and it is simply not true. I'm baffled as to where this assumption comes from. I've just hired a new developer after interviewing many candidates. Every one of the candidates who made it to the final stage did not have a portfolio site. Most time spent looking into candidate backgrounds/work/interests online was spent looking through their GitHub/GitLab projects - from which far more can be learned than via a portfolio site.
Most portfolio sites I see are little more than over-engineered, cookie cutter, vanity driven projects that showcase little other than the end results of following a few '10 different web apps you need to make' style tutorials.
A portfolio site is not necessarily a bad thing, but if the hiring team are doing their job correctly - it will have very little bearing on their decision unless it is something really special and interesting (and, believe me, such portfolio sites are a rarity).