Skip to content

Commit

Permalink
Splash Screen
Browse files Browse the repository at this point in the history
  • Loading branch information
dacrab authored Mar 7, 2024
1 parent 56c93c3 commit 45bcca3
Show file tree
Hide file tree
Showing 20 changed files with 117 additions and 78 deletions.
Binary file added assets/lotti/arrow_dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/lotti/arrow_light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/lotti/github_dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/lotti/github_light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/lotti/linkedin_dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/lotti/linkedin_light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/lotti/lotti/codingPerson.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/lotti/lotti/landingPerson.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/lotti/lotti/showcase.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/lotti/lotti/splash.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/lotti/lotti/splashAnimation.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/lotti/lotti/splashScreen.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/lotti/medal-solid.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/lotti/resume-example.pdf
Binary file not shown.
1 change: 1 addition & 0 deletions assets/lotti/scroll-solid.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/lotti/theme_dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/lotti/theme_light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 19 additions & 16 deletions main.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="mediaqueries.css" />
</head>
<body>
<body>
<div id="splash-screen">
<lottie-player src="./assets/lotti/splash.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
</div>
<nav id="hamburger-nav">
<div class="logo">Vaggelis Kavouras</div>
<div class="hamburger-menu">
Expand Down Expand Up @@ -110,13 +113,13 @@ <h1 class="title">About Me</h1>
<div class="about-details-container">
<div class="about-containers">
<div class="details-container">
<i class="fa-solid fa-medal"></i>
<div class="icons"><i class="fa-solid fa-medal"></i></div>
<h3>Experience</h3>
<Br>
<p>2+ years Software Development</p>
</div>
<div class="details-container">
<i class="fa-solid fa-user-graduate"></i>
<div class="icons"><i class="fa-solid fa-user-graduate"></i></div>
<h3>Education</h3>
<br>
<p>IT Techitian<br>
Expand Down Expand Up @@ -148,43 +151,43 @@ <h1 class="title">Experience</h1>
<h2 class="experience-sub-title">Software Development</h2>
<div class="article-container">
<article>
<i class="fa-brands fa-html5">
<div class="icons"><i class="fa-brands fa-html5"></i></div>
<div>
<h3>HTML</h3>
<p>Experienced</p>
</div></i>
</article>
<article>
<i class="fa-brands fa-css3-alt">
<div class="icons"><i class="fa-brands fa-css3-alt"></i></div>
<div>
<h3>CSS</h3>
<p>Basic</p>
</div></i>

</article>
<article>
<i class="fa-brands fa-js">
<div class="icons"><i class="fa-brands fa-js"></i></div>
<div>
<h3>JavaScript</h3>
<p>Begginer</p>
</div></i>
</article>
<article>
<i class="fa-brands fa-java">
<div class="icons"><i class="fa-brands fa-java"></i></div>
<div>
<h3>Java</h3>
<p>Basic</p>
</div></i>
</article>
<article>
<i class="fa-solid fa-c">
<div class="icons"><i class="fa-solid fa-c"></i></div>
<div>
<h3>C / C++</h3>
<p>Basic</p>
</div></i>
</article>
<article>
<i class="fa-brands fa-php">
<div class="icons"><i class="fa-brands fa-php"></i></div>
<div>
<h3>PHP</h3>
<p>Basic</p>
Expand All @@ -203,38 +206,38 @@ <h3>PHP</h3>
<h2 class="experience-sub-title">Content Creation</h2>
<div class="article-container">
<article>
<i class="fa-solid fa-keyboard">
<div class="icons"><i class="fa-solid fa-keyboard"></i></div>
<div>
<h3>Unreal Engine</h3>
<p>Experienced</p>
</div>
</i>
</article>
<article>
<i class="fa-solid fa-gamepad">
<div class="icons"><i class="fa-solid fa-gamepad"></i></div>
<div>
<h3>Unity</h3>
<p>Basic</p>
</div></i>
</article>
<article>
<i class="fa-solid fa-camera">
<div class="icons"><i class="fa-solid fa-camera"></i></div>
<div>
<h3>Adobe Photoshop</h3>
<p>Basic</p>
</div>
</i>
</article>
<article>
<i class="fa-solid fa-clapperboard">
<div class="icons"><i class="fa-solid fa-clapperboard"></i></div>
<div>
<h3>Abobe Premier</h3>
<p>Basic</p>
</div>
</i>
</article>
<article>
<i class="fa-brands fa-wordpress">
<div class="icons"><i class="fa-brands fa-wordpress"></i></div>
<div>
<h3>WordPress</h3>
<p>Basic</p>
Expand Down Expand Up @@ -345,12 +348,12 @@ <h2 class="experience-sub-title project-title">Calculator Made in JavaScript</h2
<h1 class="title">Contact Me</h1>
<div class="contact-info-upper-container">
<div class="contact-info-container">
<i class="fa-solid fa-at"></i>
<div class="icons"><i class="fa-solid fa-at"></i></div>
<p><a href="mailto:vaggeliskavouras3@gmail.com">Email</a></p>
</div>
<vr>
<div class="contact-info-container">
<i class="fa-solid fa-inbox"></i>
<div class="icons"><i class="fa-solid fa-inbox"></i></div>
<p><a href="https://www.linkedin.com">LinkedIn</a></p>
</div>
</section>
Expand Down
121 changes: 65 additions & 56 deletions script.js
Original file line number Diff line number Diff line change
@@ -1,64 +1,73 @@
// Hamburger Menu
function toggleMenu() {
const menu = document.querySelector(".menu-links");
const icon = document.querySelector(".hamburger-icon");
menu.classList.toggle("open");
icon.classList.toggle("open");
}
//Splash Screen

// Dark / Light Mode
const btn = document.getElementById("modeToogle")
const btn2 = document.getElementById("modeToogle2")
const themeIcons = document.querySelectorAll(".icon");
let isSystemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
window.addEventListener('load', function () {
setTimeout(function () {
document.getElementById('splash-screen').style.display = 'none';
}, 2000); // 3000ms = 3s
});

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
isSystemDarkMode = e.matches;
setTheme();
});

if(localStorage.getItem("theme") === "dark"){
setDarkMode();
};
// Hamburger Menu
function toggleMenu() {
const menu = document.querySelector(".menu-links");
const icon = document.querySelector(".hamburger-icon");
menu.classList.toggle("open");
icon.classList.toggle("open");
}

// Dark / Light Mode
const btn = document.getElementById("modeToogle")
const btn2 = document.getElementById("modeToogle2")
const themeIcons = document.querySelectorAll(".icon");
let isSystemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
isSystemDarkMode = e.matches;
setTheme();
});

btn.addEventListener("click" , function(){
localStorage.setItem("themeChangedManually", "true");
setTheme();
})
btn2.addEventListener("click" , function(){
localStorage.setItem("themeChangedManually", "true");
setTheme();
})
if(localStorage.getItem("theme") === "dark"){
setDarkMode();
};

function setTheme(){
let currentTheme = document.body.getAttribute("theme")
let themeChangedManually = localStorage.getItem("themeChangedManually");
btn.addEventListener("click" , function(){
localStorage.setItem("themeChangedManually", "true");
setTheme();
})
btn2.addEventListener("click" , function(){
localStorage.setItem("themeChangedManually", "true");
setTheme();
})

if(themeChangedManually !== "true"){
if(isSystemDarkMode){
setDarkMode();
} else {
setLightMode();
}
} else if(currentTheme === "dark"){
setLightMode();
} else {
setDarkMode();
}
};
function setTheme(){
let currentTheme = document.body.getAttribute("theme")
let themeChangedManually = localStorage.getItem("themeChangedManually");

if(themeChangedManually !== "true"){
if(isSystemDarkMode){
setDarkMode();
} else {
setLightMode();
}
} else if(currentTheme === "dark"){
setLightMode();
} else {
setDarkMode();
}
};

function setDarkMode(){
document.body.setAttribute("theme" , "dark");
localStorage.setItem("theme" , "dark");
themeIcons.forEach((icon) => (
icon.src = icon.getAttribute("src-dark")
))
};
function setDarkMode(){
document.body.setAttribute("theme" , "dark");
localStorage.setItem("theme" , "dark");
themeIcons.forEach((icon) => (
icon.src = icon.getAttribute("src-dark")
))
};

function setLightMode(){
document.body.removeAttribute("theme");
localStorage.setItem("theme" , "light");
themeIcons.forEach((icon) => (
icon.src = icon.getAttribute("src-light")
))
};
function setLightMode(){
document.body.removeAttribute("theme");
localStorage.setItem("theme" , "light");
themeIcons.forEach((icon) => (
icon.src = icon.getAttribute("src-light")
))
};
31 changes: 25 additions & 6 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@
--primary-color-2: rgb(250, 250, 250);
--primary-color-3: rgb(181, 181, 181);
--background-color: rgb(255, 255, 255);
--secondary-color: rgb(0, 0, 0);
--secondary-color: rgb(45, 0, 95);
--secondary-color-2: rgb(33, 19, 39);
--button-background: rgb(53, 53, 53);
--button-text-hover: grey;
--button-border: rgb(73, 1, 97) 0.1rem solid;
--button-border: rgb(45, 0, 95) 0.1rem solid;
--button-border-2: rgb(255, 255, 255) 0.1rem solid;
--container-border: rgb(84, 0, 112);
--container-border: rgb(45, 0, 95);
--icon-inverted-color: #000000;
}

/* Dark Mode */
Expand All @@ -26,12 +27,13 @@
--primary-color-3: rgb(74, 74, 74);
--background-color: rgb(33, 33, 33);
--secondary-color: rgb(255, 255, 255);
--secondary-color-2: rgb(170, 170, 170);
--secondary-color-2: rgb(205, 205, 205);
--button-background: rgb(202, 202, 202);
--button-text-hover: lightgrey;
--button-border: rgb(58, 1, 105) 0.1rem solid;
--button-border: rgb(145, 50, 220) 0.1rem solid;
--button-border-2: rgb(0, 0, 0) 0.1rem solid;
--container-border: rgb(46, 2, 87);
--container-border: rgb(145, 50, 220);
--icon-inverted-color: #ffffff;
}

.wave {
Expand All @@ -54,6 +56,19 @@
100% { transform: rotate( 0.0deg) }
}

#splash-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(29, 29, 29);
display: flex;
justify-content: center;
align-items: center;
z-index: 5;
}

* {
margin: 0;
padding: 0;
Expand Down Expand Up @@ -283,6 +298,10 @@ section {

/* ICONS */

.icons{
color: var(--icon-inverted-color);
}

.icon {
cursor: pointer;
height: 2rem;
Expand Down

0 comments on commit 45bcca3

Please sign in to comment.