-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
243 lines (206 loc) · 14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<!-- Bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<!-- External css -->
<link rel="stylesheet" href="css/index.css">
<title>Welcome to my portfolio!</title>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black fixed-top px-5 navigation">
<div id="welcome" class="container-fluid">
<h2 class="navTitle px-5">My portfolio</h2>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#start">Welcome</a>
<a class="nav-link" href="#aboutme">About</a>
<a class="nav-link" href="#skills">Skills</a>
<a class="nav-link" href="#work">Work</a>
<a class="nav-link" href="#contact">Contact</a>
</div>
</div>
</div>
</nav>
<!-- Jumbotron! -->
<div id="start" class="container-fluid">
<div class="p-5 hero">
<div class="container text-white bg-dark p-3 slideIn">
<h1 class="display-3 fw-bold">Welcome to my portfolio!</h1>
<p class="col-lg-12 col-md-12 col-sm-12 fs-4">Beyond the screen, I'm driven by a relentless pursuit of innovation, constantly embracing new frameworks and methodologies to craft digital experiences that transcend expectations. Thank you for exploring my portfolio. May it illuminate the possibilities and ignite a shared passion for crafting impactful digital landscapes.</p>
</div>
</div>
</div>
<!-- about me -->
<div id="aboutme" class="container">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 text-white">
<h1 class="display-5 fw-bold my-5" >About me</h1>
<div class="card-body">
<p class="lead">Hey there! I'm Tomasz Jasinski, and I'm on an exhilarating journey to become a web developer. Currently midway through a transformative bootcamp course, I'm diving deep into the dynamic world of web development, driven by an insatiable curiosity and a passion to create meaningful digital experiences.
While I might not have a professional background in web development, my enthusiasm and dedication are unwavering. What I lack in experience, I make up for with an insatiable hunger to learn, grow, and innovate in this ever-evolving field.
My journey into the world of coding is interwoven with my diverse interests, which significantly shape my approach to development.
</p>
<a class="btn btn-secondary"><i class="bi bi-download px-1"></i>My resume</a>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 my-5 slideIn text-center">
<img src="./image/avatar.png" class="rounded-circle mx-auto" height="500" width="500" alt="My photo">
</div>
</div>
</div>
<!-- MY SKILLS -->
<div class="container text-white" id="skills">
<h1 class="display-5 fw-bold my-5">My skills</h1>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<img class="rounded-circle" src="./image/html5.png" width="140" height="140" alt="html5">
<h2 class="fw-normal">HTML 5</h2>
<p>Latest web standard, enhances structure, multimedia, and interactivity. Supports modern browsers for dynamic content creation and accessibility.</p>
<p><a class="btn btn-secondary" href="https://developer.mozilla.org/en-US/docs/Glossary/HTML5">View details</a></p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<img class="rounded-circle" src="./image/css3.png" width="140" height="140" alt="css3">
<h2 class="fw-normal">CSS 3</h2>
<p>Style sheet language advancing design, layout, animation. Introduces transitions, gradients, responsive design for enhanced web presentation and aesthetics.</p>
<p><a class="btn btn-secondary" href="https://developer.mozilla.org/en-US/docs/Web/CSS">View details</a></p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<img class="rounded-circle" src="./image/bootstrap2.png" width="140" height="140" alt="bootstrap">
<h2 class="fw-normal">Bootstrap 5</h2>
<p>Front-end framework with pre-built components, responsive grid system, simplifying web development for design consistency and faster prototyping.</p>
<p><a class="btn btn-secondary" href="https://getbootstrap.com/">View details</a></p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<img class="rounded-circle" src="./image/github.png" width="140" height="140" alt="github">
<h2 class="fw-normal">GitHub</h2>
<p>Web-based platform, facilitates version control, collaboration. It hosts repositories, tracks changes, fosters teamwork among developers for efficient coding.</p>
<p><a class="btn btn-secondary" href="https://github.com/">View details</a></p>
</div>
</div>
</div>
<!-- MY WORK -->
<div class="container text-white my-5">
<h1 class="display-5 fw-bold my-5" id="work">My work</h1>
<!-- 1. project -->
<div class="border-5 border-bottom py-5">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="card">
<img src="./image/Horseon.png" class="card-img-top" alt="Horeseon">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="card-body ms-auto">
<h5 class="card-title display-5">Horiseon</h5>
<p class="card-text">The webpage is a revamped site for Horiseon, a digital marketing company. It boasts a streamlined design with easy navigation through sections like Home, Services, and Benefits. It showcases services such as SEO and social media management using vibrant imagery and concise descriptions. The site emphasizes accessibility and improved code structure for better performance and SEO.</p>
<a href="https://tomixjasina.github.io/Horiseon-Task-1/#third" class="btn btn-secondary">Got to project</a>
</div>
</div>
</div>
</div>
<!-- 2. project -->
<div class="border-5 border-bottom py-5">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="card">
<img src="./image/prework.png" class="card-img-top" alt="Prework">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="card-body ms-auto">
<h5 class="card-title display-5">Prework</h5>
<p class="card-text">
This webpage is a prework study guide for a bootcamp. It offers comprehensive content structured into sections such as HTML, CSS, and Git. Clear explanations, code snippets, and external resource links aid learning. The design is minimalistic, focusing on delivering educational content effectively for beginners</p>
<a href="https://tomixjasina.github.io/prework-study-guide/" class="btn btn-secondary">Got to project</a>
</div>
</div>
</div>
</div>
<!-- 3. project -->
<div class="border-5 border-bottom py-5">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="card">
<img src="./image/portfoliov1.0.png" class="card-img-top" alt="Old portfolio">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="card-body ms-auto">
<h5 class="card-title display-5">Previous version of My portfolio</h5>
<p class="card-text">This is My porftolio v1.0. It contains similar layout and notable design elements but it was build without relying on Bootstrap</p>
<a href="https://tomixjasina.github.io/My_Portfolio/" class="btn btn-secondary">Got to project</a>
</div>
</div>
</div>
</div>
<!-- 4. project -->
<div class="border-5 py-5">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="card">
<img src="./image/moon2.png" class="card-img-top" alt="Moon">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="card-body ms-auto">
<h5 class="card-title display-5">WIP</h5>
<p class="card-text">More comming soon!</p>
<a href="" class="btn btn-secondary">Got to project</a>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer id="contact">
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top text-white m-5">
<p>© 2023 Tomasz Jasinski</p>
<ul class="list-unstyled d-flex">
<li class="ms-3 ">
<a href="tel: +4407943797366">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" class="bi bi-whatsapp icons" viewBox="0 0 16 16">
<path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
</svg>
</a>
</li>
<li class="ms-3">
<a href="https://www.facebook.com/tomasz.jasinski.71">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" class="bi bi-facebook icons" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
</svg>
</a>
</li>
<li class="ms-3">
<a href="https://github.com/TomixJasina">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="white" class="bi bi-github icons" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
</a>
</li>
<li class="ms-3">
<a href="mailto: [email protected]">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="bi bi-envelope-at icons" fill="white" viewBox="0 0 16 16">
<path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2zm3.708 6.208L1 11.105V5.383zM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2z"/>
<path d="M14.247 14.269c1.01 0 1.587-.857 1.587-2.025v-.21C15.834 10.43 14.64 9 12.52 9h-.035C10.42 9 9 10.36 9 12.432v.214C9 14.82 10.438 16 12.358 16h.044c.594 0 1.018-.074 1.237-.175v-.73c-.245.11-.673.18-1.18.18h-.044c-1.334 0-2.571-.788-2.571-2.655v-.157c0-1.657 1.058-2.724 2.64-2.724h.04c1.535 0 2.484 1.05 2.484 2.326v.118c0 .975-.324 1.39-.639 1.39-.232 0-.41-.148-.41-.42v-2.19h-.906v.569h-.03c-.084-.298-.368-.63-.954-.63-.778 0-1.259.555-1.259 1.4v.528c0 .892.49 1.434 1.26 1.434.471 0 .896-.227 1.014-.643h.043c.118.42.617.648 1.12.648Zm-2.453-1.588v-.227c0-.546.227-.791.573-.791.297 0 .572.192.572.708v.367c0 .573-.253.744-.564.744-.354 0-.581-.215-.581-.8Z"/>
</svg>
</a>
</li>
</ul>
</div>
</footer>
<!-- java link -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
</body>
</html>