-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
300 lines (280 loc) · 14.5 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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Oscar Rolf</title>
</head>
<body class="light-theme">
<div class="experience">
<canvas class="experience-canvas"></canvas>
</div>
<!-- Preloader -->
<div class="preloader">
<div class="preloader-wrapper">
<div class="loading">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<div class="page" asscroll-container>
<div class="toggle-bar">
<div class="sun-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path
fill="currentColor"
d="M12 5Q11.575 5 11.288 4.712Q11 4.425 11 4V2Q11 1.575 11.288 1.287Q11.575 1 12 1Q12.425 1 12.713 1.287Q13 1.575 13 2V4Q13 4.425 12.713 4.712Q12.425 5 12 5ZM16.95 7.05Q16.675 6.775 16.675 6.362Q16.675 5.95 16.95 5.65L18.35 4.225Q18.65 3.925 19.062 3.925Q19.475 3.925 19.775 4.225Q20.05 4.5 20.05 4.925Q20.05 5.35 19.775 5.625L18.35 7.05Q18.075 7.325 17.65 7.325Q17.225 7.325 16.95 7.05ZM20 13Q19.575 13 19.288 12.712Q19 12.425 19 12Q19 11.575 19.288 11.287Q19.575 11 20 11H22Q22.425 11 22.712 11.287Q23 11.575 23 12Q23 12.425 22.712 12.712Q22.425 13 22 13ZM12 23Q11.575 23 11.288 22.712Q11 22.425 11 22V20Q11 19.575 11.288 19.288Q11.575 19 12 19Q12.425 19 12.713 19.288Q13 19.575 13 20V22Q13 22.425 12.713 22.712Q12.425 23 12 23ZM5.65 7.05 4.225 5.65Q3.925 5.35 3.925 4.925Q3.925 4.5 4.225 4.225Q4.5 3.95 4.925 3.95Q5.35 3.95 5.625 4.225L7.05 5.65Q7.325 5.925 7.325 6.35Q7.325 6.775 7.05 7.05Q6.75 7.325 6.35 7.325Q5.95 7.325 5.65 7.05ZM18.35 19.775 16.95 18.35Q16.675 18.05 16.675 17.638Q16.675 17.225 16.95 16.95Q17.225 16.675 17.638 16.675Q18.05 16.675 18.35 16.95L19.775 18.35Q20.075 18.625 20.062 19.05Q20.05 19.475 19.775 19.775Q19.475 20.075 19.05 20.075Q18.625 20.075 18.35 19.775ZM2 13Q1.575 13 1.288 12.712Q1 12.425 1 12Q1 11.575 1.288 11.287Q1.575 11 2 11H4Q4.425 11 4.713 11.287Q5 11.575 5 12Q5 12.425 4.713 12.712Q4.425 13 4 13ZM4.225 19.775Q3.95 19.5 3.95 19.075Q3.95 18.65 4.225 18.375L5.65 16.95Q5.925 16.675 6.338 16.675Q6.75 16.675 7.05 16.95Q7.35 17.25 7.35 17.663Q7.35 18.075 7.05 18.375L5.65 19.775Q5.35 20.075 4.925 20.075Q4.5 20.075 4.225 19.775ZM12 18Q9.5 18 7.75 16.25Q6 14.5 6 12Q6 9.5 7.75 7.75Q9.5 6 12 6Q14.5 6 16.25 7.75Q18 9.5 18 12Q18 14.5 16.25 16.25Q14.5 18 12 18ZM12 16Q13.65 16 14.825 14.825Q16 13.65 16 12Q16 10.35 14.825 9.175Q13.65 8 12 8Q10.35 8 9.175 9.175Q8 10.35 8 12Q8 13.65 9.175 14.825Q10.35 16 12 16Z"
/>
</svg>
</div>
<button class="toggle-button">
<div class="toggle-circle"></div>
</button>
<div class="moon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path
fill="currentColor"
d="M12 21Q8.25 21 5.625 18.375Q3 15.75 3 12Q3 8.25 5.625 5.625Q8.25 3 12 3Q12.35 3 12.688 3.025Q13.025 3.05 13.35 3.1Q12.325 3.825 11.713 4.987Q11.1 6.15 11.1 7.5Q11.1 9.75 12.675 11.325Q14.25 12.9 16.5 12.9Q17.875 12.9 19.025 12.287Q20.175 11.675 20.9 10.65Q20.95 10.975 20.975 11.312Q21 11.65 21 12Q21 15.75 18.375 18.375Q15.75 21 12 21ZM12 19Q14.2 19 15.95 17.788Q17.7 16.575 18.5 14.625Q18 14.75 17.5 14.825Q17 14.9 16.5 14.9Q13.425 14.9 11.262 12.738Q9.1 10.575 9.1 7.5Q9.1 7 9.175 6.5Q9.25 6 9.375 5.5Q7.425 6.3 6.213 8.05Q5 9.8 5 12Q5 14.9 7.05 16.95Q9.1 19 12 19ZM11.75 12.25Q11.75 12.25 11.75 12.25Q11.75 12.25 11.75 12.25Q11.75 12.25 11.75 12.25Q11.75 12.25 11.75 12.25Q11.75 12.25 11.75 12.25Q11.75 12.25 11.75 12.25Q11.75 12.25 11.75 12.25Q11.75 12.25 11.75 12.25Q11.75 12.25 11.75 12.25Q11.75 12.25 11.75 12.25Q11.75 12.25 11.75 12.25Q11.75 12.25 11.75 12.25Z"
/>
</svg>
</div>
</div>
<div class="page-wrapper" asscroll>
<section class="hero">
<div class="hero-wrapper">
<!-- Intro Stuff -->
<div class="intro-text">Welcome to my portfolio!</div>
<div class="arrow-svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path
fill="currentColor"
d="M12 14.95q-.2 0-.375-.063-.175-.062-.325-.212L6.675 10.05q-.275-.275-.262-.688.012-.412.287-.687.275-.275.7-.275.425 0 .7.275l3.9 3.9 3.925-3.925q.275-.275.688-.263.412.013.687.288.275.275.275.7 0 .425-.275.7l-4.6 4.6q-.15.15-.325.212-.175.063-.375.063Z"
/>
</svg>
</div>
<div class="hero-main">
<h1 class="hero-main-title">Oscar Rolf</h1>
<p class="hero-main-description">
Software Engineer | Web Developer
</p>
</div>
<div class="hero-second">
<p class="hero-second-subheading first-sub">Software</p>
<p class="hero-second-subheading second-sub">Portfolio</p>
</div>
</div>
</section>
<div class="first-move section-margin"></div>
<section class="first-section section left">
<div class="progress-wrapper progress-bar-wrapper-left">
<div class="progress-bar"></div>
</div>
<div class="section-intro-wrapper">
<h1 class="section-title">
<span class="section-title-text">About Me</span>
<div class="section-title-decoration styleOne"></div>
<div class="section-title-decoration styleTwo"></div>
<div class="section-title-decoration styleThree"></div>
</h1>
<span class="section-number">01</span>
</div>
<div class="section-detail-wrapper">
<h1 class="section-heading">Nice to meet you, I’m Oscar</h1>
<p class="section-text">
I'm a freelance full-stack developer. I'm interested in learning
more about your org's needs and how I can be of assistance!
<br />
<span style="font-weight: bold"
>Please continue scrolling to see a sample of my work.</span
>
</p>
<h1 class="section-heading">My Areas of Expertise</h1>
<p class="section-text">
From design to implementation, my goal as a developer is to
deliver visually pleasing, practical products. As a freelancer,
I'm currently working on AI integrations, web scrapers, and data
visualizations. I also enjoy designing creative web interfaces and
building full-stack applications.
</p>
<h1 class="section-heading">My Preferred Tech</h1>
<p class="section-text">
I work with various languages and frameworks to tackle complex
problems across different domains.
<span style="font-weight: bold"
>Below are the ones I use the most. </span
>Lately, I have also enjoyed working with robust APIs and cloud
databases to develop scalable and efficient software solutions.
</p>
<br />
<h2>Programming Languages:</h2>
<ul>
<li>JavaScript</li>
<li>TypeScript</li>
<li>Python</li>
<li>HTML/CSS</li>
</ul>
<h2>Frameworks and Libraries:</h2>
<ul>
<li>React</li>
<li>Next.js</li>
<li>Node</li>
<li>Express</li>
<li>Git</li>
</ul>
<h2>Web Design:</h2>
<ul>
<li>Webflow</li>
<li>Figma</li>
</ul>
</div>
</section>
<div class="second-move section-margin"></div>
<section class="second-section section right">
<div class="progress-wrapper progress-bar-wrapper-right">
<div class="progress-bar blue-background"></div>
</div>
<div class="section-intro-wrapper blue-text blue-border">
<h1 class="section-title blue-text blue-border">
<span class="section-title-text blue-text">My Projects</span>
<div class="section-title-decoration styleOne blue-border"></div>
<div class="section-title-decoration styleTwo blue-border"></div>
<div
class="section-title-decoration styleThree blue-background blue-border"
></div>
</h1>
<span class="section-number blue-text">02</span>
</div>
<div class="section-detail-wrapper">
<a href="https://github.com/oscareng/ai-chat" target="_blank">
<h3 class="section-heading-link">
Chat GPT 2.0
<span style="font-size: large; vertical-align: middle">🔗</span>
</h3>
</a>
<p class="section-text">
Fully functional ChatGPT clone that utilizes OpenAI’s API to
respond to prompts with various NLP models.
</p>
<p class="section-text" style="font-style: italic">
Technologies: TypeScript, React, Next.js, Firebase, OpenAI API
</p>
<a
href="https://github.com/oscareng/amazon-web-scraper"
target="_blank"
>
<h3 class="section-heading-link">
Amazon Web Scraper
<span style="font-size: large; vertical-align: middle">🔗</span>
</h3>
</a>
<p class="section-text">
Amazon web scraper that allows users to collect and store product
data in real-time. Allows for parallel data requests and real time
database synchronization.
</p>
<p class="section-text" style="font-style: italic">
Technologies: TypeScript, React, Next.js, TailwindCSS, Firebase
</p>
<a href="https://github.com/oscareng/Pathfinder" target="_blank">
<h3 class="section-heading-link">
Pathfinder.js
<span style="font-size: large; vertical-align: middle">🔗</span>
</h3>
</a>
<p class="section-text">
An interactive pathfinding visualization tool featuring a
dynamically colored and responsive hexagonal grid. Features
optimized pathfinding algorithms such as A* and Dijkstra's.
</p>
<p class="section-text" style="font-style: italic">
Technologies used: JavaScript, React, Redux, HTML/CSS
</p>
<a
href="https://github.com/oscareng/tik-tok-scraper"
target="_blank"
>
<h3 class="section-heading-link">
Tik Tok Scraper
<span style="font-size: large; vertical-align: middle">🔗</span>
</h3>
</a>
<p class="section-text">
Freelance webscraper app built with JavaScript and Puppeteer that
scrapes a user's Tik Tok videos and adds them to Google
Sheets/AirTable along with data obtained from the video.
</p>
<p class="section-text" style="font-style: italic">
Technologies: JavaScript, Puppeteer, React, AirTable API, HTML/CSS
</p>
<h3 class="section-heading-link">This Website!</h3>
<p class="section-text">
The room and its contents were modeled in Blender, a 3D modeling
software. The objects were then rendered and animated using
Three.js.
<span style="text-decoration: underline"
>If you haven't already, try switching to dark mode!</span
>
</p>
<p class="section-text" style="font-style: italic">
Technologies: JavaScript, Blender, Three.js, HTML/CSS
</p>
<!-- <h3 class="section-heading">
Notion Discord Webhook Integration
<span style="font-size: large; vertical-align: middle">🔗</span>
</h3>
</a>
<p class="section-text">
Freelance project that automates the process of tracking task
submissions in a Notion database with automated discord
notifications.
</p>
<p class="section-text" style="font-style: italic">
Technologies: Python, Discord API, Notion API
</p>
<a
style="text-decoration: none"
href="https://github.com/oscareng/ai-chat"
target="_blank"
> -->
</div>
</section>
<div class="third-move section-margin"></div>
<section class="third-section section left">
<div class="progress-wrapper progress-bar-wrapper-left">
<div class="progress-bar green-background"></div>
</div>
<div class="section-intro-wrapper green-text green-border">
<h1 class="section-title green-text green-border">
<span class="section-title-text green-text">Contact Me</span>
<div class="section-title-decoration styleOne green-border"></div>
<div class="section-title-decoration styleTwo green-border"></div>
<div
class="section-title-decoration styleThree green-background green-border"
></div>
</h1>
<span class="section-number green-text">03</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">Lets continue the conversation!</h3>
<p class="section-text" style="padding-bottom: 25px">
Thanks for viewing my portfolio. If you have any questions or
would like to chat, feel free to connect with me on
<a href="https://www.linkedin.com/in/oscar-rolf?trk=profile-badge"
>LinkedIn.</a
>
Have a wonderful and productive day!
</p>
</div>
</section>
</div>
</div>
<script type="module" src="/main.js"></script>
<script defer src="/_vercel/insights/script.js"></script>
</body>
</html>