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>
<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 -->
<link rel="stylesheet" href="./public/css/style.css">
</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">
<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>
<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'>
<!-- Moble Nav Menu -->
<div id="mobile__menu" class="overlay">
<a class="close">&times;</a>
<div class="overlay__content">
<!-- Load CSS -->
<link rel="stylesheet" href="./public/css/style.css">
</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">
<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 -->
<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>
</header>
</header>
<!-- About Body -->
<div class="about-section">
<div class="inner-container">
<h1 id="about-me">About Me</h1>
<p class="text">
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
strong work ethic, with the motivation to thrive in any setting, team-based or individually motivated. Aiming to set the bar high,
and leave good impressions to any employer.
<!-- About Body -->
<div class="about-section">
<div class="inner-container">
<h1 id="about-me">About Me</h1>
<p class="text">
Hello there,
I am Braeden Sowinski, you may also know me by my pseudonym McDazzzled. I am an avid software engineer, actively
pursuing a Diploma in Computer System Technologies at BCIT. I am adaptable and driven with a strong work ethic;
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
development, web applications serving hundreds of thousands of users, simple desktop applications and more. With the advanced knowledge
of Python and the Node.js framework, intermediate knowledge with GoLang, and a basic understanding of C/C++ and Java. I can bring and
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
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>
<div class="skills">
I am eager to expand my knowledge in Software Engineering, IT, System Administration and related fields.
Approaching more than 5 years of continuous learning and programming, I have learned many valuable languages and
frameworks such as C, Go, Node.js, and Python 3+. However, there is always more to learn and experience that I
will accomplish by quickly adapting to a new setting.
</p>
<span>
<img
style="transform: translate(0, 8px);"
src="https://img.shields.io/badge/python-black?style=for-the-badge&logo=python"
width="24"
height="24"
>
Python
</span>
<span>
<img
style="transform: translate(0, 8px);"
src="https://img.shields.io/badge/javascript-black?style=for-the-badge&logo=javascript"
width="24"
height="24"
>
Node.js
</span>
<span>
<img
style="transform: translate(0, 8px);"
src="https://img.shields.io/badge/go-black?style=for-the-badge&logo=go"
width="24"
height="24"
>
Go
</span>
<span>
<img
style="transform: translate(0, 8px);"
src="https://img.shields.io/badge/mongodb-black?style=for-the-badge&logo=mongodb"
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 class="skills">
<span>
<img style="transform: translate(0, 8px);"
src="https://img.shields.io/badge/python-black?style=for-the-badge&logo=python" width="24" height="24">
Python
</span>
<span>
<img style="transform: translate(0, 8px);"
src="https://img.shields.io/badge/javascript-black?style=for-the-badge&logo=javascript" width="24"
height="24">
Node.js
</span>
<span>
<img style="transform: translate(0, 8px);"
src="https://img.shields.io/badge/go-black?style=for-the-badge&logo=go" width="24" height="24">
Go
</span>
<span>
<img style="transform: translate(0, 8px);"
src="https://img.shields.io/badge/mongodb-black?style=for-the-badge&logo=mongodb" 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>
<!-- Import Mobile.js for mobile nav menu -->
<script src="./public/scripts/mobile.js"></script>
@@ -150,22 +137,31 @@
<!-- Change Theme Scripts -->
<script type="text/javascript">
document.getElementById("theme-toggle").addEventListener("click", () => {
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')),
"dark"==sessionStorage.getItem("theme")?sessionStorage.setItem("theme","light"):sessionStorage.setItem("theme","dark");
document.body.className.includes("light") ? (
document.body.classList.remove('light'),
localStorage.setItem("pref-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>
// 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 (sessionStorage.getItem("theme")==null||sessionStorage.getItem("theme")==undefined) sessionStorage.setItem("theme", "dark");
if (sessionStorage.getItem("theme")=='light') {
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'));
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>
</body>
</html>
+120 -107
View File
@@ -1,113 +1,117 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
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'>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" lang='en'>
<!-- Load CSS -->
<link rel="stylesheet" href="./public/css/style.css">
</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">
<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>
<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'>
<!-- Moble Nav Menu -->
<div id="mobile__menu" class="overlay">
<a class="close">&times;</a>
<div class="overlay__content">
<!-- Load CSS -->
<link rel="stylesheet" href="./public/css/style.css">
</head>
<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">
<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>
</div>
</header>
</li>
</ul>
<p class="menu cta">Menu</p>
</nav>
<!-- Main Body / Welcome Section -->
<div class="main">
<img src="https://avatars.githubusercontent.com/u/48144618" class="profile">
<div id="main-wrapper" class="svg-wrapper">
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0"class="shape" height="60" width="320"/>
<h2 style="margin-top: 2px;" class="name">Braeden Sowinski</h2>
</svg>
<!-- 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>
<h2 style="margin-top: 2px;" class="mobile-name">Braeden Sowinski</h2>
<span class="des">Software Engineer & System Administrator</span>
<div class="social-icons">
<a class="icon" href= https://discord.gg/YCXhvy9uZw target=_blank rel="noopener noreferrer me" title=Discord>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
<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"/>
<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>
</a>
<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">
<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>
</header>
<!-- Main Body -->
<div class="main">
<img src="https://avatars.githubusercontent.com/u/48144618" class="profile">
<div id="main-wrapper" class="svg-wrapper">
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" class="shape" height="60" width="320" />
<h2 style="margin-top: 2px;" class="name">Braeden Sowinski</h2>
</svg>
</div>
<h2 style="margin-top: 2px;" class="mobile-name">Braeden Sowinski</h2>
<span class="des">Software Engineer & System Administrator</span>
<div class="social-icons">
<a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target=_blank rel="noopener noreferrer me"
title=LinkedIn>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
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>
</a>
<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">
<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>
<!-- Import Mobile.js for mobile nav menu -->
@@ -119,22 +123,31 @@
<!-- Change Theme Scripts -->
<script type="text/javascript">
document.getElementById("theme-toggle").addEventListener("click", () => {
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')),
"dark"==sessionStorage.getItem("theme")?sessionStorage.setItem("theme","light"):sessionStorage.setItem("theme","dark");
document.body.className.includes("light") ? (
document.body.classList.remove('light'),
localStorage.setItem("pref-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>
// 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 (sessionStorage.getItem("theme")==null||sessionStorage.getItem("theme")==undefined) sessionStorage.setItem("theme", "dark");
if (sessionStorage.getItem("theme")=='light') {
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'));
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>
</body>
</html>
+166 -142
View File
@@ -1,86 +1,93 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
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'>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" lang='en'>
<!-- Load CSS -->
<link rel="stylesheet" href="./public/css/style.css">
</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">
<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>
<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'>
<!-- Moble Nav Menu -->
<div id="mobile__menu" class="overlay">
<a class="close">&times;</a>
<div class="overlay__content">
<!-- Load CSS -->
<link rel="stylesheet" href="./public/css/style.css">
<link rel="stylesheet" href="./public/css/projects.css">
</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">
<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>
</div>
</header>
</li>
</ul>
<p class="menu cta">Menu</p>
</nav>
<section class="card-body">
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<!-- 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>
</header>
<section class="card-body">
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<div class="content-head">
<h2>01</h2>
<h3>Schedule Generator App</h3>
</div>
<div class="content-body">
<p>
A desktop application to interact with my schedule generator algorithm.
The algorithm is written in Python and generates master and student timetables.
@@ -90,12 +97,16 @@
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<div class="card">
<div class="box">
<div class="content">
<div class="content-head">
<h2>02</h2>
<h3>School Management API</h3>
</div>
<div class="content-body">
<p>
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
@@ -106,59 +117,38 @@
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<div class="card">
<div class="box">
<div class="content">
<div class="content-head">
<h2>03</h2>
<h3>Lines Police CAD</h3>
</div>
<div class="content-body">
<p>
<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
have contributed new features, bug fixes as well as serving general tech support.</p>
<a href="https://www.linespolice-cad.com/" target="_blank">View LPC</a>
<a href="https://github.com/LinesMerrill/police-cad" target="_blank">Github</a>
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://github.com/LinesMerrill/police-cad" target="_blank">Github</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<div class="card">
<div class="box">
<div class="content">
<div class="content-head">
<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>
</div>
<div class="content-body">
<p>
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
@@ -169,12 +159,36 @@
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>07</h2>
<div class="card">
<div class="box">
<div class="content">
<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>
</div>
<div class="content-body">
<p>
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
@@ -184,35 +198,45 @@
</div>
</div>
</div>
</div>
</section>
<!-- Import Mobile.js for mobile nav menu -->
<script src="./public/scripts/mobile.js"></script>
</div>
</section>
<!-- Disable transitions on webpage load -->
<script>document.body.classList.remove('js-stop-transition')</script>
<!-- Import Mobile.js for mobile nav menu -->
<script src="./public/scripts/mobile.js"></script>
<!-- Change Theme Scripts -->
<script type="text/javascript">
document.getElementById("theme-toggle").addEventListener("click", () => {
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')),
"dark"==sessionStorage.getItem("theme")?sessionStorage.setItem("theme","light"):sessionStorage.setItem("theme","dark");
});
</script>
<script>
// If storage is supported set theme to dark by default
if (typeof(Storage) !== "undefined") {
if (sessionStorage.getItem("theme")==null||sessionStorage.getItem("theme")==undefined) sessionStorage.setItem("theme", "dark");
if (sessionStorage.getItem("theme")=='light') {
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'));
}
<!-- Disable transitions on webpage load -->
<script>document.body.classList.remove('js-stop-transition')</script>
<!-- Change Theme Scripts -->
<script type="text/javascript">
document.getElementById("theme-toggle").addEventListener("click", () => {
document.body.className.includes("light") ? (
document.body.classList.remove('light'),
localStorage.setItem("pref-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>
// 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>
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");
/* root is dark theme */
:root {
--theme: #1d1e20;
--primary: #d8d8d9;
@@ -9,65 +11,51 @@
--menu-text-bg: #303030;
--not-found: #030005;
}
/*
:root is dark theme and
.dark is actually the light theme
Im just too lazy to rename it
*/
.dark{
.light {
--theme: #d8d8d9;
--primary:rgba(0, 0, 0, 0.88);
--secondary:#eb5234;
--primary: rgba(0, 0, 0, 0.88);
--secondary: #eb5234;
--accent: #ff005a;
--panel: #303030;
--panel-text: rgba(216, 216, 217);
--menu-text-bg: #9e9e9e;
--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 {
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;
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;
}
.card-body {
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 100vh;
body.js-stop-transition * {
transition: none !important;
}
body.js-stop-transition * { transition:none !important; }
a:hover {
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: '';
position: absolute;
margin-top: 42px;
@@ -77,72 +65,91 @@ ul li::before{
height: 3px;
transition: 0.8s all;
}
ul li#home-link:hover::before,
ul li#about-link:hover::before {
width: 45px;
}
ul li#projects-link:hover::before {
width: 58px;
}
a {
transition: 0.8s;
}
a:hover {
color: var(--secondary);
}
a{
text-decoration:none
a {
text-decoration: none
}
body,ul{
margin:0
body,
ul {
margin: 0
}
.nav{
.nav {
color: var(--primary);
display:flex;
flex-wrap:wrap;
justify-content:space-between;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: calc(1024px + 24px * 2);
margin-inline-start:auto;
margin-inline-end:auto;
margin-inline-start: auto;
margin-inline-end: auto;
line-height: 60px;
}
.nav a{
display:block
.nav a {
display: block
}
.logo,#menu{
display:flex;
margin:auto 24px;
.logo,
#menu {
display: flex;
margin: auto 24px;
}
.logo{
flex-wrap:inherit
.logo {
flex-wrap: inherit
}
.logo a{
font-size:24px;
font-weight:700
.logo a {
font-size: 24px;
font-weight: 700
}
.logo a img{
display:inline;
vertical-align:middle;
pointer-events:none;
transform:translate(0,-10%);
border-radius:6px;
margin-inline-end:8px
.logo a img {
display: inline;
vertical-align: middle;
pointer-events: none;
transform: translate(0, -10%);
border-radius: 6px;
margin-inline-end: 8px
}
#menu{
list-style:none;
word-break:keep-all;
overflow-x:auto;
white-space:nowrap
#menu {
list-style: none;
word-break: keep-all;
overflow-x: auto;
white-space: nowrap
}
#menu li+li{
#menu li+li {
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 {
zoom: 110%;
text-align: center;
@@ -154,6 +161,7 @@ body,ul{
padding: 10px;
color: var(--primary);
}
.svg-wrapper {
margin: 0 auto;
width: 320px;
@@ -161,6 +169,7 @@ body,ul{
height: 64px;
overflow-y: hidden;
}
.shape {
z-index: 9999;
stroke-dasharray: 140 540;
@@ -170,11 +179,13 @@ body,ul{
stroke: var(--secondary);
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.svg-wrapper:hover .shape {
stroke-width: 2px;
stroke-dashoffset: 0;
stroke-dasharray: 760;
}
.name {
transition: 0.8s;
font-size: 30px;
@@ -182,111 +193,88 @@ body,ul{
margin-bottom: 10px;
transform: translate(0, -64px);
}
.name:hover {
color: var(--secondary);
cursor: default;
}
.des {
transition: 0.8s;
font-size: larger;
}
.des:hover {
color: var(--secondary);
cursor: default;
}
.des:focus {
color: var(--secondary);
}
.profile {
width: 190px;
height: 190px;
border-radius: 50%;
transition: 0.8s;
}
.social-icons {
padding:12px 0;
padding: 12px 0;
}
.social-icons a:not(:last-of-type) {
margin-inline-end:12px;
margin-inline-end: 12px;
}
.social-icons a svg {
height:26px;
width:26px;
height: 26px;
width: 26px;
}
.social-icons a {
color: var(--primary);
text-decoration: none;
}
.icon {
transition: 0.8s;
}
.icon:hover {
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);
border: none;
color: var(--primary);
font-size:26px;
margin:auto 4px;
font-size: 26px;
margin: auto 4px;
transition: 0.8s;
}
button#theme-toggle:hover{
button#theme-toggle:hover {
cursor: pointer;
color: var(--secondary);
}
body.dark #moon{
vertical-align:middle;
display:none;
body.light #moon {
vertical-align: middle;
display: none;
}
body:not(.dark) #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;
body:not(.light) #sun {
display: none;
}
/* Mobile Nav */
@@ -297,11 +285,13 @@ body:not(.dark) #sun{
position: absolute;
right: 14%;
}
.menu {
display: none;
color: var(--primary);
size: 125%;
}
.overlay {
height: 100%;
width: 0;
@@ -313,9 +303,11 @@ body:not(.dark) #sun{
overflow-x: hidden;
transition: all 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
@@ -323,6 +315,7 @@ body:not(.dark) #sun{
align-items: center;
justify-content: center;
}
.overlay a {
color: white;
text-decoration: none;
@@ -331,10 +324,12 @@ body:not(.dark) #sun{
display: block;
transition: all 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: var(--secondary);
}
.overlay .close {
position: absolute;
top: 20px;
@@ -343,232 +338,55 @@ body:not(.dark) #sun{
color: #edf0f1;
cursor: pointer;
}
.mobile-name {
display: none;
transition: 0.8s;
font-size: 30px;
font-weight: 900;
}
.mobile-name:hover {
color: var(--secondary);
cursor: default;
}
.projects {
display: flex;
flex-wrap: wrap;
justify-content: center;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.project-panel {
background-color: var(--panel);
flex: 0 1 25%;
margin: 24px;
border-radius: 20px;
height: auto;
max-height: 600px;
}
@media screen and (max-width:768px) {
.profile img {
transform: scale(.85);
}
.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 {
width: 128px;
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{
width:19px;
height:11px;
}
}
@media screen and (max-width:900px){
.list .top-link{
transform:translateY(-5rem);
}
}
@media only screen and (max-width: 514px) {
@media only screen and (max-width: 740px) {
.nav__links li a,
.svg-wrapper#main-wrapper {
display: none;
}
.menu,
.mobile-name {
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;
}