v1.1

Added animations and made it work better on mobile
OddDevelopment · Jul 30, 2023 · 8fde803 · 8fde803
1 parent 498c5f6
commit 8fde803
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -18,8 +18,4 @@ Demo Page: https://odddevelopment.github.io/GlampPortfolio/
 [![Deploy with Netlify](https://binbashbanana.github.io/deploy-buttons/buttons/remade/netlify.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/OddDevelopment/GlampPortfolio)
 [![Remix on Glitch](https://binbashbanana.github.io/deploy-buttons/buttons/remade/glitch.svg)](https://glitch.com/edit/#!/import/github/OddDevelopment/GlampPortfolio)
 [![Deploy with Vercel](https://binbashbanana.github.io/deploy-buttons/buttons/remade/vercel.svg)](https://vercel.com/new/clone?repository-url=https://github.com/OddDevelopment/GlampPortfolio) 
-[![Deploy to Render](https://binbashbanana.github.io/deploy-buttons/buttons/remade/render.svg)](https://render.com/deploy?repo=https://github.com/OddDevelopment/GlampPortfolio)
-
-### Todo list:
-- Add animations to buttons
-- Make site mobile optimized
+[![Deploy to Render](https://binbashbanana.github.io/deploy-buttons/buttons/remade/render.svg)](https://render.com/deploy?repo=https://github.com/OddDevelopment/GlampPortfolio)
diff --git a/index.html b/index.html
@@ -37,19 +37,22 @@ <h1>YourName's Portfolio</h1>
                 <div class="project-text">
                     <h2>Project 1</h2>
                     <p>
-                        Some text talking about this project so people know what is it and how cool it what I dont know but in what you want do like 5 - 6 sentences thats what I did for the one I did anyways have fun with it :)
+                        Some text talking about this project so people know what is it and how cool it what I dont know
+                        but in what you want do like 5 - 6 sentences thats what I did for the one I did anyways have fun
+                        with it :)
                     </p>
                 </div>
             </div>
         </div>
         <div class="horizontal-separator"></div>
-    <section class="projects">
         <div class="project">
             <div class="project-content">
                 <div class="project-text-right">
                     <h2>Project 2</h2>
                     <p>
-                        Some text talking about this project so people know what is it and how cool it what I dont know but in what you want do like 5 - 6 sentences thats what I did for the one I did anyways have fun with it :)
+                        Some text talking about this project so people know what is it and how cool it what I dont know
+                        but in what you want do like 5 - 6 sentences thats what I did for the one I did anyways have fun
+                        with it :)
                     </p>
                 </div>
                 <div class="separator"></div>
@@ -64,7 +67,9 @@ <h2>Project 2</h2>
                 <div class="project-text">
                     <h2>Project 3</h2>
                     <p>
-                        Some text talking about this project so people know what is it and how cool it what I dont know but in what you want do like 5 - 6 sentences thats what I did for the one I did anyways have fun with it :)
+                        Some text talking about this project so people know what is it and how cool it what I dont know
+                        but in what you want do like 5 - 6 sentences thats what I did for the one I did anyways have fun
+                        with it :)
                     </p>
                 </div>
             </div>
@@ -79,4 +84,4 @@ <h2>Project 3</h2>
     </footer>
 </body>
 
-</html>
+</html>
diff --git a/style.css b/style.css
@@ -99,6 +99,11 @@ header nav ul li a:hover {
     max-width: 300px;
     border-radius: 5px;
     margin-right: 20px;
+    transition: transform 0.3s ease; /* Add transition for smooth animation */
+}
+
+.project-image:hover {
+    transform: scale(1.1); /* Apply the zoom-in effect on hover */
 }
 
 .separator {
@@ -158,7 +163,62 @@ header nav ul li a:hover {
     vertical-align: middle;
     font-size: 35px;
 }
-
-.social-icons {
-    margin-right: 10px;
+.social-icons,
+    .profile img {
+        margin-right: 10px;
+        font-size: 35px; /* Set the initial font size */
+        line-height: 1; /* Ensure proper vertical alignment */
+        display: inline-block; /* Adjust display to avoid layout issues */
+        transition: transform 0.3s ease; /* Add the transition property for smooth animation */
+    }
+
+    .social-icons:hover,
+    .profile img:hover {
+        transform: scale(1.2); /* Increase the scale on hover */
+    }
+
+
+/* Mobile styles */
+@media screen and (max-width: 600px) {
+    .profile img {
+        width: 100px;
+        height: 100px;
+    }
+
+    .profile h1 {
+        font-size: 18px;
+    }
+
+    .project-content {
+        flex-direction: column;
+    }
+
+    .project-image {
+        max-width: 100%;
+    }
+
+    .separator {
+        display: none;
+    }
+
+    .horizontal-separator {
+        margin: 10px 0;
+    }
+
+    .project-text-right,
+    .project-text {
+        text-align: center;
+    }
+
+    .project-text-right h2,
+    .project-text h2 {
+        font-size: 20px;
+    }
+
+
+
+    .project-text-right p,
+    .project-text p {
+        font-size: 16px;
+    }
 }