-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout-me.html
More file actions
132 lines (125 loc) · 5.93 KB
/
about-me.html
File metadata and controls
132 lines (125 loc) · 5.93 KB
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Google Web Fonts, in order of prioritizatioin -->
<link href="https://fonts.googleapis.com/css?family=Quicksand:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans">
<!-- Setting the viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheets & Javascript -->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>About Me</title>
</head>
<body>
<nav>
<a href="http://sujunglee.com/work" class="nav-link" style="float:right">work</a>
<a href="http://sujunglee.com/about-me" class="nav-link active" style="float:right">about me</a>
<a href="http://sujunglee.com" class="nav-link" style="float:right">home</a>
</nav>
<div class="container">
<h1 class="name-text">my journey</h1>
<div class="container">
</div>
<ul class="timeline">
<li>
<div class="timeline-badge"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-date">1998</h3>
<h3 class="timeline-title">the start</h3>
<center><img src="images/korea-logo.png" alt="Korea silhouette" class="timeline-icon"></center>
</div>
<div class="timeline-body">
<p class="timeline-p">I am born in Seoul, South Korea, under the name <b>Sujung Lee</b>. For convenience, I am also given the English nickname <b>Suzy</b>.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-date">2005~2009</h3>
<h3 class="timeline-title">art addiction</h3>
</div>
<div class="timeline-body">
<p class="timeline-p">I move to Canada and fill countless sketchbooks with drawings. I realize my love for <b>minimalism</b> and <b>cartoon design.</b></p>
</div>
</div>
</li>
<li>
<div class="timeline-badge danger"></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-date">2009~2013</h3>
<h3 class="timeline-title">adobe: love at first sight</h3>
</div>
<div class="timeline-body">
<center><img src="images/PS-logo.png" alt="Photoshop logo" class="timeline-icon"><img src="images/Id-logo.png" alt="Indesign logo" class="timeline-icon"><img src="images/Ai-logo.png" alt="Illustrator logo" class="timeline-icon"><img src="images/Lr-logo.png" alt="Lightroom logo" class="timeline-icon"></center>
<p class="timeline-p">I move back to Korea and become the <b>editor in chief of photography</b> of the school yearbook as a sophomore. I fall in love with the <b>Adobe Creative Suite</b> and start working on my first book.</p>
<a href="http://www.blurb.com/books/6549629-what-s-for-dinner-is-there-dinner-an-analysis-of-o" target="_blank" class="btn btn-default center-block btn-lg">read the book</a>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge info"></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-date">2014</h3>
<h3 class="timeline-title">first recognition</h3>
</div>
<div class="timeline-body">
<p class="timeline-p">I win the silver prize in the <b>International English Writing Competition</b> (IEWC) and the <b>Publications Award</b> for my contributions to the yearbook.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-date">2015</h3>
<h3 class="timeline-title">chemistry and art</h3>
<center><img src="images/JLC_Header.png" alt="Gallery photo" width="100%"></center>
</div>
<div class="timeline-body">
<p class="timeline-p">I illustrate a cartoon periodic table and create the website <b>Just Love Chem</b> to display it. A physical rendition of my periodic table is displayed in front of <b>Hwaseong fortress</b>.</p>
<p class="timeline-p"> 3 of my photos receive the <b>Teen Ink Editor's Choice Award</b>. I also receive the <b>DP Art Award</b> and the <b>NSPA Journalism Honor Roll</b>.</p>
<a href="http://justlovechem.com" target="_blank" class="btn btn-default center-block btn-lg">visit the site</a>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge success"></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-date">2016</h3>
<h3 class="timeline-title">budding programmer</h3>
<center><img src="images/NU-logo.png" alt="Northwestern logo" width="100%"></center>
</div>
<div class="timeline-body">
<p class="timeline-p">I get accepted to Northwestern University and pursue a <b>Bachelor's in Computer Science.</b> I learn valuable languages like <b>C++</b> and <b>Python</b>.</p>
<p class="timeline-p">I join <b>HELIX magazine</b> as a computer science writer.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge danger"></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-date">2017</h3>
<h3 class="timeline-title">full stack web developer</h3>
</div>
<div class="timeline-body">
<center><img src="images/potato-logo.png" width="30%" alt="Potato logo" width="70%"></center>
<p class="timeline-p">I join <b>Potato</b> as a full stack web developer, developing features for the platform using <b>REACT</b> and <b>REDUX</b>.</p>
<a href="http://www.ptto.io/" class="btn btn-default center-block btn-lg" target="_blank">see potato</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>