From ad2fa71617f14625398995c1417451ad3b9c25bc Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 19 Aug 2025 16:52:33 +0000
Subject: [PATCH] Add responsive design and viewport meta tag for mobile
 optimization

Co-authored-by: vrishtishah.xic <vrishtishah.xic@gmail.com>
---
 index.html |   1 +
 style.css  | 447 ++++++++++-------------------------------------------
 2 files changed, 82 insertions(+), 366 deletions(-)
diff --git a/index.html b/index.html
index 9787187..3c141b0 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>portfolio</title>
     <link rel="stylesheet" href="style.css">
     <style>
diff --git a/style.css b/style.css
index a2ba5b1..1795929 100644
--- a/style.css
+++ b/style.css
@@ -1,395 +1,110 @@
-@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Italiana&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Rubik+Doodle+Shadow&display=swap');
-@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap");
-body{
-margin: 0;
-overflow-x: hidden;
-/* height: 200vh; */
-width: 100%;
-user-select: none;
-background-color: #330033;
-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23404' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23505'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
+/* Responsive enhancements */
+#home {
+    height: auto;
+    min-height: 100vh;
 }
 
-html{
-    scroll-behavior: smooth;
+.name {
+    font-size: clamp(3rem, 10vw, 10em);
 }
 
-.navbar{
-    display: flex;
-    background-color: #674e676b;
-    justify-content: flex-end;
-    gap: 25px;
-    position: fixed;
-    width: 100%;  
-    z-index: 10;
+.pic {
+    width: min(60vw, 400px);
+    height: min(60vw, 400px);
 }
 
-.navbar>ul{
-    display: flex;
-    gap: 40px;
-    list-style: none;
-    padding-right: 30px;
-    color: #e9b9e9;
-    font-family: "funnel display";
-    user-select: none;
-    cursor:pointer;
-    
-    
+.pic>img {
+    width: 80%;
+    left: 10%;
 }
 
-.navbar>ul>li>a{
-    text-decoration: none;
-    color: #e9b9e9;
-    transition: 0.2s ease-in;
-
-}
-
-.navbar>ul>li>a:hover{
-color: #dd60dd;
-}
-
-
-
-
-.name
-{
-    width: fit-content;
-    height: 300px;
-    position: relative;
-    font-size: 10em;
-    color: #e9b9e9;
-    left: 80px;
-    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
-    user-select: none;
-}
-
-.hi{
-    font-family: 'Rubik Doodle Shadow';
-    animation:normal;
-}
-
-.vri:hover{
- color: rgb(228, 114, 188);
+.about_heading,
+.skill_heading,
+.project_heading,
+.contact_heading {
+    font-size: clamp(2.5rem, 8vw, 90px);
 }
 
-.vri{
-    text-shadow: 2px 2px 2px  white;
+.about_content,
+.about_content_more {
+    font-size: clamp(0.95rem, 2.5vw, 20px);
 }
 
-#home,#about,#skills,#projects,#contact{
-    
-    width: 100%;
-}
-
-#home{
-    height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    
+.skillsage,
+.cleanaura,
+.deepdetect {
+    font-size: clamp(0.95rem, 2.5vw, 20px);
+    width: min(90vw, 300px);
 }
 
-
-#about{
-
-   display: flex;
-   justify-content: center;
-   
+.skill1 {
+    width: min(90vw, 300px);
 }
 
-#projects{
-display: flex;
-justify-content: center;
+.project_list {
+    flex-wrap: wrap;
+    gap: 30px;
 }
 
-.intro{
-    
-    height: 300px;
-    width: fit-content;
-    display: flex;
-    align-items: center;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    font-size: 20px;
+.project1 {
+    width: min(90vw, 300px);
+    height: min(90vw, 300px);
 }
 
-
-.pic_container{
-
-width: 40%;
-display: flex;
-justify-content: center;
-
+.project1>img {
+    width: 120%;
+    height: auto;
 }
 
-.pic{
-    
-    width: 400px;
-    height: 400px;
-    border: 6px solid white;
-    border-radius: 50%;
-    overflow: hidden;
-    position: relative;
-    /* right: 150px; */
-    top:20px;
-    
-    
+.project_list_name {
+    flex-wrap: wrap;
+    gap: 30px;
 }
 
-.pic>img{
-    width: 320px;
-    position: relative;
-    top: 20px;
-    left: 60px;
-    
+.profile_div {
+    width: min(90vw, 450px);
+    font-size: clamp(1rem, 3vw, 24px);
 }
 
-
-
-.about_container{
-    width: 100%;
-    padding: 60px;
-    display: flex;
+/* Responsive layout adjustments */
+@media (max-width: 992px) {
+  #home {
     flex-direction: column;
-    align-items: center;
-    
-}
-
-.about_heading{
-    
-    font-size: 90px;
-    color: #ed8aed;
-    font-family: "Caveat", cursive;
-    font-optical-sizing: auto;
-    font-style: normal;
-}
-
-.about_content{
-    /* padding: 10px; */
-    color: #e9b9e9;
-    font-size: 20px;
-    font-family: 'Courier New', Courier, monospace;
-    /* width: 100%; */
-    /* background-color: #e9b9e92c; */
-    
-}
-
-.about_content_more{
-       
-    color: #e9b9e9;
-    font-size: 20px;
-    font-family: 'Courier New', Courier, monospace;
-    /* background-color: #e9b9e92c; */
-    width: 100%;
-}
-
-.skill_heading{
-    font-size: 90px;
-    color: #ed8aed;
-   
-    font-family: "Caveat", cursive;
-    font-optical-sizing: auto;
-    font-style: normal;
-    margin: 20px;
-
-}
-
-.skill_list
-{
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 70px;
-    
-}
-
-.skill1{
-    width:300px;
-    height: 50px;
-    background-color: #c7b0c725;
-    display: flex;
     justify-content: center;
-    align-items: center;
-    /* border-radius: 5%; */
-    padding:10px;
-    font-size: 24px;
-    font-family: 'Courier New', Courier, monospace;
-    color: #e9b9e9;
-    border: 1px solid grey;
-    /* box-shadow: 1px 2px 1px rgba(255, 255, 255, 0.764); */
-    transition: 0.3s ease-in-out;
-}
-
-
-
-.skill1:hover {
- color: rgb(228, 114, 188);
- transform: scale(1.1);
-border: 1px solid white
- }
-
- .skill1>img{
-    height: 1em;
-    width: 1em;
- }
-
- .project_Container{
+    gap: 30px;
+    padding-top: 100px;
+  }
+  .name {
+    left: 0;
+    text-align: center;
+  }
+  .pic_container {
     width: 100%;
-    padding: 60px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-   
- }
-
- .project_heading{
-    font-size: 90px;
-    color: #ed8aed;
-    font-family: "Caveat", cursive;
-    font-optical-sizing: auto;
-    font-style: normal;
-
- }
-
- .project_list{
-    padding: 50px;
-    width: 100%;
-    display: flex;
-    justify-content: space-evenly;
-
- }
-
- .project1{
-    width: 300px;
-    height: 300px;
-    background-color:#ac98ac4a; 
-    border-radius: 15%;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    overflow: hidden;
-  
-    
-    
-    
- }
-
-
- 
-
- .project1>img{
-    width: 360px;
-    height: 300px;
- }
-
- .project_list_name{
-    width: 100%;
-    display: flex;
-    justify-content: space-evenly;
-    
- }
-
- .skillsage,.cleanaura,.deepdetect{
-    width: 300px;
-    height: 100px;
-    font-size: 20px;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    color: #e9b9e9;
-    display: flex;
-    justify-content: center;
- }
-
- #contact{
-    display: flex;
-    justify-content: center;
-    
-}
-
-
-.contact_container
-{
-    width: 100%;
-    display: flex;
-    flex-direction: column; 
-    padding: 60px; 
-    align-items: center;
-}
-
-
-
- .contact_heading {
-    font-size: 90px;
-    color: #ed8aed;
-    font-family: "Caveat", cursive;
-    font-optical-sizing: auto;
-    font-style: normal;
-    margin: 20px;
-
- }
-
-.profiles{
-display: flex;
-flex-direction: column;
-gap: 30px;
-}
-
-
-
- .profile_div{
-    width: 450px;
-    height: 60px;
-    background-color: #ac98ac4a;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 24px;
-    font-family: 'Courier New', Courier, monospace;
-    color: #e9b9e9;
-    font-weight: 500;
-    box-shadow: 1px 2px 1px rgba(255, 255, 255, 0.764);
-    transition: 0.3s ease-in-out;
-    color: #e9b9e9;
-    cursor: pointer;
-    /* border-radius: 50%; */
- }
-
- .profile_div:hover
-{
-color: rgb(228, 114, 188);
-transform: scale(1.1);
-}
-
-.profiles>a{
-text-decoration: none;
-}
-
-.profile_div>img{
-    height: 2em;
-    width: 2em;
-}
-
-#leetcode>img{
-    height: 1em;
-    width: 1em;
-}
-
-#git>img{
-    height: 1em;
-    width: 1em;
-}
-
-#mail>img{
-    height: 1em;
-    width: 1em ;
-}
-
-#ig>img{
-    height: 1em;
-    width: 1em ;
-}
- 
- 
- 
-
-
-
-
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar>ul {
+    gap: 20px;
+    padding-right: 16px;
+  }
+  .skill_list {
+    grid-template-columns: repeat(2, minmax(160px, 1fr));
+    gap: 30px;
+  }
+}
+
+@media (max-width: 480px) {
+  .navbar>ul {
+    gap: 12px;
+    padding-right: 12px;
+    font-size: 0.95rem;
+  }
+  .skill_list {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+  .project_list {
+    padding: 20px 10px;
+  }
+}
\ No newline at end of file
