-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
242 lines (192 loc) · 9.52 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="styles\styles.css">
<link rel="icon" href="styles\images\favicon.ico">
<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=Montserrat:wght@300&display=swap" rel="stylesheet">
<title>Ance Sokolovska</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Contact me:</a>
</li>
<li>
<a href="mailto:[email protected]" type="button" class="btn btn-outline-secondary">[email protected]@gmail.com</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="page-header gradient">
<div class="container justify-content-center pt-3 align-items-center">
<h1>Welcome</h1>
<h3>I am Ance Sokolovska</h3>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#fff" fill-opacity="1"
d="M0,160L18.5,160C36.9,160,74,160,111,165.3C147.7,171,185,181,222,154.7C258.5,128,295,64,332,74.7C369.2,85,406,171,443,197.3C480,224,517,192,554,192C590.8,192,628,224,665,240C701.5,256,738,256,775,240C812.3,224,849,192,886,202.7C923.1,213,960,267,997,293.3C1033.8,320,1071,320,1108,298.7C1144.6,277,1182,235,1218,218.7C1255.4,203,1292,213,1329,192C1366.2,171,1403,117,1422,90.7L1440,64L1440,320L1421.5,320C1403.1,320,1366,320,1329,320C1292.3,320,1255,320,1218,320C1181.5,320,1145,320,1108,320C1070.8,320,1034,320,997,320C960,320,923,320,886,320C849.2,320,812,320,775,320C738.5,320,702,320,665,320C627.7,320,591,320,554,320C516.9,320,480,320,443,320C406.2,320,369,320,332,320C295.4,320,258,320,222,320C184.6,320,148,320,111,320C73.8,320,37,320,18,320L0,320Z">
</path>
</svg>
</header>
<!-- Introduction -->
<div class="intro">
<div class="profile">
<p class="paragraph"> Nice to see you here. I`m a 28 year old doer currently living in Madrid, Spain, originally from Riga, Latvia. I found
myself tangled in coding around May 2021, so far I am sure that coding and programming is not easy, there are many things to learn and that is the
aspect I love about it, because I enjoy being challanged and feeling the dynamic pace of learning process.
For me coding is constant mix of defeat and victory.
</p>
</div>
</div>
<!-- Skills -->
<section class="feature gradient">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 250">
<path fill="#fff" fill-opacity="1"
d="M0,256L48,234.7C96,213,192,171,288,165.3C384,160,480,192,576,202.7C672,213,768,203,864,213.3C960,224,1056,256,1152,245.3C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z">
</path>
</svg>
<div class="container">
<h3>My skills</h3>
<div class="row align-items-center">
<div class="col-md-6">
<img src="styles\images\HTML_Monochromatic.png" alt="html">
</div>
<div class="col-md-6">
<h3 class="my-3">HTML</h3>
<p class="my-4">
<ul class="feature-ul">
<li>Ability to identify basic structure tags;</li>
<li>Understanding of how to use tags and their hierarchy to build a HTML document;</li>
<li>Confident to work with text editor, in my case Atom;</li>
<li>Ability to run my html document in browser;</li>
</ul>
</p>
</div>
<div class="col-md-6">
<h3>CSS</h3>
<p class="my-4">
<ul class="feature-ul">
<li>Knowing how to and when to use CSS properties;</li>
<li>Understanding the cascade, which rule wins when a number of rules are applied to one element;</li>
<li>Understanding the basic anatomy of CSS ruleset;</li>
<li>Ability to freely manipulate with declerations, properties and values;</li>
</ul>
</p>
</div>
<div class="col-md-6">
<img src="styles\images\CSS_Monochromatic.png" alt="css">
</div>
<div class="col-md-6">
<img src="styles\images\Web development _Monochromatic.png" alt="bootstrap">
</div>
<div class="col-md-6">
<h3 class="my-3">BootStrap 5</h3>
<p class="my-4">
<ul class="feature-ul">
<li>Ability to implement BootStrap into HTML document;</li>
<li>Feeling confident to use documentation to achieve wanted result; </li>
<li>Understanding how BootStrap grid system works;</li>
<li>I built this portfolio website using BootStrap; </li>
</ul>
</p>
</div>
<div class="col-md-6">
<h3>JavaScript</h3>
<p class="my-4">
<ul class="feature-ul">
<li>I can write a JavaScript alert using console;</li>
<li>I understand what are the basic data types in JavaScript;</li>
<li>Able to use control statements;</li>
<li>Basic knowledge about functions;</li>
<li>I have only started to learn JavaScript recently, lot of things are yet to discover;</li>
</ul>
</p>
</div>
<div class="col-md-6">
<img src="styles\images\Java_Monochromatic.png" alt="javascript">
</div>
</div>
</section>
<!-- Certificates -->
<section>
<div class="certificate container">
<h3>Certificates</h3>
<p class= "paragraph"> I know that the best way to learn things is by doing, but I didn`t turn down the opportunity to also gain few certificates. They were useful to have a broad insight of the given topic.</p>
<div class="row gx-5 gy-2">
<div class="col-md-6">
<img class="img-fluid" src="styles\images\certificate-elements-of-ai.png" alt="artificial intelligence">
</div>
<div class="col-md-6">
<img class="img-fluid" src="styles\images\cybersecurity_Ance_Sokolovska.png" alt="cybersecurity">
</div>
</div>
</div>
</section>
<!-- Resources -->
<section class="icons">
<h3 class="resource-title">These are my favorite resources</h3>
<div class="container-md text-center">
<p class="resource-p">Here I search for codes and information how to correctly carry out a code:</p>
<div class="row gx-5 gy-2">
<div class="col-md-4">
<img src="styles\images\MDN_Web_Docs-Logo.wine.png" alt="mdn" class="img-fluid">
</div>
<div class="col-md-4">
<img src="styles\images\W3Schools_logo.svg.png" alt="w3" class="img-fluid image">
</div>
<div class="col-md-4">
<img src="styles\images\1280px-Stack_Overflow_logo.svg.png" alt="stack" class="img-fluid stack">
</div>
</div>
</div>
<div class="container-md text-center">
<p class="resource-p">I read not only documentation, but also news about security, Tech world and society:</p>
<div class="row gx-5 gy-2">
<div class="col-md-4">
<img src="styles\images\ul-featured-image-home.png" alt="blog" class="img-fluid">
</div>
<div class="col-md-4">
<img src="styles\images\TechCrunch-Logo.jpg" alt="techcrunch" class="img-fluid stack">
</div>
<div class="col-md-4">
<img src="styles\images\s-l500.jpg" alt="AdWords" class="img-fluid image stack">
</div>
</div>
<div class="container-md text-center bottom">
<p class="resource-p">In order to have a better guidance what comes after what, I`ve used help from few courses:</p>
<div class="row gx-5 gy-2">
<div class="col-md-4">
<img src="styles\images\FreeCodeCamp_logo.png" alt="freeCC" class="img-fluid stack">
</div>
<div class="col-md-4">
<img src="styles\images\og-logo-022832d4cefeec1d5266237be260192f5980f9bcbf1c9ca151b358f0ce1fd2df.png" alt="Odin" class="img-fluid">
</div>
<div class="col-md-4">
<img src="styles\images\p9kTpGac.png" alt="udemy" class="img-fluid image">
</div>
</section>
<!-- Footer -->
<section>
<footer class="gradient footer">
<div class="container-fluid text-center">
<p class="copyright">© 2021 Ance Sokolovska</p>
</div>
</footer>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>