hyperlink styling and box shadows for snippets

ui/html/pages/index.tmpl

@@ -22,7 +22,7 @@
     <div class="flex justify-center">
       <div class="text-center">
         <p class="text-2xl">Jack Fordyce</p>
-        <h3>Software Engineer</h3>
+        <p>Software Engineer</p>
       </div>
     </div>
     <div class="flex justify-center gap-x-2 mt-3">
@@ -31,39 +31,39 @@
       <a href="https://www.linkedin.com/in/jackmitchellfordyce/" target="_blank" id="linked-link"><img class="w-12 h-10" src="../static/img/linkedin.png" alt="Visit my Linkedin page"></a>
     </div>
     <div class="flex flex-col space-y-8 mt-10">
-    <div class="flex justify-center">
-      <div class="w-2/3 space-y-2">
-          <span><a href=https://github.com/jackmford/fordycephotos target="_blank">Fordyce Photos</a> <i class="fas fa-camera-retro"></i></span>
-          <p>Several years ago I deleted all of my social media applications and ceased posting content on platforms like Instagram and Twitter. I still had an urge to share some of the photos I take occasionally, so I stood this site up using Flask, Caddy, uWSGI, Amazon S3, and Digital Ocean.</p>
-      </div>
-    </div>
-    <div class="flex justify-center">
-      <div class="w-2/3 space-y-2">
-          <span class="proj-p-title"><a href=https://github.com/jackmford/capstone target="_blank">Canvas Assistant</a> <i class="fas fa-pencil"></i></span>
-          <p class="proj-p-des">Canvas Assistant was built to combine the functionality of the Google Assistant with the Canvas application used by many college campuses throughout the country. It was created using a combination of Dialogflow (NodeJS) for natural language processing, Python Flask for web application based user-enrollment, and Google's Realtime DB for data storage. The project allowed students to be able to verbally communicate with their Canvas account, being able to ask what assignments they had due, what was on their schedule, or if they had any pending notifications.</p>
+      <div class="flex justify-center">
+        <div class="w-2/3 space-y-2 shadow p-4">
+            <span><a class="link" href=https://github.com/jackmford/fordycephotos target="_blank">Fordyce Photos</a> <i class="fas fa-camera-retro"></i></span>
+            <p>Several years ago I deleted all of my social media applications and ceased posting content on platforms like Instagram and Twitter. I still had an urge to share some of the photos I take occasionally, so I stood this site up using Flask, Caddy, uWSGI, Amazon S3, and Digital Ocean.</p>
         </div>
       </div>
+      <div class="flex justify-center">
+        <div class="w-2/3 space-y-2 shadow p-4">
+            <span><a class="link" href=https://github.com/jackmford/capstone target="_blank">Canvas Assistant</a> <i class="fas fa-pencil"></i></span>
+            <p>Canvas Assistant was built to combine the functionality of the Google Assistant with the Canvas application used by many college campuses throughout the country. It was created using a combination of Dialogflow (NodeJS) for natural language processing, Python Flask for web application based user-enrollment, and Google's Realtime DB for data storage. The project allowed students to be able to verbally communicate with their Canvas account, being able to ask what assignments they had due, what was on their schedule, or if they had any pending notifications.</p>
+          </div>
+        </div>
 
-    <div class="flex justify-center">
-      <div class="w-2/3 space-y-2">
-          <span class="proj-p-title"><a href=https://github.com/nathan-backman/cmsc491-SPE target="_blank">CMSC491 - SPE</a> <i class="fas fa-folder-tree"></i></span>
-          <p class="proj-p-des">This stream processing engine was built by a team of seven computer science students at Buena Vista University as well as Dr. Nathan Backman. The application is able to process streams of data through various components, tests wrote by the team included things such as vowel_counter, average_aggregation, and Farenheit_to_Celsius. The engine's main function was to process chunks of Minecraft data and return the xyz position of the closest specified block to the player in any given world, using realtime live data streams from the Minecraft game itself.</p>
+      <div class="flex justify-center">
+        <div class="w-2/3 space-y-2 shadow p-4">
+            <span><a class="link" href=https://github.com/nathan-backman/cmsc491-SPE target="_blank">CMSC491 - SPE</a> <i class="fas fa-folder-tree"></i></span>
+            <p>This stream processing engine was built by a team of seven computer science students at Buena Vista University as well as Dr. Nathan Backman. The application is able to process streams of data through various components, tests wrote by the team included things such as vowel_counter, average_aggregation, and Farenheit_to_Celsius. The engine's main function was to process chunks of Minecraft data and return the xyz position of the closest specified block to the player in any given world, using realtime live data streams from the Minecraft game itself.</p>
+          </div>
         </div>
-      </div>
 
-    <div class="flex justify-center">
-      <div class="w-2/3 space-y-2">
-          <span class="proj-p-title"><a href=https://github.com/jackmford/Computer-Reservation-System target="_blank">Computer-Reservation</a> <i class="fas fa-desktop"></i></span>
-          <p class="proj-p-des">Flask/React application to allow students at Buena Vista University to reserve computers in the High Performance Computing Laboratory. Includes full user authentication and an interactive user interface that displays if computers are reserved. If a computer is free, allows a user to reserve it for a specified amount of time.</p>
+      <div class="flex justify-center">
+        <div class="w-2/3 space-y-2 shadow p-4">
+            <span><a class="link" href=https://github.com/jackmford/Computer-Reservation-System target="_blank">Computer-Reservation</a> <i class="fas fa-desktop"></i></span>
+            <p>Flask/React application to allow students at Buena Vista University to reserve computers in the High Performance Computing Laboratory. Includes full user authentication and an interactive user interface that displays if computers are reserved. If a computer is free, allows a user to reserve it for a specified amount of time.</p>
+          </div>
         </div>
-      </div>
 
-    <div class="flex justify-center pb-10">
-      <div class="w-2/3 space-y-2">
-          <span class="proj-p-title"><a href=https://github.com/jackmford/finger-game target="_blank">Finger Game</a> <i class="fas fa-hand-point-up"></i></span>
-          <p class="proj-p-des">Web application that utilizes self-trained object detection to identify the number of fingers a user is holding up to the webcam. Included usage of Flask, Javascript, Bulma CSS, and several Python libraries to train the finger-tip detector. Hack ISU 2018 project written with Zachary Macke, John Jago, and Sandeep Yeturu.</p>
+      <div class="flex justify-center pb-10">
+        <div class="w-2/3 space-y-2 shadow p-4">
+            <span><a class="link" href=https://github.com/jackmford/finger-game target="_blank">Finger Game</a> <i class="fas fa-hand-point-up"></i></span>
+            <p>Web application that utilizes self-trained object detection to identify the number of fingers a user is holding up to the webcam. Included usage of Flask, Javascript, Bulma CSS, and several Python libraries to train the finger-tip detector. Hack ISU 2018 project written with Zachary Macke, John Jago, and Sandeep Yeturu.</p>
         </div>
       </div>
-      </div>
+    </div>
   </body>
 </html>

ui/static/css/index.css

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer utilities {
+	.link {
+		@apply underline text-blue-600 hover:text-blue-800 
+ 	}
+
+}

ui/static/css/output.min.css

@@ -614,6 +614,10 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -657,6 +661,17 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.link {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+  text-decoration-line: underline;
+}
+
+.link:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
 .hover\:bg-orange-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 237 213 / var(--tw-bg-opacity));