diff --git a/about-me.html b/about-me.html new file mode 100644 index 0000000..8abd07f --- /dev/null +++ b/about-me.html @@ -0,0 +1,33 @@ + + + + + + Live + + + + + +
+
+
+
+ +
+

Matej Mazur

+
+ +
+
+ Home + About Me +
+
+ + + + + \ No newline at end of file diff --git a/font/nordic/Nordic Alternative Regular.ttf b/font/nordic/Nordic Alternative Regular.ttf new file mode 100644 index 0000000..097e3c2 Binary files /dev/null and b/font/nordic/Nordic Alternative Regular.ttf differ diff --git a/font/nordic/ReadMe.txt b/font/nordic/ReadMe.txt new file mode 100644 index 0000000..d8d2baa --- /dev/null +++ b/font/nordic/ReadMe.txt @@ -0,0 +1,7 @@ +Follow me on Behance: https://www.behance.net/ybereziner + +Use Nordic Font for your design works. +Hope You'll enjoy it! + +Go here to get the full version of Nordic Font Family: +https://creativemarket.com/ybereziner/661998-Nordic-Font \ No newline at end of file diff --git a/img/HK_0431.jpg b/img/HK_0431.jpg new file mode 100644 index 0000000..223eecd Binary files /dev/null and b/img/HK_0431.jpg differ diff --git a/img/Me.png b/img/Me.png new file mode 100644 index 0000000..602d6f6 Binary files /dev/null and b/img/Me.png differ diff --git a/index.html b/index.html index d4ff301..279647e 100644 --- a/index.html +++ b/index.html @@ -5,47 +5,11 @@ Live - + + - -
+ +
@@ -53,6 +17,12 @@
+
+ Projects + About Me +
@@ -60,5 +30,7 @@
+ + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..0c7983e --- /dev/null +++ b/js/script.js @@ -0,0 +1,10 @@ +document.querySelectorAll('a[href]').forEach((link) => { + const href = link.getAttribute('href'); + if (!href || href[0] === '#') return; + + link.addEventListener('click', (e) => { + e.preventDefault(); + document.body.classList.add('fade-out'); + setTimeout(() => window.location = href, 500); + }); +}); \ No newline at end of file diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..ba457a6 --- /dev/null +++ b/projects.html @@ -0,0 +1,25 @@ + + + + + + Live + + + + + + +

Work in progress

+ +
+ Home + Projects +
+ + + + + \ No newline at end of file diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..0895a11 --- /dev/null +++ b/style/style.css @@ -0,0 +1,121 @@ +@font-face { + font-family: "Nordic Alternative"; + src: url("font/nordic/Nordic Alternative Regular.ttf") format("truetype"); +} + +.nordic { + font-family: "Nordic Alternative", Arial, sans-serif; +} + +.index-container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + overflow: hidden; +} + +.yellow { + background-color: rgb(244, 194, 68); +} + +.centered-image { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 2; + width: 40vh; +} + +.image-container { + position: absolute; + height: 100%; + width: 100%; +} + +.image-container img { + position: absolute; + height: 100%; + width: 100%; + object-fit: cover; +} + +.image-container .overlay { + position: absolute; + height: 100%; + width: 100%; + background: radial-gradient(circle at center, transparent, rgba(21, 15, 2, 0.8) 70%); +} + +.links { + position: absolute; + bottom: 2%; + width: 100%; + text-align: center; +} +.links a.y { + text-decoration: none; + color: rgb(244, 194, 68); + font-size: 1.6rem; +} +@media screen and (max-width: 600px) { + .links a.y { + font-size: 1rem; /* adjust this value as desired */ + } +} +.links a.b { + text-decoration: none; + color: rgb(21, 15, 2); + font-size: 1.6rem; +} + +@keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +.links a { + animation: fadeIn 2s; +} + + +.fade-out { + animation: fade-out 0.5s forwards; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +@keyframes fade-out { + from { opacity: 1; } + to { opacity: 0; } +} + +body { + opacity: 0; /* Start at 0 opacity when the page starts loading */ + animation: fadeIn ease 1.5s; + animation-fill-mode: forwards; /* This ensures that page remains in final state of animation */ +} + +@keyframes fadeIn { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +.profile-container { + display: flex; + justify-content: space-between; + padding: 20px; +} + +.bio-info { + flex: 0 1 70%; +} + +.aside-links { + flex: 0 1 25%; +} \ No newline at end of file