-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
312 lines (311 loc) · 20.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
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/index.css" type="text/css">
<title>Sebastian Muszalski - Portfolio</title>
</head>
<body>
<div id="top" class="content">
<header class="welcome">
<h1 class="welcome-title">Sebastian Muszalski</h1>
<p class="welcome-description">Software Developer</p>
</header>
<nav class="navigation">
<div class="menu-icon"><img src="img/menu-burger.ico" alt="menu"></div>
<ul class="menu">
<li class="menu-item"><a class="section-link" href="#top">Home</a></li>
<li class="menu-item"><a class="section-link" href="#intro">Intro</a></li>
<li class="menu-item"><a class="section-link" href="#about">About me</a></li>
<li class="menu-item"><a class="section-link" href="#skills">Skills</a></li>
<li class="menu-item"><a class="section-link" href="#projects">Projects</a>
<ul>
<li class="menu-item"><a class="section-link" href="#legendary">Marvel's Legendary: The Deck Building Game</a></li>
<li class="menu-item"><a class="section-link" href="#wimb">WimB - Where is my Book?!</a></li>
<li class="menu-item"><a class="section-link" href="#stock-assistant-app">Stock Assistant App</a></li>
<li class="menu-item"><a class="section-link" href="#portfolio">Business Card</a></li>
</ul>
</li>
<li class="menu-item"><a class="section-link" href="#after-hours">After hours</a></li>
<li class="menu-item"><a class="section-link" href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<nav>
<div class="jump-top links">
<a href="#top" class="btn">↑ Top ↑</a>
</div>
</nav>
<article id="intro">
<div class="article">
<header>
<h3 class="article-title">Welcome to my home page.</h3>
</header>
<p class="article-content">
Hey, I'm glad that you found my website.<br>
Its purpose is to present myself as Software Developer and to present my development skills in back-end and front-end application
development. I hope that you will like this page, and if you will be interested in exchange knowledge or have some
propositions or suggestions, feel free to contact with me.<br><br>All contact forms You can find in <a class="inline-link" href="#contact">contact</a> section.
</p>
</div>
</article>
<hr class="article-break">
<article id="about">
<div class="article">
<header>
<h3 class="article-title">About me</h3>
</header>
<div id="about">
<div class="selfie">
<img src="img/self.png" alt="self photo" class="selfie">
</div>
<p class="article-content article-about">
My name is Sebastian, I'm 32 and since I was born I live in Poland in Pomeranian Voivodeship.<br><br>
Development is my passion since I was 20yo, and I've started my adventure with C and C++ during my studies on University of Gdansk
in the field of IT with specialization in Algorithms and Data Structures. When I finished studies I started to work as
IT Administrator to gather better knowledge in computer and network architecture and administration. <br><br>For the past two years I
develop application in Java with frameworks. Recently I have also finished Software Development Academy's "Java from scratch" course
and currently I am participating in CodersCamp's front-end course. I am also working with few friends on application to help menage
stock exchange and predict changes of quotes, which also gives me good opportunity to work with other people on one project and
expand my knowledge in development. <br><br> In my free time, if I am not writing another lines of code I enjoy
spending time on one of my hobbies (more details You can find in <a class="inline-link" href="#after-hours">after hours</a> section).
</p>
</div>
</div>
</article>
<hr class="article-break">
<article id="skills">
<div class="article">
<header>
<h3 class="article-title">My skills</h3>
</header>
<div class="skills">
<div class="skills-content">
<a href="https://www.oracle.com/java/" target="_blank"><img src="img/java.png" alt="java" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://spring.io/" target="_blank"><img src="img/spring.png" alt="Spring" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://spring.io/projects/spring-boot" target="_blank"><img src="img/spring-boot.png" alt="Spring Boot" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://hibernate.org/" target="_blank"><img src="img/hibernate.png" alt="Hibernate" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://junit.org/junit5/" target="_blank"><img src="img/junit5.png" alt="JUnit 5" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://site.mockito.org/" target="_blank"><img src="img/mockito.png" alt="Mockito" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://git-scm.com/" target="_blank"><img src="img/git.png" alt="Git" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://www.docker.com/" target="_blank"><img src="img/docker.png" alt="Docker" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://maven.apache.org/" target="_blank"><img src="img/maven.png" alt="Maven" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"><img src="img/js.png" alt="JavaScript" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://www.typescriptlang.org/" target="_blank"><img src="img/ts.png" alt="TypeScript" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://angular.io/" target="_blank"><img src="img/angular.png" alt="Angular" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank"><img src="img/html.png" alt="HTML" class="skills-icon"></a>
</div>
<div class="skills-content">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank"><img src="img/css.png" alt="CSS" class="skills-icon"></a>
</div>
</div>
</div>
</article>
<hr class="article-break">
<article id="projects" class="article">
<header>
<h3 class="article-title article-subtitle">My projects</h3>
<nav>
<div class="projects">
<div><a href="#legendary" class="btn">Marvel's Legendary: The Deck Building Game</a></div>
<div><a href="#wimb" class="btn">WimB - Where is my Book?!</a></div>
<div><a href="#stock-assistant-app" class="btn">Stock Assistant App</a></div>
<div><a href="#portfolio" class="btn">Business Card</a></div>
</div>
</nav>
</header>
<section id="legendary">
<div class="section">
<header>
<h3 class="section-title">Marvel's Legendary: The Deck Building Game</h3>
</header>
<p class="section-content">
This project is one of my first Java projects. Idea of this project born, when with few friends we wanted to
play Marvel's Legendary: The Deck Building Game by Upper Deck. <br><br> If we wanted to play just one game, it was fun,
but when we got to prepare game for another round, there was quite annoying splitting up all decks, pick few of them
in random, and shuffle it again. This generates some problems, like weak shuffled deck, almost no randomness in drawn cards,
so game could be extremly easy or hard. <br><br> This application main purpose was to allow players to split decks around table and use
use only these decks that are picked by application. It also controls game flow, by showing which card should be drawn next from
each deck.
<br><br> You can find code of this application in my <a class='inline-link' href='https://github.com/Enessetere/Legendary'>GitHub repository</a>.
</p>
<div class="links">
<a href="#projects" class="btn">Back to the projects.</a>
</div>
</div>
</section>
<section id="wimb">
<div class="section">
<header>
<h3 class="section-title">WimB - Where is my Book?!</h3>
</header>
<p class="section-content">
Have you ever have to look for one of your books, but couldn't find it anywhere? Or maybe you borrowed it to someone?
Well it happens few times in my life. <br><br> I decided to create this application, to help any user to keep track of
their books. User can add their books and friends to application, so he can bind his friend to borrowed book with
date of borrowing. <br><br> This is still early access version, but in time it will became full grown application, possible with
mobile app.
<br><br> You can find code of this application in my <a class='inline-link' href='https://github.com/Enessetere/HomeLibrary'>GitHub repository</a>.
</p>
<div class="links">
<a href="#projects" class="btn">Back to the projects.</a>
</div>
</div>
</section>
<section id="stock-assistant-app">
<div class="section">
<header>
<h3 class="section-title">StockAssistantApp</h3>
</header>
<p class="section-content">
Recently I have joined to Arcade IT Facebook group. There I have found myself a team, where we are decided to create application,
which allow user to buy, sell and check current status of quotes on Stock Exchange and manage thier investments. <br><br> My friend and me
are responsible for create back-end API, which gets data from Stock, convert them and send in easier to read objects.
<br><br> You can find code of this application in my team's <a class='inline-link' href='https://github.com/ArcadeIT-Rebirth/StockAssistantApp'>GitHub repository</a>.
</p>
<div class="links">
<a href="#projects" class="btn">Back to the projects.</a>
</div>
</div>
</section>
<section id="portfolio">
<div class="section">
<header>
<h3 class="section-title">Business Card</h3>
</header>
<p class="section-content">
This is my business card. Effects of my work you can see on your own eyes right now. Idea of this project was to create
my own online business card, where I can present myself and my skills to world wide community. Also this is first project
of CodersCamp's 6th edition of front-end course. <br><br> As for my plans for further development of this page, perhaps I will add
some blog sections, where I can add posts about new projects, some ideas or something related to my hobbies.
<br><br> You can find code of my business card in my <a class='inline-link' href='https://github.com/Enessetere/business-card'>GitHub repository</a>.
</p>
<div class="links">
<a href="#projects" class="btn">Back to the projects.</a>
</div>
</div>
</section>
<h3 class="article-ending">More comming soon</h3>
</article>
<hr class="article-break">
<article id="after-hours">
<div class="article">
<header>
<h3 class="article-title">After hours</h3>
</header>
<div class="hobbies">
<div id="origami" class="hobbie">
<p class="hobbie-description">In my free time I really enjoy fold paper to create some kind of shapes or models</p>
<img src="img/origami.jpg" alt="origami" class="resize">
</div>
<div id="guitar" class="hobbie">
<img src="img/guitar.jpg" alt="guitar playing" class="resize">
<p class="hobbie-description">Quite often I can spend a lot of hours playing on one of my guitars</p>
</div>
<div id="kayaking" class="hobbie">
<p class="hobbie-description">When the weather is good I like to spend on some outdoor activities, like cycling, running or kayaking</p>
<img src="img/kayaking.jpg" alt="kayaking" class="resize">
</div>
<div id="board-games" class="hobbie">
<img src="img/board-games.jpg" alt="board games" class="resize">
<p class="hobbie-description">At least once per month I organize board-games sessions with my friends, sometimes we can spend on this whole weekend</p>
</div>
</div>
</div>
</article>
<hr class="article-break">
<article id="contact">
<div class="article">
<header>
<h3 class="article-title">Contact</h3>
</header>
<div class="article-content contact">
<p class="contact-text">If you wish to contact with me, send me a message to the one of following:</p>
<ul class="contact-list">
<li class="contact-list-item">
<figure class="contact-list-icon">
<img class='small-icon' src='img/gmail.png' alt='email'>
</figure> <a href="mailto:muszalski.sebastian@gmail.com" class="inline-link">Mail me</a>
</li>
<li class="contact-list-item">
<figure class="contact-list-icon">
<img class='small-icon' src='img/facebook.png' alt='facebook'>
</figure> <a class='inline-link' href="https://www.facebook.com/sebastian.muszalski.3/">Facebook</a>
</li>
<li class="contact-list-item">
<figure class="contact-list-icon">
<img class='small-icon' src='img/linkedin.png' alt='LinkedIn'>
</figure> <a class='inline-link' href="https://www.linkedin.com/in/sebastian-muszalski/">LinkedIn</a>
</li>
</ul>
<p class="contact-text">or you can use this contact form:</p>
</div>
<form class="contact-form contact">
<div class="contact-form-item">
<label for="contact-name" class="contact-form-label">Your name:</label>
<input type="text" name="contact-name" id="contact-name" minlength="2" maxlength="25" pattern="[a-zA-Z]+">
</div>
<div class="contact-form-item">
<label for="contact-email" class="contact-form-label">Your email:</label>
<input type="email" name="contact-email" id="contact-email" minlength="7" pattern="[a-zA-Z0-9._]+@[a-zA-Z0-9]{2,}.[a-zA-Z0-9]{2,}">
</div>
<div class="contact-form-item">
<label for="contact-message" class="contact-form-label">Your Message:</label>
<textarea class="contact-message" name="contact-message" id="contact-message" minlength="15" maxlength="255"></textarea>
</div>
<input type="submit" class="btn" value="Send">
</form>
<div class="article-content contact">
<p class="contact-text">You can also follow me here:</p>
<ul class="contact-list">
<li class="contact-list-item">
<figure class="contact-list-icon">
<img class='small-icon' src='img/instagram.png' alt='Instagram'>
</figure> <a class='inline-link' href="https://www.instagram.com/arethius3/">Instagram</a>
</li>
<li class="contact-list-item">
<figure class="contact-list-icon">
<img class='small-icon' src='img/github.png' alt='GitHub'>
</figure> <a class='inline-link' href="https://github.com/Enessetere">GitHub</a>
</li>
</ul>
</div>
</div>
</article>
</main>
<footer>
<div class="disclaimer">
<img src="img/CodersCamp.png" alt="CodersCamp" class="cclogo">
© 2020 Sebastian Muszalski - All rights reserved.
</div>
</footer>
</div>
</body>
</html>