Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/anthonyjdella/customized-jsonresume-theme-kards

🍴I tweaked the 'Kards' theme for JSON Resume
https://github.com/anthonyjdella/customized-jsonresume-theme-kards

json resume

Last synced: 1 day ago
JSON representation

🍴I tweaked the 'Kards' theme for JSON Resume

Host: GitHub
URL: https://github.com/anthonyjdella/customized-jsonresume-theme-kards
Owner: anthonyjdella
Created: 2021-10-21T18:41:18.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2022-11-15T06:30:25.000Z (about 2 years ago)
Last Synced: 2025-01-08T12:15:20.565Z (28 days ago)
Topics: json, resume
Language: HTML
Homepage: https://resume.anthonydellavecchia.com/anthonyjdella?customTheme=kards
Size: 10.8 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Customized JSON Resume Theme: Kards

🖼️ This is a slightly tweaked version of the [Kards theme](https://github.com/XuluWarrior/jsonresume-theme-kards). Tweaked to fit my design preferences. Published on NPM and GitHub Registry.

## Usage

* `npm run start` to start local server.

* `npm run build` to build public dir.

## Content

* `resume.hbs` template for resume.

* `index.js` helper functions & render function which renders the resuem.

* `public/index.html` generated HTML after running `npm run build`.

  Click to expand README.md of the source repository!

# JSON Resume Kards Theme 

[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/XuluWarrior/jsonresume-theme-kards)

This is a theme for [JSON Resume](http://jsonresume.org/) based on [Kards design](https://www.styleshout.com/free-templates/kards/) by [styleshout](https://www.styleshout.com/).

|  |  |

| --- | --- |

| [![Example resume (intro)](https://xuluwarrior.github.io/jsonresume-theme-kards/resume-1.png)](https://xuluwarrior.github.io/jsonresume-theme-kards/resume.html) | [![Example resume (about)](https://xuluwarrior.github.io/jsonresume-theme-kards/resume-2.png)](https://xuluwarrior.github.io/jsonresume-theme-kards/resume.html#about) |

| [![Example resume (profile)](https://xuluwarrior.github.io/jsonresume-theme-kards/resume-3.png)](https://xuluwarrior.github.io/jsonresume-theme-kards/resume.html#about) | [![Example resume](https://xuluwarrior.github.io/jsonresume-theme-kards/resume-4.png)](https://xuluwarrior.github.io/jsonresume-theme-kards/resume.html#resume) |

## Getting started

### Install the command line

Install [resume-cli](https://github.com/jsonresume/resume-cli) to render your resume.

```

sudo npm install -g resume-cli

```

### Serve theme

```

resume serve --theme kards --resume 

```

You should now see this message:

```

Preview: http://localhost:4000

Press ctrl-c to stop

```

The resume should open in a new tab in your default browser

## Editing template

### Get source from GitHub

```

git clone https://github.com/XuluWarrior/jsonresume-theme-kards.git

cd jsonresume-theme-kards

```

### Serve theme

```

resume serve

```

This will use the local version of the theme to render the resume.json

If there is a local copy of resume.json this will be used.  Otherwise, it will use the default resume.json from [jsonresume.org](https://jsonresume.org/)

### Change background images

In order for the generated html to be self contained this theme ships with the background images embedded in the css.

To change the images, edit **Kards10/less/config.less**

```

@bg-img-url: "data:image/...";

@intro-bg-img-url: "data:image/...";

@logo-img-url: "data:image/...";

```

and then rebuild styles.css

```

npm run build:styles

```

### Extra sections

The original Kards design included extra sections such as [Portfolio](https://www.styleshout.com/templates/preview/Kards10/#portfolio) and [Services](https://www.styleshout.com/templates/preview/Kards10/index.html#services).  These don't map directly to jsonresume and so are commented out in the template.

To include them in your template, edit **resume.hbs** and uncomment the appropriate sections and personalise the content e.g.

```

 ...

  

```

 

|  |  |

| --- | --- |

| [![Portfolio section](https://xuluwarrior.github.io/jsonresume-theme-kards/resume-portfolio.png)](https://www.styleshout.com/templates/preview/Kards10/#portfolio) | [![Services section](https://xuluwarrior.github.io/jsonresume-theme-kards/resume-services.png)](https://www.styleshout.com/templates/preview/Kards10/index.html#services) |

## License

Template design is available under [Creative Commons Attribution 3.0 License](http://creativecommons.org/licenses/by/3.0/) attributed to [styleshout](https://www.styleshout.com/)

Source code for generating resume is available under [the MIT license](http://mths.be/mit).