Resume Builder (LWC)

Presenting to you all – Resume Builder – a responsive website enabling users to create their own Resume, for any profession.
Users can edit the resume content, print it and can use this to create their Online Portfolio and host it for free as per their choice.

Resume Builder Highlights

1. Edit the JSON data to personalize this Resume as per your needs and you can print the content too!
2. The Resume Preview is available in Light and Dark Mode and can be toggled from the Top Panel
3. Users can choose to toggle the visibility of the display picture from the Top Panel. The image source is hosted in my Github repository. Users can choose to fork the repo and personalize this as needed.
4. The site is responsive and works well on Mobiles, Tablets and Desktop browsers.
5. Since users need to edit the JSON content and this can be prone to errors and typos, we suggest using JSON Validators (like – https://jsonlint.com/) to ensure the JSON schema integrity is maintained upon parsing it from a string value.

Showcasing Responsiveness and Dark Mode below-

It is built using LWC Open Source and Salesforce Lightning Design System and it is hosted for free on Heroku

The resume format and design approach is greatly inspired from the JSON Resume project – All resume content to display is inspired from its standardized JSON schema. “For Developers, by Developers.“

How to Build one yourself

This project is built using Salesforce’s Lightning Web Components Open Source Framework.

Check out the documentation for using create-lwc-app and lwc-services here.

If you want to see Lightning Web Components in action – check out https://recipes.lwc.dev.

All the Basics of creating your LWC OSS App are described well in this trailhead module.

A few steps to note in particular on using SLDS styles, fonts, icons in your OSS project

1.Install the lightning-base-components via npm install command line interface

npm install lightning-base-components

2. Ensure that your lwc.config.json has the npm dependency specified

 { "modules": [ 
   { "dir": "src/modules" }, 
   { "npm": "lightning-base-components" }
  ]
 }

3. Install the SLDS using npm install

npm install @salesforce-ux/design-system --save-dev

4. Ensure you have lwc-services.config.js properly configured as shown below –

module.exports = {
   resources: [{ from: 'src/resources/', to: 'dist/resources/' },
   {
     from: 'node_modules/@salesforce-ux/design-system/assets',
     to: 'src/SLDS'
   },
  {
    from: 'node_modules/@salesforce-ux/design-system/assets',
    to: 'dist/SLDS'
   }
  ]
};

5. In your index.html file, add the SLDS stylesheet in the head tag –

<link rel="stylesheet" href="/SLDS/styles/salesforce-lightning-design-system.min.css" />

6. In your index.js file, add this statement at the first line-

import '@lwc/synthetic-shadow';

If all the above sounds too much work, you can refer the built code in this github repository.
If you’d like, feel free to fork this repo and edit the resume.json file as per your content.
You can modify the HTML & JS code in src/modules/my/resume LWC to have your desired implementation.

For hosting this, I have preferred to create an app on Heroku platform and linked it to my Github Repository, such that whenever I commit my changes to the main branch, an automated build will run and that would deploy it to Heroku. You can see the Live LWC OSS App hosted at – https://resume-builder-lwc.herokuapp.com/

Gear up for the New Year, with a New Salesforcy Resume.

Let us know your feedback / suggestions / opinions on this utility tool.

Yours Wisely,
Waseem