How I Built My Own Website with Vue, Vuetify & Firebase
For many passionate programmers, creating a personal website is a significant milestone. It’s not just a project; it's a showcase of skills, an evolving canvas for creativity, and a practical way to share one’s expertise with the world. Since anyone can easily look it up and interact with it, it becomes the perfect digital portfolio. Ever since I took my first steps in web development, I knew I wanted to have my own website.
Over the years, I restarted this project multiple times, refining the vision and exploring new possibilities. Each version evolved as my skills and understanding of the web landscape grew. The path was far from linear, with countless changes and lessons learned along the way. But when I finally completed it, the sense of accomplishment was immense – it was something I built from scratch, blending my own vision and technical skills into a live, interactive experience.
The Quest for the Perfect Technology Stack
One of the main reasons my website had so many iterations was my search for the ideal technology stack. Early drafts were simple, consisting of static HTML documents and a few CSS styles. But as the years passed and I learned more about web development, I began experimenting with frameworks and tools that would bring new capabilities and improve both performance and aesthetics.
The final website is powered by three core technologies: Vue.js, Vuetify, and Firebase. Each of these tools plays a distinct role and reflects the skills and decisions I made along the way.
The Tech Stack
1. Vue.js: Frontend Framework
Vue.js is the frontend framework that serves as the backbone of this project. Vue has gained immense popularity in recent years due to its lightweight structure, straightforward documentation, and ease of use. These were key factors that led me to choose Vue for this project.
In my site, Vue.js manages navigation via Vue Router, splits the page into individual components, and handles data management and processing for dynamic content requested from Firebase.
2. Vuetify: User Interface Design
For the UI, I used Vuetify, a library specifically created for Vue.js. Vuetify follows Google’s Material Design Guidelines, which provide extensive documentation on building user-friendly, accessible interfaces. This design system is based on usability studies and continuous improvement, making it one of the most trusted design guides in the industry.
Vuetify offers a wide range of pre-built components, like buttons, text fields, and more, all designed to follow Material Design standards. Using Vuetify allowed me to focus more on functionality and user flow rather than getting caught up in individual design details. I still had to consider Material Design principles to ensure a seamless experience across the entire site, but Vuetify made this process significantly easier.
3. Firebase: Backend as a Service
Firebase powers the backend of my website. This backend structure differs from traditional server-side models, as Firebase does not dynamically render content on the server. Instead, Vue.js generates the page content dynamically on the client side. Firebase’s role is to deliver the basic structure, scripts, and provide a data interface.
This setup minimizes initial load times, ensuring that users see the site quickly, even before all content fully loads. Content like images and text is then asynchronously loaded, improving both speed and the overall user experience.
Continuous Integration and Deployment (CI/CD)
The project is hosted in a private GitHub repository, which I use not only for backup but also for continuous integration and deployment (CI/CD). Using GitHub Actions, I’ve set up automated workflows that build, test, and deploy the site upon every commit to the main branch, automatically publishing it on valentingavran.com.
A Journey Worth Taking
This website has been one of my most meaningful projects, evolving with my skills over time. It’s not just a product but a journey – a journey that reflects years of learning, experimenting, and creating. And every time I look at it, I see not only a website but a story of growth and persistence.
Building something entirely on your own teaches you more than just technical skills; it fosters problem-solving, patience, and a deep understanding of the craft. If you’re a developer considering a personal project like this, I highly recommend diving in. You’ll end up with something unique and truly your own – a digital space that reflects your journey as much as it does your skills.
