update projects page

This commit is contained in:
SowinskiBraeden committed 2025-01-21 20:55:03 -08:00
1 parent bebc1ad510
commit fc81cf40a3
6 files changed
+688 -718

No files matched your search

+130 -134
View File
@@ -1,145 +1,132 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='en'> <html lang='en'>
<head>
<title>Braeden Sowinski</title>
<meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" />
<meta name='author' content="Braeden Sowinski" />
<meta name='keywords' content="Braeden Sowinski, McDazzzled" />
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- Load CSS --> <head>
<link rel="stylesheet" href="./public/css/style.css"> <title>Braeden Sowinski</title>
</head> <meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" />
<body class="js-stop-transition"> <meta name='author' content="Braeden Sowinski" />
<header class=header> <meta name='keywords' content="Braeden Sowinski, McDazzzled" />
<nav class=nav> <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<div class=logo>
<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
</a>
<span class="logo-switches">
<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">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
</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">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/>
<line x1="21" y1="12" x2="23" y2="12"/>
<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>
</button>
</span>
</div>
<ul id="menu" class="nav__links">
<li id="home-link">
<a href="/" title="Home">
<span class="active">Home</span>
</a>
</li>
<li id="about-link">
<a href="/about" title="about">
<span class="active">About</span>
</a>
</li>
<li id="projects-link">
<a href="/projects" title="projects">
<span class="active">Projects</span>
</a>
</li>
</ul>
<p class="menu cta">Menu</p>
</nav>
<!-- Moble Nav Menu --> <!-- Load CSS -->
<div id="mobile__menu" class="overlay"> <link rel="stylesheet" href="./public/css/style.css">
<a class="close">&times;</a> </head>
<div class="overlay__content">
<body class="js-stop-transition">
<header class=header>
<nav class=nav>
<div class=logo>
<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
</a>
<span class="logo-switches">
<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">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</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">
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<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>
</button>
</span>
</div>
<ul id="menu" class="nav__links">
<li id="home-link">
<a href="/" title="Home"> <a href="/" title="Home">
<span class="active">Home</span> <span class="active">Home</span>
</a> </a>
</li>
<li id="about-link">
<a href="/about" title="about"> <a href="/about" title="about">
<span class="active">About</span> <span class="active">About</span>
</a> </a>
</li>
<li id="projects-link">
<a href="/projects" title="projects"> <a href="/projects" title="projects">
<span class="active">Projects</span> <span class="active">Projects</span>
</a> </a>
</li>
</ul>
<p class="menu cta">Menu</p>
</nav>
<!-- Moble Nav Menu -->
<div id="mobile__menu" class="overlay">
<a class="close">&times;</a>
<div class="overlay__content">
<a href="/" title="Home">
<span class="active">Home</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>
<!-- About Body --> <!-- About Body -->
<div class="about-section"> <div class="about-section">
<div class="inner-container"> <div class="inner-container">
<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 </p>
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>
<div class="skills">
<span> <div class="skills">
<img <span>
style="transform: translate(0, 8px);" <img style="transform: translate(0, 8px);"
src="https://img.shields.io/badge/python-black?style=for-the-badge&logo=python" src="https://img.shields.io/badge/python-black?style=for-the-badge&logo=python" width="24" height="24">
width="24" Python
height="24" </span>
>
Python <span>
</span> <img style="transform: translate(0, 8px);"
<span> src="https://img.shields.io/badge/javascript-black?style=for-the-badge&logo=javascript" width="24"
<img height="24">
style="transform: translate(0, 8px);" Node.js
src="https://img.shields.io/badge/javascript-black?style=for-the-badge&logo=javascript" </span>
width="24"
height="24" <span>
> <img style="transform: translate(0, 8px);"
Node.js src="https://img.shields.io/badge/go-black?style=for-the-badge&logo=go" width="24" height="24">
</span> Go
<span> </span>
<img
style="transform: translate(0, 8px);" <span>
src="https://img.shields.io/badge/go-black?style=for-the-badge&logo=go" <img style="transform: translate(0, 8px);"
width="24" src="https://img.shields.io/badge/mongodb-black?style=for-the-badge&logo=mongodb" width="24" height="24">
height="24" MongoDB
> </span>
Go
</span> <span>
<span> <img style="transform: translate(0, 8px);"
<img src="https://img.shields.io/badge/git-black?style=for-the-badge&logo=git" width="24" height="24">
style="transform: translate(0, 8px);" Git
src="https://img.shields.io/badge/mongodb-black?style=for-the-badge&logo=mongodb" </span>
width="24"
height="24"
>
MongoDB
</span>
<span>
<img
style="transform: translate(0, 8px);"
src="https://img.shields.io/badge/git-black?style=for-the-badge&logo=git"
width="24"
height="24"
>
Git
</span>
</div>
</div> </div>
</div> </div>
</div>
<!-- Import Mobile.js for mobile nav menu --> <!-- Import Mobile.js for mobile nav menu -->
<script src="./public/scripts/mobile.js"></script> <script src="./public/scripts/mobile.js"></script>
@@ -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>
+120 -107
View File
@@ -1,113 +1,117 @@
<!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>
<title>Braeden Sowinski</title>
<meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" />
<meta name='author' content="Braeden Sowinski" />
<meta name='keywords' content="Braeden Sowinski, McDazzzled" />
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- Load CSS --> <head>
<link rel="stylesheet" href="./public/css/style.css"> <title>Braeden Sowinski</title>
</head> <meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" />
<body class="js-stop-transition"> <meta name='author' content="Braeden Sowinski" />
<header class=header> <meta name='keywords' content="Braeden Sowinski, McDazzzled" />
<nav class=nav> <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<div class=logo>
<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
</a>
<span class="logo-switches">
<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">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
</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">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/>
<line x1="21" y1="12" x2="23" y2="12"/>
<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>
</button>
</span>
</div>
<ul id="menu" class="nav__links">
<li id="home-link">
<a href="/" title="Home">
<span class="active">Home</span>
</a>
</li>
<li id="about-link">
<a href="/about" title="about">
<span class="active">About</span>
</a>
</li>
<li id="projects-link">
<a href="/projects" title="projects">
<span class="active">Projects</span>
</a>
</li>
</ul>
<p class="menu cta">Menu</p>
</nav>
<!-- Moble Nav Menu --> <!-- Load CSS -->
<div id="mobile__menu" class="overlay"> <link rel="stylesheet" href="./public/css/style.css">
<a class="close">&times;</a> </head>
<div class="overlay__content">
<body class="js-stop-transition">
<header class=header>
<nav class=nav>
<div class=logo>
<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
</a>
<span class="logo-switches">
<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">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</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">
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<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>
</button>
</span>
</div>
<ul id="menu" class="nav__links">
<li id="home-link">
<a href="/" title="Home"> <a href="/" title="Home">
<span class="active">Home</span> <span class="active">Home</span>
</a> </a>
</li>
<li id="about-link">
<a href="/about" title="about"> <a href="/about" title="about">
<span class="active">About</span> <span class="active">About</span>
</a> </a>
</li>
<li id="projects-link">
<a href="/projects" title="projects"> <a href="/projects" title="projects">
<span class="active">Projects</span> <span class="active">Projects</span>
</a> </a>
</div> </li>
</header> </ul>
<p class="menu cta">Menu</p>
</nav>
<!-- Main Body / Welcome Section --> <!-- Moble Nav Menu -->
<div class="main"> <div id="mobile__menu" class="overlay">
<img src="https://avatars.githubusercontent.com/u/48144618" class="profile"> <a class="close">&times;</a>
<div id="main-wrapper" class="svg-wrapper"> <div class="overlay__content">
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <a href="/" title="Home"><span class="active">Home</span></a>
<rect x="0" y="0"class="shape" height="60" width="320"/> <a href="/about" title="about"><span class="active">About</span></a>
<h2 style="margin-top: 2px;" class="name">Braeden Sowinski</h2> <a href="/projects" title="projects"><span class="active">Projects</span></a>
</svg>
</div> </div>
<h2 style="margin-top: 2px;" class="mobile-name">Braeden Sowinski</h2> </header>
<span class="des">Software Engineer & System Administrator</span>
<div class="social-icons"> <!-- Main Body -->
<a class="icon" href= https://discord.gg/YCXhvy9uZw target=_blank rel="noopener noreferrer me" title=Discord> <div class="main">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16"> <img src="https://avatars.githubusercontent.com/u/48144618" class="profile">
<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"/> <div id="main-wrapper" class="svg-wrapper">
<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"/> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
</svg> <rect x="0" y="0" class="shape" height="60" width="320" />
</a> <h2 style="margin-top: 2px;" class="name">Braeden Sowinski</h2>
<a class="icon" href=https://github.com/SowinskiBraeden target=_blank rel="noopener noreferrer me" title=Github> </svg>
<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"> </div>
<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"/> <h2 style="margin-top: 2px;" class="mobile-name">Braeden Sowinski</h2>
</svg> <span class="des">Software Engineer & System Administrator</span>
</a> <div class="social-icons">
<a class="icon" href=https://twitter.com/braedensowinski target=_blank rel="noopener noreferrer me" title=Twitter> <a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me"
<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"> title=LinkedIn>
<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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
</svg> viewBox="0 0 16 16">
</a> <path
<a class="icon" href="mailto:braeden@sowinski.dev" target=_blank rel="noopener noreferrer me" title=Email> 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 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>
<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"/> </a>
<polyline points="22,6 12,13 2,6"/> <a class="icon" href=https://github.com/SowinskiBraeden target=_blank rel="noopener noreferrer me" title=Github>
</svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2"
</a> 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>
</a>
<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">
<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>
</a>
<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">
<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>
</a>
</div> </div>
<!-- Import Mobile.js for mobile nav menu --> <!-- Import Mobile.js for mobile nav menu -->
@@ -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>
+166 -142
View File
@@ -1,86 +1,93 @@
<!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>
<title>Braeden Sowinski</title>
<meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" />
<meta name='author' content="Braeden Sowinski" />
<meta name='keywords' content="Braeden Sowinski, McDazzzled" />
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- Load CSS --> <head>
<link rel="stylesheet" href="./public/css/style.css"> <title>Braeden Sowinski</title>
</head> <meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" />
<body class="js-stop-transition"> <meta name='author' content="Braeden Sowinski" />
<header class=header> <meta name='keywords' content="Braeden Sowinski, McDazzzled" />
<nav class=nav> <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<div class=logo>
<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
</a>
<span class="logo-switches">
<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">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
</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">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/>
<line x1="21" y1="12" x2="23" y2="12"/>
<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>
</button>
</span>
</div>
<ul id="menu" class="nav__links">
<li id="home-link">
<a href="/" title="Home">
<span class="active">Home</span>
</a>
</li>
<li id="about-link">
<a href="/about" title="about">
<span class="active">About</span>
</a>
</li>
<li id="projects-link">
<a href="/projects" title="projects">
<span class="active">Projects</span>
</a>
</li>
</ul>
<p class="menu cta">Menu</p>
</nav>
<!-- Moble Nav Menu --> <!-- Load CSS -->
<div id="mobile__menu" class="overlay"> <link rel="stylesheet" href="./public/css/style.css">
<a class="close">&times;</a> <link rel="stylesheet" href="./public/css/projects.css">
<div class="overlay__content"> </head>
<body class="js-stop-transition">
<header class=header>
<nav class=nav>
<div class=logo>
<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
</a>
<span class="logo-switches">
<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">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</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">
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<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>
</button>
</span>
</div>
<ul id="menu" class="nav__links">
<li id="home-link">
<a href="/" title="Home"> <a href="/" title="Home">
<span class="active">Home</span> <span class="active">Home</span>
</a> </a>
</li>
<li id="about-link">
<a href="/about" title="about"> <a href="/about" title="about">
<span class="active">About</span> <span class="active">About</span>
</a> </a>
</li>
<li id="projects-link">
<a href="/projects" title="projects"> <a href="/projects" title="projects">
<span class="active">Projects</span> <span class="active">Projects</span>
</a> </a>
</div> </li>
</header> </ul>
<p class="menu cta">Menu</p>
</nav>
<section class="card-body"> <!-- Moble Nav Menu -->
<div class="container"> <div id="mobile__menu" class="overlay">
<div class="card"> <a class="close">&times;</a>
<div class="box"> <div class="overlay__content">
<div class="content"> <a href="/" title="Home">
<span class="active">Home</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>
</header>
<section class="card-body">
<div class="container">
<div class="card">
<div class="box">
<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.
<a href="https://www.linespolice-cad.com/" target="_blank">View LPC</a> </p>
<a href="https://github.com/LinesMerrill/police-cad" target="_blank">Github</a> <div id="links">
<a href="https://www.linespolice-cad.com/" target="_blank">View LPC</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,35 +198,45 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section>
<!-- Import Mobile.js for mobile nav menu --> </div>
<script src="./public/scripts/mobile.js"></script> </section>
<!-- Disable transitions on webpage load --> <!-- Import Mobile.js for mobile nav menu -->
<script>document.body.classList.remove('js-stop-transition')</script> <script src="./public/scripts/mobile.js"></script>
<!-- Change Theme Scripts --> <!-- Disable transitions on webpage load -->
<script type="text/javascript"> <script>document.body.classList.remove('js-stop-transition')</script>
document.getElementById("theme-toggle").addEventListener("click", () => {
document.body.className.includes("dark")?(document.body.classList.remove('dark'), <!-- Change Theme Scripts -->
localStorage.setItem("pref-theme",'light')):(document.body.classList.add('dark'), <script type="text/javascript">
localStorage.setItem("pref-theme",'dark')), document.getElementById("theme-toggle").addEventListener("click", () => {
"dark"==sessionStorage.getItem("theme")?sessionStorage.setItem("theme","light"):sessionStorage.setItem("theme","dark"); document.body.className.includes("light") ? (
}); document.body.classList.remove('light'),
</script> localStorage.setItem("pref-theme",'dark')
<script> ) : (
// If storage is supported set theme to dark by default document.body.classList.add('light'),
if (typeof(Storage) !== "undefined") { localStorage.setItem("pref-theme",'light')
if (sessionStorage.getItem("theme")==null||sessionStorage.getItem("theme")==undefined) sessionStorage.setItem("theme", "dark"); ),
if (sessionStorage.getItem("theme")=='light') { "dark" == sessionStorage.getItem("theme") ? sessionStorage.setItem("theme", "light") : sessionStorage.setItem("theme", "dark");
document.body.className.includes("dark")?(document.body.classList.remove('dark'), });
localStorage.setItem("pref-theme",'light')):(document.body.classList.add('dark'), </script>
localStorage.setItem("pref-theme",'dark')); <script>
} // If storage is supported set theme to light by default
if (typeof(Storage) !== "undefined") {
if (sessionStorage.getItem("theme") == null || sessionStorage.getItem("theme") == undefined) sessionStorage.setItem("theme", "dark");
if (sessionStorage.getItem("theme") == 'dark') {
document.body.className.includes("dark") ? (
document.body.classList.remove('dark'),
localStorage.setItem("pref-theme",'light')
) : (
document.body.classList.add('dark'),
localStorage.setItem("pref-theme",'dark')
);
} }
</script> }
</body> </script>
</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;
}