From fde00ef1b1589a97a948f28d691d4b7607b2298b Mon Sep 17 00:00:00 2001
From: dereklseitz <derekseitz@dsnet.works>
Date: Mon, 11 Aug 2025 20:21:03 -0500
Subject: [PATCH] Wrote out index.html, adding comments to note intended design
 ideas to be explored

---
 index.html | 102 +++++++++++++++++++++++++++++++++++++++++++++++++----
 script.js  |   0
 styles.css |   3 ++
 3 files changed, 98 insertions(+), 7 deletions(-)
 create mode 100644 script.js
diff --git a/index.html b/index.html
index 230723d..65154bc 100644
--- a/index.html
+++ b/index.html
@@ -8,16 +8,104 @@
         <link rel="stylesheet" href="styles.css">
     </head>
     <body>
-        <header>
-
+         <!--? 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.  -->
+        <!-- ↓  Start Header ↓  -->
+        <header class="main-header">
+          
+            <!-- ↓  Start Nav ↓ -->
+             
+            <nav class="main-nav">
+                <ul class="nav-list">
+                    <li class="nav-item nav-logo"><a href="#home">Derek L. Seitz</a></li>
+                    <li class="nav-item"><a href="#about">About</a></li>
+                    <li class="nav-item portfolio-dropdown"><a href="#portfolio">Portfolio</a></li>
+                    <li class="nav-item"><a href="#contact">Contact</a></li>
+                </ul>
+            </nav>
         </header>
  
+        <!-- ↓  Start Main ↓ -->
         <main>
-            <h1>Derek L. Seitz - Portfolio</h1>
-        </main>
- 
-        <footer>
+            <h1>Grow Your Online Presence with Me, Derek L. Seitz</h1>
+            <p>A great website is often your most powerful sales tool. It's the first impression you make and the cornerstone of your online presence.</p>
+            <h2>What a Well-Designed Website Can Do</h2>
 
+            <!-- ↓  Start   ↓ -->
+             <!--? 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-list">
+                <ul class="growth">
+                    <li>Attract more visitors</li>
+                    <li>Expand your availability</li>
+                    <li>Convert visitors into customers</li>
+                    <li>Engage with your audience</li>
+                </ul>
+
+                <ul class="brand-cred">
+                    <li>Share your expertise</li>
+                    <li>Build trust and credibility</li>
+                    <li>Showcase your products and services</li>
+                    <li>Communicate your vision</li>
+                </ul>
+
+                <ul class="operations">
+                    <li>Transform your workflow</li>
+                    <li>Provide cost-effective marketing</li>
+                    <li>Enhance customer service</li>
+                    <li>Improve data analytics</li>
+                </ul>
+            </div>
+
+            <p>The list of benefits goes on and on.</p>
+            <p>While I focus on getting your website noticed, you can focus on what makes your business thrive: the people and communities your serve.</p>
+            
+            <!--? ↓  Start   ↓ -->
+            <!--? 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-->
+            <h2>The Ways I Can Help</h2>
+            <div class="services">
+                <h3>Web Development & Design:</h3>
+                <ul class="web-dev-service">
+                    <li>Web development</li>
+                    <li>Design & related services</li>
+                    <li>Front-End & Back-End development</li>
+                    <li>Website redesigns</li>
+                    <li>Discovery & Planning sessions</li>
+                    <li>Wire-frames & mockups</li>
+                    <li>Custom solutions<br>(e.g., CMS, eCommerce, & booking tools)</li>
+                </ul>
+
+                <h3>Maintenance & Ongoing Support:</h3>
+                <ul class="ongoing-service">
+                    <li>Site maintenance & updates</li>
+                    <li>Technical support</li>
+                    <li>Routine maintenance & updates</li>
+                    <li>Post-launch support</li>
+                    <li>Ongoing support</li>
+                </ul>
+
+                <h3>Other Related Services:</h3>
+                <ul class="other-service">
+                    <li>Basic SEO setup & Google Analytics integration</li>
+                    <li>Hosting services</li>
+                    <li>Deployment</li>
+                    <li>E-commerce</li>
+                </ul>
+            </div>
+        </main>
+        <hr class="footer-separator">
+        <footer>
+            
+            <ul class="footer-links">
+                <li><a href="#home">Back to Top</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#portfolio">Portfolio</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+            <ul class="external-links">
+                <li><a href="https://linkedin.com/in/dereklseitz" target="_blank">Connect on LinkedIn</a></li>
+                <li><a href="https://git.dsnet.pro/dereklseitz" target="_blank">My Project Repos</a></li>
+            </ul>
+            <p>&copy; 2025, Derek L.Seitz</p>
+            
         </footer>
     </body>
-        </html>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e69de29
diff --git a/styles.css b/styles.css
index e69de29..4a57d6b 100644
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,3 @@
+body {
+    background-color: lightblue;
+}
\ No newline at end of file
