update about page

about.html

@@ -10,6 +10,7 @@
 
   <!-- Load CSS -->
   <link rel="stylesheet" href="./public/css/style.css">
+  <link rel="stylesheet" href="./public/css/about.css">
 </head>
 
 <body class="js-stop-transition">
@@ -75,56 +76,69 @@
           <span class="active">Projects</span>
         </a>
       </div>
+    </div>
   </header>
 
-  <!-- About Body -->
+  <div class="container">
-  <div class="about-section">
+    <div id="left">
-    <div class="inner-container">
+      <section id="profile">
-      <h1 id="about-me">About Me</h1>
+        <img src="https://avatars.githubusercontent.com/u/48144618" class="profile" alt="profile">
-      <p class="text">
+        <div class="profile-sub">
-        Hello there,
+          <h2 style="margin-top: 2px;">Braeden Sowinski</h2>
-        I am Braeden Sowinski, you may also know me by my pseudonym McDazzzled. I am an avid software engineer, actively
+          <span class="des">Software Engineer & System Administrator</span>
-        pursuing a Diploma in Computer System Technologies at BCIT. I am adaptable and driven with a strong work ethic; 
+        </div>
-        possessing the ability to thrive in both a team-based or individualy motivated setting.
+      </section>
+      <section id="skills">
+        <h3 class="title">SKILLS</h3>
 
-        I am eager to expand my knowledge in Software Engineering, IT, System Administration and related fields.
+        <ol style="transform: translate(-25px, 0);">
-        Approaching more than 5 years of continuous learning and programming, I have learned many valuable languages and 
+          <li><a href="https://git-scm.com/" target="_blank">Git</a></li>
-        frameworks such as C, Go, Node.js, and Python 3+. However, there is always more to learn and experience that I 
+          <li><a href="https://www.python.org/" target="_blank">Python 3+</a></li>
-        will accomplish by quickly adapting to a new setting.
+          <li><a href="https://nodejs.org/en" target="_blank">Node.js</a></li>
-      </p>
+          <li><a href="https://go.dev/" target="_blank">Go</a></li>
+          <li>C</li>
+          <li>Markdown</li>
+          <li>Windows/Debian based OS</li>
+          <li>System Administration</li>
+          <li><a href="https://www.mongodb.com/" target="_blank">MongoDB</a></li>
+        </ol>
+      </section>
+    </div>
     
-      <div class="skills">
+    <div id="right">
-        <span>
+      <section id="about">
-          <img style="transform: translate(0, 8px);"
+        <h3 class="title">About me</h3>
-            src="https://img.shields.io/badge/python-black?style=for-the-badge&logo=python" width="24" height="24">
+        <p class="text">
-          Python
+          Hello there,
-        </span>
+          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.
   
-        <span>
+          I am eager to expand my knowledge in Software Engineering, IT, System Administration and related fields.
-          <img style="transform: translate(0, 8px);"
+          Approaching more than 5 years of continuous learning and programming, I have learned many valuable languages and 
-            src="https://img.shields.io/badge/javascript-black?style=for-the-badge&logo=javascript" width="24"
+          frameworks such as C, Go, Node.js, and Python 3+. However, there is always more to learn and experience that I 
-            height="24">
+          will accomplish by quickly adapting to a new setting.
-          Node.js
+        </p>
-        </span>
+      </section>
+      <section id="honors">
+        <h3 class="title">Honors & Awards</h3>
 
-        <span>
+        <dl>
-          <img style="transform: translate(0, 8px);"
+        <dt><b>Capstone Project Recognition</b></dt>
-            src="https://img.shields.io/badge/go-black?style=for-the-badge&logo=go" width="24" height="24">
+        <dd>
-          Go
+          Issued by
-        </span>
+          <abbr title="Sullivan Heights Secondary School">SHSS</abbr>
+          — Recognition award
+            for capstone project.
+        </dd>
 
-        <span>
+        <dt><b>Master Digital Crafter</b></dt>
-          <img style="transform: translate(0, 8px);"
+        <dd>
-            src="https://img.shields.io/badge/mongodb-black?style=for-the-badge&logo=mongodb" width="24" height="24">
+          Issued by
-          MongoDB
+          <abbr title="Sullivan Heights Secondary School">SHSS</abbr>
-        </span>
+          — Exceeding expectationg in Software Engineering 11/12</dd>
-
+        </dl>
-        <span>
+      </section>
-          <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>
 
@@ -135,7 +149,7 @@
   <script>document.body.classList.remove('js-stop-transition')</script>
 
   <!-- Change Theme Scripts -->
-  <script type="text/javascript">
+  <script>
     document.getElementById("theme-toggle").addEventListener("click", () => {
       document.body.className.includes("light") ? (
         document.body.classList.remove('light'),

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" lang='en'>
+<html lang='en'>
 
 <head>
   <title>Braeden Sowinski</title>
@@ -69,15 +69,16 @@
         <a href="/about" title="about"><span class="active">About</span></a>
         <a href="/projects" title="projects"><span class="active">Projects</span></a>
       </div>
+    </div>
   </header>
 
   <!-- Main Body -->
   <div class="main">
-    <img src="https://avatars.githubusercontent.com/u/48144618" class="profile">
+    <img src="https://avatars.githubusercontent.com/u/48144618" class="profile" alt="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>
+        <rect x="0" y="0" class="shape" height="60" width="320" />
       </svg>
     </div>
     <h2 style="margin-top: 2px;" class="mobile-name">Braeden Sowinski</h2>
@@ -121,7 +122,7 @@
     <script>document.body.classList.remove('js-stop-transition')</script>
 
     <!-- Change Theme Scripts -->
-    <script type="text/javascript">
+    <script>
       document.getElementById("theme-toggle").addEventListener("click", () => {
         document.body.className.includes("light") ? (
           document.body.classList.remove('light'),

projects.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" lang='en'>
+<html lang="en">
-
 <head>
   <title>Braeden Sowinski</title>
   <meta name='description' content="Web portfolio of Braeden Sowinski (McDazzzled)" />
@@ -76,6 +75,7 @@
           <span class="active">Projects</span>
         </a>
       </div>
+    </div>
   </header>
 
   <section class="card-body">
@@ -210,7 +210,7 @@
   <script>document.body.classList.remove('js-stop-transition')</script>
 
   <!-- Change Theme Scripts -->
-  <script type="text/javascript">
+  <script>
     document.getElementById("theme-toggle").addEventListener("click", () => {
       document.body.className.includes("light") ? (
         document.body.classList.remove('light'),

public/css/about.css

@@ -0,0 +1,46 @@
+.container {
+  display: grid;
+  grid-template-areas: "header header";
+  grid-template-columns: 1fr 2fr;
+  gap: 24px;
+  padding: 24px;
+}
+
+section {
+  transition: .8s;
+  padding: 24px;
+  background-color: var(--menu-text-bg);
+  border-radius: 12px;
+  margin-bottom: 24px;
+}
+
+#profile {
+  background-image: url("../images/pic.png");
+  color: #d8d8d9; /* dont use variable as we want this text to always be this color */
+}
+
+#profile img {
+  border: 6px solid var(--primary);
+  transition: .8s;
+}
+
+.profile-sub {
+  background-color: rgba(0, 0, 0, .7);
+  padding: 12px;
+  border-radius: 12px;
+}
+
+dt {
+  margin-top: 12px;
+}
+
+@media only screen and (max-width: 740px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  #skills {
+    margin-bottom: 0px;
+  }
+}