-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (171 loc) · 6.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Mono&display=swap"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Jonathan Lemos</title>
<meta name="description" content="$ ls jonathan-lemos/"/>
<script src="script.js" defer></script>
</head>
<body>
<main id="main">
<div class="bg anime"></div>
<div class="bg gradient"></div>
<div class="grow"></div>
<div>
<div id="ls-command" class="glitch">
<h1 class="blue pre">$ ls </h1>
<h1 class="green">jonathan</h1>
<h1 class="blue">_</h1>
<h1 class="green">lemos</h1>
<h1 class="blue">/</h1>
</div>
<div class="w-100">
<table id="ls-output" class="w-100">
<tr>
<td><a href="#about" id="anchor-about" class="hover-red">about</a></td>
<td><a href="#contact" id="anchor-contact" class="hover-red">contact</a></td>
<td><a href="#experience" id="anchor-experience" class="hover-red">experience</a></td>
</tr>
<tr>
<td><a href="#projects" id="anchor-projects" class="hover-red">projects</a></td>
<td><a href="resume.pdf" id="anchor-resume" class="hover-blue fa-mono" download>resume</a></td>
<td><a href="#skills" id="anchor-skills" class="hover-red">skills</a></td>
</tr>
</table>
<div id="shell">
<h1 class="blue">$ </h1>
<h1 id="shell-input" class="blue pre"></h1>
<h1 class="blue blink">_</h1>
</div>
</div>
</div>
<div class="grow"></div>
</main>
<div class="sentinel"></div>
<nav>
<a href="#main">/home</a>
<a href="#about">about</a>
<a href="#skills">skills</a>
<a href="#experience">experience</a>
<a href="#projects">projects</a>
<a href="#contact">contact</a>
<a href="resume.pdf" class="hover-blue fa-mono">resume</a>
</nav>
<section id="about">
<a href="#about" class="title">about me</a>
<p class="w-50 text-center">
I write code. What more is there to say?
</p>
</section>
<section id="skills">
<a href="#skills" class="title">skills</a>
<div class="row center align-stretch">
<div id="skills-good" class="skill">
<h2 class="subtitle dark-green">the good</h2>
<h3 class="subsubtitle">good amount of experience with these</h3>
<ul>
<li>Bash</li>
<li>C</li>
<li>C#</li>
<li>CSS/HTML/JS</li>
<li>Java</li>
<li>Linux</li>
<li>Python</li>
<li>SASS</li>
<li>Typescript</li>
</ul>
</div>
<div id="skills-bad" class="skill">
<h2 class="subtitle gold">the bad</h2>
<h3 class="subsubtitle">okay with these, but could use a refresher</h3>
<ul>
<li>Angular</li>
<li>C++</li>
<li>React</li>
<li>Rust</li>
<li>Scala</li>
<li>SQL</li>
</ul>
</div>
<div id="skills-ugly" class="skill">
<h2 class="subtitle dark-red">the ugly</h2>
<h3 class="subsubtitle py-1">i think i used these once</h3>
<ul>
<li>Clojure</li>
<li>PHP</li>
<li>R</li>
</ul>
</div>
</div>
</section>
<section id="experience">
<a href="#experience" class="title">experience</a>
<ul class="timeline">
<li>
<div class="time">
<h1>May 2019 - February 2020</h1>
</div>
<div class="entry">
<h1>Duos Technologies</h1>
<h2>Artificial Intelligence Intern</h2>
</div>
</li>
<li>
<div class="time">
<h1>February 2020 - Present</h1>
</div>
<div class="entry">
<h1>Autopoint</h1>
<h2>Software Development Intern</h2>
</div>
</li>
</ul>
</section>
<section id="projects">
<a href="#projects" class="title">projects</a>
<div class="row center align-stretch">
<a class="project" href="https://github.com/jonathan-lemos/website_mk2" target="_blank">
<h1 class="subtitle">this website</h1>
<p>
Uses a combination of HTML5/CSS3/Javascript ES6 to deliver a responsive, good-looking
personal website with a few easter eggs up its sleeve.
</p>
</a>
<a class="project" href="https://github.com/jonathan-lemos/cs1help" target="_blank">
<h1 class="subtitle">cs1 guide</h1>
<p class="text-size-p">
A React single-page wiki that helps you get up to speed in Computer Science 1 quickly.
</p>
</a>
<a class="project" href="https://github.com/jonathan-lemos/CsEarley" target="_blank">
<h1 class="subtitle">CsEarley</h1>
<p>
A universal parser written in C# that can support any grammar.
</p>
</a>
</div>
</section>
<section id="contact">
<a href="#contact" class="title">contact</a>
<div class="row w-100 align-stretch">
<a class="contact" href="mailto:[email protected]" target="_blank">
<div class="contact-icon"></div>
<span>[email protected]</span>
</a>
<a class="contact" href="https://github.com/jonathan-lemos">
<div class="contact-icon"></div>
<span>jonathan-lemos</span>
</a>
<a class="contact" href="https://linkedin.com/in/lemos-jonathan">
<div class="contact-icon"></div>
<span>lemos-jonathan</span>
</a>
</div>
</section>
</body>
</html>