-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
284 lines (283 loc) · 25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Daniel's portfolio</title>
<meta name="description" property="og:description" content="Daniel's web development portfolio of HTML, CSS, JavaScript, React and Next.js projects.">
<meta name="keywords" content="web developer, for hire, programming, web development">
<link rel="stylesheet" href="./static/style.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body id="body" class="">
<div class="flex flex-justcont-c body">
<div class="width">
<header class="flex flex-justcont-c flex-alignit-c">
<div class="links">
<a href="#projects">Projects</a>
<a href="#about">About me</a>
<a href="#contact">Contact</a>
</div>
<button id="theme" aria-label="Theme changer" class="flex">
<svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>
</button>
</header>
<div class="flex flex-justcont-sb flex-alignit-c hero">
<div>
<h1>Daniel</h1>
<h3><web developer/></h3>
<h4>Hacking stuff since 2005</h4>
</div>
<a href="#contact" class="hire"><h2>HIRE ME</h2></a>
</div>
<div id="projects" class="projects">
<div class="flex flex-justcont-c">
<h4>Projects</h4>
</div>
<div class="flex flex-justcont-sb projects-each-first">
<div class="flex flex-dir-col projects-width">
<h5>Bugtracker</h5>
<p>A highly secure full-stack <a href="https://en.wikipedia.org/wiki/Create,_read,_update_and_delete" target="_blank">CRUD</a> app built in Django. Users can sign up, log in/out, and see other people's projects and their tickets (if they're set to public. Otherwise, only the owner can see them).</p>
<p><br>The owner alone can edit and delete his/her projects and tickets. There's also a search functionality where the user can filter tickets according to their title.</p>
<div class="flex carousel carousel-mobile projects-width desktop-dn">
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
<div class="flex slides">
<img src="./static/images/bugtracker/bugtracker-home-desktop.png.webp" loading="lazy" alt="Bugtracker homepage on desktop" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-home-mobile.png.webp" loading="lazy" alt="Bugtracker homepage on mobile" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-tickets-desktop.png.webp" loading="lazy" alt="Bugtracker ticket views on desktop" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-tickets-mobile.png.webp" loading="lazy" alt="Bugtracker ticket views on mobile" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-details-desktop.png.webp" loading="lazy" alt="Ticket detail page" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-newticket-desktop.png.webp" loading="lazy" alt="New ticket" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-newproject-desktop.png.webp" loading="lazy" alt="New project" class="projects-width slide">
</div>
</div>
<div class="projects-links">
<a href="#" target="_blank" style="display: none">Live website</a>
<a href="https://github.com/daniel-web-developer/django.bugtracker" target="_blank">GitHub repo</a>
</div>
<div class="flex flex-justcont-sb tags">
<p>Django</p>
<p>HTML</p>
<p>Sass/SCSS</p>
<p>Vanilla JS</p>
<p>PostgreSQL</p>
</div>
</div>
<div class="flex carousel carousel-desktop projects-width mobile-dn">
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
<div class="flex slides">
<img src="./static/images/bugtracker/bugtracker-home-desktop.png.webp" loading="lazy" alt="Bugtracker homepage on desktop" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-home-mobile.png.webp" loading="lazy" alt="Bugtracker homepage on mobile" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-tickets-desktop.png.webp" loading="lazy" alt="Bugtracker ticket views on desktop" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-tickets-mobile.png.webp" loading="lazy" alt="Bugtracker ticket views on mobile" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-details-desktop.png.webp" loading="lazy" alt="Ticket detail page" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-newticket-desktop.png.webp" loading="lazy" alt="New ticket" class="projects-width slide">
<img src="./static/images/bugtracker/bugtracker-newproject-desktop.png.webp" loading="lazy" alt="New project" class="projects-width slide">
</div>
</div>
</div>
<div class="flex flex-justcont-sb projects-each">
<div class="flex flex-dir-col projects-width">
<h5>Blog</h5>
<p>A full-stack blog with <a href="https://en.wikipedia.org/wiki/Create,_read,_update_and_delete" target="_blank">CRUD</a> operations built in Django. Those with permission to log in can create, edit, and delete posts.<br>
<br>
In this project, I created a <a href="https://en.wikipedia.org/wiki/REST" target="_blank">RESTful API</a> that allows the user to fetch, search, and sort (according to date posted and alphabetical order) the articles in the database.</p>
<div class="flex carousel carousel-mobile projects-width desktop-dn">
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
<div class="flex slides">
<img src="./static/images/blog/blog-home-desktop.png.webp" loading="lazy" alt="Blog homepage on desktop" class="projects-width slide">
<img src="./static/images/blog/blog-home-desktop-rest.png.webp" loading="lazy" alt="Rest of the blog homepage on desktop" class="projects-width slide">
<img src="./static/images/blog/blog-home-mobile.png.webp" loading="lazy" alt="Blog homepage on mobile devices" class="projects-width slide">
<img src="./static/images/blog/blog-home-mobile-rest.png.webp" loading="lazy" alt="Rest of the blog homepage on mobile devices" class="projects-width slide">
<img src="./static/images/blog/blog-article-desktop.png.webp" loading="lazy" alt="Article view on desktop" class="projects-width slide">
<img src="./static/images/blog/blog-article-desktop-text.png.webp" loading="lazy" alt="Rest of the article view on desktop" class="projects-width slide">
<img src="./static/images/blog/blog-article-mobile.png.webp" loading="lazy" alt="Article view on mobile" class="projects-width slide">
<img src="./static/images/blog/blog-article-mobile-text.png.webp" loading="lazy" alt="Rest of the article view on mobile" class="projects-width slide">
</div>
</div>
<div class="projects-links">
<a href="#" target="_blank" style="display: none">Live website</a>
<a href="https://github.com/daniel-web-developer/blog-django" target="_blank">GitHub repo</a>
</div>
<div class="flex flex-justcont-sb tags">
<p>Django</p>
<p>RESTful API</p>
<p>PostgreSQL</p>
<p>HTML</p>
<p>Sass/SCSS</p>
<p>Vanilla JS</p>
</div>
</div>
<div class="flex carousel carousel-mobile projects-width mobile-dn">
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
<div class="flex slides">
<img src="./static/images/blog/blog-home-desktop.png.webp" loading="lazy" alt="Blog homepage on desktop" class="projects-width slide">
<img src="./static/images/blog/blog-home-desktop-rest.png.webp" loading="lazy" alt="Rest of the blog homepage on desktop" class="projects-width slide">
<img src="./static/images/blog/blog-home-mobile.png.webp" loading="lazy" alt="Blog homepage on mobile devices" class="projects-width slide">
<img src="./static/images/blog/blog-home-mobile-rest.png.webp" loading="lazy" alt="Rest of the blog homepage on mobile devices" class="projects-width slide">
<img src="./static/images/blog/blog-article-desktop.png.webp" loading="lazy" alt="Article view on desktop" class="projects-width slide">
<img src="./static/images/blog/blog-article-desktop-text.png.webp" loading="lazy" alt="Rest of the article view on desktop" class="projects-width slide">
<img src="./static/images/blog/blog-article-mobile.png.webp" loading="lazy" alt="Article view on mobile" class="projects-width slide">
<img src="./static/images/blog/blog-article-mobile-text.png.webp" loading="lazy" alt="Rest of the article view on mobile" class="projects-width slide">
</div>
</div>
</div>
<div class="flex flex-justcont-sb projects-each">
<div class="flex flex-dir-col">
<h5>Portfolio</h5>
<p>This project is the website you're seeing right now. I did it without any sort of framework so I could host it (for free!) on GitHub. Also, JavaScript frameworks are definitely overused. I didn't need a lot of functionality other than dragging to scroll the carousel and switching the theme, so the website uses vanilla JS.</p>
<div class="projects-links">
<a href="https://github.com/daniel-web-developer/new-portfolio" target="_blank">GitHub repo</a>
</div>
<div class="flex flex-justcont-sb tags">
<p>HTML</p>
<p>Sass/SCSS</p>
<p>Vanilla JS</p>
</div>
</div>
</div>
<div class="flex flex-justcont-sb projects-each">
<div class="flex flex-dir-col projects-width">
<h5>Where in the world</h5>
<p>A Next.js app that allows the user to fetch, filter, and search data from an external RESTful API's endpoint.</p>
<div class="flex carousel carousel-mobile projects-width desktop-dn">
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
<div class="flex slides">
<img src="./static/images/countries/home-desktop.png.webp" loading="lazy" alt="Homepage on desktop" class="projects-width slide">
<img src="./static/images/countries/home-mobile.png.webp" loading="lazy" alt="Homepage on mobile" class="projects-width slide">
<img src="./static/images/countries/detail-desktop.png.webp" loading="lazy" alt="Country's details on desktop" class="projects-width slide">
<img src="./static/images/countries/detail-mobile.png.webp" loading="lazy" alt="Country's details on mobile" class="projects-width slide">
</div>
</div>
<div class="projects-links">
<a href="https://countries-api-daniel-web-developer.vercel.app/" target="_blank">Live website</a>
<a href="https://github.com/daniel-web-developer/flags-api" target="_blank">GitHub repo</a>
</div>
<div class="flex flex-justcont-sb tags">
<p>Next.js/React</p>
<p>RESTful API</p>
<p>JSX</p>
<p>Sass/SCSS</p>
</div>
</div>
<div class="flex carousel carousel-mobile projects-width mobile-dn">
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
<div class="flex slides">
<img src="./static/images/countries/home-desktop.png.webp" loading="lazy" alt="Homepage on desktop" class="projects-width slide">
<img src="./static/images/countries/home-mobile.png.webp" loading="lazy" alt="Homepage on mobile" class="projects-width slide">
<img src="./static/images/countries/detail-desktop.png.webp" loading="lazy" alt="Country's details on desktop" class="projects-width slide">
<img src="./static/images/countries/detail-mobile.png.webp" loading="lazy" alt="Country's details on mobile" class="projects-width slide">
</div>
</div>
</div>
<div class="flex flex-justcont-sb projects-each">
<div class="flex flex-dir-col projects-width">
<h5>Space tourism</h5>
<p>A mock space tourism website built with Next.js.</p>
<div class="flex carousel carousel-mobile projects-width desktop-dn">
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
<div class="flex slides">
<img src="./static/images/space/first-desktop.png.webp" loading="lazy" alt="Homepage on desktop" class="projects-width slide">
<img src="./static/images/space/first-mobile.png.webp" loading="lazy" alt="Homepage on mobile" class="projects-width slide">
<img src="./static/images/space/second-desktop.png.webp" loading="lazy" alt="Destination page on desktop" class="projects-width slide">
<img src="./static/images/space/second-mobile.png.webp" loading="lazy" alt="Destination page on mobile" class="projects-width slide">
<img src="./static/images/space/third-desktop.png.webp" loading="lazy" alt="Crew page on desktop" class="projects-width slide">
<img src="./static/images/space/third-mobile.png.webp" loading="lazy" alt="Crew page on mobile" class="projects-width slide">
<img src="./static/images/space/fourth-desktop.png.webp" loading="lazy" alt="Technology page on desktop" class="projects-width slide">
<img src="./static/images/space/fourth-mobile.png.webp" loading="lazy" alt="Technology page on mobile" class="projects-width slide">
</div>
</div>
<div class="projects-links">
<a href="https://nextjs-space-turism.vercel.app/" target="_blank">Live website</a>
<a href="https://github.com/daniel-web-developer/nextjs-space-turism/" target="_blank">GitHub repo</a>
</div>
<div class="flex flex-justcont-sb tags">
<p>Next.js/React</p>
<p>JSX</p>
<p>Sass/SCSS</p>
</div>
</div>
<div class="flex carousel carousel-mobile projects-width mobile-dn">
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
<div class="flex slides">
<img src="./static/images/space/first-desktop.png.webp" loading="lazy" alt="Homepage on desktop" class="projects-width slide">
<img src="./static/images/space/first-mobile.png.webp" loading="lazy" alt="Homepage on mobile" class="projects-width slide">
<img src="./static/images/space/second-desktop.png.webp" loading="lazy" alt="Destination page on desktop" class="projects-width slide">
<img src="./static/images/space/second-mobile.png.webp" loading="lazy" alt="Destination page on mobile" class="projects-width slide">
<img src="./static/images/space/third-desktop.png.webp" loading="lazy" alt="Crew page on desktop" class="projects-width slide">
<img src="./static/images/space/third-mobile.png.webp" loading="lazy" alt="Crew page on mobile" class="projects-width slide">
<img src="./static/images/space/fourth-desktop.png.webp" loading="lazy" alt="Technology page on desktop" class="projects-width slide">
<img src="./static/images/space/fourth-mobile.png.webp" loading="lazy" alt="Technology page on mobile" class="projects-width slide">
</div>
</div>
</div>
<div class="flex flex-justcont-sb projects-each">
<div class="flex flex-dir-col projects-width">
<h5>Frontend Mentor projects</h5>
<p>This is a repository linking to the remainder of my Frontend Mentor projects.</p>
<div class="flex carousel carousel-mobile projects-width desktop-dn">
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
<div class="flex slides">
<img src="./static/images/others/first.png.webp" loading="lazy" alt="Part 1 of my projects" class="projects-width slide">
<img src="./static/images/others/second.png.webp" loading="lazy" alt="Part 2 of my projects" class="projects-width slide">
</div>
</div>
<div class="projects-links">
<a href="https://github.com/daniel-web-developer/frontendmentor-projects" target="_blank">Github repository</a>
</div>
</div>
<div class="flex carousel carousel-mobile projects-width mobile-dn">
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
<p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
<div class="flex slides">
<img src="./static/images/others/first.png.webp" loading="lazy" alt="Part 1 of my projects" class="projects-width slide">
<img src="./static/images/others/second.png.webp" loading="lazy" alt="Part 2 of my projects" class="projects-width slide">
</div>
</div>
</div>
<div class="flex flex-justcont-c flex-alignit-c detail">
<div style="overflow: scroll; max-width: 90vw;">
<img class="detail-image">
</div>
<div aria-label="Close image" class="flex flex-justcont-c flex-alignit-c detail-button">
<span></span>
<span></span>
</div>
</div>
</div>
<div id="about" class="about">
<div class="flex flex-justcont-c">
<h4>About me</h4>
</div>
<p>I'm Daniel, a full-stack web developer dedicated to crafting exceptional online experiences. With a diverse skill set and a commitment to staying at the forefront of industry trends, I excel at tackling complex challenges and delivering innovative solutions. I invite you to explore my portfolio and join me on this journey of creativity, innovation, and web development excellence.</p>
<div class="about-skills">
<p>Front-end: HTML, CSS (Sass), JavaScript, React, and Next.js.</p>
<p>Back-end: Django, PostgreSQL.</p>
<p>Tools: Neovim, Docker and Docker Compose, Git.</p>
</div>
</div>
<div id="contact">
<h5>Contact information</h5>
<p>Interested in hiring me? Great! You can reach me through my social media:</p>
<div class="flex flex-dir-col social">
<a href="https://www.linkedin.com/in/daniel-web-developer/" target="_blank">LinkedIn</a>
<a href="https://github.com/daniel-web-developer/" target="_blank">GitHub</a>
<a href="https://codepen.io/daniel-web-developer" target="_blank">CodePen</a>
<p>Email: daniel_web_developer at proton dot me</p>
</div>
</div>
</div>
</div>
<script src="./static/script.js" defer></script>
</body>
</html>