Skip to content

Commit 56731f6

Browse files
ellekasaiellekasai
committed
add sample images
1 parent 67971d9 commit 56731f6

10 files changed

+113
-33
lines changed

‎images/sample_blue.png

116 KB
Loading

‎images/sample_bluegray.png

116 KB
Loading

‎images/sample_brown.png

115 KB
Loading

‎images/sample_default.png

116 KB
Loading

‎images/sample_green.png

117 KB
Loading

‎images/sample_pink.png

116 KB
Loading

‎images/sample_red.png

116 KB
Loading

‎images/sample_teal.png

115 KB
Loading

‎index.html

+52-32
Original file line numberDiff line numberDiff line change
@@ -17,39 +17,59 @@
1717
<![endif]-->
1818
</head>
1919
<body>
20-
<header class="container hidden-print">
21-
<!--これは何なのか､どんな風に使えるのかを説明する-->
22-
23-
<!--イントロ部分-->
24-
<span>Resumecards</span>
25-
<p>Resumecardsは､簡単にキレイなレジュメを作成できるジェネレーターツールです｡</p>
26-
<p>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>
27-
<p><a href="https://github.com/ellekasai/resumecards" target="_blank" class="btn btn-primary btn-lg space-sm">Download on GitHub →</a></p>
28-
29-
<!--特長-->
30-
<p>Resumecardsは<a href="http://blog.intercom.io/why-cards-are-the-future-of-the-web/" target="_blank">カードデザイン</a>を参考にデザインしました｡</p>
31-
<p>カードの内容を編集するには､Markdown記法を使用します｡</p>
32-
<pre>
33-
---
34-
type: "Work Experience"
35-
heading: "Bizreach"
36-
subheading: "Junior Product Designer"
37-
duration: "October 2013 – September 2014 (1 year)"
38-
location: "Tokyo, Japan"
39-
---
40-
41-
<a href="https://www.bizreach.jp/" target="_blank">BizReach</a> is Japan's top job site exclusive to business executives. I worked on front-end design and coding. My most recent project was <a href="https://woman.bizreach.jp/" target="_blank">Bizreach Woman</a>, a job site specifically for female business executives in Japan.
42-
</pre>
43-
<p>カラーテーマは8種類の中から選べます｡</p>
44-
<p>print buttonを押すと印刷ダイアログが表示されようになっており､そのまま印刷したり､PDFとして保存することができます｡</p>
45-
<p>
46-
<a href="resume_print_sample.pdf" target="_blank"><img src="{{ "/images/resume_print_preview.png" | prepend:site.baseurl }}" width="400"></a>
47-
</p>
20+
<div class="container hidden-print">
21+
<header>
22+
<div class="resume-intro">
23+
<span class="resume-intro-title">Resumecards</span>
24+
<p>Resumecardsは､簡単にキレイなレジュメを作成できるジェネレーターツールです｡</p>
25+
<p>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>
26+
<p class="resume-intro-download"><a href="https://github.com/ellekasai/resumecards" target="_blank" class="btn btn-primary btn-lg space-sm">Download on GitHub →</a></p>
27+
</div>
28+
<div class="resume-point">
29+
<h2>What is Resumecards?</h2>
30+
<ul class="resume-point-list">
31+
<li>
32+
Resumecardsは<a href="http://blog.intercom.io/why-cards-are-the-future-of-the-web/" target="_blank">カードデザイン</a>を参考にデザインしました｡
33+
</li>
34+
<li>カードの内容を編集するには､Markdown記法を使用します｡
35+
<pre>
36+
---
37+
type: "Work Experience"
38+
heading: "Bizreach"
39+
subheading: "Junior Product Designer"
40+
duration: "October 2013 – September 2014 (1 year)"
41+
location: "Tokyo, Japan"
42+
---
4843

49-
<!--注意-->
50-
<p>動作確認はChromeでのみ行っていますので､Chromeで使用されることをお勧めします｡</p>
51-
<p>カードは9枚に固定されていて､各カードは印刷時に1枚に収まるように高さが固定されています｡</p>
52-
</header>
44+
<a href="https://www.bizreach.jp/" target="_blank">BizReach</a> is Japan's top job site exclusive to business executives. I worked on front-end design and coding. My most recent project was <a href="https://woman.bizreach.jp/" target="_blank">Bizreach Woman</a>, a job site specifically for female business executives in Japan.
45+
</pre>
46+
</li>
47+
<li>
48+
カラーテーマは8種類の中から選べます｡
49+
<img src="{{ "/images/sample_default.png" | prepend:site.baseurl }}" class="img-rounded">
50+
<img src="{{ "/images/sample_red.png" | prepend:site.baseurl }}" class="img-rounded">
51+
<img src="{{ "/images/sample_pink.png" | prepend:site.baseurl }}" class="img-rounded">
52+
<img src="{{ "/images/sample_brown.png" | prepend:site.baseurl }}" class="img-rounded">
53+
<img src="{{ "/images/sample_blue.png" | prepend:site.baseurl }}" class="img-rounded">
54+
<img src="{{ "/images/sample_bluegray.png" | prepend:site.baseurl }}" class="img-rounded">
55+
<img src="{{ "/images/sample_teal.png" | prepend:site.baseurl }}" class="img-rounded">
56+
<img src="{{ "/images/sample_green.png" | prepend:site.baseurl }}" class="img-rounded">
57+
</li>
58+
<li>
59+
print buttonを押すと印刷ダイアログが表示されようになっており､そのまま印刷したり､PDFとして保存することができます｡
60+
<a href="resume_print_sample.pdf" target="_blank"><img src="{{ "/images/resume_print_preview.png" | prepend:site.baseurl }}" class="img-rounded"></a>
61+
</li>
62+
</ul>
63+
</div>
64+
<div class="resume-notes">
65+
<h2>Notes</h2>
66+
<ul>
67+
<li>動作確認はChromeでのみ行っていますので､Chromeで使用されることをお勧めします｡</li>
68+
<li>カードは9枚に固定されていて､各カードは印刷時に1枚に収まるように高さが固定されています｡</li>
69+
</ul>
70+
</div>
71+
</header>
72+
</div>
5373
<nav class="navbar navbar-default hidden-print hidden-xs navbar-static-top" role="navigation">
5474
<div class="container">
5575
<div class="navbar-header">

‎stylesheets/resumecards.scss

+61-1
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,19 @@ body {
118118
}
119119

120120
header {
121-
padding-bottom: 50px;
121+
margin: 40px auto;
122+
border-radius: 4px;
123+
background-color: white;
124+
box-sizing: border-box;
125+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
126+
font-size: 15px;
127+
padding: 20px 30px;
128+
ul {
129+
margin-top: 20px;
130+
> li + li {
131+
margin-top: 20px;
132+
}
133+
}
122134
}
123135

124136
h1, h2, h3, h4, h5, h6, .panel-title, .resume-contact {
@@ -143,6 +155,10 @@ ul {
143155
padding-left: 20px;
144156
}
145157

158+
pre {
159+
margin: 20px 0;
160+
}
161+
146162
a {
147163
color: $color-base;
148164
&:hover {
@@ -234,6 +250,44 @@ a {
234250
Styles
235251
———————————–———————————–*/
236252

253+
.resume-intro {
254+
margin-top: 30px;
255+
text-align: center;
256+
}
257+
258+
.resume-intro-title {
259+
display: block;
260+
font-size: 40px;
261+
color: $color-base;
262+
font-family: "Quando", sans-serif;
263+
+ p {
264+
margin-top: 30px;
265+
}
266+
267+
@each $color-name in "default", "red", "pink", "brown", "blue", "bluegray", "teal", "green" {
268+
.theme-#{$color-name} & {
269+
color: map-get(map-get($all-colors, $color-name), "base");
270+
}
271+
}
272+
}
273+
274+
.resume-intro-download {
275+
margin-top: 30px;
276+
}
277+
278+
.resume-point,
279+
.resume-notes {
280+
margin-top: 50px;
281+
}
282+
283+
.resume-point {
284+
img {
285+
display: block;
286+
margin-top: 10px;
287+
width: 500px;
288+
}
289+
}
290+
237291
.resume-nav {
238292
width: 100%;
239293
}
@@ -344,6 +398,12 @@ a {
344398
.resume-pic + .resume-baseinfo {
345399
margin-left: 0;
346400
}
401+
.resume-point {
402+
img {
403+
max-width: 100%;
404+
height: auto;
405+
}
406+
}
347407
}
348408

349409
@media print {

0 commit comments

Comments
 (0)