travis_bumgarner_demo(1).tsx

I am a lifelong learner, creator, explorer, and tinkerer. This is a collection of my experiences.

Here

Elsewhere

Blog:// Resume as Code

(Check out the code and sample output)

I dislike using Google Docs or Microsoft Word for writing my resume. Maintaining visual consistency can be a challenge, and it’s far too easy to accidentally modify content in unintended ways.

By moving my resume to code, I’ve solved these issues. It’s now simple to ensure consistent formatting and structure. Additionally, customizing the output is effortless. For example, I’ve added features to toggle the display of my phone number and to generate a dated title when exporting to PDF.

I’ve created two versions of my code-based resume:

  • Version 1: HTML, CSS, JavaScript
  • Version 2: HTML, CSS, TypeScript, and Vite with hot reloading.

How to Create a Code-Based Resume

  1. Start with HTML: Define the major sections of your resume (e.g., header, experience, education) to create a clean layout.
  2. Populate the Content: Use JavaScript to handle repetitive content like lists. Store your data in arrays and objects for easy updates and consistency. For one-off elements like your name, embed them directly in the HTML.
  3. Style the Page: Write CSS to control the print layout. Look into CSS features like @page and @media to fine-tune the print output.
  4. Set the Document Title: The browser uses the site’s title as the default filename when generating a PDF.
  5. Add Custom Logic (Optional): One of the biggest advantages of using code is the ability to implement dynamic features. For example:
    • Create a toggle to include or exclude personal details like your phone number.
    • Develop role-specific variants of your resume for Frontend, Backend, or Full Stack positions.
    • Automatically include the current date in the page title for unique filenames.
  6. Commit to Git: Use version control to keep track of changes and maintain a history of your resume.
  7. Export to PDF: Print directly from your browser to create a PDF. Double-check the output in a PDF viewer, as the printed version may differ slightly from the website.

By transitioning to a code-based resume, you’ll gain more control and flexibility over your professional presentation. Whether you’re a developer looking to showcase your skills or just want a streamlined way to manage your resume, this approach is worth considering.

Let me know what you make!