diff options
Diffstat (limited to 'resumejson_converter/example/template.html')
| -rw-r--r-- | resumejson_converter/example/template.html | 266 |
1 files changed, 266 insertions, 0 deletions
diff --git a/resumejson_converter/example/template.html b/resumejson_converter/example/template.html new file mode 100644 index 0000000..d57be01 --- /dev/null +++ b/resumejson_converter/example/template.html @@ -0,0 +1,266 @@ +<!DOCTYPE html> +<html> + <head> + <title>Neodarz's CV</title> + <meta charset="utf-8"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous"> + <style> + html, body { + font-size: 13px; + font-family: "Latin Modern Roman"; + padding: 0; + margin: 0; + height: 100%; + } + + h1 { + margin-top: 7px; + } + + a { + color: #0E5484; + text-decoration: none; + } + + .container { + display: flex; + height: 100%; + } + + .left { + background: #E7E7E7; + flex: 1; + padding: 0 1rem; + } + + .right { + flex: 2; + padding: 0 1rem; + } + + /* Left page */ + .picture { + width: 225px; + height: 225px; + overflow: hidden; + border-radius: 50%; + margin: auto; + margin-top: 20px; + } + + .picture > img { + width: 100%; + margin-top: -5%; + } + + .fa { + background: #0E5484; + width: 23px; + text-align: center; + padding: 4px 0; + border-radius: 6px; + color: #fff; + } + + .infos > div { + margin: 10px 0; + } + + .infos > div > a, .infos > div > span { + margin-left: 10px; + } + + .postecode { + margin-left: 33px !important; + } + + .about { + width: 100%; + height: 25px; + border-bottom: 1px solid black; + margin-top: 50px; + } + + .about > span { + font-size: 25px; + background-color: #E7E7E7; + padding-right: 10px; + } + + .about_subtitle { + margin-left: 10px; + } + + .subtitle { + position: relative; + margin-bottom: 70px; + } + + .name { + color: #0E5484; + font-size: 30px; + } + + .label { + position: absolute; + right: 0; + font-size: 20px; + } + + /* Right page */ + .block { + display: inline-block; + position: relative; + width: 100%; + } + + .date { + display: inline-block; + position: absolute; + left: 0; + } + + .title { + display: inline-block; + position: absolute; + left: 100px; + color: #4D4D4D; + } + + .location { + display: inline-block; + float: right; + } + .content { + margin-left: 100px; + margin-bottom: 13px; + line-height: 15px; + margin-top: 17px; + margin-right: 50px; + } + + .content > p, .content > ul { + margin: 0; + } + + table { + } + + td:nth-child(1) { + vertical-align: top; + } + td:nth-child(2) { + padding-top: 15px; + vertical-align: bottom; + padding-left: 25px; + } + </style> + </head> + <body> + <div class="container"> + <div class="left"> + <div class="picture"><img src="{{ resume.basics.picture }}"></div> + <div class="subtitle"> + <div class="name">{{ resume.basics.name }}</div> + <div class="label">{{ resume.basics.label }}</div> + </div> + <div class="infos"> + <div><i class="fa fa-info" aria-hidden="true"></i><span>{{ resume.basics.birthdate }}</span></div> + <div> + <i class="fa fa-envelope" aria-hidden="true"></i><span>{{ resume.basics.location.address }}</span><br> + <span class="postecode">{{ resume.basics.location.postalCode }} {{ resume.basics.location.city }}</span> + </div> + <div><i class="fa fa-phone" aria-hidden="true"></i><span>{{ resume.basics.phone|clean }}</span></div> + <div><i class="fa fa-globe" aria-hidden="true"></i><a href="{{ resume.basics.website }}">{{ resume.basics.website }}</a></div> + <div><i class="fa fa-git" aria-hidden="true"></i><a href="{{ resume.basics.git }}">{{ resume.basics.git }}</a></div> + <div><i class="fa fa-at" aria-hidden="true"></i><a href="mailto:{{ resume.basics.email }}">{{ resume.basics.email }}</a></div> + </div> + <div class="about"> + <span>A propos</span> + </div> + <p class="about_subtitle">{{ resume.basics.summary }}</p> + </div> + <div class="right"> + <h1>{{ resume.basics.title }}</h1> + <h2>Expériences</h2> + {% for work in resume.work %} + <div class="block"> + <div class="header"> + <div class="date">{{ work.startDate }}</div> + <div class="title">{{ work.company|datediff(work.startDate, work.endDate) }}</div> + <div class="location">{{ work.location }}</div> + </div> + <div class="content"> + <p>{{ work.summary }}</p> + <ul> + {% for highlight in work.highlights %} + <li>{{ highlight }}</li> + {% endfor %} + </ul> + </div> + </div> + {% endfor %} + <h2>Formations</h2> + {% for education in resume.education %} + <div class="block"> + <div class="header"> + <div class="date">{{ education.startDate }}</div> + <div class="title">{{ education.studyType}} - {{ education.area }} - {{ education.institution }}</div> + <div class="location">{{ education.location }}</div> + </div> + <div class="content"> + <ul> + {% for course in education.courses %} + <li>{{ course }}</li> + {% endfor %} + </ul> + </div> + </div> + {% endfor %} + <h2>Compétences</h2> + <table> + {% for skill in resume.skills %} + <tr> + <td>{{ skill.name }}</td> + <td> + {% for keyword in skill.keywords %} + {{ keyword }} + {% if not loop.last %}/{% endif %} + {% endfor %} + </td> + </tr> + {% endfor %} + </table> + <h2>Volontériat</h2> + {% for volunteer in resume.volunteer %} + <div class="block"> + <div class="header"> + <div class="date">{{ volunteer.startDate }}</div> + <div class="title">{{ volunteer.organization }}</div> + </div> + <div class="content"> + <p>{{ volunteer.summary }}</p> + <ul> + {% for highlight in volunteer.highlights %} + <li>{{ highlight }}</li> + {% endfor %} + </ul> + </div> + </div> + {% endfor %} + <h2>Intérets</h2> + <table> + {% for interest in resume.interests %} + <tr> + <td>{{ interest.name }}</td> + {% for keyword in interest.keywords %} + <td>{{ keyword }}</td> + {% endfor %} + </tr> + {% endfor %} + </table> + </div> + </div> + </body> +</html> + |