The first thing, I want to say thank to Mr.CodeBucks. I am a back-end guy and maybe that why front-end would be a nightmare with me (Like my post if you felt it too 😭), so I have followed this video of CodeBucks to create my portfolio by NextJS ft. TailwindCSS. After a few days, I finished the front-end and ....
As I said, I am a back-end guy, so I want (or try) to do everything automatically. In this post, I will walk around what I have implemented 👀
Hosting & Deploy automatic
I hosted my portfolio in Vercel. The main reason why I chose it is the hosting has great support for NextJS and IMPORTANT THING, it is total FREE 🤑 (with my usage). And I have use GitHub Action for deploy it automatically when I make or merge change into main branch.
Fetch Articles
I haven’t yet launched my blog, but I recently began writing articles here for the past few months. I decided use DEV Community API to fetch articles which I have published and show it in my website 😋.
Fetch Projects
This is the hardest part (I think) in all of them, it took me 3-4 hours to find the solution 😤. The main core is I mix Google Sheet and Google Drive to store my project's info (title, description, git URL, thumbnail), after that I open API from that sheet which work like a tiny CMS, to get the data 🤗. You will have question why I not use GitHub API, I have the reason and I will show you in relate post later.
Conclusion
That is what I have done in my portfolio website for now, maybe I will have more change in the future 🧐. And I will write a detailed post for each feature above to show how I implemented it. Follow me if you feel interested in it 😉.
Happy Coding!
Top comments (2)
Nice. To store my project data, I just created a JSON file containing each project name, thumbnail, and live site URL, and placed it in the root directory of my portfolio site
Yeah, I have do that way in the past also, it is the fastest and easiest way 🤣