Swiftly CV

An application that offers a single, flexible resume template, allowing users to fill in as many or as few fields as they choose, with the ability to quickly and easily modify details and preview how their finished resume will look.

Key features:

Toggleable light/dark theme
Light weight and fast resume preview
Easily add and remove education/experience sections
Cloudflare deployment
Editable inputs with instant re-render
Clean component-based structure

Why this project?

My motivation for this project was to practice building a React application, while improving my understanding of state, props, and component-based architecture. I also wanted to gain confidence with conditional rendering to handle the dynamic nature of the provided data. The original idea for the project came from The Odin Project, which provided the foundation for its scope and direction.

How did you do it?

React

HTML

CSS

Component and Data Modelling

I decided the spit the data forms into 4 pages. I chose to manage navigation with state instead of React Router, rendering either <LandingPage />, <Form /> with different props based on the active page, or <PreviewPage />.

All fields are optional so users have full control over which information they include, but this lack of form-validation might appear jarring. I implemented dynamic sections for education and experience, allowing unlimited entries that can be easily added or removed in a single click.

Education form section from Swiftly CV showcasing the buttons for adding and deleting sections

Styling

I had never made a toggleable light/dark theme website before so I decided this would be a great time to practice.

Light and dark themes for Swiftly CV shown side-by-side

All site colours are set with CSS variables. Each theme (light or dark) applies a class to the body, and that class assigns values to variables that elements reference internally for their own colours (as seen in the snippets below), allowing the page to update automatically when the theme changes.

CSS code snippet showing actual application of light and dark theme

Deployment

As a static app, it's deployed on a Cloudflare pages instance

Where can I see it?

Visit the page