Braeden Sowinski

+
+ + I'm Braeden, aka McDazzzled.
+ Currently learning various new frameworks, programs and more.
+ Open to collaborating on interesting and innovative projects.
+
+ +

+ + +

+ +

Braeden Sowinski

+ +

Braeden Sowinski

+ Software Engineer & System Administrator + + + + + + + + + + + + + diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..70c8138 --- /dev/null +++ b/projects.html @@ -0,0 +1,218 @@ + + + + Braeden Sowinski + + + + + + + + + +

+ + + +

+ +

01

Schedule Generator App

+ 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. +

+ Github +

+ +

02

School Management API

+ 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. +

+ Github +

+ +

03

Lines Police CAD

+ Lines Police CAD 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.

+ View LPC + Github +

+ +

04

LPC Discord Bot

+ 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. +

+ Github +

+ +

05

XP-System

+ 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. +

+ Github +

+ +

06

DayZ Reforger Bot

+ 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. +

+ Github +

+ +

07

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 + about me. +

+ Github +

+ +

+ + + + + + + + + + + + diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..90daf20 --- /dev/null +++ b/public/css/style.css @@ -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; +} \ No newline at end of file diff --git a/public/images/pic.png b/public/images/pic.png new file mode 100644 index 0000000..e1ac582 Binary files /dev/null and b/public/images/pic.png differ diff --git a/public/scripts/mobile.js b/public/scripts/mobile.js new file mode 100644 index 0000000..d5bef59 --- /dev/null +++ b/public/scripts/mobile.js @@ -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"); +}); \ No newline at end of file

Hey there!

About Me

Braeden Sowinski

Braeden Sowinski

01

Schedule Generator App

02

School Management API

03

Lines Police CAD

04

LPC Discord Bot

05

XP-System

06

DayZ Reforger Bot

07

Portfolio