-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·413 lines (403 loc) · 17.8 KB
/
index.html
File metadata and controls
executable file
·413 lines (403 loc) · 17.8 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
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
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Severin Odic</title>
<meta name="description" content="Severin's portfolio" />
<meta name="author" content="Severin Odic" />
<script defer src="js/index.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700&family=Ubuntu:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" href="images/favicon.png" sizes="192x192" />
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/favicon.png" />
</head>
<body>
<header class="hero">
<div class="hero-text">
<h2 class="first-name-initial">SEVERIN</h2>
<h2 class="mobile-h2">ODIC</h2>
<div class="text-container">
<div class="letter-o">
<div class="inner-o"></div>
</div>
<h1>DIC</h1>
</div>
<div class="hero-description">
<div class="nav-wrapper">
<h3 class="tagline">
A <span>FULL STACK</span> DEVELOPER BASED IN <span>BATH, UK</span>
</h3>
<div class="nav-links">
<a href="#about" id="aboutLink" class="animate-links">ABOUT</a>
<a href="#projects" id="projectsLink" class="animate-links"
>PROJECTS</a
>
<a href="#contact" id="contactLink" class="animate-links"
>CONTACT</a
>
</div>
</div>
</div>
</div>
</header>
<section class="about" id="about">
<div class="about-container">
<a href="#" class="up-arrow"><i class="fa-solid fa-chevron-up"></i></a>
<h2>ABOUT</h2>
<div class="about-text">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti
odit ipsa minima officiis deserunt recusandae corrupti labore.
</p>
<p>
Eius praesentium quaerat obcaecati quam eligendi distinctio pariatur
soluta et, at expedita quisquam modi? Omnis tenetur nulla, repellat
at recusandae assumenda ipsam animi?
</p>
</div>
<a href="#projects" class="down-arrow"
><i class="fa-solid fa-chevron-down"></i
></a>
</div>
</section>
<section class="projects" id="projects">
<div class="projects-container">
<a href="#about" class="up-arrow"
><i class="fa-solid fa-chevron-up"></i
></a>
<h2>PROJECTS</h2>
<div class="projects-list">
<div class="project-card">
<div class="project-pictures">
<div class="img-one" data-img="images/librum.png">
<img src="images/librum.png" class="project-img" />
<div class="img-enlarge">
<i class="fa-solid fa-up-right-and-down-left-from-center"></i>
</div>
</div>
<a href="https://librumreader.com" target="#"
><i class="fa-solid fa-up-right-from-square fa-md"></i>LIVE
SITE</a
>
<a
href="https://github.com/Librum-Reader/Librum-Website"
target="#"
><i class="fa-brands fa-github fa-lg"></i>CODE</a
>
</div>
<div class="project-description">
<h3>Librum Reader</h3>
<div class="mobile-links">
<a href="#"
><i class="fa-solid fa-up-right-from-square fa-md"></i>LIVE
DEMO</a
>
<a href="#"><i class="fa-brands fa-github fa-lg"></i>CODE</a>
</div>
<p>
I joined the Librum project in July of 2023, and migrated the
old website from Create React App to Next.js and Chakra UI.
</p>
<p>
I worked with a designed and was given a Figma layout to
implement. Over the course of several months, the migration was
completed and I added a host of additional features to the
website.
</p>
<div class="tech-stack">
<div
class="stack-badge dropdown-button"
id="readmore"
id="arrow1"
data-target="card1"
>
<i class="fa-solid fa-chevron-down"></i>
Read More
</div>
<div class="read-more" id="card1">
<div>
<h4>Process</h4>
<p>
Upon joining the project, we began the migration and the
re-design by first migrating the existing design to
Next.js from Create React app. We also chose to use Chakra
UI as our component library in an effort to keep the
styling across the website consistent.
</p>
<p>
Once the code migration was completed, we focused on
implementing the new design, which was provided by a
designer by way of a Figma layout. When we had the design
in a place we were happy with, we then started to bring in
additional features.
</p>
<p>
The Librum app has a dedicated backend that it uses for
user management, book storage, and other backend services.
I integrated this API into the website, and built a user
management system with a profile page that allows each
user to set and update things like email, avatar,
password, and view their current storage usage.
</p>
<p>
I also configured a content management system (Sanity CMS)
to allow the project owner to post blog updates as the app
is progressing.
</p>
<h4>Challenges</h4>
<p>
This project was my biggest undertaking at the time, and I
faced a lot of problems that I had to work through and
solve. I had to work with an external API to manage the
user profile page, user registration, user authentication,
as well as site features such as contact forms.
</p>
<p>
Another hurdle that took a lot of time to overcome was the
integration of the Sanity CMS. The Sanity documentation
left a lot to be desired, and it required many custom
solutions to seemingly easy problems. For instance, I had
to create a custom preview mechanism for the blog posts,
as well as custom components in order to display images
and videos within blog posts. Similarly, displaying block
content in a blog post (i.e. paragraph and heading tags,
font sizes, etc) also required a custom solution that
Sanity did not provide.
</p>
<p>
Another major challenge is the fact that this website
currently supports just under one thousand monthly active
users, and while we have several developers assisting with
various tasks, I am the main contributor with over 40k
lines of code committed to the repo. This means that,
often times, I am the only one working on bugs and other
problems reported by our users.
</p>
<h4>Tech stack</h4>
<p>React, Next.js, Chakra UI, Sanity CMS</p>
<img src="images/screenshot1.png" class="mobile-img" />
</div>
</div>
</div>
</div>
</div>
<div class="project-card">
<div class="project-pictures">
<div class="img-one" data-img="images/plant-manager.png">
<img src="images/plant-manager.png" class="project-img" />
<div class="img-enlarge">
<i class="fa-solid fa-up-right-and-down-left-from-center"></i>
</div>
</div>
<a href="#"
><i class="fa-solid fa-up-right-from-square fa-md"></i>LIVE
DEMO</a
>
<a href="https://github.com/odics/plant-manager" target="#"
><i class="fa-brands fa-github fa-lg"></i>CODE</a
>
</div>
<div class="project-description">
<h3>Plant Manager</h3>
<div class="mobile-links">
<a href="#"
><i class="fa-solid fa-up-right-from-square fa-md"></i>LIVE
DEMO</a
>
<a href="https://github.com/odics/plant-manager"
><i class="fa-brands fa-github fa-lg"></i>CODE</a
>
</div>
<p>
A very simple PHP application built as part of the PHP module at
iO Academy. The app uses a MariaDB backend to store and display
various plants, with corresponding information such as plant
image, date planted, projected harvest date, and an estimate of
time remaining until harvest.
</p>
<p>
It also includes the functionality to add more plants, as well
remove existing plants (which are archived in the databases, and
not permanently deleted), and a dynamic search function which
returns search results as the user is typing.
</p>
<div class="tech-stack">
<div
class="stack-badge dropdown-button"
id="readmore2"
id="arrow2"
data-target="card2"
>
<i class="fa-solid fa-chevron-down"></i>Read More
</div>
<div class="read-more" id="card2">
<div>
<h4>Process</h4>
<p>
Given that this is a very simple application, the process
was not very involved. I came up with a basic wireframe of
what I wanted the layout to look like, followed by a
database schema.
</p>
<p>
Once the wireframe and the schema were completed and
approved by the instructor, I created and seeded the
database that the app relies on. Following that, I broke
the project up into four stories:
</p>
<ul>
<li>Story 1: Display items from database</li>
<li>Story 2: Allow user to add an item</li>
<li>Story 3: Allow user to delete an existing item</li>
<li>Story 4: Allow user to search their collection</li>
</ul>
<p>
Once the stories were planned, I broke each story up into
manageable tasks, which is how the remainder of
development went. Each task was peer reviwed, after whcih
it was merged into the story branch. Once all tasks were
completed, I made a PR for the story branch into main,
which was trainer reviewed and merged after that.
</p>
<h4>Challenges</h4>
<p>
The main challenge with this project was the fact that we
used PHP, which I had virtually no experience with. I had
to wrap my mind around a new programming language, as well
as object oriented programming.
</p>
<p>
An additional challenge was having to write raw SQL
queries for all the database operations. Thus far, I've
only used ORMs, so it was quite nice to actually learn
what goes on under the hood with database operations.
</p>
<h4>Tech stack</h4>
<p>
The backend was written in PHP, using PDO for all database
operations.
</p>
<p>
The frontend is HTML, CSS, and JavaScript to handle any
interactivity and fetching data from the backend.
</p>
<img src="images/screenshot1.png" class="mobile-img" />
</div>
</div>
</div>
</div>
</div>
<div class="project-card">
<div class="project-pictures">
<!-- <img src="images/screenshot1.png" class="img-one" /> -->
<div class="img-one">
<img src="images/screenshot1.png" class="project-img" />
<div class="img-enlarge">
<i class="fa-solid fa-up-right-and-down-left-from-center"></i>
</div>
</div>
<a href="#"
><i class="fa-solid fa-up-right-from-square fa-md"></i>LIVE
DEMO</a
>
<a href="#"><i class="fa-brands fa-github fa-lg"></i>CODE</a>
</div>
<div class="project-description">
<h3>Mindblowing App</h3>
<div class="mobile-links">
<a href="#"
><i class="fa-solid fa-up-right-from-square fa-md"></i>LIVE
DEMO</a
>
<a href="#"><i class="fa-brands fa-github fa-lg"></i>CODE</a>
</div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Perferendis tempore eaque, quas voluptatibus tempora ea itaque
dolore suscipit ducimus aspernatur.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Perferendis tempore eaque, quas voluptatibus tempora ea itaque
dolore suscipit ducimus aspernatur.
</p>
<div class="tech-stack">
<div
class="stack-badge dropdown-button"
id="readmore2"
id="arrow2"
data-target="card3"
>
<i class="fa-solid fa-chevron-down"></i>Read More
</div>
<div class="read-more" id="card3">
<div>
<h4>Process</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quia labore, hic alias saepe dignissimos impedit nulla
laborum? Porro, pariatur ut.
</p>
<h4>Challenges</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quia labore, hic alias saepe dignissimos impedit nulla
laborum? Porro, pariatur ut.
</p>
<h4>Tech stack</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quia labore, hic alias saepe dignissimos impedit nulla
laborum? Porro, pariatur ut.
</p>
<img src="images/screenshot1.png" class="mobile-img" />
</div>
</div>
</div>
</div>
</div>
<a href="#contact" class="down-arrow"
><i class="fa-solid fa-chevron-down"></i
></a>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="contact-container">
<a href="#" class="up-arrow"><i class="fa-solid fa-chevron-up"></i></a>
<h2>CONTACT</h2>
<div class="contact-icons">
<a href="https://github.com/odics" target="#"
><i class="fa-brands fa-github"></i
></a>
<a href="https://linkedin.com/in/severin-odic-953834252" target="#"
><i class="fa-brands fa-linkedin"></i
></a>
<a href="mailto:severin.odic@gmail.com"
><i class="fa-solid fa-envelope"></i
></a>
</div>
</div>
</section>
<div class="modal-overlay"></div>
<div class="img-modal">
<img src="images/screenshot1.png" />
<div class="modal-close-button"><i class="fa-solid fa-xmark"></i></div>
</div>
</body>
</html>