-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
209 lines (187 loc) · 13 KB
/
index.html
File metadata and controls
209 lines (187 loc) · 13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi, minimal-ui' />
<title>0xpako - Web Developer</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 website!</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">0xpako</h1>
<p class="hero-main-description">Mateusz Paczkowski</p>
</div>
<div class="hero-second">
<p class="hero-second-subheading first-sub">Web</p>
<p class="hero-second-subheading second-sub">Developer</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">Get to know me!</span>
</div>
<div class="section-detail-wrapper">
<img src="/textures/avatarforport.png" alt="My Picture" height="250" width="250">
<h3 class="section-heading">⭐ Hello!</h3>
<p class="section-text">Hey! Quick Disclaimer: this website you are seeing above, was used until March 2023, henceforth any info you find on the website, can be considered irrelevat as of today (whenever you are reading this...) <br><br> Welcome to my website! My name is <b>Mateusz Paczkowski</b>, also known as <b>"0xpako"</b>, Polish web developer certified by Google, Johns Hopkins University & Meta. I am passionate about creating new things from where nothingness was before, enjoyable for the eye as well as effective in use.</p>
<p class="section-text">Currently <b>available for hire as a freelancer</b>. Studying at Warsaw's University of Life Sciences.</p>
<p class="section-text">I'm quietly confident, naturally curious, and perpetually working on improving my chops one project at a time.</p>
<br><br>
<div id="bejton">
<a href="https://github.com/0xpako" class="button-link">Github</a>
</div>
<!-- <h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic expedita qui quae officiis, magni velit iste repellat consequuntur temporibus. Quasi atque officia iste beatae rerum, harum itaque accusamus. At, natus?</p> -->
<!-- <h3 class="section-heading">Lorem Ipsum</h3>
<p class="section-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic expedita qui quae officiis, magni velit iste repellat consequuntur temporibus. Quasi atque officia iste beatae rerum, harum itaque accusamus. At, natus?</p> -->
</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 Work</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">& My Certificates</span>
</div>
<div class="section-detail-wrapper">
<img style="float: right;" src="/textures/youngavatar.png" alt="My Picture" height="150" width="150">
<h2 class="section-heading">⭐ This is the way...</h2>
<p class="section-text">My Websites, apps and generally speaking projects are constantly evolving and getting better. Henceforth, I'm not directly pointing to a single project here. Instead, I'm giving you my Github to <b>see for yourself!</b></p>
<br>
<div id="bejton">
<a href="https://github.com/0xpako" class="button-link">Github</a>
</div>
<br>
<p class="section-text"><b>Not Looking for code but to inspect all my work?</b> Not to worry! My Linktree got you covered, click the button below to see the full list of my apps/websites, including the closed-source software.</p>
<br>
<div id="bejton2">
<a href="https://linktr.ee/0xpako" class="button-link">Linktree</a>
</div>
<h3 class="section-heading">⭐ My Certificates:</h3>
<p class="section-text">⚫ Meta Front-End Developer Specialization<br> Issued by Coursera (Meta), Mar 2023 - Credential ID 88Y7P5R42WFB</p>
<p class="section-text">⚫ Single Page Web Applications with AngularJS<br> Issued by Coursera (Johns Hopkins University), May 2023 - Credential ID X4NWVBQKKY92</p>
<p class="section-text">⚫ Create and Manage Cloud Resources<br> Issued by Google, Sep 2022 - Credential ID 2645405</p>
<p class="section-text">⚫ Modern Three.js for Real Websites<br> Issued by Udemy, May 2023 - Course by Christopher Lis</p>
<p class="section-text">⚫ EF Standard English Test<br> Issued by EF, May 2023 - C2 Proficient</p>
</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</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">Connect with me!</span>
</div>
<div class="section-detail-wrapper">
<h3 class="section-heading">💵 Hire Me:</h3>
<p class="section-text">I highly suggest going through my Github/LinkedIn for that! You will find platforms such as Freelancer, Fiverr or Upwork there.<br>If you are not willing to go there, my nickname is <b>@mat0xpako</b> on every mentioned platform.</p>
<h3 class="section-heading">📧 Contact:</h3>
<p class="section-text">By preference, I use:<br>E-mail: contact@uxpako.cc<br>Telegram: @uxpako</p>
<h3 class="section-heading">🍒 Social Media</h3>
<p class="section-text">To land on my social medias, click any of the buttons below!</p>
<br><br><br><br><br><br><br>
<div>
<ul>
<li>
<a href="https://github.com/0xpako">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-github"></span>
</a>
</li>
<li>
<a href="https://twitter.com/0xpako">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-twitter"></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/0xpako/">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-instagram"></span>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/paczkowski/">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-linkedin"></span>
</a>
</li>
</ul>
</div>
</div>
</section>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>