Basic content and structure edits

index.html

@@ -48,12 +48,29 @@ <h3>Current Projects</h3>
         - Building as many app and data projects that I can find or think of. Been taking intro to programming courses over and over for years. Trying to focus on building things now. </p>
       </section>
 
-      <section>
+      <section id="completed-projects" class="card">
         <h3>Completed Projects</h3>
-        <p>
-          <a href="https://github.com/monacojay/big_book_word_cloud" target="_blank">Big Book Word Cloud</a>
-        </p>
-      </section>  
+
+        <div class="completed-project">
+          <p>
+            <a href="https://github.com/monacojay/big_book_word_cloud" target="_blank" class="project-link">
+              Big Book Word Cloud
+            </a><br>
+            <span class="project-desc">
+              Generates word cloud from large text source. Example here is from the Big Book of Alcoholics Anonymous.
+            </span>
+          </p>
+        </div>
+
+        <!-- Add more completed projects like this:
+        <div class="completed-project">
+          <p>
+            <a href="https://github.com/monacojay/another-repo" target="_blank" class="project-link">Project Name</a><br>
+            <span class="project-desc">One-line description of what it does.</span>
+          </p>
+        </div>
+        -->
+      </section>
 
       <section id="contact" class="card">
         <h3>Contact</h3>

styles.css

@@ -140,6 +140,45 @@ footer{
   text-align:center;
 }
 
+/* ===== Completed Projects: links + descriptions ===== */
+.completed-project { margin-bottom: 14px; }
+.completed-project:last-child { margin-bottom: 0; }
+
+a.project-link,
+a.project-link:visited {
+  color: var(--accent);
+  filter: brightness(1.3);      /* brightens without changing hue */
+  font-weight: 600;
+  text-decoration: none;
+}
+
+a.project-link:hover {
+  filter: brightness(1.6);
+  text-decoration: underline;
+}
+
+.project-desc {
+  display: inline-block;
+  margin-top: 4px;
+  font-style: italic;
+  color: var(--muted);
+  line-height: 1.5;
+}
+
+/* ===== Contact Link Styling ===== */
+#contact a,
+#contact a:visited {
+  color: #9ef3a3;              /* same light green as project links */
+  font-weight: 600;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+#contact a:hover {
+  color: #b6ffc2;              /* gentle glow on hover */
+  text-decoration: underline;
+}
+
 @media (max-width:540px){
   header{flex-direction:column;gap:20px}
   header .clock{width:100%;max-width:100%}