clear old commits

This commit is contained in:
SowinskiBraeden committed 2024-04-25 17:55:48 -07:00
commit ae582a11b2
7 files changed
+1179

No files matched your search

+64
View File
@@ -0,0 +1,64 @@
<h1 align="center">Hey there!<img src="https://github.com/wervlad/wervlad/assets/24524555/766d336d-b87d-44ba-807c-c51de2bc6b4d" width="28px" alt="👋"></h1>
<p align="center">
<br>
<i>
I'm Braeden, aka <a href="https://mcdazzzled.xyz/">McDazzzled</a>.<br>
Currently learning various new frameworks, programs and more.<br>
Open to collaborating on interesting and innovative projects.<br>
</i><br>
<a href="https://www.linkedin.com/in/sowinskibraeden">
<img src="https://img.shields.io/badge/LinkedIn-eb5234?style=flat-square&logo=linkedin" alt="LinkedIn">
</a>
<a href="mailto:braeden@sowinski.dev">
<img src="https://img.shields.io/badge/Email-eb5234?style=flat-square&logo=gmail&logoColor=white" alt="e-mail">
</a>
<a href="https://sowinski.dev/">
<img src="https://img.shields.io/badge/sowinski.dev-eb5234?style=flat-square&logo=html5&logoColor=white" alt="e-mail">
</a>
<a href="https://mcdazzzled.xyz/">
<img src="https://img.shields.io/badge/mcdazzzled.xyz-eb5234?style=flat-square&logo=html5&logoColor=white" alt="e-mail">
</a>
</p>
### Languages
[![Python](https://img.shields.io/badge/python-black?style=for-the-badge&logo=python)](https://github.com/SowinskiBraeden)
[![JavaScript](https://img.shields.io/badge/javascript-black?style=for-the-badge&logo=javascript)](https://github.com/SowinskiBraeden)
[![Go](https://img.shields.io/badge/go-black?style=for-the-badge&logo=go)](https://github.com/SowinskiBraeden)
[![C++](https://img.shields.io/badge/c++-black?style=for-the-badge&logo=cplusplus)](https://github.com/SowinskiBraeden)
[![C](https://img.shields.io/badge/c-black?style=for-the-badge&logo=c)](https://github.com/SowinskiBraeden)
### Technologies & Frameworks
[![MongoDB](https://img.shields.io/badge/mongodb-black?style=for-the-badge&logo=mongodb)](https://github.com/SowinskiBraeden)
[![Git](https://img.shields.io/badge/git-black?style=for-the-badge&logo=git)](https://github.com/SowinskiBraeden)
[![VS Code](https://img.shields.io/badge/visual%20studio%20code-black?style=for-the-badge&logo=visual%20studio%20code)](https://github.com/SowinskiBraeden)
[![Sulblime Text](https://img.shields.io/badge/sublime%20text-black?style=for-the-badge&logo=sublime%20text)](https://github.com/SowinskiBraeden)
### OS
[![Linux](https://img.shields.io/badge/linux-black?style=for-the-badge&logo=Linux)](https://github.com/SowinskiBraeden)
[![Windows](https://img.shields.io/badge/Windows-black?style=for-the-badge&logo=Windows)](https://github.com/SowinskiBraeden)
<br>
<details>
<p align="center">
<a href="https://github.com/SowinskiBraeden">
<img src="http://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=SowinskiBraeden&theme=transparent" />
</a>
<a href="https://github.com/SowinskiBraeden">
<img src="https://github-readme-streak-stats.herokuapp.com/?user=SowinskiBraeden&hide_border=true&card_width=338&theme=transparent" />
</a>
<a href="https://github.com/SowinskiBraeden">
<img src="http://github-profile-summary-cards.vercel.app/api/cards/stats?username=SowinskiBraeden&theme=transparent" />
</a>
<a href="https://github.com/SowinskiBraeden">
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=SowinskiBraeden&langs_count=5&hide=EJS,Vue,GDScript,CMake,Makefile,css,html&card_width=699&hide_border=true&theme=transparent" />
</a>
</p>
<p align="center">
<a href="https://github.com/SowinskiBraeden">
<img src="https://komarev.com/ghpvc/?username=SowinskiBraeden&color=eb5234&style=flat)" />
</a>
</p>
</details>
+171
View File
@@ -0,0 +1,171 @@
<!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>
<!-- 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>
<!-- 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.
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">
<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>
<!-- 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("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'));
}
}
</script>
</body>
</html>
+140
View File
@@ -0,0 +1,140 @@
<!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'>
<!-- 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>
<!-- 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>
</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>
</div>
<!-- Import Mobile.js for mobile nav menu -->
<script src="./public/scripts/mobile.js"></script>
<!-- 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("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'));
}
}
</script>
</body>
</html>
+218
View File
@@ -0,0 +1,218 @@
<!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'>
<!-- 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>
<section class="card-body">
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2>01</h2>
<h3>Schedule Generator App</h3>
<p>
A desktop application to interact with my schedule generator algorithm.
The algorithm is written in Python and generates master and student timetables.
I am proud of the algorithm I devised to solve this complex real-world problem.
</p>
<a href="https://github.com/SowinskiBraeden/ScheduleGeneratorApp" target="_blank">Github</a>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>02</h2>
<h3>School Management API</h3>
<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
further develop this API, but I used this project to deepen my understanding of the
programming language Go, API development, and clear documentation.
</p>
<a href="https://github.com/SowinskiBraeden/school-management-api" target="_blank">Github</a>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>03</h2>
<h3>Lines Police CAD</h3>
<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>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<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>
<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
on parsing data, storing data, and providing this data in an appealing way to users. With
many key features built on top of the parsed data from the game server.
</p>
<a href="https://github.com/SowinskiBraeden/dayz-reforger" target="_blank">Github</a>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>07</h2>
<h3>Portfolio</h3>
<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
about me.
</p>
<a href="https://github.com/SowinskiBraeden/SowinskiBraeden" target="_blank">Github</a>
</div>
</div>
</div>
</div>
</section>
<!-- Import Mobile.js for mobile nav menu -->
<script src="./public/scripts/mobile.js"></script>
<!-- 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("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'));
}
}
</script>
</body>
</html>
+574
View File
@@ -0,0 +1,574 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap");
:root {
--theme: #1d1e20;
--primary: #d8d8d9;
--secondary: #eb5234;
--accent: #ff005a;
--panel: rgba(216, 216, 217);
--panel-text: #303030;
--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{
--theme: #d8d8d9;
--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;
}
.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; }
a:hover {
cursor: pointer;
}
a,body,h1{
color:var(--primary);
}
header,nav{
display:block
}
ul{
padding:0
}
ul li::before{
content: '';
position: absolute;
margin-top: 42px;
width: 0;
background-color: var(--secondary);
z-index: 9999;
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
}
body,ul{
margin:0
}
.nav{
color: var(--primary);
display:flex;
flex-wrap:wrap;
justify-content:space-between;
max-width: calc(1024px + 24px * 2);
margin-inline-start:auto;
margin-inline-end:auto;
line-height: 60px;
}
.nav a{
display:block
}
.logo,#menu{
display:flex;
margin:auto 24px;
}
.logo{
flex-wrap:inherit
}
.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
}
#menu{
list-style:none;
word-break:keep-all;
overflow-x:auto;
white-space:nowrap
}
#menu li+li{
margin-inline-start: 24px;
}
#menu a{
font-size:16px
}
#menu .active{
font-weight:500;
}
.main {
zoom: 110%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
padding: 10px;
color: var(--primary);
}
.svg-wrapper {
margin: 0 auto;
width: 320px;
position: relative;
height: 64px;
overflow-y: hidden;
}
.shape {
z-index: 9999;
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
fill: transparent;
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;
font-weight: 900;
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;
}
.social-icons a:not(:last-of-type) {
margin-inline-end:12px;
}
.social-icons a svg {
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
}
#theme-toggle svg{
height:18px;
}
button#theme-toggle{
background-color: var(--theme);
border: none;
color: var(--primary);
font-size:26px;
margin:auto 4px;
transition: 0.8s;
}
button#theme-toggle:hover{
cursor: pointer;
color: var(--secondary);
}
body.dark #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;
}
/* Mobile Nav */
.cta {
cursor: pointer;
font-weight: 600;
transition: 0.8s;
position: absolute;
right: 14%;
}
.menu {
display: none;
color: var(--primary);
size: 125%;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: all 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
color: white;
text-decoration: none;
padding: 15px;
font-size: 36px;
display: block;
transition: all 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: var(--secondary);
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
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;
}
.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;
}
.archive-month{
flex-direction:column;
}
.archive-year{
margin-top:20px;
}
.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) {
.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;
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

+12
View File
@@ -0,0 +1,12 @@
const doc = document;
const menuOpen = doc.querySelector(".menu");
const menuClose = doc.querySelector(".close");
const overlay = doc.querySelector(".overlay");
menuOpen.addEventListener("click", () => {
overlay.classList.add("overlay--active");
});
menuClose.addEventListener("click", () => {
overlay.classList.remove("overlay--active");
});