forked from ellekasai/resumecards
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
224 lines (222 loc) · 13.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
---
---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=Quando' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ "/stylesheets/resumecards.css" | prepend:site.baseurl }}">
<title>
{% if site.data.resume.demo %}
ResumeCards, a Markdown based resume generator.
{% else %}
{{ site.data.resume.name }}'s Resume
{% endif %}
</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
{% if site.data.resume.demo %}
<div class="hidden-print resume-top">
<header class="container">
<div class="row resume-intro">
<div class="col-md-8 col-md-offset-2">
<span class="resume-intro-maintitle">ResumeCards</span>
<p class="resume-intro-subtitle">ResumeCards is a Markdown based resume generator. It looks great on mobile/desktop and can be saved as PDF.</p>
</div>
<div class="col-md-8 col-md-offset-2 resume-intro-btns">
<p>
<a href="https://github.com/ellekasai/resumecards" target="_blank" class="btn btn-primary btn-lg">Download on GitHub →</a>
</p>
<p>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="ellekasai" data-size="large">Tweet</a>
<iframe src="http://ghbtns.com/github-btn.html?user=ellekasai&repo=resumecards&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
</p>
</div>
</div>
<div class="row resume-explanations">
<div class="col-md-8 col-md-offset-2">
<h2>ResumeCards Demo</h2>
<ul>
<li>Below is my resume generated by ResumeCards. It's all written in Markdown. It looks great on both mobile and desktop.</li>
<li>It's designed to fit in one letter-sized page. Try clicking the "Save as PDF" button. (Note: The button is not visible on mobile. You can view <a href="http://cl.ly/aMIm/download/resume-print-sample.pdf">the generated PDF here</a>.)</li>
<li>ResumeCards comes in 8 different colors. Try clicking the "Theme" dropdown button. (Note: The button is not visible on mobile.)</li>
</ul>
</div>
</div>
</header>
</div>
{% endif %}
<div class="container resume-content">
<nav class="navbar navbar-default hidden-print hidden-xs" role="navigation">
<div class="resume-nav">
<span>Built with <a href="https://github.com/ellekasai/resumecards" target="_blank">ResumeCards</a><span class="hidden-sm">, a Markdown based resume generator</span></span>.
<div class="dropdown resume-dropdown">
<button type="button" class="dropdown-toggle btn btn-default" data-toggle="dropdown" role="button" aria-expanded="false">Theme <span class="caret"></span></button>
<ul class="dropdown-menu resume-dropdown-menu" role="menu">
<li><a href="#" id="default">Default</a></li>
<li><a href="#" id="red">Red</a></li>
<li><a href="#" id="pink">Pink</a></li>
<li><a href="#" id="brown">Brown</a></li>
<li><a href="#" id="blue">Blue</a></li>
<li><a href="#" id="purple">Purple</a></li>
<li><a href="#" id="teal">Teal</a></li>
<li><a href="#" id="green">Green</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#saveAsPdf">
Save as PDF
</button>
<div class="modal fade" id="saveAsPdf" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="{{ "/images/resume_print_dialog.png" | prepend:site.baseurl }}" class="img-rounded" width="400" height="342">
<p>Warning: Currently, ResumeCards works the best on Chrome.<br>You need to adjust the CSS for Firefox/Safari.</p>
</div>
<div class="modal-footer">
<button onclick="window.print()" class="btn btn-primary">Open Print Dialog</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="row">
<div class="col-sm-8 clearfix">
<figure class="resume-pic">
<img src="{{ site.data.resume.photo }}" class="img-rounded" width="120" height="120">
</figure>
<div class="resume-baseinfo">
<h1>{{ site.data.resume.name }}</h1>
<p>{{ site.data.resume.copy }}</p>
</div>
</div>
<div class="col-sm-4 resume-contact">
{% include nav.html %}
</div>
</div>
<div class="row">
{% for card in site.posts reversed %}
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ card.type }}</h3>
</div>
<div class="panel-body">
{% if card.heading %}
<h4>
{{ card.heading }}
</h4>
{% endif %}
{% if card.subheading %}
<p class="resume-subheading">
{{ card.subheading }}
</p>
{% endif %}
{% if card.duration %}
<p class="resume-duration">
{{ card.duration }}
</p>
{% endif %}
{% if card.location %}
<p class="resume-location">
{{ card.location }}
</p>
{% endif %}
{{ card.content }}
</div>
</div>
</div>
{% endfor %}
</div>
{% if site.data.resume.demo %}
<div class="visible-xs hidden-print resume-view-pdf"><a href="http://cl.ly/Zb42/download/resume-print-sample.pdf" class="btn btn-primary btn-lg">View Generated PDF</a></div>
{% endif %}
</div>
{% if site.data.resume.demo %}
<div class="hidden-print resume-bottom">
<footer class="container">
<div class="row resume-explanations">
<div class="col-md-8 col-md-offset-2">
<h2>How It Works</h2>
<p>Here's the code behind the demo. First, the main heading is defined by <code>_data/resume.yml</code>. You can specify the theme color here too.</p>
<pre>
photo: "http://url/to/photo.jpg"
name: "Elle Kasai"
copy: "UI/UX Designer from Japan..."
color: default</pre>
<p>Next, the contact info section is defined by <code>_includes/nav.html</code>. You can use <a href="http://fontawesome.io/" target="_blank">Font Awesome icons</a>.</p>
<pre><p>
<i class="fa fa-twitter fa-lg fa-fw"></i>
<a href="https://twitter.com/ellekasai/">@ellekasai</a>
</p>
...</pre>
<p>Finally, the cards are defined by markdown files under the <code>_posts</code> directory. It uses <a href="http://jekyllrb.com/docs/frontmatter/" target="_blank">YAML front matter</a>.</p>
<pre>
---
type: "Work Experience"
heading: "Bizreach"
subheading: "Junior Product Designer"
duration: "October 2013 – September 2014 (1 year)"
location: "Tokyo, Japan"
---
[BizReach](https://www.bizreach.jp/) is Japan's top job site exclusive to business executives. ...</pre>
<p>These files are put together by <a href="http://jekyllrb.com/" target="_blank">Jekyll</a>, which is supported by <a href="https://pages.github.com/" target="_blanks">GitHub Pages</a>.</p>
<p>Also, card heights are fixed by CSS. So, if all the texts fit within each card when viewed on the web, they'd also fit within each card when clicking the "Saved as PDF" button.</p>
<p>You can read more detailed documentation on GitHub.</p>
<p class="resume-explanations-btn">
<a href="https://github.com/ellekasai/resumecards" target="_blank" class="btn btn-primary btn-lg">Download on GitHub →</a>
</p>
</div>
</div>
<div class="row resume-explanations">
<div class="col-md-8 col-md-offset-2">
<h2>The Story Behind ResumeCards</h2>
<p>I've been looking for a UI design job in Vancouver, Canada, and one recruiter had asked me to submit a PDF resume. I wasn't sure why it had to be in PDF though, since anyone can learn about my professional experience on <a href="http://ellekasai.com/about/" target="_blank">my about page</a>, <a href="https://www.linkedin.com/in/ellekasai" target="_blank">LinkedIn</a>, and <a href="https://github.com/ellekasai" target="_blank">GitHub</a>.</p>
<p>There are services that convert your LinkedIn or GitHub profile to a PDF file, but I couldn't find a design template I like. Also, my LinkedIn profile was too long to fit in one page, and my GitHub profile was too short. Rewriting the text was necessary.</p>
<p>Since I had to rewrite the text anyway, I decided to see if I can use Markdown and Jekyll to build a nice resume that looks great both on the web and in PDF. After some brainstorming, I realized that card UIs would work great. <a href="http://blog.intercom.io/why-cards-are-the-future-of-the-web/" target="_blank">They're responsive design friendly</a>. And by specifying the height manually, they can be made to fit in one page.</p>
<p>I decided to open source this, and made it so that users can pick the color they like. This is how ResumeCards was born.</p>
</div>
</div>
<div class="row resume-explanations">
<div class="col-md-8 col-md-offset-2">
<h2>Author</h2>
<p class="text-center">Written by <a href="http://ellekasai.com/about" target="_blank">Elle Kasai</a> (<a href="http://twitter.com/ellekasai" target="_blank">@ellekasai</a>), a UI/UX designer based in Vancouver, Canada.</p>
<p class="resume-explanations-btn"><a href="http://ellekasai.com/about/" target="_blank" class="btn btn-primary btn-lg">Learn More about Elle →</a></p>
<p class="resume-explanations-btn"><a href="https://twitter.com/ellekasai" class="twitter-follow-button" data-show-screen-name="false" data-show-count="true" data-dnt="true" data-size="large">Follow @ellekasai</a></p>
</div>
</div>
<div class="row resume-explanations">
<div class="col-md-8 col-md-offset-2">
<h2>Thanks!</h2>
<p class="resume-explanations-btn"><a href="https://twitter.com/share" class="twitter-share-button" data-via="ellekasai" data-size="large">Tweet</a> <iframe src="http://ghbtns.com/github-btn.html?user=ellekasai&repo=resumecards&type=watch&count=true&size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30" style="margin-top: 14px;"></iframe></p>
<blockquote class="twitter-tweet" lang="en" align="center"><p>I released a new project :) ResumeCards, a Markdown based resume generator! 💼✨→ <a href="http://t.co/LTPKEzEbqD">http://t.co/LTPKEzEbqD</a></p>— Elle Kasai (@ellekasai) <a href="https://twitter.com/ellekasai/status/555780937212915713">January 15, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>P.S. If you like ResumeCards, you should check out my other project: <a href="http://ellekasai.github.io/purplecoat.js/" target="_blank">Purplecoat.js</a>, Simple Labeled Overlays.</p>
<p>Thanks to <a href="https://twitter.com/chibicode" target="_blank">@chibicode</a> for revising my English.</p>
</div>
</div>
</footer>
</div>
{% endif %}
{% if site.data.resume.demo %}
<div class="hidden-xs">
<div class="github-fork-ribbon-wrapper right fixed" style="width: 150px;height: 150px;position: fixed;overflow: hidden;top: 0;z-index: 9999;pointer-events: none;right: 0;"><div class="github-fork-ribbon" style="position: absolute;padding: 2px 0;background-color: rgba(95, 124, 138, 1);background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);z-index: 9999;pointer-events: auto;top: 42px;right: -43px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);"><a href="http://github.com/ellekasai/resumecards" style="font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;color: #fff;text-decoration: none;text-shadow: 0 -1px rgba(0, 0, 0, 0.5);text-align: center;width: 200px;line-height: 20px;display: inline-block;padding: 2px 0;border-width: 1px 0;border-style: dotted;border-color: rgba(255, 255, 255, 0.7);" target="_blank">Fork me on GitHub</a></div></div>
</div>
{% endif %}
<script src="{{ "/javascripts/jquery.min.js" | prepend:site.baseurl }}"></script>
<script src="{{ "/javascripts/bootstrap.min.js" | prepend:site.baseurl }}"></script>
<script src="{{ "/javascripts/resumecards.js" | prepend:site.baseurl }}"></script>
{% include scripts.html %}
</body>
</html>