porfolio changes

met18001 · Mar 21, 2020 · 55a3f0b · 55a3f0b
1 parent edb8dc9
commit 55a3f0b
Show file tree

Hide file tree

Showing 29 changed files with 225 additions and 33 deletions.
diff --git a/animation.html b/animation.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Animation</title>
+    <link rel="stylesheet" href="css/animation.css">
+    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Julius+Sans+One|Raleway:300,400&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="flex">
+        <a href= "index.html" class="leftbutton">Home</a>
+        <div class="right">
+            <h1>CSS Animation Project</h1>
+            <p>This project was a midterm for my Web II course where we were instructed to study a part of CSS that we did not know much about. I chose CSS animations and transitions.</p>
+        </div>
+    </div>
+    <div class="box">
+        <img src="img/CSS Showcase.gif" class="gif" alt="CSS Showcase Gif">
+        <img src="img/CSS Showcase2.gif" class="gif" alt="CSS Showcase Gif">
+    </div>
+
+</body>
+</html>
diff --git a/css/animation.css b/css/animation.css
@@ -0,0 +1,104 @@
+.flex{
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+            align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+                    flex-direction: column;
+
+}
+@media(min-width:700px){
+.flex{
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+            align-items: center;
+            -webkit-box-orient: horizontal;
+            -webkit-box-direction: normal;
+                    flex-direction: row;
+            padding: 70px;
+}
+}
+p{
+    font-family: 'Raleway', sans-serif;
+    font-weight: 300;
+    font-size: 20px;
+    margin: 0%;
+
+}
+a.leftbutton{
+    font-size: 25px;
+    color: black;
+    font-family: 'Raleway', sans-serif;
+    font-weight: 300;
+    border: black 2px solid;
+    padding: 10px;
+    text-decoration: none;
+
+}
+a.leftbutton:hover{
+    text-decoration: none;
+    color: white;
+    border: #1d9c9f 2px solid;
+    background-color: #1d9c9f;
+    -webkit-transition: ease-in .75s;
+    transition: ease-in .75s;
+}
+h1{
+    margin:0%;
+    font-family: 'Abril Fatface', cursive;
+
+}
+.right{
+display: -webkit-box;
+display: flex;
+-webkit-box-orient: vertical;
+-webkit-box-direction: normal;
+        flex-direction: column;
+        margin: 30px;
+
+}
+.gif{
+    max-width: 500px;
+    max-height: 300px;
+}
+.box{
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+            align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+                    flex-direction: column; 
+}
+
+@media(min-width:700px){
+    .box{
+        display: -webkit-box;
+        display: flex;
+        -webkit-box-pack: center;
+                justify-content: center;
+        -webkit-box-align: center;
+                align-items: center;
+                -webkit-box-orient: horizontal;
+                -webkit-box-direction: normal;
+                        flex-direction: row; 
+    }
+    .right{
+        padding-left: 4em;
+        margin: 0px;
+    }
+}
+@media(max-width:650px){
+    .gif{
+        max-width: 250px;
+        max-height: 150px;
+    }
+}
diff --git a/css/style.css b/css/style.css
@@ -55,9 +55,7 @@ background-color: black;
 .navbar-light .navbar-nav{
     margin-top: 20px;
 }
-body{
-
-}
+
 .body{
     background-image: url("../img/morepink.jpg");
     background-position: center top;
@@ -233,14 +231,22 @@ a.fab:hover{
      0%, 100%, 0% {-webkit-transform: translateY(0);transform: translateY(0);}
     50% {-webkit-transform: translateY(-5px);transform: translateY(-15px);}
   } 
-  i.fas{
+  a.fas{
       font-size: 5em;
+      color: black;
   }
-  i.fas:hover{
+ a.fas:hover{
       color: #1d9c9f;
       -webkit-transition: ease-in .75s;
       transition: ease-in .75s;
+      text-decoration: none;
   }
+  a.fas:visited{
+    color: black;
+    -webkit-transition: ease-in .75s;
+    transition: ease-in .75s;
+    text-decoration: none;
+}
   .section2{
     padding: 45px;
     display: -webkit-box;
@@ -251,7 +257,8 @@ a.fab:hover{
             align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
-            flex-direction: column; 
+            flex-direction: column;
+            margin-bottom: 50px;
   }
   @media(min-width: 800px){
       .section2{
@@ -283,9 +290,7 @@ a.fab:hover{
   .innerBox{
       padding-right: 25px;
   }
-  .box1{
 
-  }
   .wrapper{
       max-width: 700px;
       max-height: 700px;
@@ -391,12 +396,14 @@ figure {
     display: -webkit-box;
     display: flex;
     -webkit-box-pack: center;
-            justify-content: center;
+    justify-content: center;
     -webkit-box-align: center;
-            align-items: center;
-            -webkit-box-orient: horizontal;
-            -webkit-box-direction: normal;
-            flex-flow: row wrap;
+    align-items: center;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    flex-flow: row wrap;
+    padding-top: 40px;
+    padding-bottom: 40px;
 
 
 
@@ -433,6 +440,7 @@ transition: ease-in .5s;
     text-align: center; 
     font-family: 'Raleway',sans-serif;
     font-size: 25px;
+    text-shadow: 2px 2px 5px hotpink;
 
   }
 
@@ -445,4 +453,49 @@ transition: ease-in .5s;
       -webkit-box-pack: center;
               justify-content: center;
   }
-
+.foot{
+    display: -webkit-box;
+	display: flex;
+	justify-content: space-around;
+	-webkit-box-align: center;
+    align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    margin-top: 2%;
+    margin-bottom: 2%;
+}
+  @media(min-width:900px){
+  .foot {
+	display: -webkit-box;
+	display: flex;
+	justify-content: space-around;
+	-webkit-box-align: center;
+    align-items: center;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+            flex-direction: row;
+        }
+}
+.info{
+    padding: 20px;
+}
+.buttonorg{
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+            flex-direction: row;
+    -webkit-box-align: center;
+            align-items: center;
+    align-items: center;
+}
+.footer{
+    font-family: 'Raleway',sans-serif;
+    font-size: 20px; 
+}
+.portfolio2{
+    padding: 30px;
+    font-family: 'Raleway',sans-serif;
+    font-size: 20px; 
+}
diff --git a/img/CSS Showcase.gif b/img/CSS Showcase.gif
diff --git a/img/CSS Showcase2.gif b/img/CSS Showcase2.gif
diff --git a/img/Internship_Resume_Most_Recent.pdf b/img/Internship_Resume_Most_Recent.pdf
diff --git a/img/Resume.pdf b/img/Resume.pdf
diff --git a/img/Resume/2020Resume_Internship.pdf b/img/Resume/2020Resume_Internship.pdf
diff --git a/img/Resume/2020_Internship_Resume.pdf b/img/Resume/2020_Internship_Resume.pdf
diff --git a/img/Resume/Internship_Resume_Most_Recent.pdf b/img/Resume/Internship_Resume_Most_Recent.pdf
diff --git a/img/Resume/MeiraResume_2020.pdf b/img/Resume/MeiraResume_2020.pdf
diff --git a/img/Resume/Meira_Tompkins_Resume (9).pdf b/img/Resume/Meira_Tompkins_Resume (9).pdf
diff --git a/img/Resume/Meira_Tompkins_Resume.pdf b/img/Resume/Meira_Tompkins_Resume.pdf
diff --git a/img/Resume/Meira_Tompkins_Resume_1.pdf b/img/Resume/Meira_Tompkins_Resume_1.pdf
diff --git a/img/Resume/Meira_Tompkins_Resume_10.JPG b/img/Resume/Meira_Tompkins_Resume_10.JPG
diff --git a/img/Resume/Meira_Tompkins_Resume_10.pdf b/img/Resume/Meira_Tompkins_Resume_10.pdf
diff --git a/img/Resume/resume.indd b/img/Resume/resume.indd
diff --git a/img/Resume/resume_2020.indd b/img/Resume/resume_2020.indd
diff --git a/img/Resume/resume_2020.pdf b/img/Resume/resume_2020.pdf
diff --git a/img/Resume/resume_graphic_design_job.indd b/img/Resume/resume_graphic_design_job.indd
diff --git a/img/Resume/resume_graphic_design_job.pdf b/img/Resume/resume_graphic_design_job.pdf
diff --git a/img/Resume/resume_graphic_design_job1.pdf b/img/Resume/resume_graphic_design_job1.pdf
diff --git a/img/sand.png b/img/sand.png
diff --git a/img/starwars2.jpg b/img/starwars2.jpg
diff --git a/img/starwars3.jpg b/img/starwars3.jpg
diff --git a/img/umbridge screenshot.JPG b/img/umbridge screenshot.JPG
diff --git a/img/umbridge.jpg b/img/umbridge.jpg
diff --git a/img/web1.png b/img/web1.png
diff --git a/index.html b/index.html
@@ -38,7 +38,7 @@
             <li><a href="index.html">Home</a></li>
             <li><a href="#about">About</a></li>
             <li><a href="#portfolio">Portfolio</a></li>
-            <li><a href="contact.php">Contact</a></li>
+            <li><a href="#contact">Contact</a></li>
           </ul>
         </div>
       </div>
@@ -50,12 +50,12 @@
       </div>
       <p> Designer // Coder // Artist </p>
       <div class="box2">
-        <a class="download" href="Resume.pdf" download="Resume">Resume</a>
+        <a class="download" href="img/Resume.pdf" download="Resume">Resume</a>
         <a class="glyphicon glyphicon-envelope" href="mailto:meira.tompkins@uconn.edu" role="button"></a>
         <a class="fab fa-linkedin-in" style="font-size:36px"href="https://www.linkedin.com/in/meira-tompkins-11a3961a1/" role="button"></i></a>
       </div>
       <div class="bounce">
-        <i class="fas fa-angle-down"></i>
+        <a href="#about" class="fas fa-angle-down"></a>
       </div>
     </section>
 </section>
@@ -70,7 +70,7 @@
     <div class="page3" id="portfolio">
       <div class="portfolio1">
 
-        <a class="link" href="animation.html.html">
+        <a class="link" href="animation.html">
         <figure>
          <img class="img" src="img/css2.png" alt="CSS Animation">
           <figcaption>CSS Animation</figcaption>
@@ -86,40 +86,51 @@
 
         <a class="link" href="farmhouse.html">
         <figure>
-          <img class="img" src="img/farmhouse2.png">
+          <img class="img" src="img/sand.png">
           <figcaption>Farmhouse Cafe </figcaption>
         </figure>
         </a>
 
-
-
-        <a class="link" href="farmhouse.html">
+        <a class="link" href="web.html">
           <figure>
-            <img class="img" src="img/farmhouse2.png">
-            <figcaption>Farmhouse Cafe  </figcaption>
+            <img class="img" src="img/web1.png">
+            <figcaption> Web</figcaption>
           </figure>
           </a>
 
         <a class="link" href="farmhouse.html">
           <figure>
-            <img class="img" src="img/farmhouse2.png">
-            <figcaption>Farmhouse Cafe  </figcaption>
+            <img class="img" src="img/umbridge.jpg">
+            <figcaption>Animation // Editing </figcaption>
           </figure>
         </a>
 
         <a class="link" href="miscellaneous.html">
           <figure>
-            <img class="img" src="img/farmhouse2.png">
-            <figcaption>Farmhouse Cafe  </figcaption>
+            <img class="img" src="img/starwars2.jpg">
+            <figcaption>Miscellaneous </figcaption>
           </figure>
         </a>
-
-
-
       </div>
-
-
     </div>
+
+    <footer class="foot" id="contact">
+      <div class="info">
+        <div class="footer">Meira Tompkins</div>
+        <div class="footer">mtompkins09@yahoo.com</div>
+        <div class="footer">meira.tompkins@uconn.edu</div>
+        <div class="footer">(978)-846-9699</div>
+        <br>
+        <div class="footer">Connecticut\Massachusetts</div>
+      </div>
+      <div class="portfolio2">Portfolio Website Designed and Coded by Meira Tompkins</div>
+      <div class="buttonorg">
+        <a class="download" href="img/Resume.pdf" download="Resume">Resume</a>
+        <a class="glyphicon glyphicon-envelope" href="mailto:meira.tompkins@uconn.edu" role="button"></a>
+        <a class="fab fa-linkedin-in" style="font-size:36px"href="https://www.linkedin.com/in/meira-tompkins-11a3961a1/" role="button"></i></a>
+      </div>
+
+    </footer>