Coding Portfolio

Below you’ll find details about what’s the purpose of this project, tech stack and major things I’ve learned during the process and what I could do better.

Purpose of the porject

The idea was always to share my projects with everyone in a “web-dev” way, so that recruiters and other people interested in me can go quickly, visualize what I’m capable of (to some extend) and contact me, or re-share anything found interesting.

Tech stack

Out of all, Astro and Tailwind blew my mind. The ease to set up something relatively effortless amazed me. What’s more with a little bit of code Tailwind allowed me to think more about other stuff rather rather than hitting my head in the wall trying to solve a small CSS issue.

Although there is a learning curve with new frameworks, with Astro and Tailwind you reap amazing results in a very short time. What’s more, the scalability is huge.

I’m very happy I’ve stumbled on Astro, and that a friend of mine - Stoyan Shukerov pushed me to use Tailwid. I was a bit sceptical to use any css frameworks or extentions like SASS.

Astro allows different UI frameworks, and what’s awesome you can work with many of them at the same time. I tried adding a bit of React and Vue code, wich worked neatly and also found Alpine JS which I’ll probably use for my next project if I need a bit minimalistic oomph.

Stuff learned

Below’s a list of stuff that I’ve learned while creating the this website. Major bullet points being the stuff I spoke in my previous section. Although, probably the most important ones were about managing this project.

• AstroJS - all things necessary for creating a working Astro website. Learning how to use components, layouts, pageTransition API, and the collections. Although, the collections are a pretty hard thing, as it includes schemas, which are better to be used with TypeScript which is currently a “dark India” for me. Overall, I’m very happy to have switched from Gatsby to Atsro for making simple websites. And I’ll most definitely continue creating more and more Astro websites.
• MDX - markdown on steroids, where I can use components and import other things directly.
• TailwindCSS - a bit of a learning curve here, and I have to say there’s a lot to learn more. I think I’ve only scratched the surface here. Tailwind enabled me to dig directly into coding instead of worrying about design. Which on it’s own isn’t really a big thing, although in my case where I have a lot of things to learn coding-wise and focus on, TailwindCSS is a huge help. Next big project I’ll try to create my own design system in Figma and incorporate it in Tailwind.
• Framer One - initially I started with Framer Motion, but it needed to be used together with React, which in my case is an overkill. This is why I decided goiing with Framer One for animations and I’m very, very happy about it. My website came alive with just a few lines of code. I’ll for sure continue using it in other porjects.

Things to improve, and consider for future projects

• Simple design system
• Putting more time and effort into planning instead of mindlessly trying to figure what should be the name of this /that page.