content updates (projects and Images)

index.html

@@ -97,25 +97,45 @@ <h2 style="line-height: 0.5;">About Me</h2><br/>
             </div>
         </div>
 
+        <div class="portfolio-intro-section">
+            <p style="color: #588157;">Portfolio</p>
+            <h2 style="line-height: 0.5;">My Project Collection</h2><br/>
+            <p>Below are a handful of projects that I have created or
+                been a part of over the course of my career and studies.<br/>For more
+                projects you can visit my 
+                <a style="color: #588157;">github</a>.
+            </p>
+            <p style="font-size: small;">Click on a project to open</p>
+        </div>
         <div class="portfolio-projects main-divs">
-            <div class="portfolio-intro-section">
-                <p style="color: #588157;">Portfolio</p>
-                <h2 style="line-height: 0.5;">My Project Collection</h2><br/>
-                <p>Below are a handful of projects that I have created or
-                    been a part of over the course of my career and studies.<br/>For more
-                    projects you can visit my 
-                    <a style="color: #588157;">github</a>.
-                </p>
+            <a href="https://www.fluke.com/en-us" target="_blank"><div class="portfolio-projects-child">
+                <h3>Fluke Corporation Website</h3>
+                <p>I currently take on responsibilities for editing and maintaning website content and functionality.</p>
+                <p style="font-size: x-small; bottom: 0px; position: absolute;">Drupal, HTML, CSS, JavaScript</p>
+            </div></a>
+            <a href="https://github.com/chaseyvw/leapforwardsite" target="_blank"><div class="portfolio-projects-child">
+                <h3>Leap Forward Website</h3>
+                <p>A website created for a non-profit. I was responsible for both Front and Back End features on this project.</p>
+                <p style="font-size: x-small; bottom: 0px; position: absolute;">HTML, CSS, JavaScript, jQuery, Bootstrap</p>
+            </div></a>
+            <a href="https://forms.fluke.com/IG-GL-ESVE-2023-EMOBILITY-LP-1-A" target="_blank"><div class="portfolio-projects-child">
+                <h3>Fluke eMobility Landing Page</h3>
+                <p>A microsite I created from start to finish with the help of creative services and the UX team.</p>
+                <p style="font-size: x-small; bottom: 0px; position: absolute;">Eloqua, HTML, CSS, JavaScript, jQuery, Bootstrap</p>
+            </div></a>
+            <a href="https://github.com/chaseyvw/Pricing-Component" target="_blank"><div class="portfolio-projects-child">
+                <h3>Mock Pricing Page</h3>
+                <p>A pricing page I created for a mock AI company including three packages.</p>
+                <p style="font-size: x-small; bottom: 0px; position: absolute;">HTML, CSS, JavaScript</p>
+            </div></a>
+        </div> 
+
+        <div class="footer">
+            <div class="footer-img-container">
+                <a href="https://www.linkedin.com/in/chasey-van-wie-6423a4162/"><img style="width: 50px; height: auto;" src="Images\linkedin-logo.png.png"></a>
+                <a href="https://github.com/chaseyvw"><img style="width: 50px; height: auto;" src="Images\github-brown-background.png.png"></a>
+                <a href="mailto:@chaseyvw@gmail.com"><img style="width: 50px; height: auto;" src="Images\email-brown-background.png.png"></a>
             </div>
-                <!--List of projects to include:
-                    - Leap Forward
-                    - DeafandHoH.com
-                    - Fluke
-                    - Crystal Checker
-                -->
-            <div class="portfolio-project-section">
-
-            </div>
-        </div>          
+        </div>
     </body>
 </html>

style.css

@@ -262,44 +262,49 @@ button:hover {
 }
 
 .portfolio-projects {
-    flex-direction: column !important;
-}
-
-.grid-container {
     display: grid;
-    width: 70%;
-    height: auto;
-    gap: 10px;
-    grid-template-rows: 33.33% 33.33%;
-    grid-template-columns: 33.33% 33.33% 33.33%;
-
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto;
+    gap: 50px;
+    max-width: 1000px;
+    margin: auto; 
 }
 
-.grid-container img {
-    width: 100% !important;
-    height: auto;
+.portfolio-projects a {
+    text-decoration: none !important;
 }
 
-#grid-item-1 {
-    grid-row-start: 1;
-    grid-column-start: 1;
-    grid-column-end: 2;
+.portfolio-projects-child {
+    text-align: center;
+    display: flex; flex-direction: column; align-items: center;
+    border: 1px solid #588157;
+    border-radius: 10px;
+    padding: 20px;
+    transition: 0.5s;
+    color: #362417;
+    position: relative;
+    height: 300px;
 }
 
-#grid-item-2 {
-    grid-column: 3;
-    grid-row-start: 1;
-    grid-row-end: 2;
+.portfolio-projects-child:hover {
+    box-shadow: 5px 5px 5px 5px #ebe6eb;
 }
 
-#grid-item-3 {
-    grid-column: 1;
-    grid-row: 2;
+@media screen and (max-width: 815px) {
+    .portfolio-projects {
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto;
+    }
 }
 
-#grid-item-4 {
-    grid-column: 2;
-    grid-row: 2;
+@media screen and (max-width: 515px) {
+    .portfolio-projects {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+    }
+    .portfolio-projects-child {
+        height: 250px;
+    }
 }
 
 .about-me-main-div {
@@ -347,4 +352,18 @@ button:hover {
     #right-star-about-me {
         top: 20px; 
     }
-} 
+} 
+
+.footer {
+    background-color: #362417;
+}
+
+.footer-img-container { 
+    margin: auto;
+    width: 50%;
+    display: flex; flex-direction: row;
+    justify-content: center;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    gap: 10px;
+}