From 94acaa44b320401bf9a13db25fcb49f035da01e2 Mon Sep 17 00:00:00 2001
From: TitanElectrons <sufyaan@counterhawks.com>
Date: Sun, 20 Aug 2023 18:51:08 -0500
Subject: [PATCH] updating portfolio

---
 portfolio/images/title.webp | Bin 0 -> 7740 bytes
 portfolio/style.css         | 343 ++++++++++++++++++++++++++----------
 portfolio/wip.html          |  29 ++-
 3 files changed, 279 insertions(+), 93 deletions(-)
 create mode 100644 portfolio/images/title.webp

diff --git a/portfolio/images/title.webp b/portfolio/images/title.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c872b266e0803e435153c161c4e269bf65a07e98
GIT binary patch
literal 7740
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
WXi^OyhN5w;Q=CQ$#lH&p-}XQ2C9mfI

literal 0
HcmV?d00001

diff --git a/portfolio/style.css b/portfolio/style.css
index 5fc56fb..461e9e4 100644
--- a/portfolio/style.css
+++ b/portfolio/style.css
@@ -4,25 +4,167 @@ b,ol,p,ul{
 body,h1{
     color:#121212
 }
-.posts,h1,h2,h3,ol,p,ul{
-    margin-left:8vw
-}
-.nested-list,.posts,h1,ol,ul{
-    margin-top:1vw;
-    margin-bottom:1vw
-}
 .responsive,div.desc,footer{
     text-align:center
 }
 
+a:link {
+  color: #121212;
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #606060;
+  background-color: transparent;
+  text-decoration: underline;
+}
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-left: 7vw;
+  margin-right: 7vw;
+  margin-top: 2.5vw;
+  animation: portfolioItems normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.8s 1.5s;
+}
+
+.image-details {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.item:hover .image-details {
+  opacity: 1;
+}
+ .gallery {
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: center;
+margin-left: 7vw;
+margin-right: 7vw;
+animation: 
+ }
+
+ .image-container {
+   position: relative;
+   width: calc(33.33% - 20px);
+   margin: 10px;
+   overflow: hidden;
+ }
+
+ .image {
+   width: 100%;
+   height: auto;
+   transition: transform 0.3s;
+ }
+
+ .image-container:hover .image {
+   transform: scale(1.2);
+ }
+
+ .image-details {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background-color: rgba(0, 0, 0, 0.8);
+   color: white;
+   padding: 10px;
+   opacity: 0;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   text-align: center;
+   transition: opacity 0.3s;
+ }
+
+ .image-container:hover .image-details {
+   opacity: 1;
+ }
+
+.item {
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  padding: 20px;
+  width: calc(33.33% - 20px);
+  box-sizing: border-box;
+  margin-bottom: 25px;
+}
+
+.item:hover {
+  background-color: #000;
+  border: 1px solid #efefef;
+  color: #efefef;
+  transition: ease-in-out
+}
+
 /* ANIMATIONS */
 
-@keyframes scaleUp {
-	from {
-		transform: scale(0.7)
+@keyframes titleAnim {
+	0% {
+		transform: scale(0.3);
+		margin-top: 5%;
+		padding-bottom: 0;
 	}
-	to {
-		transform: scale(4)
+	70% {
+		transform: scale(1);
+		margin-top: 5%;
+		padding-bottom: 0
+	}
+	100% {
+		transform: scale(1);
+		margin-top: 2%;
+		padding-bottom: 3%;
+	}
+}
+
+@keyframes glideIn {
+	0% {
+		opacity: 0;
+		margin-top: 3%;
+		padding-bottom: 0%;
+	}
+	90% {
+		opacity: 100;
+		margin-top: -1.5%;
+		padding-bottom: 4.5%;
+	}
+	100% {
+		opacity: 100;
+		margin-top: -1.5%;
+		padding-bottom: 4.5%;
+	}
+}
+
+@keyframes portfolioItems {
+	0% {
+		opacity: 0;
+		margin-top: 5%;
+		padding-bottom: 0%;
+	}
+	100% {
+		opacity: 100;
+		margin-top: 2.5%;
+		padding-bottom: 4.5%;
+	}
+}
+
+@keyframes lineAnimation {
+	0% {
+		width: 0;
+		opacity: 0;
+	}
+	100% {
+		width: 80%;
 	}
 }
 
@@ -30,15 +172,18 @@ body,h1{
 
 .main-header {
 	text-align: center;
-	margin-left: 0;
-	margin-top: 25%;
-	animation-name: scaleUp;
-	animation-duration: 1s;
-	animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86);
-	animation-delay: 0;
-	animation-iteration-count: 1;
-	animation-direction: normal;
-	animation-fill-mode: both;
+	animation: titleAnim normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.9s;
+}
+
+.navigation {
+	text-align: center;
+	color: #efefef;
+	animation: glideIn normal both cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.7s;
+}
+
+.lines {
+	animation: lineAnimation normal both 0.5s 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+	margin-top: -3%;
 }
 
 @font-face{
@@ -46,6 +191,7 @@ body,h1{
     font-weight:400;
     font-display:swap;
     src:url("fonts/woff2/futura-woff2.woff2") format('woff2'),url(fonts/woff/futura-woff.woff) format('woff') }
+
 @font-face{
     font-family:futura;
     font-weight:700;
@@ -56,7 +202,6 @@ body{
     background:#efefef
 }
 p{
-    margin-right:8vw;
     font-weight:400
 }
 .center{
@@ -80,7 +225,7 @@ code,h1,h2,h3{
 }
 hr{
     width:87%;
-    color:#6067ff
+    color:#6067ff;
 }
 code{
     color:#50fa7b;
@@ -89,89 +234,84 @@ code{
 a{
     color:#000bef
 }
-footer{
-    padding:3px
-}
 h1{
     font-size:200%
 }
 h2{
     font-size:150%;
-    margin-top:1.5vw;
-    margin-bottom:1.5vw
 }
 h3{
     font-size:110%
 }
-i{
-    margin-right:10px
-}
-.posts{
-    font-family:futura;
-    list-style-type:none
-}
-.code-posts{
-    font-family:futura;
-    color:#6272a4;
-    font-size:80%
-}
-.homepage-title{
-    display:block;
-    padding-top:3.25vw;
-    padding-bottom:3vw;
-    margin-left:auto;
-    margin-right:auto;
-    width:30%;
-    max-width:35%;
-    height:7.5%
-}
-.footer-text{
-    font-family:futura
-}
-.nested-list{
-    margin-left:-2vw
-}
-div.gallery{
-    border:1px solid #6272a4
-}
-div.gallery:hover{
-    border:1px solid
-}
-div.gallery img{
-    width:100%;
-    height:auto
-}
-div.desc{
-    padding:15px
-}
-*{
-    box-sizing:border-box
-}
-.main{
-    margin-left:10vw;
-    margin-right:7vw;
-    width:90vw;
-    margin-bottom:4vw
-}
-.responsive{
-    font-family:futura;
-    padding:0 6px;
-    margin:auto;
-    display:block;
-    float:left;
-    width:22%
-}
-.clearfix:after{
-    content:"";
-    display:table;
-    clear:both
-}
 @media screen and (max-width:600px){
     .posts,h1,h2,h3,ol,p,ul{
         margin-left:20px;
         margin-right:20px;
         margin-top:30px
     }
+	.item {
+		width: 100%;
+	}
+	@keyframes titleAnim {
+		0% {
+			transform: scale(0.3);
+			margin-top: 12%;
+			padding-bottom: 0%;
+		}
+		70% {
+			transform: scale(1);
+			margin-top: 12%;
+			padding-bottom: 0%;
+		}
+		100% {
+			transform: scale(1);
+			margin-top: 7.5%;
+			padding-bottom: 4.5%;
+		}
+	}
+	@keyframes glideIn {
+		0% {
+			opacity: 0;
+			margin-top: 3%;
+			padding-bottom: 0%;
+		}
+		90% {
+			opacity: 100;
+			margin-top: 0%;
+			padding-bottom: 3%;
+		}
+		100% {
+			opacity: 100;
+			margin-top: 0%;
+			padding-bottom: 3%;
+		}
+	}
+	@keyframes portfolioItems {
+		0% {
+			opacity: 0;
+			margin-top: 3%;
+			padding-bottom: 0%;
+		}
+		90% {
+			opacity: 100;
+			margin-top: 0%;
+			padding-bottom: 3%;
+		}
+		100% {
+			opacity: 100;
+			margin-top: 0%;
+			padding-bottom: 3%;
+		}
+	}
+	@keyframes lineAnimation {
+		0% {
+			width: 0;
+			opacity: 0;
+		}
+		100% {
+			width: 100%;
+		}
+	}
     hr{
         width:93%
     }
@@ -182,16 +322,31 @@ div.desc{
     .code-posts{
         font-size:75%
     }
+	.container {
+		margin-top: 7.5vw;
+		margin-left: 2vw;
+		margin-right: 2vw;
+	}
     .homepage-title{
         width:50%;
         max-width:75%;
         height:12.5%
     }
+    .gallery {
+      justify-content: flex-start;
+    }
+
+    .image-container {
+      width: calc(100% - 20px);
+  }
     .nested-list{
         margin-left:-6vw;
         margin-top:4vw;
         margin-bottom:4vw
     }
+	.main-header{
+		font-size: 7.5px;
+	}
     .responsive{
         width:100%;
         padding-bottom:4vw
@@ -207,6 +362,12 @@ div.desc{
         margin-top:7vw;
         padding:8px
     }
+	.navigation{
+		font-size: 90%;
+	}
+	.lines {
+		margin-top: 5%;
+	}
 }
 @media screen and (max-width:1150px){
     img{
diff --git a/portfolio/wip.html b/portfolio/wip.html
index e98d0da..bef9d1c 100644
--- a/portfolio/wip.html
+++ b/portfolio/wip.html
@@ -2,13 +2,38 @@
 <html lang="en">
 	<head>
 		<title>Sufyaan | Designer</title>
-		<link rel="icon" type="image/x-icon" href="../images/favicon.webp">
+		<link rel="icon" type="image/x-icon" href="images/favicon.webp">
 		<link rel='stylesheet' type='text/css' href="style.css">
 		<meta charset="utf-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	</head>
 
 	<body>
-		<h1 class="main-header">TitanElectrons</h1>
+		<div class="main-header" style="text-align: center;">
+			<a href=".">
+			<img src="images/title.webp" draggable="false">
+			</a>
+		</div>
+		<p style="color:#c9c9c9" class="navigation"><a style="text-decoration: none;color: #000bef;" href=".">DESIGNS</a> | <a style="text-decoration: none;" href="about">ABOUT</a> | <a style="text-decoration: none;" href="contact">CONTACT</a></p>
+		<hr class="lines">
+<title>Image Gallery</title>
+</head>
+<body>
+  <div class="gallery">
+    <div class="image-container">
+      <img class="image" src="image1.jpg" alt="Image 1">
+      <div class="image-details">Image 1 Details</div>
+    </div>
+    <div class="image-container">
+      <img class="image" src="image2.jpg" alt="Image 2">
+      <div class="image-details">Image 2 Details</div>
+    </div>
+    <div class="image-container">
+      <img class="image" src="image3.jpg" alt="Image 3">
+      <div class="image-details">Image 3 Details</div>
+    </div>
+    <!-- Repeat more image containers as needed -->
+  </div>
+
 
 	</body>