Merge pull request #1 from SowinskiBraeden/main

update projects page
This commit is contained in:
SowinskiBraeden authored and GitHub committed 2025-01-21 20:58:25 -08:00
commit fc2c720f01
6 files changed
+490 -520

No files matched your search

+64 -68
View File
@@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang='en'>
<head>
<head>
<title>Braeden Sowinski</title> <title>Braeden Sowinski</title>
<meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" /> <meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" />
<meta name='author' content="Braeden Sowinski" /> <meta name='author' content="Braeden Sowinski" />
@@ -9,29 +10,33 @@
<!-- Load CSS --> <!-- Load CSS -->
<link rel="stylesheet" href="./public/css/style.css"> <link rel="stylesheet" href="./public/css/style.css">
</head> </head>
<body class="js-stop-transition">
<body class="js-stop-transition">
<header class=header> <header class=header>
<nav class=nav> <nav class=nav>
<div class=logo> <div class=logo>
<a href="/" title="McDazzzled (Alt + H)"> <a href="/" title="McDazzzled (Alt + H)">
<img src="https://avatars.githubusercontent.com/u/48144618?v=4" alt=logo style="border-radius:50%;" aria-label=logo height=32>McDazzzled <img src="https://avatars.githubusercontent.com/u/48144618?v=4" alt=logo style="border-radius:50%;"
aria-label=logo height=32>McDazzzled
</a> </a>
<span class="logo-switches"> <span class="logo-switches">
<button id=theme-toggle accesskey=t title="(Alt + T)"> <button id=theme-toggle accesskey=t title="(Alt + T)">
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/> stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg> </svg>
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
<circle cx="12" cy="12" r="5"/> stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="1" x2="12" y2="3"/> <circle cx="12" cy="12" r="5" />
<line x1="12" y1="21" x2="12" y2="23"/> <line x1="12" y1="1" x2="12" y2="3" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/> <line x1="12" y1="21" x2="12" y2="23" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="1" y1="12" x2="3" y2="12"/> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="21" y1="12" x2="23" y2="12"/> <line x1="1" y1="12" x2="3" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/> <line x1="21" y1="12" x2="23" y2="12" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg> </svg>
</button> </button>
</span> </span>
@@ -78,63 +83,45 @@
<h1 id="about-me">About Me</h1> <h1 id="about-me">About Me</h1>
<p class="text"> <p class="text">
Hello there, Hello there,
I am Braeden Sowinski, you may also know me by my pseudonym McDazzzled. I am an avid software developer; adaptable and driven with a I am Braeden Sowinski, you may also know me by my pseudonym McDazzzled. I am an avid software engineer, actively
strong work ethic, with the motivation to thrive in any setting, team-based or individually motivated. Aiming to set the bar high, pursuing a Diploma in Computer System Technologies at BCIT. I am adaptable and driven with a strong work ethic;
and leave good impressions to any employer. possessing the ability to thrive in both a team-based or individualy motivated setting.
I am ambitious to learn more in Software, IT, and System Administration, and am actively expanding my horizons. I am experienced in API I am eager to expand my knowledge in Software Engineering, IT, System Administration and related fields.
development, web applications serving hundreds of thousands of users, simple desktop applications and more. With the advanced knowledge Approaching more than 5 years of continuous learning and programming, I have learned many valuable languages and
of Python and the Node.js framework, intermediate knowledge with GoLang, and a basic understanding of C/C++ and Java. I can bring and frameworks such as C, Go, Node.js, and Python 3+. However, there is always more to learn and experience that I
expand on many skill sets you may desire. With my ability to learn quickly, and adapt to any work environment; I can be a valuable will accomplish by quickly adapting to a new setting.
asset to any team. I can also bring excellent IT support, with the ability to investigate and resolve computer issues within Windows
and Linux operating systems. With System Administration being a key part in my journey, I run and manage several Linux servers for
personal and or professional projects.
</p> </p>
<div class="skills">
<div class="skills">
<span> <span>
<img <img style="transform: translate(0, 8px);"
style="transform: translate(0, 8px);" src="https://img.shields.io/badge/python-black?style=for-the-badge&logo=python" width="24" height="24">
src="https://img.shields.io/badge/python-black?style=for-the-badge&logo=python"
width="24"
height="24"
>
Python Python
</span> </span>
<span> <span>
<img <img style="transform: translate(0, 8px);"
style="transform: translate(0, 8px);" src="https://img.shields.io/badge/javascript-black?style=for-the-badge&logo=javascript" width="24"
src="https://img.shields.io/badge/javascript-black?style=for-the-badge&logo=javascript" height="24">
width="24"
height="24"
>
Node.js Node.js
</span> </span>
<span> <span>
<img <img style="transform: translate(0, 8px);"
style="transform: translate(0, 8px);" src="https://img.shields.io/badge/go-black?style=for-the-badge&logo=go" width="24" height="24">
src="https://img.shields.io/badge/go-black?style=for-the-badge&logo=go"
width="24"
height="24"
>
Go Go
</span> </span>
<span> <span>
<img <img style="transform: translate(0, 8px);"
style="transform: translate(0, 8px);" src="https://img.shields.io/badge/mongodb-black?style=for-the-badge&logo=mongodb" width="24" height="24">
src="https://img.shields.io/badge/mongodb-black?style=for-the-badge&logo=mongodb"
width="24"
height="24"
>
MongoDB MongoDB
</span> </span>
<span> <span>
<img <img style="transform: translate(0, 8px);"
style="transform: translate(0, 8px);" src="https://img.shields.io/badge/git-black?style=for-the-badge&logo=git" width="24" height="24">
src="https://img.shields.io/badge/git-black?style=for-the-badge&logo=git"
width="24"
height="24"
>
Git Git
</span> </span>
</div> </div>
@@ -150,22 +137,31 @@
<!-- Change Theme Scripts --> <!-- Change Theme Scripts -->
<script type="text/javascript"> <script type="text/javascript">
document.getElementById("theme-toggle").addEventListener("click", () => { document.getElementById("theme-toggle").addEventListener("click", () => {
document.body.className.includes("dark")?(document.body.classList.remove('dark'), document.body.className.includes("light") ? (
localStorage.setItem("pref-theme",'light')):(document.body.classList.add('dark'), document.body.classList.remove('light'),
localStorage.setItem("pref-theme",'dark')), localStorage.setItem("pref-theme",'dark')
"dark"==sessionStorage.getItem("theme")?sessionStorage.setItem("theme","light"):sessionStorage.setItem("theme","dark"); ) : (
document.body.classList.add('light'),
localStorage.setItem("pref-theme",'light')
),
"dark" == sessionStorage.getItem("theme") ? sessionStorage.setItem("theme", "light") : sessionStorage.setItem("theme", "dark");
}); });
</script> </script>
<script> <script>
// If storage is supported set theme to dark by default // If storage is supported set theme to light by default
if (typeof(Storage) !== "undefined") { if (typeof(Storage) !== "undefined") {
if (sessionStorage.getItem("theme")==null||sessionStorage.getItem("theme")==undefined) sessionStorage.setItem("theme", "dark"); if (sessionStorage.getItem("theme") == null || sessionStorage.getItem("theme") == undefined) sessionStorage.setItem("theme", "dark");
if (sessionStorage.getItem("theme")=='light') { if (sessionStorage.getItem("theme") == 'dark') {
document.body.className.includes("dark")?(document.body.classList.remove('dark'), document.body.className.includes("dark") ? (
localStorage.setItem("pref-theme",'light')):(document.body.classList.add('dark'), document.body.classList.remove('dark'),
localStorage.setItem("pref-theme",'dark')); localStorage.setItem("pref-theme",'light')
) : (
document.body.classList.add('dark'),
localStorage.setItem("pref-theme",'dark')
);
} }
} }
</script> </script>
</body> </body>
</html> </html>
+66 -53
View File
@@ -1,8 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" lang='en'>
xmlns:fb="http://ogp.me/ns/fb#"
lang='en'> <head>
<head>
<title>Braeden Sowinski</title> <title>Braeden Sowinski</title>
<meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" /> <meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" />
<meta name='author' content="Braeden Sowinski" /> <meta name='author' content="Braeden Sowinski" />
@@ -11,29 +10,33 @@
<!-- Load CSS --> <!-- Load CSS -->
<link rel="stylesheet" href="./public/css/style.css"> <link rel="stylesheet" href="./public/css/style.css">
</head> </head>
<body class="js-stop-transition">
<body class="js-stop-transition">
<header class=header> <header class=header>
<nav class=nav> <nav class=nav>
<div class=logo> <div class=logo>
<a href="/" title="McDazzzled (Alt + H)"> <a href="/" title="McDazzzled">
<img src="https://avatars.githubusercontent.com/u/48144618?v=4" alt=logo style="border-radius:50%;" aria-label=logo height=32>McDazzzled <img src="https://avatars.githubusercontent.com/u/48144618?v=4" alt=logo style="border-radius:50%;"
aria-label=logo height=32>McDazzzled
</a> </a>
<span class="logo-switches"> <span class="logo-switches">
<button id=theme-toggle accesskey=t title="(Alt + T)"> <button id=theme-toggle accesskey=t title="(Alt + T)">
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/> stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg> </svg>
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
<circle cx="12" cy="12" r="5"/> stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="1" x2="12" y2="3"/> <circle cx="12" cy="12" r="5" />
<line x1="12" y1="21" x2="12" y2="23"/> <line x1="12" y1="1" x2="12" y2="3" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/> <line x1="12" y1="21" x2="12" y2="23" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="1" y1="12" x2="3" y2="12"/> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="21" y1="12" x2="23" y2="12"/> <line x1="1" y1="12" x2="3" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/> <line x1="21" y1="12" x2="23" y2="12" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg> </svg>
</button> </button>
</span> </span>
@@ -62,50 +65,51 @@
<div id="mobile__menu" class="overlay"> <div id="mobile__menu" class="overlay">
<a class="close">&times;</a> <a class="close">&times;</a>
<div class="overlay__content"> <div class="overlay__content">
<a href="/" title="Home"> <a href="/" title="Home"><span class="active">Home</span></a>
<span class="active">Home</span> <a href="/about" title="about"><span class="active">About</span></a>
</a> <a href="/projects" title="projects"><span class="active">Projects</span></a>
<a href="/about" title="about">
<span class="active">About</span>
</a>
<a href="/projects" title="projects">
<span class="active">Projects</span>
</a>
</div> </div>
</header> </header>
<!-- Main Body / Welcome Section --> <!-- Main Body -->
<div class="main"> <div class="main">
<img src="https://avatars.githubusercontent.com/u/48144618" class="profile"> <img src="https://avatars.githubusercontent.com/u/48144618" class="profile">
<div id="main-wrapper" class="svg-wrapper"> <div id="main-wrapper" class="svg-wrapper">
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0"class="shape" height="60" width="320"/> <rect x="0" y="0" class="shape" height="60" width="320" />
<h2 style="margin-top: 2px;" class="name">Braeden Sowinski</h2> <h2 style="margin-top: 2px;" class="name">Braeden Sowinski</h2>
</svg> </svg>
</div> </div>
<h2 style="margin-top: 2px;" class="mobile-name">Braeden Sowinski</h2> <h2 style="margin-top: 2px;" class="mobile-name">Braeden Sowinski</h2>
<span class="des">Software Engineer & System Administrator</span> <span class="des">Software Engineer & System Administrator</span>
<div class="social-icons"> <div class="social-icons">
<a class="icon" href= https://discord.gg/YCXhvy9uZw target=_blank rel="noopener noreferrer me" title=Discord> <a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me"
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16"> title=LinkedIn>
<path d="M6.552 6.712c-.456 0-.816.4-.816.888s.368.888.816.888c.456 0 .816-.4.816-.888.008-.488-.36-.888-.816-.888zm2.92 0c-.456 0-.816.4-.816.888s.368.888.816.888c.456 0 .816-.4.816-.888s-.36-.888-.816-.888z"/> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
<path d="M13.36 0H2.64C1.736 0 1 .736 1 1.648v10.816c0 .912.736 1.648 1.64 1.648h9.072l-.424-1.48 1.024.952.968.896L15 16V1.648C15 .736 14.264 0 13.36 0zm-3.088 10.448s-.288-.344-.528-.648c1.048-.296 1.448-.952 1.448-.952-.328.216-.64.368-.92.472-.4.168-.784.28-1.16.344a5.604 5.604 0 0 1-2.072-.008 6.716 6.716 0 0 1-1.176-.344 4.688 4.688 0 0 1-.584-.272c-.024-.016-.048-.024-.072-.04-.016-.008-.024-.016-.032-.024-.144-.08-.224-.136-.224-.136s.384.64 1.4.944c-.24.304-.536.664-.536.664-1.768-.056-2.44-1.216-2.44-1.216 0-2.576 1.152-4.664 1.152-4.664 1.152-.864 2.248-.84 2.248-.84l.08.096c-1.44.416-2.104 1.048-2.104 1.048s.176-.096.472-.232c.856-.376 1.536-.48 1.816-.504.048-.008.088-.016.136-.016a6.521 6.521 0 0 1 4.024.752s-.632-.6-1.992-1.016l.112-.128s1.096-.024 2.248.84c0 0 1.152 2.088 1.152 4.664 0 0-.68 1.16-2.448 1.216z"/> viewBox="0 0 16 16">
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg> </svg>
</a> </a>
<a class="icon" href=https://github.com/SowinskiBraeden target=_blank rel="noopener noreferrer me" title=Github> <a class="icon" href=https://github.com/SowinskiBraeden target=_blank rel="noopener noreferrer me" title=Github>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2"
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/> stroke-linecap="round" stroke-linejoin="round">
<path
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22" />
</svg> </svg>
</a> </a>
<a class="icon" href=https://twitter.com/braedensowinski target=_blank rel="noopener noreferrer me" title=Twitter> <a class="icon" href=https://twitter.com/braedensowinski target=_blank rel="noopener noreferrer me" title=Twitter>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2"
<path d="M23 3a10.9 10.9.0 01-3.14 1.53 4.48 4.48.0 00-7.86 3v1A10.66 10.66.0 013 4s-4 9 5 13a11.64 11.64.0 01-7 2c9 5 20 0 20-11.5a4.5 4.5.0 00-.08-.83A7.72 7.72.0 0023 3z"/> stroke-linecap="round" stroke-linejoin="round">
<path
d="M23 3a10.9 10.9.0 01-3.14 1.53 4.48 4.48.0 00-7.86 3v1A10.66 10.66.0 013 4s-4 9 5 13a11.64 11.64.0 01-7 2c9 5 20 0 20-11.5a4.5 4.5.0 00-.08-.83A7.72 7.72.0 0023 3z" />
</svg> </svg>
</a> </a>
<a class="icon" href="mailto:braeden@sowinski.dev" target=_blank rel="noopener noreferrer me" title=Email> <a class="icon" href="mailto:braeden@sowinski.dev" target=_blank rel="noopener noreferrer me" title=Email>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2"
<path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/> stroke-linecap="round" stroke-linejoin="round">
<polyline points="22,6 12,13 2,6"/> <path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
<polyline points="22,6 12,13 2,6" />
</svg> </svg>
</a> </a>
</div> </div>
@@ -119,22 +123,31 @@
<!-- Change Theme Scripts --> <!-- Change Theme Scripts -->
<script type="text/javascript"> <script type="text/javascript">
document.getElementById("theme-toggle").addEventListener("click", () => { document.getElementById("theme-toggle").addEventListener("click", () => {
document.body.className.includes("dark")?(document.body.classList.remove('dark'), document.body.className.includes("light") ? (
localStorage.setItem("pref-theme",'light')):(document.body.classList.add('dark'), document.body.classList.remove('light'),
localStorage.setItem("pref-theme",'dark')), localStorage.setItem("pref-theme",'dark')
"dark"==sessionStorage.getItem("theme")?sessionStorage.setItem("theme","light"):sessionStorage.setItem("theme","dark"); ) : (
document.body.classList.add('light'),
localStorage.setItem("pref-theme",'light')
),
"dark" == sessionStorage.getItem("theme") ? sessionStorage.setItem("theme", "light") : sessionStorage.setItem("theme", "dark");
}); });
</script> </script>
<script> <script>
// If storage is supported set theme to dark by default // If storage is supported set theme to light by default
if (typeof(Storage) !== "undefined") { if (typeof(Storage) !== "undefined") {
if (sessionStorage.getItem("theme")==null||sessionStorage.getItem("theme")==undefined) sessionStorage.setItem("theme", "dark"); if (sessionStorage.getItem("theme") == null || sessionStorage.getItem("theme") == undefined) sessionStorage.setItem("theme", "dark");
if (sessionStorage.getItem("theme")=='light') { if (sessionStorage.getItem("theme") == 'dark') {
document.body.className.includes("dark")?(document.body.classList.remove('dark'), document.body.className.includes("dark") ? (
localStorage.setItem("pref-theme",'light')):(document.body.classList.add('dark'), document.body.classList.remove('dark'),
localStorage.setItem("pref-theme",'dark')); localStorage.setItem("pref-theme",'light')
) : (
document.body.classList.add('dark'),
localStorage.setItem("pref-theme",'dark')
);
} }
} }
</script> </script>
</body> </body>
</html> </html>
+88 -64
View File
@@ -1,8 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" lang='en'>
xmlns:fb="http://ogp.me/ns/fb#"
lang='en'> <head>
<head>
<title>Braeden Sowinski</title> <title>Braeden Sowinski</title>
<meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" /> <meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" />
<meta name='author' content="Braeden Sowinski" /> <meta name='author' content="Braeden Sowinski" />
@@ -11,29 +10,34 @@
<!-- Load CSS --> <!-- Load CSS -->
<link rel="stylesheet" href="./public/css/style.css"> <link rel="stylesheet" href="./public/css/style.css">
</head> <link rel="stylesheet" href="./public/css/projects.css">
<body class="js-stop-transition"> </head>
<body class="js-stop-transition">
<header class=header> <header class=header>
<nav class=nav> <nav class=nav>
<div class=logo> <div class=logo>
<a href="/" title="McDazzzled (Alt + H)"> <a href="/" title="McDazzzled (Alt + H)">
<img src="https://avatars.githubusercontent.com/u/48144618?v=4" alt=logo style="border-radius:50%;" aria-label=logo height=32>McDazzzled <img src="https://avatars.githubusercontent.com/u/48144618?v=4" alt=logo style="border-radius:50%;"
aria-label=logo height=32>McDazzzled
</a> </a>
<span class="logo-switches"> <span class="logo-switches">
<button id=theme-toggle accesskey=t title="(Alt + T)"> <button id=theme-toggle accesskey=t title="(Alt + T)">
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/> stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg> </svg>
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
<circle cx="12" cy="12" r="5"/> stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="1" x2="12" y2="3"/> <circle cx="12" cy="12" r="5" />
<line x1="12" y1="21" x2="12" y2="23"/> <line x1="12" y1="1" x2="12" y2="3" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/> <line x1="12" y1="21" x2="12" y2="23" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="1" y1="12" x2="3" y2="12"/> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="21" y1="12" x2="23" y2="12"/> <line x1="1" y1="12" x2="3" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/> <line x1="21" y1="12" x2="23" y2="12" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg> </svg>
</button> </button>
</span> </span>
@@ -79,8 +83,11 @@
<div class="card"> <div class="card">
<div class="box"> <div class="box">
<div class="content"> <div class="content">
<div class="content-head">
<h2>01</h2> <h2>01</h2>
<h3>Schedule Generator App</h3> <h3>Schedule Generator App</h3>
</div>
<div class="content-body">
<p> <p>
A desktop application to interact with my schedule generator algorithm. A desktop application to interact with my schedule generator algorithm.
The algorithm is written in Python and generates master and student timetables. The algorithm is written in Python and generates master and student timetables.
@@ -90,12 +97,16 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="box"> <div class="box">
<div class="content"> <div class="content">
<div class="content-head">
<h2>02</h2> <h2>02</h2>
<h3>School Management API</h3> <h3>School Management API</h3>
</div>
<div class="content-body">
<p> <p>
I have developed an API to manage an entire school, keeping track of students and staff I have developed an API to manage an entire school, keeping track of students and staff
details. With the potential to be expanded upon more, I have yet to find the time to details. With the potential to be expanded upon more, I have yet to find the time to
@@ -106,59 +117,38 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="box"> <div class="box">
<div class="content"> <div class="content">
<div class="content-head">
<h2>03</h2> <h2>03</h2>
<h3>Lines Police CAD</h3> <h3>Lines Police CAD</h3>
</div>
<div class="content-body">
<p> <p>
<strong style="color:#eb5234;">Lines Police CAD</strong> is a website service built with <strong style="color:#eb5234;">Lines Police CAD</strong> is a website service built with
Node.js utilizing Express.js and the MongoDB frameworks. With over half a million users, I Node.js utilizing Express.js and the MongoDB frameworks. With over half a million users, I
have contributed new features, bug fixes as well as serving general tech support.</p> have contributed new features, bug fixes as well as serving general tech support.
</p>
<div id="links">
<a href="https://www.linespolice-cad.com/" target="_blank">View LPC</a> <a href="https://www.linespolice-cad.com/" target="_blank">View LPC</a>
<a href="https://github.com/LinesMerrill/police-cad" target="_blank">Github</a> <a href="https://github.com/LinesMerrill/police-cad" target="_blank">Github</a>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="card"> <div class="card">
<div class="box"> <div class="box">
<div class="content"> <div class="content">
<div class="content-head">
<h2>04</h2> <h2>04</h2>
<h3>LPC Discord Bot</h3>
<p>
I have a verified Discord Bot, I took the initiative to develop Discord integration
for the Lines Police CAD website. Allowing users to quickly access key web features
within their personal Discord servers. This project that I have led on my own is
actively serving in over 2 thousand discord servers.
</p>
<a href="https://github.com/SowinskiBraeden/police-cad-bot" target="_blank">Github</a>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>05</h2>
<h3>XP-System</h3>
<p>
An old programming project that introduced me into the valuable world of web applications.
The XP-System was a way for teachers to create assignments for students, and for students
to gain XP from completing assignments, unlocking levels to make the learning experience
more fun and interactive with their peers.
</p>
<a href="https://github.com/SowinskiBraeden/XP-System" target="_blank">Github</a>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>06</h2>
<h3>DayZ Reforger Bot</h3> <h3>DayZ Reforger Bot</h3>
</div>
<div class="content-body">
<p> <p>
Another Discord bot I have developed for a game, greatly displays my ability to work on Another Discord bot I have developed for a game, greatly displays my ability to work on
large scale projects, with modularity, and expandability in mind. This project focuses large scale projects, with modularity, and expandability in mind. This project focuses
@@ -169,12 +159,36 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="card"> <div class="card">
<div class="box"> <div class="box">
<div class="content"> <div class="content">
<h2>07</h2> <div class="content-head">
<h2>05</h2>
<h3>XP-System</h3>
</div>
<div class="content-body">
<p>
An old programming project that introduced me into the valuable world of web applications.
The XP-System was a way for teachers to create assignments for students, and for students
to gain XP from completing assignments, unlocking levels to make the learning experience
more fun and interactive with their peers.
</p>
<a href="https://github.com/SowinskiBraeden/XP-System" target="_blank">Github</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<div class="content-head">
<h2>06</h2>
<h3>Portfolio</h3> <h3>Portfolio</h3>
</div>
<div class="content-body">
<p> <p>
I am not a huge fan of UI design, but I am a fan of minimalistic design, and this portfolio I am not a huge fan of UI design, but I am a fan of minimalistic design, and this portfolio
is just that. Simple, minimalistic, and sleek for the eye. Displaying my projects and sharing is just that. Simple, minimalistic, and sleek for the eye. Displaying my projects and sharing
@@ -184,6 +198,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</section> </section>
@@ -197,22 +212,31 @@
<!-- Change Theme Scripts --> <!-- Change Theme Scripts -->
<script type="text/javascript"> <script type="text/javascript">
document.getElementById("theme-toggle").addEventListener("click", () => { document.getElementById("theme-toggle").addEventListener("click", () => {
document.body.className.includes("dark")?(document.body.classList.remove('dark'), document.body.className.includes("light") ? (
localStorage.setItem("pref-theme",'light')):(document.body.classList.add('dark'), document.body.classList.remove('light'),
localStorage.setItem("pref-theme",'dark')), localStorage.setItem("pref-theme",'dark')
"dark"==sessionStorage.getItem("theme")?sessionStorage.setItem("theme","light"):sessionStorage.setItem("theme","dark"); ) : (
document.body.classList.add('light'),
localStorage.setItem("pref-theme",'light')
),
"dark" == sessionStorage.getItem("theme") ? sessionStorage.setItem("theme", "light") : sessionStorage.setItem("theme", "dark");
}); });
</script> </script>
<script> <script>
// If storage is supported set theme to dark by default // If storage is supported set theme to light by default
if (typeof(Storage) !== "undefined") { if (typeof(Storage) !== "undefined") {
if (sessionStorage.getItem("theme")==null||sessionStorage.getItem("theme")==undefined) sessionStorage.setItem("theme", "dark"); if (sessionStorage.getItem("theme") == null || sessionStorage.getItem("theme") == undefined) sessionStorage.setItem("theme", "dark");
if (sessionStorage.getItem("theme")=='light') { if (sessionStorage.getItem("theme") == 'dark') {
document.body.className.includes("dark")?(document.body.classList.remove('dark'), document.body.className.includes("dark") ? (
localStorage.setItem("pref-theme",'light')):(document.body.classList.add('dark'), document.body.classList.remove('dark'),
localStorage.setItem("pref-theme",'dark')); localStorage.setItem("pref-theme",'light')
) : (
document.body.classList.add('dark'),
localStorage.setItem("pref-theme",'dark')
);
} }
} }
</script> </script>
</body> </body>
</html> </html>
View File
Whitespace-only changes.
+119
View File
@@ -0,0 +1,119 @@
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jersey+15&family=Sixtyfour+Convergence&display=swap');
.container {
margin-top: 2%;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.card {
transition: 0.8s;
width: 54vh;
height: auto;
margin: 30px;
padding: 20px;
background-color: var(--menu-text-bg);
border-radius: 24px;
display: flex;
}
.box {
transition: 0.8s;
background-color: var(--theme);
border-radius: 12px;
padding-top: 12px;
padding-left: 12px;
padding-right: 12px;
}
.content {
transition: 0.8s;
margin-left: 18px;
margin-right: 18px;
align-items: stretch;
}
.content h2 {
transition: 0.8s;
font-size: 275%;
margin-top: 5px;
font-family: "Sixtyfour Convergence", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"BLED" 0,
"SCAN" 0,
"XELA" 0,
"YELA" 0;
margin-bottom: 0px;
text-shadow: 1px 1px 2px red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
min-width: 2.75cm;
}
.content h3 {
font-size: 150%;
font-family: "Jersey 15", serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
margin-top: 20px;
margin-left: 0.75cm;
}
.content p {
transition: 0.8s;
font-size: 18px;
line-height: 1.6;
word-break: break-word;
background: var(--theme);
font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Oxygen, Ubuntu, Cantarell, open sans, helvetica neue, sans-serif;
}
.content a {
background-color: var(--secondary);
padding: 8px;
border-radius: 8px;
position: relative;
box-shadow: 1px 1px 2px red, 0 0 1em var(--accent), 0 0 0.2em var(--secondary);
margin-bottom: 15px;
}
.content-head {
display: flex;
flex-direction: row;
}
.content-body {
display: flex;
flex-direction: column;
flex: 1;
}
.content-body p {
min-height: 5cm;
}
.content-body a {
margin-bottom: 15px;
text-align: center;
max-width: 100px;
}
.content-body #links {
display: flex;
justify-content: space-around;
}
#links a {
margin-bottom: 15px;
text-align: center;
width: 100px;
}
/* prevents it changing color */
.content-body a:hover {
color: var(--primary);
}
+153 -335
View File
@@ -1,4 +1,6 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap");
/* root is dark theme */
:root { :root {
--theme: #1d1e20; --theme: #1d1e20;
--primary: #d8d8d9; --primary: #d8d8d9;
@@ -9,65 +11,51 @@
--menu-text-bg: #303030; --menu-text-bg: #303030;
--not-found: #030005; --not-found: #030005;
} }
/*
:root is dark theme and .light {
.dark is actually the light theme
Im just too lazy to rename it
*/
.dark{
--theme: #d8d8d9; --theme: #d8d8d9;
--primary:rgba(0, 0, 0, 0.88); --primary: rgba(0, 0, 0, 0.88);
--secondary:#eb5234; --secondary: #eb5234;
--accent: #ff005a; --accent: #ff005a;
--panel: #303030; --panel: #303030;
--panel-text: rgba(216, 216, 217); --panel-text: rgba(216, 216, 217);
--menu-text-bg: #9e9e9e; --menu-text-bg: #9e9e9e;
--not-found: #303030; --not-found: #303030;
} }
*,::after,::before{
box-sizing:border-box
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-y: scroll;
scroll-behavior: smooth;
-webkit-tap-highlight-color:transparent;
}
body { body {
transition: 0.8s; transition: 0.8s;
font-size:18px; font-size: 18px;
line-height:1.6; line-height: 1.6;
word-break:break-word; word-break: break-word;
background:var(--theme); background: var(--theme);
font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif; font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Oxygen, Ubuntu, Cantarell, open sans, helvetica neue, sans-serif;
} }
.card-body {
font-family: "Poppins", sans-serif; body.js-stop-transition * {
display: flex; transition: none !important;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 100vh;
} }
body.js-stop-transition * { transition:none !important; }
a:hover { a:hover {
cursor: pointer; cursor: pointer;
} }
a,body,h1{
color:var(--primary); a,
body,
h1 {
color: var(--primary);
} }
header,nav{
display:block header,
nav {
display: block
} }
ul{
padding:0 ul {
padding: 0
} }
ul li::before{
ul li::before {
content: ''; content: '';
position: absolute; position: absolute;
margin-top: 42px; margin-top: 42px;
@@ -77,72 +65,91 @@ ul li::before{
height: 3px; height: 3px;
transition: 0.8s all; transition: 0.8s all;
} }
ul li#home-link:hover::before, ul li#home-link:hover::before,
ul li#about-link:hover::before { ul li#about-link:hover::before {
width: 45px; width: 45px;
} }
ul li#projects-link:hover::before { ul li#projects-link:hover::before {
width: 58px; width: 58px;
} }
a { a {
transition: 0.8s; transition: 0.8s;
} }
a:hover { a:hover {
color: var(--secondary); color: var(--secondary);
} }
a{
text-decoration:none a {
text-decoration: none
} }
body,ul{
margin:0 body,
ul {
margin: 0
} }
.nav{
.nav {
color: var(--primary); color: var(--primary);
display:flex; display: flex;
flex-wrap:wrap; flex-wrap: wrap;
justify-content:space-between; justify-content: space-between;
max-width: calc(1024px + 24px * 2); max-width: calc(1024px + 24px * 2);
margin-inline-start:auto; margin-inline-start: auto;
margin-inline-end:auto; margin-inline-end: auto;
line-height: 60px; line-height: 60px;
} }
.nav a{
display:block .nav a {
display: block
} }
.logo,#menu{
display:flex; .logo,
margin:auto 24px; #menu {
display: flex;
margin: auto 24px;
} }
.logo{
flex-wrap:inherit .logo {
flex-wrap: inherit
} }
.logo a{
font-size:24px; .logo a {
font-weight:700 font-size: 24px;
font-weight: 700
} }
.logo a img{
display:inline; .logo a img {
vertical-align:middle; display: inline;
pointer-events:none; vertical-align: middle;
transform:translate(0,-10%); pointer-events: none;
border-radius:6px; transform: translate(0, -10%);
margin-inline-end:8px border-radius: 6px;
margin-inline-end: 8px
} }
#menu{
list-style:none; #menu {
word-break:keep-all; list-style: none;
overflow-x:auto; word-break: keep-all;
white-space:nowrap overflow-x: auto;
white-space: nowrap
} }
#menu li+li{
#menu li+li {
margin-inline-start: 24px; margin-inline-start: 24px;
} }
#menu a{
font-size:16px #menu a {
font-size: 16px
} }
#menu .active{
font-weight:500; #menu .active {
font-weight: 500;
} }
.main { .main {
zoom: 110%; zoom: 110%;
text-align: center; text-align: center;
@@ -154,6 +161,7 @@ body,ul{
padding: 10px; padding: 10px;
color: var(--primary); color: var(--primary);
} }
.svg-wrapper { .svg-wrapper {
margin: 0 auto; margin: 0 auto;
width: 320px; width: 320px;
@@ -161,6 +169,7 @@ body,ul{
height: 64px; height: 64px;
overflow-y: hidden; overflow-y: hidden;
} }
.shape { .shape {
z-index: 9999; z-index: 9999;
stroke-dasharray: 140 540; stroke-dasharray: 140 540;
@@ -170,11 +179,13 @@ body,ul{
stroke: var(--secondary); stroke: var(--secondary);
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
} }
.svg-wrapper:hover .shape { .svg-wrapper:hover .shape {
stroke-width: 2px; stroke-width: 2px;
stroke-dashoffset: 0; stroke-dashoffset: 0;
stroke-dasharray: 760; stroke-dasharray: 760;
} }
.name { .name {
transition: 0.8s; transition: 0.8s;
font-size: 30px; font-size: 30px;
@@ -182,111 +193,88 @@ body,ul{
margin-bottom: 10px; margin-bottom: 10px;
transform: translate(0, -64px); transform: translate(0, -64px);
} }
.name:hover { .name:hover {
color: var(--secondary); color: var(--secondary);
cursor: default; cursor: default;
} }
.des { .des {
transition: 0.8s; transition: 0.8s;
font-size: larger; font-size: larger;
} }
.des:hover { .des:hover {
color: var(--secondary); color: var(--secondary);
cursor: default; cursor: default;
} }
.des:focus { .des:focus {
color: var(--secondary); color: var(--secondary);
} }
.profile { .profile {
width: 190px; width: 190px;
height: 190px; height: 190px;
border-radius: 50%; border-radius: 50%;
transition: 0.8s; transition: 0.8s;
} }
.social-icons { .social-icons {
padding:12px 0; padding: 12px 0;
} }
.social-icons a:not(:last-of-type) { .social-icons a:not(:last-of-type) {
margin-inline-end:12px; margin-inline-end: 12px;
} }
.social-icons a svg { .social-icons a svg {
height:26px; height: 26px;
width:26px; width: 26px;
} }
.social-icons a { .social-icons a {
color: var(--primary); color: var(--primary);
text-decoration: none; text-decoration: none;
} }
.icon { .icon {
transition: 0.8s; transition: 0.8s;
} }
.icon:hover { .icon:hover {
color: var(--secondary); color: var(--secondary);
} }
.logo-switches{
flex-wrap:inherit .logo-switches {
flex-wrap: inherit
} }
#theme-toggle svg{
height:18px; #theme-toggle svg {
height: 18px;
} }
button#theme-toggle{
button#theme-toggle {
background-color: var(--theme); background-color: var(--theme);
border: none; border: none;
color: var(--primary); color: var(--primary);
font-size:26px; font-size: 26px;
margin:auto 4px; margin: auto 4px;
transition: 0.8s; transition: 0.8s;
} }
button#theme-toggle:hover{
button#theme-toggle:hover {
cursor: pointer; cursor: pointer;
color: var(--secondary); color: var(--secondary);
} }
body.dark #moon{
vertical-align:middle; body.light #moon {
display:none; vertical-align: middle;
display: none;
} }
body:not(.dark) #sun{
display:none; body:not(.light) #sun {
} display: none;
.about-section{
transition: 0.8s;
border-top-right-radius: 15px;
background: url('../images/pic.png') no-repeat left;
background-size: 55%;
background-color: var(--theme);
overflow: hidden;
padding: 100px 0;
}
.inner-container{
transition: 0.8s;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
width: 55%;
float: right;
background-color: var(--panel);
padding: 150px;
}
.inner-container h1{
margin-bottom: 30px;
font-size: 30px;
font-weight: 900;
}
.text{
font-size: 13px;
color: var(--panel-text);
line-height: 30px;
text-align: justify;
margin-bottom: 40px;
}
#about-me {
color: var(--panel-text);
}
.skills{
color: var(--panel-text);
display: flex;
justify-content: space-between;
font-weight: 700;
font-size: 13px;
} }
/* Mobile Nav */ /* Mobile Nav */
@@ -297,11 +285,13 @@ body:not(.dark) #sun{
position: absolute; position: absolute;
right: 14%; right: 14%;
} }
.menu { .menu {
display: none; display: none;
color: var(--primary); color: var(--primary);
size: 125%; size: 125%;
} }
.overlay { .overlay {
height: 100%; height: 100%;
width: 0; width: 0;
@@ -313,9 +303,11 @@ body:not(.dark) #sun{
overflow-x: hidden; overflow-x: hidden;
transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
} }
.overlay--active { .overlay--active {
width: 100%; width: 100%;
} }
.overlay__content { .overlay__content {
display: flex; display: flex;
height: 100%; height: 100%;
@@ -323,6 +315,7 @@ body:not(.dark) #sun{
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.overlay a { .overlay a {
color: white; color: white;
text-decoration: none; text-decoration: none;
@@ -331,10 +324,12 @@ body:not(.dark) #sun{
display: block; display: block;
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
} }
.overlay a:hover, .overlay a:hover,
.overlay a:focus { .overlay a:focus {
color: var(--secondary); color: var(--secondary);
} }
.overlay .close { .overlay .close {
position: absolute; position: absolute;
top: 20px; top: 20px;
@@ -343,232 +338,55 @@ body:not(.dark) #sun{
color: #edf0f1; color: #edf0f1;
cursor: pointer; cursor: pointer;
} }
.mobile-name { .mobile-name {
display: none; display: none;
transition: 0.8s; transition: 0.8s;
font-size: 30px; font-size: 30px;
font-weight: 900; font-weight: 900;
} }
.mobile-name:hover { .mobile-name:hover {
color: var(--secondary); color: var(--secondary);
cursor: default; cursor: default;
} }
.projects {
display: flex;
flex-wrap: wrap;
justify-content: center;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.project-panel { @media screen and (max-width:768px) {
background-color: var(--panel); .profile img {
flex: 0 1 25%; transform: scale(.85);
margin: 24px; }
border-radius: 20px;
height: auto;
max-height: 600px;
}
.project-panel h2, p {
color: var(--panel-text);
}
.project-panel-content {
margin-left: 38px;
margin-top: 24px;
margin-right: 40px;
margin-bottom: 38px;
}
.project-panel-content a {
color: var(--secondary);
text-decoration: underline;
}
@media screen and (max-width:1200px){
.inner-container{
padding: 80px;
}
}
@media screen and (max-width:1000px){
.about-section{
background-size: 100%;
padding: 100px 40px;
}
.inner-container{
width: 100%;
}
}
@media screen and (max-width:600px){
.about-section{
padding: 0;
}
.inner-container{
padding: 60px;
}
}
@media screen and (max-width:768px){
.profile img{
transform:scale(.85);
}
.profile { .profile {
width: 128px; width: 128px;
height: auto; height: auto;
} }
.first-entry{
min-height:260px; .first-entry {
min-height: 260px;
} }
.archive-month{
flex-direction:column; .archive-month {
flex-direction: column;
} }
.archive-year{
margin-top:20px; .archive-year {
margin-top: 20px;
} }
.footer{
padding:calc((60 - 24px - 10px)/2)24px; .footer {
padding: calc((60 - 24px - 10px)/2)24px;
} }
} }
@media screen and (min-width:768px){
::-webkit-scrollbar{ @media only screen and (max-width: 740px) {
width:19px;
height:11px;
}
}
@media screen and (max-width:900px){
.list .top-link{
transform:translateY(-5rem);
}
}
@media only screen and (max-width: 514px) {
.nav__links li a, .nav__links li a,
.svg-wrapper#main-wrapper { .svg-wrapper#main-wrapper {
display: none; display: none;
} }
.menu, .menu,
.mobile-name { .mobile-name {
display: block; display: block;
} }
} }
body .container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 90%;
margin: 40px 0;
margin-top: 150px;
}
body .container .card {
position: relative;
min-width: 320px;
width: 400px;
height: 540px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
inset -5px -5px 15px rgba(255, 255, 255, 0.1),
5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
border-radius: 15px;
margin: 30px;
transition: 0.5s;
}
body .container .card:nth-child(1) .box .content a {
background: #2196f3;
}
body .container .card:nth-child(2) .box .content a {
background: #e91e63;
}
body .container .card:nth-child(3) .box .content a {
background: #23c186;
}
body .container .card:nth-child(5) .box .content a {
background: var(--secondary);
}
body .container .card:nth-child(6) .box .content a {
background: #f3ef84;
}
body .container .card:nth-child(7) .box .content a {
background: #8083d0;
}
body .container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #2a2b2f;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: 0.5s;
}
body .container .card .box:hover {
transform: translateY(-50px);
}
body .container .card .box:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.03);
}
body .container .card .box .content {
padding: 20px;
text-align: center;
}
body .container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8rem;
color: rgba(255, 255, 255, 0.1);
}
body .container .card .box .content h3 {
font-size: 1.8rem;
color: #fff;
z-index: 1;
transition: 0.5s;
margin-bottom: 15px;
}
body .container .card .box .content p {
font-size: 1rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.9);
z-index: 1;
transition: 0.5s;
}
body .container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: black;
border-radius: 5px;
text-decoration: none;
color: white;
margin-top: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
transition: 0.5s;
}
body .container .card .box .content a:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
background: #fff;
color: #000;
}