Vue.js project: Resume Builder

A resume/coverletter app in Vue from a JSON input (Live demo here.).

As developers, we really have no excuse for sending out applications and resumé's in last-century Word docs or cookie-cutter Canva designs. We roll our own, of course, and I finally got around to doing that, with this Vue.js project.

What It Does

Basically, it's a single-page Vue.js application that renders professional resume and cover letter content in a mobile-first, responsive design. The app features a floating action button (FAB) navigation allowing users to toggle between viewing different sections – resume and cover letter – with a bit of animation powered by Vue's transition components.

The architecture uses Vuex for state management, storing all resume data in a centralized store with proper getters for data access. Components are built following Vue 3's Composition API patterns, with a focus on reusability and maintainability. The styling uses Tailwind CSS with custom responsive breakpoints, making the content work well on everything from mobile devices to large desktop screens.

Some Technical Details

The project uses Tailwind's utility-first approach with responsive prefixes (sm:, md:, lg:) instead of custom CSS media queries. Components follow Vue patterns with separation between base components (BaseToggle, BaseFab) and content components (ExperienceCard, EducationCard). The sticky header resizes on scroll, and deployment is automated through a Node.js script that builds with Vite and uploads to the web server.

The Developer Experience

The modular component architecture makes it easy to add new sections or modify existing ones, while the Vuex store pattern ensures data consistency across the application. All of this also makes it much more approachable and understandable to a developer such as myself. It was also important for me, that the responsive design system scales naturally from mobile to desktop without wrecking readability or functionality.

Beyond Personal Use

While designed initially as a personal resume showcase, the structure makes it easily adaptable for other developers: just swapping out the JSON takes you much of the way. The modular architecture makes modifying and expanding on the functionality quite doable. Future possibilities include draggable sections and a GUI to allow for user-editable content.

Usage

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Deploy to server
npm run deploy

Tech Stack