-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
206 lines (163 loc) · 11.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YBG5468FYS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-YBG5468FYS');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MKST Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Raleway:ital,wght@0,400;0,600;0,700;0,800;0,900;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<header>
<div class="logo">
<svg class="svg-obj" width="260" height="210" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1021 638" enable-background="new -4 25 971 169" xml:space="preserve">
<g>
<path class="path1" d="M264.16,142.74h-45.9v210h28.8V204.24l24.6,148.5h31.2l22.8-150.6v150.6h31.2v-210h-45.9l-22.5,149.1Zm162,210h33.9l-45.9-116.4,45.9-93.6h-33l-43.2,91.5v-91.5h-33v210h33v-64.5l10.2-19.2Zm40.5-133.5a81.562,81.562,0,0,0,12,19.8,146.171,146.171,0,0,0,15.45,16.05q8.247,7.355,15.45,14.7a79.492,79.492,0,0,1,12,15.6,37.223,37.223,0,0,1,4.8,19.05q0,11.4-4.65,15.9t-12.45,4.5q-7.8,0-12.45-4.5t-4.65-15.9v-15h-31.2v12.9q0,25.5,12.45,39.15t36.75,13.65q24.3,0,36.75-13.65t12.45-39.15q0-15-4.8-26.1a81.873,81.873,0,0,0-12-19.8,147.357,147.357,0,0,0-15.45-16.05q-8.255-7.348-15.45-14.7a79.066,79.066,0,0,1-12-15.6,37.163,37.163,0,0,1-4.8-19.05q0-11.4,4.35-16.05t12.15-4.65q7.8,0,12.15,4.65t4.35,16.05v8.7h31.2v-6.6q0-25.5-12.15-39.15t-36.45-13.65q-24.3,0-36.45,13.65t-12.15,39.15Q461.855,208.145,466.655,219.24Zm94.5-46.5h34.5v180h33v-180h34.5v-30h-102v30Z"/>
<path class="path" d="M217.939,357.132l0.551,140,22-.086-0.207-52.6,10.4-.041q16.6-.065,24.665-8.9t8-25.832l-0.071-18.2q-0.067-17-8.2-25.768t-24.734-8.7Zm32.478,19.873q5.2-.021,8.011,2.768t2.841,10.389l0.083,21q0.03,7.6-2.759,10.411T250.6,424.4l-10.4.041-0.187-47.4Zm58.248,11.971q-0.03-7.6,3.058-10.713a12.662,12.662,0,0,1,16.6-.065q3.111,3.092,3.143,10.688l0.3,75.6q0.03,7.6-3.058,10.712a12.661,12.661,0,0,1-16.6.066q-3.115-3.087-3.142-10.688Zm-21.708,74.286q0.066,17,8.7,26.066t24.835,9q16.2-.065,24.764-9.2t8.5-26.133l-0.286-72.8q-0.067-17-8.7-26.066t-24.835-9q-16.2.065-24.764,9.2t-8.5,26.133Zm144.53,33.031a29.169,29.169,0,0,1-2.031-7.892,89.9,89.9,0,0,1-.436-9.1l-0.085-21.6q-0.043-11-3.173-18.688a19.7,19.7,0,0,0-11.544-11.054q14.373-6.854,14.288-28.457l-0.043-11q-0.063-16.2-7.8-24.169t-24.931-7.9l-33.2.13,0.551,140,22-.086-0.225-57,7.6-.03q7.6-.03,11.016,3.957t3.454,13.786l0.087,22q0.017,4.2.127,7a36.812,36.812,0,0,0,.418,4.6,19.928,19.928,0,0,0,.712,3c0.269,0.8.538,1.667,0.81,2.6ZM395.215,376.435q5.8-.022,8.514,3.366t2.743,10.99l0.054,13.8q0.033,8.4-3.454,11.613t-9.688,3.238l-8.6.034-0.17-43Zm36.4-.143,23-.091,0.473,120,22-.086-0.472-120,23-.091-0.079-20-68,.268Zm94.6-.373,36.2-.142-0.079-20-58.2.229,0.551,140,22-.087-0.228-57.8,28.4-.112-0.079-20-28.4.112Zm62.047,11.956q-0.03-7.6,3.058-10.712a12.662,12.662,0,0,1,16.6-.065q3.111,3.091,3.142,10.688l0.3,75.6q0.03,7.6-3.058,10.712a12.66,12.66,0,0,1-16.6.065q-3.115-3.085-3.142-10.687Zm-21.708,74.286q0.066,17,8.7,26.066t24.836,9q16.2-.065,24.764-9.2t8.5-26.134l-0.286-72.8q-0.067-17-8.7-26.066t-24.835-9q-16.2.063-24.764,9.2t-8.5,26.134Zm76.131,33.3,58.2-.229-0.078-20-36.2.143-0.472-120-22,.086Zm62.8-.247,22-.087-0.551-140-22,.087ZM758.25,387.206q-0.03-7.6,3.058-10.712a12.663,12.663,0,0,1,16.6-.065q3.109,3.092,3.142,10.688l0.3,75.6q0.03,7.6-3.058,10.712a12.661,12.661,0,0,1-16.6.066q-3.114-3.087-3.142-10.688Zm-21.708,74.286q0.067,17,8.7,26.066t24.835,9q16.2-.065,24.764-9.2t8.5-26.134l-0.287-72.8q-0.067-17-8.7-26.066t-24.835-9q-16.2.063-24.764,9.2t-8.5,26.134Z"/>
</g>
</svg>
</div>
</header>
<!-- Intro -->
<section class="about_me_sec" id="about_me">
<svg class="svg-about" g xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 1021 638" x="0px" y="0px" xml:space="preserve">
<path id="about_me" data-name="about me" class="path_about" d="M283.513,249.233h-32.2l-22.4,140h20.2l3.8-25.4h27l3.8,25.4h22.2Zm-17.2,24.8,10.6,70.8h-21.2Zm44.8-24.8v140h34.6q16.6,0,25-8.5t8.4-24.7v-11.4q0-11.2-3.7-18.9t-12.7-11.1a21.614,21.614,0,0,0,10.8-10.4q3.4-7,3.4-17.8v-5q0-16.2-7.7-24.2t-24.9-8h-33.2Zm31.8,77q7.6,0,10.9,3.6t3.3,13.4v12.2q0,7.8-2.9,10.8t-8.5,3h-12.6v-43h9.8Zm0.8-57q5.8,0,8.5,3.4t2.7,11v7.8q0,8.4-3.5,11.6t-9.7,3.2h-8.6v-37h10.6Zm63.8,12.2q0-7.6,3.1-10.7a12.661,12.661,0,0,1,16.6,0q3.1,3.1,3.1,10.7v75.6q0,7.6-3.1,10.7a12.661,12.661,0,0,1-16.6,0q-3.1-3.1-3.1-10.7v-75.6Zm-22,74.2q0,17,8.6,26.1t24.8,9.1q16.2,0,24.8-9.1t8.6-26.1v-72.8q0-17-8.6-26.1t-24.8-9.1q-16.2,0-24.8,9.1t-8.6,26.1v72.8Zm75-106.4v106.6q0,17,8.3,26.1t24.5,9.1q16.2,0,24.5-9.1t8.3-26.1v-106.6h-20.8v108q0,7.6-3.1,10.6a12.982,12.982,0,0,1-16.6,0q-3.1-3-3.1-10.6v-108h-22Zm69.2,20h23v120h22v-120h23v-20h-68v20Zm129-20h-30.6v140h19.2v-99l16.4,99h20.8l15.2-100.4v100.4h20.8v-140h-30.6l-15,99.4Zm94.8,20h38v-20h-60v140h60v-20h-38v-41h30.2v-20H753.5v-39Z"/>
</svg>
<div class="about_me_h">
<div class="about">
<h3>Multimedia design student</h3>
<p>My Name is Mitko Kostadinov and I am a 1st year multimedia deisgn student at Zealand Academy. I have created this portfolio to showcase my work in graphics and visual design. </p>
</div>
</div>
<a href="#work" class="btn">My Work</a>
</section>
<!-- Current project section -->
<section class="current" id="cur_proj">
<h2 class="section__title section__title--about">My current project</h2>
<p class="section__subtitle section__subtitle--about">Intranet portal for Rigshospitalets Kollegium</p>
<div class="current__body">
<p>As part of the Beboerrådet & Kollegianerrådet of Rigshospitalets Kollegium, I am currently developing a new intranet portal for the residents of the kollegium. The system is built on WordPress, in order to provide an easy front-end interface
for different members to contribute individually, and mimics a social media portal. It is designed with mobile-first priority and is currently available as a test PWA app on Google Play Store. The plan is to expand the app to Apple's ecosystem,
and have all 414 residents using it, as part of their daily life at RHK.</p>
</div>
<img src="img/intranet.png" alt="RHK Intranet 1.0" class="current__img">
</section>
<!-- My Work -->
<section class="my-work" id="work">
<h2 class="section__title section__title--work">My work</h2>
</section>
<section class="lightbox_galery" id="lightbox_galery">
<!-- Img on which you want to trigger carousel -->
<div class="carousel-row">
<div class="carousel-row--img">
<img src="img/portfolio-01.jpg" class="hover-shadow" />
</div>
<div class="carousel-row--img">
<img src="img/portfolio-02.jpg" class="hover-shadow" />
</div>
<div class="carousel-row--img">
<img src="img/portfolio-03.jpg" class="hover-shadow" />
</div>
<div class="carousel-row--img">
<img src="img/portfolio-04.jpg" class="hover-shadow" />
</div>
<div class="carousel-row--img">
<img src="img/portfolio-05.jpg" class="hover-shadow" />
</div>
<div class="carousel-row--img">
<img src="img/portfolio-06.jpg" class="hover-shadow" />
</div>
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal no-select">
<span class="close cursor">×</span>
<!-- Next/previous controls -->
<a class="prev no-select">❮</a>
<a class="next no-select">❯</a>
<div class="modal-content">
<div class="my-slides">
<div class="my-slides--number"></div>
<img src="img/portfolio-01.jpg" />
</div>
<div class="my-slides">
<div class="my-slides--number"></div>
<img src="img/portfolio-02.jpg" />
</div>
<div class="my-slides">
<div class="my-slides--number"></div>
<img src="img/portfolio-03.jpg" />
</div>
<div class="my-slides">
<div class="my-slides--number"></div>
<img src="img/portfolio-04.jpg" />
</div>
<div class="my-slides">
<div class="my-slides--number"></div>
<img src="img/portfolio-05.jpg" />
</div>
<div class="my-slides">
<div class="my-slides--number"></div>
<img src="img/portfolio-06.jpg" />
</div>
<!-- Caption text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail image controls -->
<div class="column-box">
<div class="column">
<img class="demo" src="img/portfolio-01.jpg" alt="T-Shirt Design for RHK Festival 2020" />
</div>
<div class="column">
<img class="demo" src="img/portfolio-02.jpg" alt="Poster for RHK Festival 2020" />
</div>
<div class="column">
<img class="demo" src="img/portfolio-03.jpg" alt="Årbog and Udvalgsbog designs for Rigshospitalets Kollegium. Whole booklet
was made in InDesign and printed with hard-cover and matt paper. " />
</div>
<div class="column">
<img class="demo" src="img/portfolio-04.jpg" alt="Refresh of RHK Festival logo, which will be used, hopefully, in 2021" />
</div>
<div class="column">
<img class="demo" src="img/portfolio-05.jpg" alt="Refresh of Rigshospitalets Kollegium logo" />
</div>
<div class="column">
<img class="demo" src="img/portfolio-06.jpg" alt="Posters for different events." />
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<a href="mailto: [email protected]" class="footer__link">[email protected]</a>
<div class="phone">
<p>Jagtvej 120, Købenahvn N <br> +45 53 76 68 21
</p>
</div>
<ul class="github">
<li class="github__item">
<a class="github__link" href="https://github.com/mkststrahilov/portfolio_zea">
<i class="fab fa-github"></i>
</a>
</li>
</ul>
</footer>
<script src="js/modal.js"></script>
</body>
</html>