mudassir0909 / jsonresume-theme-elegant

Elegant theme for jsonresume

Elegant Theme

Responsive theme for JsonResume inspired by card layouts.

Theme Preview

Markdown Supported

Supported in the following properties resume.basics.summary, work[0].summary, work[0].highlights, projects[0].summary, projects[0].highlights, education[0].courses, volunteer[0].summary, volunteer[0].highlights, awards[0].summary, publications[0].summary, references[0].reference, skills[0].keywords. If you have any other use case, please raise an issue

Social Profiles

The profiles are shown in the order in which they are specified in the basics.profiles array. By default, only 5 profiles are shown & others are revealed on demand.

Supported Profiles

• angellist
• behance
• bitbucket
• blogger
• codepen
• dribbble
• dribble
• exercism
• facebook
• flickr
• foursquare
• github
• gitlab
• googleplus
• gratipay
• hackernews
• instagram
• lastfm
• linkedin
• medium
• meetup
• pinterest
• reddit
• skype
• soundcloud
• spotify
• stackexchange
• stackoverflow
• telegram
• tumblr
• twitter
• vimeo
• youtube

Credits

• Thank you contributors for your pull requests
• Floating Menu: inspired by Smart Fixed Navigation

Contributing

$ npm install -g grunt
$ npm install -g pug-cli
$ git clone https://github.com/mudassir0909/jsonresume-theme-elegant.git
$ cd jsonresume-theme-elegant
$ npm install
$ grunt watch // watches for file changes in *.pug & *.less
$ grunt exec:run_server // Do this in a new terminal tab to run node server

Visit http://localhost:8888 to see the theme in action.

Testing JSON changes

You can test your changes by updating resume.json file inside node_modules/resume-schema/ folder. You might want to rerun grunt exec:run_server whenever you make any changes to resume.json

Updating Styles

All the LESS files are organized under the folder assets/less/. Please go through the comments inside theme.less to find out which file to put your LESS changes. Grunt compiles assets/less/theme.less to assets/css/theme.css which is used eventually in the theme.

Please Do not make any changes inside assets/css/theme.css

Updating Javascript

All the javascript changes go into index.js which is responsible for rendering the theme.

Adding a new icon

Visit this wiki page

Roadmap

enhancement

jsonresume-theme-elegant's Issues

Social icons are not displayed in Firefox

My setup:

• Firefox for Ubuntu, version 44.0.2
• elementary OS 0.3.2 Freya (64-bit), based on Ubuntu 14.04

Icon Request: icon-blogger

Hi, I like this theme and use on my resume.

But when I try to add blogger icon, I can't setting Encode & Embed Font in CSS on IcoMoon (it's premium)

So I open this issue, thank you!

Reference section improvements

This too is monotonous, think of a better way to represent. If you can't think of any thing else then go for this

Hide sections if not available

jsonresume/resume-cli#105

Static duration display for items with no end date ("Present") will eventually be wrong

When having items without end date, for example for your current job, omitting the attribute endDate leads to the word Present being displayed instead and this is perfectly fine.

However you do also display the duration between start and end date. This calculation happens at build time using the system time at the time of build and thus will always be wrong eventually.
Take my CV for example. Although start date for my current job is January 2016, it displays a duration of 5 instead of 9 months, simply because of the fact that I last updated my CV back in June.

Maybe adding a script tag inside the generated html that takes care to calculate the duration for this cases based on the viewer's current system time very much like the calculation performed during the generation of the html could solve this problem?

How to Configure Gravatar

I have my picture configured as:
"picture": "https://www.gravatar.com/avatar/01667e959f76bdd16a1930a67f393a51",

Everything else is generated fine, but I end up with the following displayed instead of an image:

https://www.gravatar.com/avatar/01667e959f76bdd16a1930a67f393a51?s=100&r=pg&d=mm" itemprop="image" class="media-object img-circle center-block"/>

Media Queries for `print` format

Tweak styles so that theme looks good when exported to pdf.

Use @media print

Issues to tackle:

• Handle a tags
• Hide floating menu
• Profile card can be smaller in height ( or can be like standard info, need not be a card IMO )

Rest all is good I suppose

markdown links ending with ")" are not correctly converted

markdown links ending with ")" are not correctly converted.

Such links are often encountered in wikipedia.

The bug comes from marked (markedjs/marked#619) and it appears that it won't be fixed.

It's maybe time to switch the markdown renderer... (see #73).

November Competition Winner

Congratulations! Will make the announcement public today or tomorrow, in the mean time could you shoot me through your preferred payment method to [email protected] (paypal will probably be easiest)

JSON Resume 0.0.0

Hey Mudassir, We just released 0.0.0 which is the first official version. I'm trying to update everything now to match 0.0.0, and would love to keep your theme listed on homepage.

So if you could add support for 0.0.0 that would be fantastic.

New schema can be found on homepage, http://jsonresume.org

Also let me know any feedback on how things are being run etc we are learning as we are going at this point.

Skype icon is not shown on the resume

duration calculation

How is calculated a duration between a startDate and an endDate?

When I use this json:

"startDate": "1999-09-01",
"endDate": "2000-03-01",

I get the following result in my resume:

Sep, 1999 - Mar, 2000 5 months

It should be 6 or 7 months, depending on how the duration is calculated, but not 5 months !

Support Turkish Character

Font is not support Turkish Character. Can you change this font for Turkish character or improve it ?

Markdown in highlights

There's a highlights field under work[0].highlights[0] - I would like for it to support markdown, as I wanted to paste URLs to my work projects there

linked skills styling

Linked skills styling is not very easy to read: it is in blue on a light blue background. When hovered, it became dark blue on a light blue background and underlined. Both are not very easy to read.

In my opinion, the linked styling should follow the unlinked styling: in white on a light blue background, underlined when hovered.

Linked or not the styling with a border looks like a button, and hence is intuitively clickable.

Create linked skills by the following markdown:

  "skills": [
    {
      "name": "tools",
      "level": "Master",
      "keywords": [
        "[git](http://fr.wikipedia.org/wiki/Git)",
        "[wiki](http://fr.wikipedia.org/wiki/Wiki)"
      ]
    }
  ]

Medium as Supported Account

Presently Medium.com isn't supported as one of the profiles. Not sure where this support should be added, but it'd be nice to have!

If you can list the files which need to be modified or the best path forward, I'd be happy to help!

When there are too many social profiles, show only top 5 & reveal the remaining on demand

floating-nav shows items for non existing sections

When using this theme with my resume.json file I noticed that sections like "Awards" were not rendered, which was what I expected since the awards array in my resume.json file was empty.
What I did not expect was that the floating-nav still showed an entry for the non existing section.

Please don't get me wrong. I do not say this is an error.
If I just remove the awards array entirely form the json file, there is still no awards section, but following that there is also no awards item in the floating-nav.
This means I could just remove empty arrays from the json file and move along.

I can not tell whether having an empty awards array in the json file is right or wrong, because resume test validates the json file both with an empty awards array and without an awards array.

I had a look at your code and figured out that the interpolate function used by the getFloatingNavItems function in index.js is what causes the floating-nav to show items for non existing sections. I tried messing around with it to make it drop the floating-nav items not only when the array is missing but also in case the array is actually in the json file, but empty.
However I failed and I have to admit that I do not understand how this interpolate function actually works with the _.reduce function to achieve what it does.
If you could explain to me how your interpolate function in index.js works please?
That would be very kind =)

Thanks in advance for your reply.

Picture support

Please implement support for picture as in the new standard and serve it

Telegram support

Hello!

I've tried to add telegram support myself, but stuck with icomoon changes. Could you please update the theme to support it?
Here is my patch on everything except icomoon:

diff --git a/README.md b/README.md
index af57570..a3f584f 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ The profiles are shown in the order in which they are specified in the `basics.p
 * googleplus
 * gratipay
 * hackernews
+* telegram
 * lastfm
 * linkedin
 * pinterest
diff --git a/assets/css/theme.css b/assets/css/theme.css
index 9a17a57..e30e451 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -55,6 +55,9 @@
 .icon-linkedin:before {
     content: "\f08c";
 }
+.icon-telegram:before {
+    content: "\f2c6";
+}
 .icon-twitter:before {
     content: "\f099";
 }
@@ -630,6 +633,14 @@ body {
   text-decoration: none;
   color: #005983;
 }
+.link-telegram {
+  color: #0088cc;
+}
+.link-telegram:hover,
+.link-telegram:focus {
+  text-decoration: none;
+  color: #007cba;
+}
 .link-skype {
   color: #12a5f4;
 }
diff --git a/assets/less/info_card_styles.less b/assets/less/info_card_styles.less
index 10378c9..2b9e922 100644
--- a/assets/less/info_card_styles.less
+++ b/assets/less/info_card_styles.less
@@ -91,6 +91,7 @@
 .link-twitter { .make-social-link(@twitter-color); }
 .link-blog { .make-social-link(@rss-feed-color); }
 .link-linkedin { .make-social-link(@linkedin-color); }
+.link-telegram { .make-social-link(@telegram-color); }
 .link-skype { .make-social-link(@skype-color); }
 .link-instagram { .make-social-link(@instagram-color); }
 .link-stackoverflow { .make-social-link(@stackoverflow-color); }
diff --git a/assets/less/variables.less b/assets/less/variables.less
index cf05176..0171794 100644
--- a/assets/less/variables.less
+++ b/assets/less/variables.less
@@ -18,6 +18,7 @@

 // Social variables;
 @github-color: #454545;
+@telegram-color: #0088cc;
 @twitter-color: #33ccff;
 @soundcloud-color: rgb(232, 130, 45);
 @rss-feed-color: #f36f24;

Unit test setup

Current theme version is v1.1.7(Do you see the 7??) !

Flickr social profile support

Great theme. Please consider including Flickr in the supported social profiles. I believe iconmoon has four font glyphs for Flickr. Thanks!

Not the right UI pattern for the Interests section

Right now I use the monotonous card view for Interests section as well, but really need to think of a better way to present this section.

Also sometimes people just enter the interest without any keywords, gracefully degrade to a better view.

Add exercism.io to Supported Social Profiles

As exercism.io might contain some code snippets it would be cool to add it. An icon can be found here:

http://exercism.io/icons/logo.svg
http://exercism.io/img/e_red_small.png

Thanks for this nice resume theme 👍

Not responsive

The card on the left hides on resizing the screen, rest is good I suppose

Support for meetup.com profiles?

I like using this theme (big thanks!), but would much appreciate a profile for meetup.com member pages like this one as well: http://www.meetup.com/members/75934402/ I'm not sure the code is as modular that making such contributions would be an easy thing to do (or is it?).

PDF Weirdness on OSX

I'm getting this when I export to a PDF

Support for stackoverflow link in networks

Work Experience section needs improvement

• One should be able to clearly know the current organization(some visual indicator).
• Humanized date formats & should be able to see the duration
• Also dates are on too far right. Do something about it.

wikipedia links not correctly rendered

It appears that wikipedia links are not correctly rendered.

"[jenkins](https://fr.wikipedia.org/wiki/Jenkins_(logiciel))"

is rendered as

<span class="label label-keyword"><a href="https://fr.wikipedia.org/wiki/Jenkins_(logiciel">jenkins</a>)</span>.

It looks bad and the link is wrong (hence leading to a 404 error).

When I debug markdown-it standalone (v7.0.1), it works:

>node
> var markdown = require('markdown-it')({
...     breaks: true
... })
> markdown.render("[jenkins](https://fr.wikipedia.org/wiki/Jenkins_(logiciel))") 
'<p><a href="https://fr.wikipedia.org/wiki/Jenkins_(logiciel)">jenkins</a></p>\n'

You should maybe switch to a more recent version of markdown-it in your package.json. Maybe markdown-it v7 fixes this bug.

Deprecated modules usage

Hi! I'm getting following messages on installing of the theme dependencies:

# npm install
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: Deprecated, use jstransformer
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: use uuid module instead

I guess it should be fixed.

Images being enlarged and pixelating

The Gravatar images that are being brought in from Gravatar appear to be 80px, maybe 64px at one point in the past, but also want to be 100px. The result is that a smaller picture is being used and and appears pixelated against an otherwise really crisp page.

layout bug: .skill-info

Looks like a recent commit removed a css style for .skill-info.

After playing with it in Chrome, the removed 10px seems to be a bit too close...

.skill-info { margin-left: 1em; }

or

.skill-info { margin-left: 16px; }

seems like they would work.

PDF print improvements

Hello, @mudassir0909!

I generate pdf version of resume using xvfb-run wkhtmltopdf elegant.html elegant.pdf and it looks pretty solid, however there is some room for improvement. I guess, you could see everything I'm mentioning by resizing browser window to some particular size which "wkhtmltopdf" use by default.

• Languages section looks a bit out-of-line, I guess these blocks if they don't fit on the line should be centered on the other one:
  

• Some blocks have to tied together to prevent situations like on screenshot:
  
  I guess header have to be tied to first line of context.

Issues running theme on node server 7+

See jsonresume/theme-manager#36

Adding a workplace throws an exception

TypeError: undefined is not a function
at /root/theme-manager/themes/jsonresume-theme-elegant/0.5.9/index.js:85:62
at Function..each..forEach (/root/theme-manager/themes/jsonresume-theme-elegant/0.5.9/node_modules/underscore/underscore.js:103:9)
at Object.render (/root/theme-manager/themes/jsonresume-theme-elegant/0.5.9/index.js:69:7)
at runTheme (/root/theme-manager/lib/theme.js:23:24)
at /root/theme-manager/lib/theme.js:105:13
at Object.cb as oncomplete

Correction - it seems only when the startDate is missing is the exception thrown.

Sexy!

Was looking at themes and checked out elegant, loving it so far! When your ready, ping me and I will throw it on the homepage.

Skills without keywords

http://registry.jsonresume.org/MartinWendt

New lines in bodies of text are ignored.

When I try to put "\n" in the JSON strings, it gets ignored by the template. It probably should transform newlines into <br> tags. As currently it probably adds new lines to the HTML, which doesn't affect line breaks.

abbr not supported in markdown

markdown has been recently added as a new feature of this theme, it works well and is a pleasure to use.

Unfortunately, the markdown parser does not support the abbr, which identified as a bug in marked: markedjs/marked#27

The issue suggest to use another markdown parser known as markdown-it: markdown-it.

I let you decide what to do.

URL in job descriptions

Is there a way to provide links to your projects (in my case iTunes Connect links) somewhere in the job section?

Currently all the text is provided as is, so the links pasted are just there, not clickable. There's also no way to do a <a> tag injection.

Is this something that should be considered at the jsonresume schema or do you have any idea how to accomplish this?

Spotify profile URL not working

Not sure where the current Spotify profile URL came from - perhaps it was valid in the past. The correct profile URL should reference the play or open subdomain like so:

 https://open.spotify.com/user/artinreality

(See: https://twitter.com/nicklas2k/status/330112083964342273)

I'm sending a pull request updating the URL in one minute.

External fonts

Is there a way to use external fonts? I want to use this theme hosted on github pages, but it uses local fonts that I don't have. Maybe using external urls for fonts would be better for these cases.
Thanks.

Wrong Month Calculation

Refer: http://150.107.225.81:8888/#work-experience

From 1st April to 30 Nov its 8 Months not 7 Months

1. April
2. May
3.June
4.July
5.Aug
6.Sep
7.Oct
8.Nov

Skills section improvements

• Use the level keyword to display a horizontal / vertical / circular progress bar.
• Also sort the skills by level
• Need spacing between rows when the keywords span across multiple lines.
• It hurts in your eyes when there are many keywords for a given skillset. Culprit --> label-info

Add Markdown support

Based on jsonresume/resume-schema#47 , jsonresume/resume-cli#61

Latest Version

Is the latest version working? http://themes.jsonresume.org/theme/elegant

Avatar generation

Hello, Mudassir!

I am having a problem with this awesome theme, when I do generate my resume with command hackmyresume BUILD resume.json TO ../public/cv/elegant.html -t jsonresume-theme-elegant, I've got profile picture generated improperly. Here is related resume.json part:

{
    "basics": {
        "picture": "https://www.gravatar.com/avatar/8b2d47d99e6af64b89e6a0721e3485eb?s=200"
    }
}

Here is expected result:

<...> src="https://www.gravatar.com/avatar/8b2d47d99e6af64b89e6a0721e3485eb?s=200" itemprop="image"<...>

Here is what theme generates for me:

<...> src="<a href="https://www.gravatar.com/avatar/8b2d47d99e6af64b89e6a0721e3485eb?s=200">https://www.gravatar.com/avatar/8b2d47d99e6af64b89e6a0721e3485eb?s=200</a>" itemprop="image"<...>

What is happening is on some stage link is converted to a href and included like that into src property of the image. I'll be glad to give you my environment information, but please tell me which will be relevant there.

i18n implementation

Have you planned to add i18n to this theme?

Use npmcdn for icon files

Right now we are inlining using base64 content, we can use npmcdn to serve them instead

See jsonresume/theme-manager#32