Back to home About Skills Certifications Career & Education Projects Social Media & Contact

Vue.js and Tailwind CSS Portfolio Rebuild

Project introduction

A full rebuild of my portfolio front page using Vue.js and Tailwind CSS, to showcase my skills. I focused on creating modular components, making use of dynamic data and state as much as possible.

Overview

View live Vue.js/Tailwind CSS app

View on GitHub

Full rebuild of my portfolio front page

Screenshot of the rebuilt front page Screenshot of the rebuilt front page

Reusable components with modular Tailwind CSS

This project utilises modular components built with Vue.js and styled with Tailwind CSS, allowing for maximum reusability.

Example of reusable components with Tailwind CSS

Dynamic data, props and looping

Components make use of dynamic data, props and looping to render content efficiently.

Example of dynamic data and props Example of dynamic data and props

Global style overrides and @applys

Reusable styles have been set up as @applys in Tailwind CSS, allowing for consistent styling and easy modification across components.

Example of global style overrides and @applys

Project retrospective

  • A very fun project in which I was able to improve and showcase my Vue.js and Tailwind CSS skills.
  • I'm very proud of the level of detail applied here, especially in regards to creating clean, well-organised components.
  • I haven't implemented much complex state functionality, due to both time constraints and that fact that I am still developing my Vue.js skills.
  • The page has limited responsiveness as this was omitted due to time constraints, but a full example of the responsive site can be seen on my portfolio website.

See next:

Vue.js and Tailwind URL shortener app Return to homepage