Based on one of the starter templates for Learn Next.js, this is a single-page HTML resume. It's intended to be used as an exported pre-rendered site, and at present only uses a very small portion of what's possible with Next.js.
This thing exists so I could learn about Next.js and how it loads static data for pre-rendered sites, and because I needed a resume. I have some plans to expand and improve the template in the future with links to pages for each employer and special project, and a per-skill page. Some parts of these things exist already in the project, but I'm intellectually honest enough to say that may not ever get to finishing them 🤷.
Clone or download this repository. Then from a console at the project root:
npm install && npm run dev
You should then be able to open localhost:3000 in your browser and look at the sample resume. You can run the site this way while you customize and you should see changes you make by just refreshing your brower (F5), but you may occasionally need to restart the server by pressing ctrl + c (or your Mac equivalent) and then npm run dev because of internal caching.
When you are ready to deploy, run npm run build and your generated site will be found in the out folder.
Build your resume by editing the markdown files found under the data folder. The files are named and organized in a particular way to represent different parts of the resume. Optional properties can be safely omitted.
Data files can be housed outside of the project folder if you want them to be managed in a seperate git repository. To do so, create a .env file in the project root, and add this line to it:
DATA_PATH=/home/path/to/data
Add your education and certification information to the education folder, one file per resume item. They will be sorted by end date when displayed on the resume. The following properties are supported in the frontmatter for each file:
nameThe name of the certification or schoolstartThe date you started attending (optional).endThe date you stopped attending (optional).
While only the year is displayed, due to a quirk parsing the data tiles, a valid date is required, and it must be enclosed in double-quotes ("). So just enter something like "2020-01-01" for dates.
Add your employment history to the employment folder, one file per resume item. They will be sorted by end date when displayed on the resume. The following properties are supported in the frontmatter for each file:
companyThe name of the companytitleYour position or titlestartThe date you started workingendThe date you stopped working (optional - if omitted "Present" is used)skillsA list of "skill ids" for skills that were used at this job. This it the first part of the data file name for that skill. If you want an employer to show the skill you put inhtml5.mdthen you'd put[html5]here. An employer can have as many skills as you wish, they will wrap horizontally on the resume.
Due to a quirk parsing the data tiles, a valid date is required, and it must be enclosed in double-quotes ("). So just enter something like "2020-01-01" for dates. If you omit an end date, the text "Present" will be used instead.
Add data regarding important projects you worked on for a given employer to the projects folder, one file per project. These will be displayed under the referenced employer line on the resume in a "Notworth Projects" section. These are optional, and the section will not appear if no projects exist for an employer.
The following properties are supported in the front matter for each file:
employmentA list of the "employer id"s of the [employers](#Employment data) this project should appear under. This is the first part of the data file name for that employer: If you want to a project to appear under the employer you put inBurgermart.mdyou'd put[BurgerMart]here. Projects can belong to multiple employers but that probably would look repetitive on your resume.nameThe name of the projectyearThe year the project completed
While only the year is displayed, due to a quirk parsing the data tiles, a valid date is required, and it must be enclosed in double-quotes ("). So just enter something like "2020-01-01" for dates.
The personal.md file contains your personal and contact information. The file content is used as the "about" blurb in the left-hand profile pane, while the properties are supported in the frontmatter:
firstNameYour first name - if you want a middle initial, put it here.lastNameYour last nameemailYour email address (optional)githubYour github account name (optional)homeYour home city, address or location (optional)phoneYour contact phone number (optional)pictureA url to the profile picture (optional, see below)stackoverflowYour stack overflow numeric account id (optional)twitterYour twitter handle (optional)webYour webhsite (optional)
You have two options for a profile picture.
Option one: the personal.md file supports a picture property that can be a relative or absolute url. Relative urls are considered relative to the public folder, so /images/my-picture.jpg would resolve to the /public/images/my-picture.jpg image.
Option two: replace the default-profile.png file with a png format image you want to use. It will be resized and given the rounded effect automatically.
Add your skills information to the skills folder, one file per resume item. They will be sorted alphabetically and grouped by category when displayed on the resume. The following properties are supported in the frontmatter for each file:
categoryThe category for the skill (i.e. "Dev Tools")nameThe name of the skilliconThe css class for that skill's icon (optional)
The icon set used for skills is from Devicon and is specially suited to developer tools. You can expand this by adding a css import to layout.tsx. Once done, you can reference them by stylename in the individual skill data files.
If not specified, a generic "dev shield" icon will be used. You can change this by editing the constants.ts file.
If you want, you can include some additional information in about.md which will be displayed at the bottom of the left-hand profile pane. No frontmatter is supported for this file.