CommunityOfCoders · amimayo · Mar 9, 2025
diff --git a/Easy/MayureshSurveIssue9/EGPT.jpeg b/Easy/MayureshSurveIssue9/EGPT.jpeg
diff --git a/Easy/MayureshSurveIssue9/LCR.jpeg b/Easy/MayureshSurveIssue9/LCR.jpeg
diff --git a/Easy/MayureshSurveIssue9/LOTR.jpeg b/Easy/MayureshSurveIssue9/LOTR.jpeg
diff --git a/Easy/MayureshSurveIssue9/RETRO.jpeg b/Easy/MayureshSurveIssue9/RETRO.jpeg
diff --git a/Easy/MayureshSurveIssue9/VEDA.jpeg b/Easy/MayureshSurveIssue9/VEDA.jpeg
diff --git a/Easy/MayureshSurveIssue9/ajantacon.jpg b/Easy/MayureshSurveIssue9/ajantacon.jpg
diff --git a/Easy/MayureshSurveIssue9/amidvar.css b/Easy/MayureshSurveIssue9/amidvar.css
@@ -0,0 +1,184 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family:  "Vollkorn";
+}
+
+
+body{
+    background-image: url(headbga.jpeg);
+    width: 100vw;
+    height: 100vh;
+}
+
+.main{
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 2em;
+}
+
+header{
+    width: 100vw;
+    height:10vh;
+    margin-top: 1em;
+    background-image: url(pfbkg2.jpeg);
+    border: 4px solid rgb(125, 13, 13);
+    border-right: 0;
+    border-left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+h1{
+    color: rgb(125, 13, 13);
+    font-size: 3em;
+}
+
+h2{
+    font-size: 2em;
+
+}
+
+span{
+    color: rgb(114, 24, 108);
+    font-weight: bolder;
+}
+
+.info p{
+    font-family: "Vollkorn";
+    font-size: 1em;
+    font-weight: bold;
+    margin-left: 0.7em;
+    margin-right: 0.7em;
+    padding: 1em;
+    background-image: url(pfbkg.jpeg);
+    border: 3px solid  rgb(125, 13, 13) ;
+}
+
+h3{
+    font-size: 2em;
+    color: rgb(125, 13, 13);
+}
+
+.img{
+    width: 16em;
+    height: 12em;
+    border: 0.5em solid rgb(125, 13, 13);
+    transition: transform 0.3s ease-in-out;
+}
+
+.gallery img:hover{
+    border: 0.25em solid rgb(147, 61, 167);
+    transform: scale(1.1);
+}
+
+
+.gallery{
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+}
+
+.arrow{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 20em;
+    display: none;
+}
+
+.prev, .next{
+    width: 2.15em;
+    height: 2.15em;
+    background-color: rgb(125, 13, 13);
+}
+ .Images{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 80vw;
+    margin-bottom: 3.5em;
+ }
+
+ .comp,.socials{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 1em;
+ }
+
+ .Images h3{
+    background-image:url(pfbkg.jpeg);
+    border: 2px solid rgb(125, 13, 13);
+    border-radius: 0.25em;
+    padding: 0.15em;
+ }
+
+.skills,.links{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    width: 20em;
+}
+
+.skill,.link{
+    width: 4em;
+    height: 4em;
+}
+
+@media(max-width:768px){
+
+    .body{
+        overflow: hidden;
+        width: 100vw;
+        height: 200vh;
+    }
+
+    .main{
+        width: 100vw;
+    }
+    .info p{
+        background-size: cover;
+    }
+
+    .arrow{
+        display: flex;
+    }
+
+    .Images{
+        width: 30vw;
+        justify-content: center;
+        gap: 7.5em;
+        padding-bottom:2em;
+    }
+
+    .skills, .links{
+        display: grid;
+        grid-template-columns: repeat(2,1fr);
+        grid-template-rows: repeat(2,1fr);
+        gap: 0.25em;
+        width: 7em;
+    }
+
+    .skill,.link{
+        width: 3em;
+        height: 3em;
+    }
+
+    .bg{
+        display: none;
+    }
+
+    .prev{
+        display: none;
+    }
+
+}
diff --git a/Easy/MayureshSurveIssue9/back.png b/Easy/MayureshSurveIssue9/back.png
diff --git a/Easy/MayureshSurveIssue9/c++.png b/Easy/MayureshSurveIssue9/c++.png
diff --git a/Easy/MayureshSurveIssue9/css.png b/Easy/MayureshSurveIssue9/css.png
diff --git a/Easy/MayureshSurveIssue9/github.png b/Easy/MayureshSurveIssue9/github.png
diff --git a/Easy/MayureshSurveIssue9/headbga.jpeg b/Easy/MayureshSurveIssue9/headbga.jpeg
diff --git a/Easy/MayureshSurveIssue9/html.png b/Easy/MayureshSurveIssue9/html.png
diff --git a/Easy/MayureshSurveIssue9/index.html b/Easy/MayureshSurveIssue9/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>| Portfolio |</title>
+        <meta name="description" content="Portfolio">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" type="image/jpg" href="ajantacon.jpg">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="amidvar.css">
+    </head>
+    <body>
+        <div class="main">
+           <header>
+            <h1> My Portfolio</h1>
+           </header>
+           <h2> || Namaste! I am <span>Mayuresh Surve</span> ||</h2>
+           <div class="info">
+            <p >Namaste! I am Mayuresh Surve, a first-year Electronics & Telecommunications Engineering student at VJTI, Mumbai.
+                I am a budding engineer with a passion for creating unique yet useful software and hardware projects. 
+                I am equipped with the knowledge of HTML, CSS, JS and C++ which I have used to design multiple innovative projects. 
+                I intend to capture and blend the richness of our culture and our modern technology to blossom into such impactful projects. 
+                Engaging in such ventures have enhanced my skills and  my enthusiasm for all things tech.</p>
+        </div>
+           <h3>Projects</h3>
+             <div class="gallery">
+            <img style="display: block;"  class="img" src="RETRO.jpeg">
+            <img class="img bg" src="EGPT.jpeg">
+            <img class="img bg" src="VEDA.jpeg">
+            <img class="img bg" src="LOTR.jpeg">
+            <img class="img bg" src="LCR.jpeg">
+        </div>
+        <div class="arrow">
+            <img onclick="prev()" class="prev" src="back.png">
+            <img onclick="next()" class="next" src="next.png">
+        </div>
+
+        <div class="Images">
+            <div class="comp">
+                <h3>Skills</h3>
+            <div class="skills">
+               <img class="skill" src="html.png">
+               <img class="skill" src="css.png">
+               <img class="skill" src="js.png">
+               <img class="skill" src="c++.png">
+            </div>
+            </div>
+            <div class="socials">
+                <h3>Socials</h3>
+            <div class="links">
+               <a href="https://github.com/amimayo"><img class="link" src="github.png"></a>
+               <img class="link" src="linkedin.png">
+               <img class="link" src="x.png">
+               <img class="link" src="stacko.png">
+            </div>
+            </div>
+        </div>
+        </div>
+
+        <script>
+
+             let images = document.querySelectorAll('.img');
+             let currentIndex = 0; 
+
+            function next() {
+
+                if(currentIndex < images.length - 1){
+                images[currentIndex].style.display = "none";
+                currentIndex++;
+                images[currentIndex].style.display = "block";
+                }
+
+                arrow();
+
+            }
+
+            function prev() {
+
+                if(currentIndex > 0) {
+                images[currentIndex].style.display = "none";
+                currentIndex--;
+                images[currentIndex].style.display = "block";
+                }
+
+                arrow();
+             }
+
+             function arrow() {
+
+                if(currentIndex == 0) {
+                    document.querySelector('.prev').style.display = "none";
+                }
+
+                else{
+                    document.querySelector('.prev').style.display = "block";
+                }
+
+                if(currentIndex == images.length - 1) {
+                    document.querySelector('.next').style.display = "none";
+                }
+
+                else{
+                    document.querySelector('.next').style.display = "block";
+                }
+             }
+
+             document.body.style.overflowX = "hidden";
+        </script>
+    </body>
+</html>
diff --git a/Easy/MayureshSurveIssue9/js.png b/Easy/MayureshSurveIssue9/js.png
diff --git a/Easy/MayureshSurveIssue9/linkedin.png b/Easy/MayureshSurveIssue9/linkedin.png
diff --git a/Easy/MayureshSurveIssue9/next.png b/Easy/MayureshSurveIssue9/next.png
diff --git a/Easy/MayureshSurveIssue9/pfbkg.jpeg b/Easy/MayureshSurveIssue9/pfbkg.jpeg
diff --git a/Easy/MayureshSurveIssue9/pfbkg2.jpeg b/Easy/MayureshSurveIssue9/pfbkg2.jpeg
diff --git a/Easy/MayureshSurveIssue9/stacko.png b/Easy/MayureshSurveIssue9/stacko.png
diff --git a/Easy/MayureshSurveIssue9/x.png b/Easy/MayureshSurveIssue9/x.png