I name my portfolio as a psuedo full stack application.
When I am building my portfolio I did a lot of research make it full-stack but also free for life.
Portfolio is a thing I make my work public I want to share. Hence my I know my use case perfectly. I began writing a requirements in old-school method pen and paper.
These are the main requirements :
- It should have minimal and fast design.
- Make components reusable components
- Not bruteforcing data but prefer a CMS or json or CSV.
- Since it is just a portfolio no need to be dynamic.
- I need to host and make completely free throughout my life.
Figuring out the required tech stack and what i am good at :
I am very good with Nextjs, JavaScript, Tailwindcss and framer motion.
The above tech stack is more than enough for this project. Some cases it might overkill too.
So this is the finalized tech stack.
- Framework — Nextjs
- Language — JavaScript
- Designing — Figma the G.O.A.T
- Styling — TailwindCss and Framer motion.
- Blogging — Medium
Now I began the process :
1. It should have minimal and fast design.
- You might ask me why choosing minimal design ?
Here is the answer : previous blog - I took a bus and searched awwwards for inspiration for live pages and dribbble for the designs.
I guess these are too overwhelming 😃
- I got hooked to design style called Bento Boxes.
- I will explain about the bento grids in a new blog and you can easily create them.
2. Start the design process
- In the process I got to know about a website called bento.me while I am stalking Michal Vasko
- I dismantled bento.me and analysed complete styles with my Analysing magic.
- https://brittanychiang.com/ thanks for the inspiration too.
- Then began to code with NextJs , Tailwind and Framer. I made the resusable component.
- Till here the frontend and design part is completed.
3. Making it to Fullstack.
- First of all I need a CMS.
- And I don’t want to waste money for servers.
- So I have been making Content Managements Systems from almost 2 years by now. I have too many projects with them.
- Here is the flow
I think you undertood.
Commonly asked questions :
What to do with high pixel images as github has limited storage?
I keep the href links from cloudinary or drive or unsplash instead of uploading to github .
Don’t you think it will waste time to push to git and make complex ?
I don’t change my portfolio every now and then and when I do change I dont mind wasting 2min extra rather than wasting money.
