npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cv.json

v2.0.0

Published

CV webpage dynamically created from a json file and a template

Downloads

10

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

kariminfkariminf

Keywords

cvjsonresumecurriculum vitaecv generatorpersonal webpage

Readme

cv.json

NPM

Project License Version Travis npm

TL;DR

Create your Curriculum Vitae (CV) personal webpage by putting your information on a json file and an almost blank index.html (containing just information about themes)

Long Version

When you want to create a personal CV website, you have to put your information into a static HTML file (if you don't want a server based one). Then, if you want to change the design, sometimes changing CSS is not enough; you have to change HTML too. So, this project is meant to:

  • Create a CV webpage without needing to configure servers (front-end).
  • Facilitate the update of informations without breaking the page's structure, by separating personal information and page design.
  • Make it easy to select and create themes.

Technically speaking:

  • Create a client side CV webpage.
  • Separate information and design.
  • Create many themes.

As consequences:

  • The application can be hosted widely and doesn't need any special server configuration
  • The page is built locally and dynamically in the user's side
  • The themes can be changed easily without
  • Most importantly, the user doesn't have to program anything

In other word:

  • I can give you a pie, but instead I give you all the ingredients (json file, html files, template, css) and the recipe (cv.json.js) and you cook it yourself

Showcasing

default black pc default colorful pc default vertical pc default violet pc default black mobile default colorful mobile default vertical mobile default violet mobile

For an exhaustive list of available themes, check THIS

To test these themes directly, check THIS

How it works

The HTML file doesn't contain anything at all. It just calls for the script which will do the calls.

How it works

  1. The browser will download the index file
  2. Then, it downloads the script
  3. The script will download the css specified in the index file and apply it to the document
  4. It will download the template into a shared string
  5. The script will then merge the template and the information in the json file
  6. If there are some files, the script will download them asynchronously
  7. When the script receive response from a file it will merge its content into the template
  8. Finally, when all the wanted files has responded, the script pushed the merged content into the body of the page

Check the API

How to use

Download from Github

  • Download the last release HERE
  • Extract the files in your project
  • Modify index.html (include theme, style)
  • Modify cv.json (insert your information)

Download from Npm

In your project tree, tape this command line to download the latest version to "node_modules":

npm i cv.json
node node_modules/cv.json/install.js

All needed files will be copied to the root (where the shell is positioned)

  • Modify index.html
  • Modify cv.json

If you want to test your webpage locally, install a simple HTTP server

npm i http-server -D

Then,

node_modules/http-server/bin/http-server ./ -p 8090

Open this address on your browser:

http://localhost:8090/

HTML file

By introducing information inside a json file ("cv.json"), you can generate a CV webpage (resumé). This can be done using javascript ("cv.json.js") which is called as follows:

<html>
<head>
  <meta charset="UTF-8">
  <title>Test CV</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="<link/to/cv.json.js>" ></script>
</head>
<body>
  <script>
    JsonVCard.setStyleName("violet")
      .setRelativePath("link/to/current/directory") /*where your profile picture and helper files are*/
      .setThemesPath("link/to/the/theme")/*Not affected by setRelativePath*/
      .setThemeName("theme-name")/*must come after setThemesPath*/
      .setFooter("link/to/footer.htm") /*Not affected by setRelativePath*/
      .process("link/to/cv.json");/*Not affected by setRelativePath*/
  </script>
</body>
</html>

The json file ("cv.json") contains information about the one for whom we want to generate a CV. it is self explanatory and easy to fill.

For API documentation, check this YuiDoc generated documentation

Also, if you just want to update the package, don't execute the last instruction. Otherwise, it will overwrite your json file (if its name is not cv.json)

Community

All the C's are here:

License

Copyright (C) 2016-2018 Abdelkrime Aries

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.