Develop your portfolio website instantly using one JSON file, highly customisable, complete control to the website.
Under the Hood
The story begins when I want to develop a portfolio website.
I believe every developer should have a personal website, especially if you are a front-end developer.
So I stumbled upon Behance dribble for some inspiration, and even I use Notion also to create a portfolio.
I mean there are tonnes of ways, you can use this single-page landing website builder called Buffer and caards.co
No code tools are quite promising nowadays.
Go google out some ways to build your portfolio websites without any code, you can even ask this to Chat GPT.
Here are my recommendations -
Ultimate Portfolio with Complete control
But that’s not the real story over here,
I want to build a personal website with complete control
I want to use top tech stack for my website, top UI library and so on
I want to customise the website to whatever extent I want
I want to design the website and implement it whenever I want
All those third-party tools have limitations, you and I both know this.
So I reach the conclusion to make the portfolio website on my own.
I immediately use my ready-to-use repository — the 2023 Frontend Full Stack repository. You can get it from here 👇
I mean for all the web projects I just reuse the already created repository, it saves me tonnes of time in installing the same packages again and again and making the same architecture again and again.
This is the art of saving time, I mean I use the reusable concept in Freelancing also serves my client a lot of reuse codebase.
Tip to get better at Freelancing projects
Reuse the code snippets
Deploy every new code snippet to Github
Build systems meaning your every frontend code architecture, flow, backend APIs structure and so on.
Automate the repetitive process if don’t know HOW to google it.
Once you have this system built and start reusing the code your income just plummeted and you end up saving a huge amount of time.
Do give it a TRY
Designing the UI
This is a bit tricky part, I mean I am a designer also but I still believe I need some inspiration, to begin with, basic MVP design.
I still can’t think of something cool out of the box, I reach it after a lot of iterations and iterations.
If you want to get dirty in designing, the best way is to
Start with Figma
Redesign your favourite website
Start with a basic project design like your own website, podcast show or so on
One thing that was clear was that I want a theme toggle button that will provide access to both DARK & WHITE themes.
So I add this cool button in the bottom position and fixed it 😁 showing a nudge button to use to click on the theme toggle button.
This is FUN, I find myself clicking the same button, again and again, 🤗 and watching my website on different themes.
It increases the user average time on the website and hence increases the chance of connecting with me 😎, smart move !!!
So next time, give your website a cool CTA(Call to Action) that helps them to stay on the website and spent more time.
After hours of Iterations I reached to this basic design 👇😁, you might have a question, seriously 😳
But yeah, I don’t want to complicate and built fast so I finalise to make it clean and simple.
Website Design
I’ve also added a dark theme so that something special I did plus it’s a single-page website so the user experience is clean, simple and straightforward.
The story might be going in a confusing direction as we have started with No code tools and moved to the frontend full stack repository and currently we are talking about designing.
But, I am presenting all the different verticals of website development I’ve gone through and each vertical has an explanation of why I did what I did and what you can take away from it.
It’s a FUN event to build something from scratch. It’s the purest form of thoughts converted into actions.
Build your Portfolio Instantly
This is an interesting part, likewise everyone I did the same process/processes in developing a portfolio website.
But what’s the purpose behind it was different, that purpose is what makes this story ending as the ONE.
I didn’t make this portfolio for me only, but I made this portfolio to make your portfolio website instantly.
How is this possible?
Quite simply, I will directly share the codebase with you to develop your portfolio on it.
The interesting thing is that you can
Build your portfolio with the same design as mine and
Still, the code will be yours
complete control will be yours and your portfolio is ready instantly.
This is the USP I want to bring in this story, I am testing this IDEA, that my full stack projects can be used by everyone around the world as the reference point.
Reusing is the concept I believe in and I know reusing will save a lot of time, so why not start with me and share my codebase with audiences around the world?
Build your portfolio Instantly
If you are still here, let me give you another interesting point. The text is not hardcoded they are being fetched from a single centralised JSON.
Meaning I’ve added a data.js file containing the data of the website, when you get the repository simply edit that JS file and replace it with your portfolio data and BOOM your website is ready with the same UI design and your data and the code is with you no.
You can extend the UI to whatever extent you want, and you can make any other projects using this repository.
Go ahead get the template and build your portfolio instantly.
Conclusion
Here are the steps to do the stuff -
Get the repository
Edit the json file
Redeploy the repository
and your personal portfolio is READY!!!
That’s it for today, until next time, have a good day.
Shrey iHateReading