eRgo35/website
1
0
Fork 0
mirror of https://github.com/eRgo35/website.git synced 2026-02-04 05:26:11 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

theme improvements

Browse Source
This commit is contained in:
Michał Czyż
2023-05-18 23:20:52 +02:00
parent a55b85843f
commit e376d9c21f
4 changed files with 303 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -3,3 +3,8 @@
There's so much bloat that I'm just too lazy to update it all the time and migrate old code. There's so much bloat that I'm just too lazy to update it all the time and migrate old code.
This time I focus on simplicity. This time I focus on simplicity.
Deploy command cuz I'm forgetting all the time:
`sudo npm install -g firebase-tools`
`firebae login`
`firebase deploy --only hosting:mike-czyz-website`

57
public/index.html
View File

@@ -1,14 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="./assets/favicon.ico" /> <link rel="icon" href="./assets/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="Michael Czyż is a student and a frontend developer creating websites in many technologies and frameworks." /> <meta name="description"
content="Michael Czyż is a student and a frontend developer creating websites in many technologies and frameworks." />
<meta name="author" content="Michael Czyż" /> <meta name="author" content="Michael Czyż" />
<meta name="copyright" content="Michael Czyż, 2023 All Rights Reserved" /> <meta name="copyright" content="Michael Czyż, 2023 All Rights Reserved" />
<meta name="keywords" lang="en" content="Michał Czyż, Michael Czyż, Mike Czyż, tsi, developer, crypto, web, angular, react, javascript" /> <meta name="keywords" lang="en"
content="Michał Czyż, Michael Czyż, Mike Czyż, tsi, developer, crypto, web, angular, react, javascript" />
<meta name="date" content="" /> <meta name="date" content="" />
<meta name="page-topic" content="" /> <meta name="page-topic" content="" />
@@ -18,7 +21,8 @@
<meta property="og:title" content="Michael Czyż" /> <meta property="og:title" content="Michael Czyż" />
<meta property="og:site_name" content="Michael Czyż" /> <meta property="og:site_name" content="Michael Czyż" />
<meta property="og:locale" content="en_US" /> <meta property="og:locale" content="en_US" />
<meta property="og:description" content="Michael Czyż is a student and a frontend developer creating websites in many technologies and frameworks." /> <meta property="og:description"
content="Michael Czyż is a student and a frontend developer creating websites in many technologies and frameworks." />
<meta property="og:image" content="./assets/card.png" /> <meta property="og:image" content="./assets/card.png" />
<!--Twitter card metadata--> <!--Twitter card metadata-->
@@ -26,7 +30,8 @@
<meta name="twitter:site" content="@Mike_Czyz_" /> <meta name="twitter:site" content="@Mike_Czyz_" />
<meta name="twitter:creator" content="@Mike_Czyz_" /> <meta name="twitter:creator" content="@Mike_Czyz_" />
<meta name="twitter:title" content="Michael Czyż" /> <meta name="twitter:title" content="Michael Czyż" />
<meta name="twitter:description" content="Michael Czyż is a student and a frontend developer creating websites in many technologies and frameworks." /> <meta name="twitter:description"
content="Michael Czyż is a student and a frontend developer creating websites in many technologies and frameworks." />
<meta name="twitter:image" content="./assets/card.png"> <meta name="twitter:image" content="./assets/card.png">
<link rel="apple-touch-icon" href="./assets/logo192.png" /> <link rel="apple-touch-icon" href="./assets/logo192.png" />
@@ -35,24 +40,31 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<script src="main.js" defer></script>
<title>Michael Czyż</title> <title>Michael Czyż</title>
</head> </head>
<body> <body>
<div class="page"> <div class="page">
<h1>Hi, I'm Mike 👋🏻 👨🏻‍💻</h1> <h1 class="header">
Hi, I'm Mike 👋🏻 👨🏻‍💻
</h1>
<div class="bio"> <div class="bio">
<div> <p>I'm a student and a frontend developer creating websites in many technologies and frameworks. I also want to
<p>I'm a student and a frontend developer creating websites in many technologies and frameworks. I also want to get closer to the metal 🔨 so I create software in C++, C# and Python. Electron is terrifying me ⚛.</p> get closer to the metal 🔨 so I create software in C++, C# and Python. Electron is terrifying me ⚛.</p>
<p>I built a <a href="https://github.com/eRgo35/Project-TSI">Web App</a> using Angular Material framework, a simple <a href="https://github.com/eRgo35/Server-Manager">Server Manager</a> program for Windows and much more! I'm also a co-author of a Discord <a href="https://github.com/HiveMindStudios/MelvinJS">multipurpose bot</a> written in JavaScript.</p> <p>I built a <a href="https://github.com/eRgo35/Project-TSI">Web App</a> using Angular Material framework, a
<p>I'm having a lot of fun with the latest technologies, mainly Cryptocurrencies 💰 and Artificial Inteligence 👁️.</p> simple <a href="https://github.com/eRgo35/Server-Manager">Server Manager</a> program for Windows and much
</div> more! I'm also a co-author of a Discord <a href="https://github.com/HiveMindStudios/MelvinJS">multipurpose
<img src="assets/mike-czyz.webp" class="avatar" width="2.5in" height="2.5in"/> bot</a> written in JavaScript.</p>
<p>I'm having a lot of fun with the latest technologies, mainly Cryptocurrencies 💰 and Artificial Inteligence
👁️.</p>
</div> </div>
<div class="world">
<h2>Find Mike around the web 🌎:</h2> <h2>Find Mike around the web 🌎:</h2>
<ul> <ul>
<li>take a look at my <a href="https://github.com/eRgo35">GitHub</a> 🐙</li> <li>take a look at my <a href="https://github.com/eRgo35">GitHub</a> 🐙</li>
@@ -61,9 +73,22 @@
<li>and follow my <a href="https://twitter.com/Mike_Czyz_">Twitter</a> 🐦</li> <li>and follow my <a href="https://twitter.com/Mike_Czyz_">Twitter</a> 🐦</li>
</ul> </ul>
<p>Psst! You can also take a look at my <a href="https://github.com/eRgo35/dots">dotfiles</a> and find my latest rice 🍚.</p> <p>Psst! You can also take a look at my <a href="https://github.com/eRgo35/dots">dotfiles</a><br /> and find my
latest
rice 🍚.</p>
<p>[📎 <a href="assets/resume.pdf"">resume</a>] [📧 <a href=" mailto:mike@czyz.icu?subject=Hi">contact</a>]</p> <p>[📎 <a href="assets/resume.pdf"">resume</a>] [📧 <a href=" mailto:mike@czyz.icu?subject=Hi">contact</a>]</p>
</div>
<div class="aside">
<div class="avatar-wrapper">
<img src="assets/mike-czyz.webp" class="avatar" width="2.5in" height="2.5in" />
<div class="theme">
<i class="material-icons">&#xe51c</i>
<span class="theme-text">Dark Mode</span>
</div>
</div>
</div>
<div class="footer"> <div class="footer">
<div class="copyright"> <div class="copyright">
@@ -80,10 +105,6 @@
</div> </div>
</div> </div>
</div> </div>
<script>
window.onload = () => {
document.querySelector("#year").innerHTML = new Date().getFullYear();
};
</script>
</body> </body>
</html> </html>

50
public/main.js Normal file
View File

@@ -0,0 +1,50 @@
const root = document.documentElement;
const themeText = document.querySelector('.theme-text');
const themeIcon = document.querySelector('.material-icons');
const isDarkMode = () => root.classList.contains('dark');
const setDarkMode = () => {
root.classList.add('dark');
themeText.textContent = 'Dark Mode';
themeIcon.innerHTML = '&#xe51c';
};
const setLightMode = () => {
root.classList.remove('dark');
themeText.textContent = 'Light Mode';
themeIcon.innerHTML = '&#xe518';
};
const toggleTheme = () => {
if (isDarkMode()) {
setLightMode();
localStorage.setItem('preferredTheme', 'light');
} else {
setDarkMode();
localStorage.setItem('preferredTheme', 'dark');
}
};
const checkPreferredTheme = () => {
const preferredTheme = localStorage.getItem('preferredTheme');
if (preferredTheme === 'dark') {
setDarkMode();
} else if (preferredTheme === 'light') {
setLightMode();
} else {
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (prefersDarkScheme) {
setDarkMode();
} else {
setLightMode();
}
}
};
document.querySelector("#year").innerHTML = new Date().getFullYear();
checkPreferredTheme();
const themeButton = document.querySelector('.theme');
themeButton.addEventListener('click', toggleTheme);

170
public/styles.css
View File

@@ -1,7 +1,70 @@
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
* {
transition: background-color 0.2s ease-in-out;
}
html {
--rosewater: #dc8a78;
--flamingo: #dd7878;
--pink: #ea76cb;
--mauve: #8839ef;
--red: #d20f39;
--maroon: #e64553;
--peach: #fe640b;
--yellow: #df8e1d;
--green: #40a02b;
--teal: #179299;
--sky: #04a5e5;
--sapphire: #209fb5;
--blue: #1e66f5;
--lavender: #7287fd;
--text: #434f69;
--subtext1: #5c5f77;
--subtext0: #6c6f85;
--overlay2: #7c7f93;
--overlay1: #8c8fa1;
--overlay0: #9ca0b0;
--surface2: #acb0be;
--surface1: #bcc0cc;
--surface0: #ccd0da;
--base: #eff1f5;
--mantle: #e6e9ef;
--crust: #dce0e8;
}
.dark {
--rosewater: #f4dbd6;
--flamingo: #f0c6c6;
--pink: #f5bde6;
--mauve: #c6a0f6;
--red: #ed8796;
--maroon: #ee99a0;
--peach: #f5a97f;
--yellow: #eed49f;
--green: #a6da95;
--teal: #8bd5ca;
--sky: #91d7e3;
--sapphire: #7dc4e4;
--blue: #8aadf4;
--lavender: #b7bdf8;
--text: #cad3f5;
--subtext1: #b8c0e0;
--subtext0: #a5adcb;
--overlay2: #939ab7;
--overlay1: #8087a2;
--overlay0: #6e738d;
--surface2: #5b6078;
--surface1: #494d64;
--surface0: #363a4f;
--base: #24273a;
--mantle: #1e2030;
--crust: #181926;
}
::selection { ::selection {
background-color: #6e738d; background-color: var(--overlay0);
} }
@keyframes fadein { @keyframes fadein {
@@ -9,17 +72,19 @@
opacity: 0; opacity: 0;
transform: scale(97.5%); transform: scale(97.5%);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: scale(100%); transform: scale(100%);
} }
} }
html, body { html,
body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
background-color: #24273a; background-color: var(--base);
color: #cad3f5; color: var(--text);
display: grid; display: grid;
place-items: center; place-items: center;
font-family: 'Schibsted Grotesk', sans-serif; font-family: 'Schibsted Grotesk', sans-serif;
@@ -30,30 +95,62 @@ html, body {
box-sizing: border-box; box-sizing: border-box;
width: 8.5in; width: 8.5in;
height: 11in; height: 11in;
background-color: #363a4f; background-color: var(--surface0);
padding: 0.5in; padding: 0.5in;
position: relative; position: relative;
animation: 0.4s ease-out 0s 1 fadein; animation: 0.4s ease-out 0s 1 fadein;
display: grid;
grid-template-columns: 1fr 2.5in;
grid-template-rows: 0.85in 0.2fr 0.4fr auto;
gap: 0px 0px;
grid-template-areas:
"header header"
"bio aside"
"world aside"
"footer footer";
} }
a { a {
color: #7dc4e4; color: var(--sapphire);
transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out; transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out;
text-decoration: none; text-decoration: none;
} }
a:hover, a:active, a:focus { a:hover,
color: #8aadf4; a:active,
a:focus {
color: var(--blue);
text-decoration: underline; text-decoration: underline;
} }
.header {
grid-area: header;
}
.bio {
grid-area: bio;
padding: 0 0.5in 0 0;
text-align: justify;
}
.world {
grid-area: world;
}
.aside {
grid-area: aside;
display: flex;
flex-direction: column;
justify-content: top;
align-items: center;
}
.footer { .footer {
position: absolute; grid-area: footer;
bottom: 0.5in;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
column-gap: 0.5in; column-gap: 0.5in;
width: calc(100% - 1in); align-self: end;
} }
.copyright { .copyright {
@@ -64,13 +161,6 @@ a:hover, a:active, a:focus {
text-align: right; text-align: right;
} }
.bio {
text-align: justify;
display: grid;
grid-template-columns: 1fr 2.5in;
column-gap: 0.5in;
}
.avatar { .avatar {
width: 2.5in; width: 2.5in;
height: 2.5in; height: 2.5in;
@@ -78,17 +168,56 @@ a:hover, a:active, a:focus {
pointer-events: none; pointer-events: none;
} }
.pgp-key:hover, .gpg-key:active, .gpg-key:focus { .avatar-wrapper {
position: relative;
}
.theme {
position: absolute;
bottom: 0.125in;
right: 0.125in;
background-color: var(--surface1);
border: 1px solid var(--overlay0);
border-radius: 10in;
margin: 0.125in 0 0;
padding: 0.125in;
max-width: 0.25in;
height: 0.25in;
cursor: pointer;
transition: max-width 0.5s ease;
overflow: hidden;
display: inline-flex;
align-items: center;
}
.theme:hover {
max-width: 2.5in;
}
.material-icons {
font-family: "Material Icons";
}
.theme-text {
white-space: nowrap;
padding: 0 0.125in;
}
.pgp-key:hover,
.gpg-key:active,
.gpg-key:focus {
text-decoration: none; text-decoration: none;
transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out; transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out;
} }
.pgp-key:hover span, .gpg-key:active span, .gpg-key:focus span { .pgp-key:hover span,
.gpg-key:active span,
.gpg-key:focus span {
text-decoration: underline; text-decoration: underline;
transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out; transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out;
} }
@media only screen and (min-width: 768px) and (max-width: 900px) { @media only screen and (min-width: 768px) and (max-width: 900px) {
/* tablets and desktop */ /* tablets and desktop */
.page { .page {
width: 100%; width: 100%;
@@ -115,6 +244,7 @@ a:hover, a:active, a:focus {
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
/* phones */ /* phones */
.page { .page {
width: 100%; width: 100%;