This Website
Introduction
Being a web developer, I always thought that making my own website was an essential step in transitioning from an amateur to a professional in the sector.
After many years of developing web applications I decided to focus and bring this idea to life. I said to myself: Now, I will finally be able to showcase my projects and skills in a space that goes beyond a traditional CV or a GitHub repo!
The Design
I have to admit that designing this website was more challenging than the portfolio I made for my sister Sara. Having written the copywriting first, I had a lot of information to display, necessitating thoughtful layout planning.
Before developing this website I used to make wireframes and graphic designs on Photoshop as it gave me a lot of freedom, but it wasn’t a fast process. So after some research I discovered PenPot, an open source alternative to Figma ( You can download the design file on GitHub! ) with PenPot, I was able to design the website much faster.
Homepage
For the homepage, my goal was to greet visitors with a dynamic and breathing website using some CSS magic. Wanting to make something on my own instead of using the usual particles.js. I opted to use pure SASS particles and a breathing background cloud behind the heading. I thought it looked cool and it was also hand crafted.
About page
The about page serves as a webpage-based CV, showcasing skills acquired during studies and work experiences.
To show off all the various skills in a simple to understand way even for someone who didn’t read the whole thing I included some fancy icons for the programming languages, frameworks, tools and other skills. Icons and graphics help a lot when acquiring new information.
The final version is divided into four sections, a short personal description, technical skills, soft skills and an invitation to contact me.
The mobile version is a bit different from the original on desktop, as I decided to make a different layout for the digital marketing icons to diversify it from the languages and tools, making it more creative. Notice how on mobile the icons are overlapping each other and are of different sizes.
Projects and Blog
At first I wasn’t sure about including a blog, in many instances I had to do the copywriting of websites because there wasn’t anyone else that wanted or was able to do it, the first time I did it I hated it actually.
But a bit like Stockholm Syndrome after a couple of years I started to like It. Being able to write code and content at the same time made me discover the power of communication and sending a message. Writing a blog is not for everyone but I decided to include it to share my strange creations not included in my projects section and other thoughts with the world.
Feedback is important
There were some times where i got stuck, often going back to the drawing board on PenPot to try out different layout options. What helped me the most was asking people for feedback, because the end-reader wasn’t me, but other people.
Conclusion
You can see it by yourself browsing this website!
Looking Forward
My mission now is to start writing interesting blog posts about coding. I hope that you found this article helpful to understand more on how and why I designed the website this way. Thank you for reading!
Pages and Features
- Homepage (Cool CSS Effects)
- About Page (Skill Cards, Animated Icon Bubbles)
- Projects and Blog (Pagination System)
- Contact Page (Form & Captcha)
Tech Stack
- Nuxt 3
- Nuxt Content V2
- Nuxt Mailer
- Nuxt UI
- Nuxt SEO
- Tailwind CSS
Downloads
Check out the project on GitHub, it's Open Source!