Skip to content

Commit bec5231

Browse files
JureSotosekJureSotosek
committed
fix
1 parent b862968 commit bec5231

File tree

2 files changed

+88
-69
lines changed

2 files changed

+88
-69
lines changed

‎index.html‎

Lines changed: 45 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -21,55 +21,54 @@
2121
<title>Jure Sotošek</title>
2222
</head>
2323
<body>
24-
<div class="me">👨🏽‍💻</div>
25-
<div class="name">Jure Sotosek</div>
26-
<div class="description">
27-
Working hard 🙇🏽‍♂️ and doing things that need to be done 🌍
28-
<br />
29-
And my initials are literally JS, so yeah, I like JavaScript…
30-
</div>
31-
<div class="connection_wrapper">
32-
<div class="connection_title">Working at　👉🏼</div>
33-
<a class="conncetion_button microsoft" href="https://microsoft.com"
34-
>Microsoft 💻</a
35-
>
36-
</div>
37-
<div class="connection_wrapper">
38-
<div class="connection_title">Working on 🙏🏼</div>
39-
<a class="conncetion_button wrumersound" href="https://wrumersound.com"
40-
>WrumerSound 🚗</a
41-
>
42-
</div>
43-
<div class="connection_wrapper">
44-
<div class="connection_title">Studied at　💪🏼</div>
45-
<a class="conncetion_button kings" href="https://www.kcl.ac.uk"
46-
>King’s 📚</a
47-
>
48-
</div>
49-
<div class="connection_wrapper">
50-
<div class="connection_title">Personal　👏🏼</div>
51-
<a class="conncetion_button github" href="https://github.com/juresotosek"
52-
>Github 🐈</a
53-
>
54-
</div>
55-
<div class="connection_wrapper">
56-
<div class="connection_title">Curriculum vitae　🙏🏼</div>
57-
<a class="conncetion_button CV" href="CV-JureSotosek.pdf">CV 💡</a>
58-
</div>
59-
<div class="connection_wrapper">
60-
<div class="connection_title">Contact me　👋🏼</div>
61-
<div class="conncetion_buttons_wrapper">
62-
<a class="conncetion_button email" href="mailto:[email protected]"
63-
>Email ✉️</a
64-
>
24+
<div class="left-column">
25+
<div class="me">👨🏽‍💻</div>
26+
<div class="name">Jure Sotosek</div>
27+
<div class="description">
28+
Working hard 🙇🏽‍♂️ and doing things that need to be done 🌍
29+
<br />
30+
And my initials are literally JS, so yeah, I like JavaScript…
31+
</div>
32+
<div class="connection_wrapper">
33+
<div class="connection_title">Code　👏🏼</div>
6534
<a
66-
class="conncetion_button conncetion_button_second twitter"
67-
href="https://twitter.com/juresotosek"
35+
class="conncetion_button github"
36+
href="https://github.com/juresotosek"
37+
>Github 🐈</a
6838
>
69-
Twitter 🐦
70-
</a>
7139
</div>
40+
<div class="connection_wrapper">
41+
<div class="connection_title">Curriculum vitae　🙏🏼</div>
42+
<a class="conncetion_button CV" href="CV-JureSotosek.pdf">CV 💡</a>
43+
</div>
44+
<div class="connection_wrapper">
45+
<div class="connection_title">Contact me　👋🏼</div>
46+
<div class="conncetion_buttons_wrapper">
47+
<a
48+
class="conncetion_button email"
49+
href="mailto:[email protected]"
50+
>Email ✉️</a
51+
>
52+
<a
53+
class="conncetion_button conncetion_button_second twitter"
54+
href="https://twitter.com/juresotosek"
55+
>
56+
Twitter 🐦
57+
</a>
58+
</div>
59+
</div>
60+
<div class="opensource">I　❤️　Open Source</div>
7261
</div>
73-
<div class="opensource">I　❤️　Open Source</div>
7462
</body>
63+
<div class="right-column">
64+
<iframe
65+
src="https://www.youtube.com/embed/KpVPST_P4W8?si=LZKXvG4H_KBEvTBX"
66+
title="YouTube video player"
67+
frameborder="0"
68+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
69+
referrerpolicy="strict-origin-when-cross-origin"
70+
allowfullscreen
71+
class="video"
72+
></iframe>
73+
</div>
7574
</html>

‎styles.css‎

Lines changed: 43 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,43 @@
11
body {
2-
margin: 164px 264px;
32
background-color: #f9f9f9;
43

54
font-family: Arial, Helvetica, sans-serif;
65
color: #373530;
76

7+
display: flex;
8+
flex-direction: row;
9+
height: 100svh;
10+
padding: 0;
11+
margin: 0;
12+
}
13+
14+
.left-column {
15+
flex: 2;
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: center;
19+
padding: 60px;
20+
}
21+
22+
.right-column {
23+
flex: 3;
824
display: flex;
925
flex-direction: column;
26+
justify-content: center;
27+
padding: 20px;
28+
}
29+
30+
.video {
31+
width: 100%;
32+
aspect-ratio: 16 / 9;
33+
}
34+
35+
.opensource {
36+
align-self: center;
37+
}
38+
39+
.connection_wrapper {
40+
justify-content: center;
1041
}
1142

1243
.me {
@@ -80,21 +111,6 @@ body {
80111
margin-top: 10px;
81112
}
82113

83-
.kings {
84-
background-color: #e22319;
85-
color: #ffffff;
86-
}
87-
88-
.microsoft {
89-
background-color: orange;
90-
color: black;
91-
}
92-
93-
.wrumersound {
94-
background-color: #282F3E;
95-
color: #F2A93B
96-
}
97-
98114
.github {
99115
background-color: #000000;
100116
color: #ffffff;
@@ -116,25 +132,29 @@ body {
116132
}
117133

118134
.opensource {
119-
font-family: 'Courier New', Courier, monospace;
135+
font-family: "Courier New", Courier, monospace;
120136
margin-top: 36px;
121137
margin-left: 100px;
122138
}
123139

124140
/* Tablet */
125141
@media only screen and (max-width: 870px) {
126142
body {
127-
margin: 80px;
143+
flex-direction: column;
144+
}
145+
146+
.left-column {
147+
/* align-items: center; */
148+
padding: 20px;
149+
}
150+
151+
.right-column {
152+
padding: 10px;
128153
}
129154
}
130155

131156
/* Mobile */
132157
@media only screen and (max-width: 700px) {
133-
body {
134-
margin: 40px 30px;
135-
align-items: center;
136-
}
137-
138158
.me {
139159
width: 100%;
140160
}

0 commit comments

Comments
 (0)