-
Notifications
You must be signed in to change notification settings - Fork 47
/
Copy pathindex.html
226 lines (212 loc) · 11.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Review this part and modify it to your liking -->
<meta name="description" content="Sample text for portfolio template meta tag">
<meta name="keywords" content="Sample text for portfolio template meta tag">
<meta name="author" content="Sample text for portfolio template meta tag">
<title>My portfolio website</title>
<!-- Adding favicon for older and modern browsers,
It is best to add favicon to the main folder,
I used an only ico converter for best result,
Do not forget to clear you cache to see the changes -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- font for the quote -->
<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=Covered+By+Your+Grace&display=swap" rel="stylesheet">
<!-- font for the body -->
<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@200&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">
<!-- font for headings -->
<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=Oswald:wght@200&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400&display=swap" rel="stylesheet">
</head>
<body>
<!-- navigation bar -->
<nav class="sticky">
<label for="drop" class="toggle" id="main-toggle">
<span class="nav-icon"></span>
</label>
<input type="checkbox" id="drop">
<ul class="main-nav">
<li><a href="index.html">Home</a></li>
<li><a href="about-me.html">About me</a></li>
<li><a href="skill-set.html">Skill-set</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="#contact-me">Contact me</a></li>
</ul>
</nav>
<!-- introduction -->
<header class="grid-system-2 w-900 padding">
<section class="align-center">
<h1 class="medium-spacing">Hello, I am</h1>
<h1 class="large">Your name</h1>
<p class="justify">That large class above is only suitable for short names/nicknames. If you want to display
your full name there, consider using the "medium-spacing" and "colorful-letter" classes instead, to
maintain responsiveness.</p>
</section>
<section class="center align-center">
<img class="header-img max-width max-height" src="assets/profile-pic.png" alt="profile-picture">
</section>
</header>
<!-- quote -->
<article class="baby-pink">
<p class="quote uppercase">Write something touchy, funny, or deep here.</p>
<p>And unfold it here a little.</p>
</article>
<!-- about me -->
<!-- That about me png is something I've made for fun, it has a purple version too, feel free to use it or change it to anything else. -->
<section class="wrapper">
<section class="margin-auto">
<img class="max-width max-height" src="assets/about-me.png" alt="about-me-logo">
</section>
<section class="justify align-center">
<p class="bold">About me</p>
<p>Here you may write something captivating and exciting about yourself, so that everyone wants to use that
button below.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi dolor officia nulla in culpa
necessitatibus maiores natus quae adipisci magnam. Voluptas voluptatibus voluptatem est fugiat,
provident incidunt perferendis fuga soluta?.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius obcaecati labore pariatur quisquam veniam,
assumenda consectetur asperiores accusamus fugit. </p>
<p class="padding-top"><a href="about-me.html" class="button-outline">More info</a></p>
</section>
</section>
<!-- skills -->
<!-- use this to showcase your skills, if you make changes, do not forget to modify the css accordingly -->
<section>
<h3 class="main-title center padding">Skills</h3>
</section>
<section class="wrapper">
<section class="column">
<p class="padding-bottom">Technical skills</p>
<section class="skills">
<ul class="no-bullet-list no-padding-list-item">
<li>
<p>html</p>
<span class="progress-bar"><span class="html"></span></span>
</li>
<li>
<p>css</p>
<span class="progress-bar"><span class="css"></span></span>
</li>
<li>
<p>javascript</p>
<span class="progress-bar"><span class="javascript"></span></span>
</li>
<li>
<p>php, mysql</p>
<span class="progress-bar"><span class="php"></span></span>
</li>
</ul>
</section>
</section>
<section class="column">
<p class="padding-bottom">Professional skills</p>
<section class="skills">
<ul class="no-bullet-list no-padding-list-item">
<li>
<p>communication</p>
<span class="progress-bar"><span class="comm-adapt"></span></span>
</li>
<li>
<p>teamplayer, adaptability</p>
<span class="progress-bar"><span class="team-player"></span></span>
</li>
<li>
<p>problem solving</p>
<span class="progress-bar"><span class="problem-solving"></span></span>
</li>
<li>
<p>open-minded</p>
<span class="progress-bar"><span class="open-minded"></span></span>
</li>
</ul>
</section>
</section>
</section>
</section>
<!-- Projects -->
<!-- If you have more projects you are working on at the moment, or just want to show more, double the whole section below without the title and you are good to go -->
<section>
<h3 class="main-title center padding">Projects I am currently working on</h3>
</section>
<section class="wrapper">
<section class="column card justify flex">
<img class="box" src="assets/project1.png" alt="project1">
<p class="padding bold center">Project name here</p>
<p>Project description here.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium totam, iusto recusandae, repudiandae
molestias adipisci perferendis, beatae quia voluptates aspernatur consequatur minima? Maiores neque
ullam explicabo, autem molestiae velit delectus?</p>
<p class="padding-top bottom"><a href="portfolio.html" class="button-outline">Portfolio</a></p>
</section>
<section class="column card justify flex">
<img class="box" src="assets/project2.png" alt="project2">
<p class="padding bold center">Project name here</p>
<p>Project description here.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dignissimos facilis molestias, laborum
repellendus delectus accusantium, laboriosam aut cupiditate culpa eum animi deleniti nostrum quibusdam
consequatur eos in exercitationem dolores!</p>
<p class="padding-top bottom"><a href="portfolio.html" class="button-outline">Portfolio</a></p>
</section>
</section>
<!-- contact me -->
<!-- Five logo can be in one row, and if it still not enough, you can create another row, buy doubleing the "box-contact" section -->
<section id="contact-me" class="grid-system-2 w-900 padding">
<section class="margin-auto">
<img class="max-width max-height" src="assets/Contact-me-img.png" alt="contact-me-illustration">
</section>
<section class="margin-auto align-center">
<h1 class="medium-spacing center">Let's get in touch!<span></span></h1>
<section class="box-contact margin-auto padding-top">
<span>
<a href="https://www.linkedin.com/" target="_blank"><img class="logo" src="assets/linkedin.png"
alt=""></a>
</span>
<span>
<a href="https://github.com/" target="_blank"><img class="logo" src="assets/github.png" alt=""></a>
</span>
<span>
<a href="mailto:[email protected]" target="_blank"><img class="logo" src="assets/email.png" alt=""></a>
</span>
</section>
</section>
</section>
<!-- special thanks -->
<!-- Here you can see the free resources I've used for the logos and illustrations. Do not forget to give credit to the creators of the free stuffs use may use additionally -->
<section>
<p class="small thanks justify w-900 padding-left">*Thanks for the illustration:
<a class="link colorful-letter" href="https://storyset.com/work" target="_blank">work illustrations</a> by
Storyset
</p>
<p class="small thanks justify w-900 padding-left">*Thanks for the icons:
<span><a class="link colorful-letter" href="https://www.iconfinder.com/Flatart" target="_blank">flatart,
</a></span>
<span><a class="link colorful-letter" href="https://www.iconfinder.com/font-awesome" target="_blank">font
awesome, </a></span>
<span><a class="link colorful-letter" href="https://www.iconfinder.com/fluent-designsystem"
target="_blank">microsoft, </a></span>
<span><a class="link colorful-letter" href="https://www.iconfinder.com/Chanut-is" target="_blank">chanut is
indurstries, </a></span>
<span><a class="link colorful-letter" href="https://www.iconfinder.com/Kalashnyk" target="_blank">kalash
</a></span>
on Iconfinder
</p>
</section>
<!-- footer -->
<!-- waits for you to take over! -->
<footer>@iluskaland 2024</footer>
</body>
</html>