sproogen / modern-resume-theme

A modern static resume template and theme. Powered by Jekyll and GitHub pages.

Hi 👋, I'm James

I'm a Lead Frontend Software Engineer specialising in React!

• 🌱 I’m currently developing a microfrontend architecture for a commercial banking application

• 🔭 I would love for you to checkout my projects, modern-resume-theme and itsgoingto.be

• 📫 You can checkout my online resume at jameswgrant.co.uk

• ⚡ Fun fact: I have 2 horses and ride almost every day!

 

modern-resume-theme's Issues

Is there a way to add academicons?

I wanted to add an IEEE icon but couldn't find the same on fontawesome.com. However, it has been generously made available here.
To be able to use the icons given on the page above I added the following line in main.scss
@import url("https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css");

I used the following code in _config.yml:

- title: Template attack on SPA and FA resistant implementation of Montgomery Ladder
icon: fab ai-ieee
url: https://ieeexplore.ieee.org/document/7542698

I do not see the IEEE icon on the served page.
I haven't delved deep in the code but did a bunch of greps to understand how fontawesome has been integrated. Does anyone have any idea about how to integrate other icons? Or could someone please point out the mistake I'm making?

PS: Did not know a better place to post this. Let me know if there exists a better platform for questions and I'll move this there. Thank you :)

Error: no implicit conversion of nil into String

Hi,

First of all, thank you so much for open-sourcing this beautiful website template.

I follow the steps described in the 'Running locally' section of your README file and at the 4th step (bundle exec jekyll serve), I faced the error below:

Incremental build: disabled. Enable with --incremental
Generating...
Invalid theme folder: _sass
Remote Theme: Using theme sproogen/resume-theme
Liquid Exception: no implicit conversion of nil into String in /_layouts/default.html
jekyll 3.8.5 | Error: no implicit conversion of nil into String

Do you have any idea about solving this issue?
I am working on macOS Mojave 10.14 using Chrome browser. Ruby version is 2.6.5.

Thanks in advance.

Projects link stick out into description

Projects link stick out into the description
When projects link in the projects section is too long the link sticks out into the description. Is there any way to solve this problem? because it really feels unpleasant.
Thank you

Mobile layout issues

Spotted some issues with some of the v2 layouts on mobile.

All layouts should switch to a top-middle, top-left or top-right layout on mobile, but not all the layouts seem to be doing this causing things to become squished on mobile.

Ability to change _config.yml or another file without restarting jekyll (docker)

Is your feature request related to a problem? Please describe.
I've been running this website in a docker container and it is a little tedious to restart the container every time I want to make changes.

Is there an easy way to automatically regenerate or rebuild based on _config.yml changes?

Something as simple as a script that will automatically rebuild the entire website on _config.yml changes would make a huge difference for docker users.

GitHub pages issue with main.scss import statement.

Everything seems to work fine when I run this theme locally. However, I see this error when I'm trying to run it in github pages:

Your site is having problems building: Your SCSS file mikelandry/assets/main.scss has an error on line 1: File to import not found or unreadable: modern-resume-theme. Load path: /hoosegow/.bundle/ruby/2.7.0/gems/jekyll-theme-primer-0.5.4/_sass.

Here's what my main.scss file looks like:

---
# Front matter comment to ensure Jekyll properly reads file.
---

@import 'modern-resume-theme';

Apparently something is wrong with the import statement but I can't figure out what I need to do to resolve this.

Content layouts on mobile

All content layouts should be centre aligned on mobile. When using the right layout it display shows the title to the right and content to the middle. Fix this and check all the other layouts on mobile.

Social icons not right aligned in desktop

Describe the bug
On a desktop device the social icons are not aligned very nicely

Expected behavior
The icons should be aligned to the right

Screenshots

V1 Bug: Could not locate the included file 'experience.html

Describe the bug

When running bundle exec jekyll build in a V1 project, I get the following error:

Liquid Exception: Could not locate the included file 'experience.html'

To Reproduce

Steps to reproduce the behavior:

git clone [email protected]:caillou/cv.git cv-caillou
cd cv-caillou
bundle install
bundle exec jekyll serve

Dark mode still on even after set as false in config

Describe the bug
The website I created is still in dark mode, even after specifying it as false in _config.yml.

To Reproduce
Steps to reproduce the behavior:

1. The website can be seen here
2. The repo the website is built from is a forked version (link).

Expected behavior
The website should be in normal mode.

Request for download button/icon with Social buttons

Is your feature request related to a problem? Please describe.
A download button linking to a file (useful for linking externally to a CV/Resume would be pretty handy and useful.

Describe the solution you'd like
Maybe have another link similar to website/repo link?

Describe alternatives you've considered
Have tried using the "Additional Links" way of adding an icon but seems that it only works for Brands-based Social Media icons (or maybe I'm doing something wrong?)

Additional context
Code: https://i.imgur.com/l1IlESb.png
Icon showing up on the site: https://i.imgur.com/Q0ssVkc.png
The icon that I've tried: https://fontawesome.com/icons/download?style=solid

Blog part

This is a great theme, looks and feels clean and fast. The only thing that would be great is a Blog part.

What I would like is a blog part! Then it would be complete.

Thank you and keep up the good work!

Make More Content option

Is your feature request related to a problem? Please describe.
At the moment the More Content section is non optional and the title always appears requiring it to be filled. More Content should be optional and at the users discretion.

Describe the solution you'd like
If more content is nil, or commented out it should not display the more content section

Describe alternatives you've considered
I don't see any alternatives to this solution.

Additional context
Empty More Content shows as below

Add media section to the projects and/or experience sections

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Be able to add media (pictures or videos) to the project or experience sections of the resume. The user would be able to go into projects.yml and change an optional field for a list of photos. Example: add a photos fields and the user would enter in ./assets/my_media.jpeg. The end result would be that the resume website would have a picture under the description of the project which would help spice up the interface.

it would look something like this:

Project template

• layout: top-middle
  name: name of project
  link: link to project
  github: Github page for project (eg. sproogen/modern-resume-theme)(optional)
  quote: >
  quote goes here
  description: | # this will include new lines to allow paragraphs
  long form description of project
  photos:
  • photo: ./assets/my_photo.jpeg
    photo_caption: here is a caption of the photo
    videos:
  • video: ./assets/my_video.mp4
    video_caption: here is a caption for the video

Describe alternatives you've considered
NA

Additional context
I have attempted to do this myself with photo, photo_caption, video, video_caption fields however I am very new with web design so I'm excited to see what you could do to spice things up (autoplay, fun animations, etc...)

Remove GitHub Pages coupling

Is your feature request related to a problem? Please describe.
I'd like to deploy to a different platform than GitHub pages. Currently the gem requires me to bundle all gh-pages requirements.

Describe the solution you'd like
I'd like this theme to lift the gh-pages requirement to be able to easily deploy to other platforms.

Describe alternatives you've considered
Deploying to another platform with all the unnecessary dependencies.

Add skills section

Is your feature request related to a problem? Please describe.
There is no way in how to show your skills. With this extention i can add a skill section that has bars for each skill filled on how good the user is on the skill noted.

Describe the solution you'd like
The data is read from the _config.yml file (new content -> skill for which will be added html files) and with the use of javascript the bar get filled. For example: for python skill 7/10 the bar get filled respectively.

Describe alternatives you've considered
Css icons instead of letters.

Additional context
Here is an example on the final product, which im currently using in my own cv

Creating a new part

Hi,
Is there any way to create a new part like Skills or Selected Courses?

HTML title format

Currently the HTML title only includes the job and some jekyll text.

It should be updated to be of the format [name] | [job title]

Markdown List Styles

Describe the bug
When using lists in markdown the styles are non-existent.

To Reproduce
Steps to reproduce the behavior:

1. Add a list to a markdown supported content area.
2. Build the site
3. See the lack of styling

Expected behavior
A nicely styled list with either points or numbers.

Desktop (please complete the following information):

• Everywhere

Can't see the theme after following installation guide step by step

Describe the bug
A clear and concise description of what the bug is.
Did everything step by step as outlined in Installation/setup guide. Theme doesn't appear on my url, I see a blank white page.

To Reproduce
Steps to reproduce the behavior:
Just follow the Installation guide step by step using zsh terminal and you should get the same error.

Expected behavior
A clear and concise description of what you expected to happen.
Theme to appear for my url.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] - macOS
• Browser [e.g. chrome, safari] - Chrome
• Version [e.g. 22] - Chrome ver. 98 (the latest)

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Some assistance please

Im new to Jekyll and YAML files.
I have got the resume working fine, however, I add anything to the Projects Section,Experience Section,Education Section it errors out. You have an error on line 2 of your _config.yml file
Im probably doing it wrong. Here is one of those sections:

# Projects Section
projects_title: Competencies
- layout: left
  name: Languages
  description: | # this will include new lines to allow paragraphs
    English

Any help would be appreciated

Dark mode persists with or without the configuration set in `config.yml`

Describe the bug
Dark mode persists without any dark-specific config.

To Reproduce
Steps to reproduce the behavior:

1. Do not add darkmode: true to the _config.yml.
2. Run the application locally.

OR

1. Add darkmode: false to _config.yml
2. Run the application locally.

Expected behavior
Light mode

Desktop (please complete the following information):

• OS: OSX
• Browser All
• Version Most recent

Additional Context
Please see my project setup.

Implement collections/categorys

With regards https://github.com/sproogen/modern-resume-theme/projects/1#card-10672290
Take a look at the latest commits in my Master, not sure how to link this discussion to project board.

My idea was to use collections then we can display a filtered list on the homepage reflecting section name.

Like I said previous new to all this so any help/suggestions are welcome :-)

W3C validation

Hi,

There are some minor things to fix to validate the them on w3c:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fsproogen.github.io%2Fmodern-resume-theme%2F

May you consider fixing them ? :)

Livereload is not supported

I've tested lots of templates for Jekyll out there and I found your template which is awesome. The only drawback is that live reload feature doesn't work with your template.

Can you tell me how to fix this problem? I've searched many forums and stackexchange site and yet haven't found a solution.

Accessibility errors found in your template

The user @carlsonsantana validate your site template "https://sproogen.github.io/modern-resume-theme/" and found these accessibility errors:

• Page https://sproogen.github.io/modern-resume-theme/:
  • Issue 284c165b-f527-437e-97b9-508f152fc32d:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.15:1. Recommendation: change text colour to #4177c4.
    • Selector: html > body > main > div > div:nth-child(5) > div > div > ul > li:nth-child(4) > a
    • Context: <a href="https://www.youtube.com/watch?v=vtg4o__aRMg">Becoming a ninja</a>
  • Issue 07dcd3b0-f8a5-41a4-99c7-fb9a0e967603:
    • Type: Error
    • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
    • Message: Anchor element found with a valid href attribute, but no link content has been supplied.
    • Selector: html > body > main > div > div:nth-child(2) > div > div:nth-child(1) > p > a
    • Context: <a href="https://github.com/sproogen/resume-theme" target="_blank"> <i class="fa fa-gi...</a>
  • Issue 2fb6adbc-425a-4d1b-8de2-ebc517dd0fa9:
    • Type: Error
    • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
    • Message: Anchor element found with a valid href attribute, but no link content has been supplied.
    • Selector: html > body > div:nth-child(1) > div > div:nth-child(2) > ul > li:nth-child(5) > a
    • Context: <a target="_blank" href="https://www.youtube.com/globalmtb" class="button button--sacnite button--round-l"> <i class="fa fa-...</a>
  • Issue a01ab50c-1688-4888-9d33-22ddd21b5b60:
    • Type: Error
    • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
    • Message: Anchor element found with a valid href attribute, but no link content has been supplied.
    • Selector: html > body > div:nth-child(1) > div > div:nth-child(2) > ul > li:nth-child(4) > a
    • Context: <a target="_blank" href="https://twitter.com/facespics" class="button button--sacnite button--round-l"> <i class="fa fa-...</a>
  • Issue 4d3db61f-7d13-4e3f-9b55-777ab586bb88:
    • Type: Error
    • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
    • Message: Anchor element found with a valid href attribute, but no link content has been supplied.
    • Selector: html > body > div:nth-child(1) > div > div:nth-child(2) > ul > li:nth-child(3) > a
    • Context: <a target="_blank" href="https://www.linkedin.com/in/jameswgrant" class="button button--sacnite button--round-l"> <i class="fa fa-...</a>
  • Issue ee4130ab-45f2-46ad-aa75-f458f087fae0:
    • Type: Error
    • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
    • Message: Anchor element found with a valid href attribute, but no link content has been supplied.
    • Selector: html > body > div:nth-child(1) > div > div:nth-child(2) > ul > li:nth-child(2) > a
    • Context: <a target="_blank" href="https://www.instagram.com/chillwildlife" class="button button--sacnite button--round-l"> <i class="fa fa-...</a>
  • Issue 326f7a40-59ce-405f-b9b1-dd67b00cab48:
    • Type: Error
    • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
    • Message: Anchor element found with a valid href attribute, but no link content has been supplied.
    • Selector: html > body > div:nth-child(1) > div > div:nth-child(2) > ul > li:nth-child(1) > a
    • Context: <a target="_blank" href="https://github.com/sproogen" class="button button--sacnite button--round-l"> <i class="fa fa-...</a>
  • Issue 33e19524-4108-4597-9785-723dd41f5990:
    • Type: Error
    • Code: WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.3.Lang
    • Message: The language specified in the lang attribute of the document element does not appear to be well-formed.
    • Selector: ``
    • Context: ``

You can check these accessibility errors using pa11y.
You can view the full validation results in our website.

Swap/Move Sections

Hi, thank you for making this template! I want to swap between sections or move a section, e.g. move Educations to the top. I am new to this and have no idea how... Thank you :)

certificates section

It would be awesome to have section for certificates.

Changing profile picture

Hello,

Thanks for your awesome theme.
I tried to change the profile picture but I can not.
May you help me?
tell me the exact code for Config file?

Thank you in advance

Need help to build own github page.

Hi. First of all, I'm very new to Jekyll but I have everything set up and working locally on my Windows/Linux machine by customizing _config.yml file after forking this repository. (with command: bundle exec jekyll serve)

However, when I push it to my own github, my github page display 404 error... Can you help? Thanks very much!

How to make some custom changes about font (such as size or type)

Hello,

Thanks for your template, I want to change the default font of section content, such as increasing the font size or line space, but I don't know how to make it. I have tried to use markdown commands, however, the result is not satisfying.

<font size="2"> This is my text number 2 </font>

This solution may be helpful, but I can not insert links into it, for example,

<font size="2"> This is my text number [link](https://www.google.com) </font>

"font" will make "link" not work. Which part should I modify to achieve the goal?

Add links

Changes in config.yml doesn't reflect locally but works when pushed to github

Describe the bug
First of all, thank you so much for creating such a nice theme for free. :)

When I change the description of About Me in config.yml and run it locally, the changes don't get reflected. But if I push it to Github, I see all the changes.
It happens only with config.yml file. Education, experience and projects work fine.

To Reproduce
Steps to reproduce the behavior:

1. Run the server locally
2. Edit the About Me part in config.yml
3. The changes don't get reflected locally
4. Push the code to github
5. You can see the changes getting reflected on the website

Expected behavior
I expected the changes made in config.yml to reflect locally.

Desktop (please complete the following information):

• OS: Mac OS Mojave 10.14.3
• Browser: Google Chrome
• Version: 72.0.3626.121 (Official Build) (64-bit)

Additional context
Ruby version: 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin16]
Jekyll version: 3.7.4

Let me know if any other information is required

How to add an individual item for project/experience/education?

First of all, thank you for creating a wonderful jekyll theme like this.

Question

I am having difficult time adding a project under the project section. I wrote the code as follows but nothing changes:

# Projects Section
projects_title: Projects testing
- layout: left
  name: Eating tuna
  link: https://sproogen.github.io/modern-resume-theme
  github: https://sproogen/modern-resume-theme
  quote: >
    Short overview of the project
  description: >
    Description about the work on/with the project

Rather I keep getting receiving an error e-mail from github as follows:

The page build failed for the `master` branch with the following error:

You have an error on line 2 of your `_config.yml` file. For more information, see 
https://help.github.com/en/github/working-with-github-pages/troubleshooting-jekyll-build-errors-for-github-pages-sites#config-file-error.

For information on troubleshooting Jekyll see:
 https://help.github.com/articles/troubleshooting-jekyll-builds

If you have any questions you can submit a request on the Contact GitHub page at 
https://support.github.com/contact?repo_id=276981971&page_build_id=189685548

What I can see is just the default item, which is 'super awesome project'. It seems like due to the error, nothing changes. You can check out the problem at my github page.

Add Stackoverflow icon

Add Stackoverflow icon in social icons section.

Make GitHub project link optional for project section

Is your feature request related to a problem? Please describe.
Currently, I don't see an option to hide GitHub link in the project section. I have some projects which I don't have on GitHub that I would like to display. But when I comment GitHub, it still shows GitHub logo with a link to the root domain.

Describe the solution you'd like
If GitHub is commented in projects section, it should not appear in the website.

Describe alternatives you've considered
I'm not sure there is any alternative.

Additional context
Below is the expected output.

Unable to change about_profile_image

Linking profile picture in config.yml not working
Hi, thank you for providing such a great template. I use it to generate my online resume, but I stop at changing my own About profile picture. Basically, I created a new folder "images" and put my picture in there, and I went on to modify the config.yml. Please see the screenshots attached for better visualization.

Also, I when on and check the about.html in _includes folder, VSCode warns me of some errors which I attached a picture to explain:

Expected behaviour
I really expect it to work as a demo. But this is what I got so far:

FYI, I'm using Macbook Pro 2018 Catalina.

darkmode: true obscures email address

Describe the bug
When darkmode: true is enabled, all elements are given a background color, meaning email contact info is obscured by the 'fork me on GitHub' banner at certain resolutions.

To Reproduce
Steps to reproduce the behavior:

1. Add darkmode: true to _config.yml
2. Navigate to the hosted resume in a browser with dark mode enabled
3. Reduce screen resolution to 1280px width
4. Observe obscured email contact details as per screen-grab below.

Expected behavior
Email contact info is displayed unobscured

Screenshots

Desktop (please complete the following information):

• OS: Mac OS 10.13.6
• Browser: chrome
• Version 80.0

Social icons not centred on mobile

Describe the bug
On mobile and tablet breakpoints the social icons are left aligned

Expected behavior
Nicely centred icons social at all times

Screenshots

'darkmode: true' not working

Describe the bug
Setting darkmode: true in _config.yml doesn't change page appearance/dark mode doesn't enable.

To Reproduce
Steps to reproduce the behavior:

1. Add darkmode: true in _config.yml.
2. Push changes.
3. Observe lack of dark mode.

Expected behavior
Dark mode is enabled when darkmode: true is set in _config.yml.

Screenshots
My page with darkmode: true set: https://reysic.com
Line in my _config.yml: _config.yml

Invalid theme folder: _sass

hi.
first of all, thank you. 😄
i have below error, but can't resolve for hours. (running locally)
could you help me? :D

<projects.yml>

my resume repository is here

Cannot see the template after step 4

After following up the set up steps, I am unable to view the template as I should in step 5. All I currently see on my page is "hello world" from my initial set up commit.

Automatic or Toggle switch for Dark/Light mode

Is your feature request related to a problem? Please describe.
No. It's an additional UI/UX feature which can enhance the user experience

Describe the solution you'd like
If the site can automatically switch b/w light/dark mode or if a toggle button can be provided for the same, it will really improve the overall UX of the website

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
I am new to Jekyll and web development, but I found some blogs which can help in the implementation for the same. The links are given below:
How to Add a Dark Mode Toggle to a Jekyll Site
Dark Mode Revisited

Dark mode + child pages

Hey - great template, thanks for sharing.

Two questions though.

1. Is there possibility to change the colours? I would love a dark mode version!
2. I see _layouts/default.html, and _data. How do I make child pages that follow the same template? The instructions are great for editing the main page, but I would love some guidance on how to make custom sections under child pages like https://<domain>/<child_page>

Skills section

Hey,

Do you plan implementing a Skills section (for instance with progress bars) ?
Do you have any base for this ?

Could I hide the projects section or change it as another name

I just used this template to create my CV. It is great. But I want to add the section such as publication.
And, I want to adjust the location between each section.

can't build page

Your SCSS file modern-resume-theme-gh-pages/assets/main.scss has an error on line 1: File to import not found or unreadable: modern-resume-theme. Load path: /hoosegow/.bundle/ruby/2.7.0/gems/jekyll-theme-primer-0.5.4/_sass.

Navigation bar

I'm thinking about a navigation bar on top of the resume.

something like https://belgoros.github.io/ or https://suddi.io/

Add wordpress social link

Is your feature request related to a problem? Please describe.
I'd like to request an option for "Wordpress" to be added to the social links configuration options.

Describe the solution you'd like
An icon and config option similar to Twitter, GitHub, etc...

Describe alternatives you've considered
Adding the blog link elsewhere in the page.

Additional context
I have a Wordpress blog that I'd like to link from modern-resume-theme.

Awesome work, thanks so much!

Font Awesome & dark mode

Is your feature request related to a problem? Please describe.

Absolutely love this theme, after attempting to add Discord icon had issues with Font Awesome.
Add the option in config.yml and also updated Font Awesome to latest version using Bootstrap CDN and updated other icons to new naming.
Would you like a pull request for this, I see their is a shim for this if that's better

I'm new to using git and developing websites etc

I'm also planning on working on a dark mode, would this be something of interest?

Thanks in Advance n hope that all makes sense.