-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement new website structure and design
The commit introduces a new architecture for the website which includes new pages 'projects.html' and 'about-me.html'. An external CSS file has been created, replacing inline styles. On-click fade-out functionality added using JavaScript. The Bootstrap framework has also been incorporated for better responsiveness and design convenience. Additionally, the Nordic font-face was added to the project.
- Loading branch information
1 parent
a914ac5
commit d92b586
Showing
9 changed files
with
208 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Live</title> | ||
| <link rel="icon" href="img/Icon.png" type="image/png"> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> | ||
| <link rel="stylesheet" HREF="style/style.css"> | ||
| </head> | ||
| <body class="yellow"> | ||
| <div class="container position-relative vh-100 pt-5"> | ||
| <div class="p-sm-5"> | ||
| <div class="border border-2 border-dark text-center p-5"> | ||
| <div class="rounded-pill border border-2 border-dark m-auto p-2 mb-4 yellow" style="width: 250px;margin-top:-125px "> | ||
| <img src="img/Me.png" class="img-fluid rounded-pill"> | ||
| </div> | ||
| <h1 class="nordic">Matej Mazur</h1> | ||
| </div> | ||
|
|
||
| </div> | ||
| <div class="links nordic"> | ||
| <a href="index.html" | ||
| class="b" style="margin-right: 8%;">Home</a> | ||
| <a href="about-me.html" | ||
| class="b">About Me</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> | ||
| <script src="js/script.js" type="text/javascript"></script> | ||
| </body> | ||
| </html> |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,60 +5,32 @@ | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Live</title> | ||
| <link rel="icon" href="img/Icon.png" type="image/png"> | ||
| <style> | ||
| .container { | ||
| position: relative; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| overflow: hidden; | ||
| } | ||
| .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%); | ||
| } | ||
| </style> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> | ||
| <link rel="stylesheet" HREF="style/style.css" > | ||
| </head> | ||
| <body style="margin: 0;padding: 0"> | ||
| <div class="container"> | ||
| <body style="margin: 0;padding: 0" class="yellow"> | ||
| <div class="index-container"> | ||
| <div class="image-container" style="z-index: 1;"> | ||
| <img src="img/Bg.jpeg" /> | ||
| <div class="overlay"></div> | ||
| </div> | ||
| <div class="image-container" style="z-index: 2; height:80%; width:80%;"> | ||
| <img src="img/Bg.jpeg" /> | ||
| <div class="overlay"></div> | ||
| <div class="links nordic"> | ||
| <a href="projects.html" | ||
| class="y" style="margin-right: 8%;">Projects</a> | ||
| <a href="about-me.html" | ||
| class="y">About Me</a> | ||
| </div> | ||
| </div> | ||
| <div class="image-container" style="z-index: 3; height:60%; width:60%;"> | ||
| <img src="img/Bg.jpeg" /> | ||
| <div class="overlay"></div> | ||
| </div> | ||
| <img class="centered-image" style="z-index: 4;" src="img/LIVE-yellow.png" /> | ||
| </div> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> | ||
| <script src="js/script.js" type="text/javascript"></script> | ||
| </body> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Live</title> | ||
| <link rel="icon" href="img/Icon.png" type="image/png"> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> | ||
| <link rel="stylesheet" HREF="style/style.css" > | ||
| </head> | ||
| <body class="yellow container d-flex justify-content-center align-items-center vh-100"> | ||
|
|
||
| <h1 class="nordic">Work in progress</h1> | ||
|
|
||
| <div class="links nordic"> | ||
| <a href="index.html" | ||
| class="b" style="margin-right: 8%;">Home</a> | ||
| <a href="projects.html" | ||
| class="b">Projects</a> | ||
| </div> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> | ||
| <script src="js/script.js" type="text/javascript"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%; | ||
| } |