From ec4511ca893dfc837d4047e879d65f0dbde6a2df Mon Sep 17 00:00:00 2001
From: dereklseitz <derekseitz@dsnet.works>
Date: Sat, 16 Aug 2025 22:29:46 -0500
Subject: [PATCH] refactor: Remove unnecessary comments from codebase

---
 README.md                          |  2 ++
 src/about.njk                      | 21 ++++++++++++++-------
 src/demos.njk                      |  6 ++++--
 src/images/abstract-timekeeper.svg |  1 +
 src/index.njk                      | 14 --------------
 src/styles/about.css               | 11 +++++++++--
 src/styles/demos.css               | 14 ++++++++++++++
 src/styles/index.css               | 24 ++++++++++++------------
 8 files changed, 56 insertions(+), 37 deletions(-)
 create mode 100644 src/images/abstract-timekeeper.svg

diff --git a/README.md b/README.md
index 7c60252..b8950ba 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,4 @@
 # dereklseitz.github.io
 Portfolio website
+
+<!--? Because this is a portfolio site, i'm building it from scratch myself a a demonstration in itself of my work (in addition to other demos that will be subdomains linked into the site. How I explained it to somebody else earlier is this: consider this landing page as the front door to my house. I want it to be simply designed, approachable, and easy to absorb. From there, the About and Contact pages will be similar to a foyer or atrium, following a similar style but in more detail by expanding the conversation. My demos, each hosted with their own subdomain will represent the different rooms of the house, where each one is able to have its own vibe, its own personality, its own style and purpose. That is my vision for this portfolio website (perhaps it's ambitious, but I think it's genius). Once this is done, my work shifts from building this house, to finding people to visit it. Direct outreach and cold calling is what that means. I've already planned this out. After I've had a few clients, I'm going to add a testimonials section, sort of like decorating a front porch for the holidays. You know how people love to go drive through neighborhoods around Christmas to look at the lights and decorations? That's what I'm hoping will start to happen as people give me a shot, and I (hopefully) deliver on my promises. Once I've got a better flow going, then I'll add in social media. I've got a lot left to build before I get there. But this is what I have planned, using www.dlseitz.dev as my biggest prop. -->
\ No newline at end of file
diff --git a/src/about.njk b/src/about.njk
index 0f66545..0267669 100644
--- a/src/about.njk
+++ b/src/about.njk
@@ -10,6 +10,7 @@ pageScripts:
   - "/scripts/accordion.js"
 ---
 
+<!-- ↓  Start About Module ↓ -->
 <section class="about-section module" id="bio" role="region" aria-labelledby="about-heading">
   <h2 id="about-heading">Who <span class="i-am">I</span> Am</h2>
   <p>I’m a freelance developer dedicated to building clean, functional, and accessible web experiences. But beyond the code, I’m someone driven by a deep sense of purpose and a commitment to creating digital solutions that <strong>genuinely</strong> serve people.</p>
@@ -37,23 +38,21 @@ pageScripts:
   </div>
 </section>
 
-<!-- TODO
-  - horizontally align radios
-  - fix aria comment after phone input
-  - style input labels
-  - make text inputs shorter
-  - better "message" placeholder
-  -->
+<!-- ↓  Start Contact Section ↓ -->
 <section id="contact" class="contact-section module" role="region" aria-labelledby="contact-heading">
   <h2 id="contact-heading">Don't Hesitate to Reach Out!</h2>
   <p>A website is often the most powerful marketing tool a business has, so it's normal to have questions about the next steps! I'm here to answer those questions so you can have peace of mind in enhancing your web presence.</p>
+  
+  <!-- ↓  Start Contact Form ↓ -->
   <div class="contact-module module">
     <form id="contact-form" aria-labelledby="contact-form-heading">
       
       <div class="form-sections">
         <div class="contact-fields">
+        
           <fieldset class="name-field">
             <legend>Contact Info</legend>
+        
             <div class="first-name">
               <label for="first-name">First Name:<span class="req-ask">*</span></label>
               <input type="text" id="first-name" name="first-name" placeholder="Ex. Sally" required aria-describedby="first-name-error">
@@ -88,35 +87,43 @@ pageScripts:
             <div class="preferred-method" role="radiogroup" aria-labelledby="contact-method-label">
               <h3 id="contact-method-label">Preferred Contact Method</h3>
               <div class="radio-group">
+        
                 <div class="email-radio">
                   <input type="radio" id="contact-email" name="contact-method" value="email" checked required>
                   <label for="contact-email">Email</label>
                 </div>
+        
                 <div class="phone-radio">
                   <input type="radio" id="contact-phone" name="contact-method" value="phone" required>
                   <label for="contact-phone">Phone</label>
                 </div>
+        
               </div>
             </div>
           </fieldset>
         </div>
       
         <div class="message-submit">
+          
           <fieldset class="message-field">
             <legend>Message</legend>
             <label for="message">Questions or Feedback</label>
             <textarea id="message" name="message" rows="15" placeholder="What questions or feedback do you have for me?" required aria-describedby="message-error"></textarea>
             <span class="error-message" id="message-error" aria-live="polite"></span>
           </fieldset>
+          
           <div class="h-captcha" data-sitekey="b63e5b64-c6f2-4154-b5a6-77169a924022"></div>
+          
           <div class="submit-reset">
             <button type="submit">Send Message</button>
             <button type="reset">Reset Form</button>
           </div>
+
           <div class="honeypot-field" aria-hidden="true">
             <label for="url">Website URL</label>
             <input type="text" name="url" id="url" autocomplete="off" tabindex="-1">
           </div>
+        
         </div>
       </div>
       <p class="form-note">* Required fields</p>
diff --git a/src/demos.njk b/src/demos.njk
index 42d4dca..c770703 100644
--- a/src/demos.njk
+++ b/src/demos.njk
@@ -1,7 +1,9 @@
 ---
 layout: base.njk
-title: Demos
-stylesheet: styles/demos.css
+metaDesc: "Explore a collection of web development projects by Derek L. Seitz. Demos are coming soon! Check back to see my work."
+title: "Demos"
+stylesheet: /styles/demos.css
+isLandingPage: false
 ---
 
 <h1>Demos Coming Soon!</h1>
\ No newline at end of file
diff --git a/src/images/abstract-timekeeper.svg b/src/images/abstract-timekeeper.svg
new file mode 100644
index 0000000..4771b52
--- /dev/null
+++ b/src/images/abstract-timekeeper.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'><rect fill='#E7FAFF' width='2000' height='1500'/><defs><circle  stroke='#348A9C' vector-effect='non-scaling-stroke' id='a' fill='none' stroke-width='3.6' r='315'/><use id='f' href='#a' stroke-dasharray='100 100 100 9999'/><use id='b' href='#a' stroke-dasharray='250 250 250 250 250 9999'/><use id='e' href='#a' stroke-dasharray='1000 500 1000 500 9999'/><use id='g' href='#a' stroke-dasharray='1500 9999'/><use id='h' href='#a' stroke-dasharray='2000 500 500 9999'/><use id='j' href='#a' stroke-dasharray='800 800 800 800 800 9999'/><use id='k' href='#a' stroke-dasharray='1200 1200 1200 1200 1200 9999'/><use id='l' href='#a' stroke-dasharray='1600 1600 1600 1600 1600 9999'/></defs><g transform='translate(1000 750)' stroke-opacity='0.1'><g  transform='rotate(302.4 0 0)' ><circle  fill='#348A9C' fill-opacity='0.1' r='10'/><g  transform='rotate(-36 0 0)'><use href='#f' transform='scale(.1) rotate(50 0 0)' /><use href='#f' transform='scale(.2) rotate(100 0 0)' /><use href='#f' transform='scale(.3) rotate(150 0 0)' /></g><g  transform='rotate(-44.4 0 0)'><use href='#b' transform='scale(.4) rotate(200 0 0)' /><use href='#z' transform='scale(.5) rotate(250 0 0)' /></g><g  id='z' transform='rotate(16.2 0 0)'><g  transform='rotate(189 0 0)'><use href='#b'/><use href='#b' transform='scale(1.2) rotate(90 0 0)' /><use href='#b' transform='scale(1.4) rotate(60 0 0)' /><use href='#e' transform='scale(1.6) rotate(120 0 0)' /><use href='#e' transform='scale(1.8) rotate(30 0 0)' /></g></g><g  id='y' transform='rotate(199.8 0 0)'><g  transform='rotate(113.4 0 0)'><use href='#e' transform='scale(1.1) rotate(20 0 0)' /><use href='#g' transform='scale(1.3) rotate(-40 0 0)' /><use href='#g' transform='scale(1.5) rotate(60 0 0)' /><use href='#h' transform='scale(1.7) rotate(-80 0 0)' /><use href='#j' transform='scale(1.9) rotate(100 0 0)' /></g></g><g  transform='rotate(-226.8 0 0)'><g  transform='rotate(-16.2 0 0)'><g  transform='rotate(-266.4 0 0)'><use href='#h' transform='scale(2) rotate(60 0 0)'/><use href='#j' transform='scale(2.1) rotate(120 0 0)'/><use href='#j' transform='scale(2.3) rotate(180 0 0)'/><use href='#h' transform='scale(2.4) rotate(240 0 0)'/><use href='#j' transform='scale(2.5) rotate(300 0 0)'/></g><use href='#y' transform='scale(2) rotate(180 0 0)' /><use href='#j' transform='scale(2.7)'/><use href='#j' transform='scale(2.8) rotate(45 0 0)'/><use href='#j' transform='scale(2.9) rotate(90 0 0)'/><use href='#k' transform='scale(3.1) rotate(135 0 0)'/><use href='#k' transform='scale(3.2) rotate(180 0 0)'/></g><use href='#k' transform='scale(3.3) rotate(225 0 0)'/><use href='#k' transform='scale(3.5) rotate(270 0 0)'/><use href='#k' transform='scale(3.6) rotate(315 0 0)'/><use href='#k' transform='scale(3.7)'/><use href='#k' transform='scale(3.9) rotate(75 0 0)'/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/index.njk b/src/index.njk
index 2c54468..fc10ddc 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -8,11 +8,6 @@ pageScripts:
     - "/scripts/benefits.js"
     - "/scripts/services.js"
 ---
-
-
-         <!--? The flow and layout for this page should have a similar feel to "https://dribbble.com/shots/26383872-AI-Assistant-Website-Landing-Page" in that it flows smoothly, isn't overwhelming for the user, uses strategic coloring as a highlight (and not a domination). For the user, it needs to feel effortless to absorb the quality being presented.  -->
-
-         <!--? Because this is a portfolio site, i'm building it from scratch myself a a demonstration in itself of my work (in addition to other demos that will be subdomains linked into the site. How I explained it to somebody else earlier is this: consider this landing page as the front door to my house. I want it to be simply designed, approachable, and easy to absorb. From there, the About and Contact pages will be similar to a foyer or atrium, following a similar style but in more detail by expanding the conversation. My demos, each hosted with their own subdomain will represent the different rooms of the house, where each one is able to have its own vibe, its own personality, its own style and purpose. That is my vision for this portfolio website (perhaps it's ambitious, but I think it's genius). Once this is done, my work shifts from building this house, to finding people to visit it. Direct outreach and cold calling is what that means. I've already planned this out. After I've had a few clients, I'm going to add a testimonials section, sort of like decorating a front porch for the holidays. You know how people love to go drive through neighborhoods around Christmas to look at the lights and decorations? That's what I'm hoping will start to happen as people give me a shot, and I (hopefully) deliver on my promises. Once I've got a better flow going, then I'll add in social media. I've got a lot left to build before I get there. But this is what I have planned, using www.dlseitz.dev as my biggest prop. -->
  
 <!-- ↓  Start Intro Module ↓ -->
 <div id="top"></div>
@@ -26,9 +21,6 @@ pageScripts:
     <h2>What a Well-Designed Website Can Do</h2>
     <p>There are countless benefits to having a professionally developed website. Some of the most impactful may be in areas where your business struggles the most.</p>
 
-            <!--? The .benefits-list list will be a JavaScript feature that cycles through the list of benefits. The list likely needs to be lengthened further, and instead of flashing them one by one, perhaps use an accordion feature as a pop-out for different categories, or even a hover that expands the displayed benefits (tap-to-expand using javaScript for mobile devices)-->
-
-
     <div class="benefits-visual">
         <div class="benefits-card" id="card-growth">
             <h3>Expand Your Business</h3>
@@ -74,8 +66,6 @@ pageScripts:
 </div>
 
 <!-- ↓  Start Services Module  ↓ -->
-
-        <!--? This section will feature a carousel of services on cards. The carousel will be scrollable, and when the card is clicked or touched, it will expand to provide a clearer description of the service. This will be accomplished with JavaScript-->
 <div class="services-section module">
     <div class="accordion-container">
         <h2>How I Can Help</h2>
@@ -119,12 +109,8 @@ pageScripts:
     </div>
 </div>
 
-<!-- ↓  Start Services Module  ↓ -->
-
-<!--? This section will feature a carousel of services on cards. The carousel will be scrollable, and when the card is clicked or touched, it will expand to provide a clearer description of the service. This will be accomplished with JavaScript -->
 
 <!-- ↓  Start CTA Module  ↓ -->
-
 <div class="cta-section module">
     <h2 class="inspiration">Perhaps you need a little inspiration...</h2>
     <p><a href="/demos/" class="demos-link" target="_blank"> Explore My Work!</a></p>
diff --git a/src/styles/about.css b/src/styles/about.css
index 0e21bc1..ad211c4 100644
--- a/src/styles/about.css
+++ b/src/styles/about.css
@@ -20,18 +20,20 @@ body {
 }
 
 .i-am {
-  color: #ca6e0b;
+  color: #2e97be;
   font-weight: bold;
 }
 
 .about-section h1 {
   font-size: 2.5rem;
+  color: #2e97be;
   text-align: center;
   margin-bottom: var(--margin-medium);
 }
 
 .about-section h2 {
   font-size: 1.8rem;
+  color: #2e97be;
 }
 
 .about-section p {
@@ -80,7 +82,7 @@ body {
   background-color: #fff;
 }
 
-.w3-acag21 {
+.w3-cag21 {
   color: #ca6e0b;
 }
 
@@ -97,6 +99,11 @@ body {
   color: #333;
 }
 
+#contact-heading {
+  font-size: 1.8rem;
+  color: #2e97be;
+}
+
 form {
   display: flex;
   flex-direction: column;
diff --git a/src/styles/demos.css b/src/styles/demos.css
index 64b6b94..983a26f 100644
--- a/src/styles/demos.css
+++ b/src/styles/demos.css
@@ -1,5 +1,19 @@
 /* demos.css */
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; 
+  background-image: url("/images/abstract-timekeeper.svg");
+  background-attachment: fixed;
+  background-size: cover;
+}
+
+main {
+  flex: 1; 
+}
 
 h1, h2 {
     text-align: center;
+    margin-top: 200px;
+    font-size: 2.5rem;
 }
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index 91126d0..f6d69d6 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -56,7 +56,7 @@ body {
 }
 
 .benefits-container h2, .accordion-container h2, .project-steps h2 {
-    font-color: #2e97be;
+    color: #2e97be;
 }
 
 .benefits-container p, .transition p {
@@ -73,7 +73,7 @@ body {
     min-height: 150px;
 }
 
-/* Correct media query to force a single column layout below 950px */
+/* Media query to force a single column layout below 950px */
 @media (max-width: 950px) {
     .benefits-visual {
         grid-template-columns: 1fr;
@@ -176,7 +176,7 @@ body {
 .accordion-item {
     position: relative;
     width: 100%;
-    background-color: #ffffff; /* Ensure a solid white background */
+    background-color: #ffffff;
     border-radius: 10px;
     padding: 20px;
     text-align: center;
@@ -187,17 +187,17 @@ body {
 }
 
 .accordion-item.active {
-    opacity: 1; /* Fully opaque for the focused card */
+    opacity: 1; 
     transform: scale(1.1);
     z-index: 1;
-    min-height: 318px; /* Ensure the focused card is above others */
+    min-height: 318px; 
 }
 
 /* Styles for an active (open) accordion item */
 .accordion-item.active .accordion-content {
-    max-height: 500px; /* This value should be large enough to contain all content */
-    padding: 15px; /* Adds padding back when open */
-    border-top: 1px solid #dee2e6; /* Adds a border to separate header and content */
+    max-height: 500px; 
+    padding: 15px; 
+    border-top: 1px solid #dee2e6; 
 }
 
 .accordion-header {
@@ -224,9 +224,9 @@ body {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
-    background-color: #ffffff; /* Ensure a solid white background */
+    background-color: #ffffff; 
     padding: 0 15px;
-    color: #333333; /* Explicitly set text color to dark gray */
+    color: #333333; 
 }
 
 .accordion-content ul {
@@ -237,7 +237,7 @@ body {
 
 .accordion-content li {
     padding: 10px;
-    color: #333333; /* Explicitly set text color to dark gray */
+    color: #333333; 
 }
 
 .hover-list {
@@ -248,7 +248,7 @@ body {
 }
 
 .hover-list.active {
-    max-height: 300px; /* Adjust this value if your lists get longer */
+    max-height: 300px; 
     opacity: 1;
 }