From 2f84f95da27ed6b014c102a48dacc0d9810d083d Mon Sep 17 00:00:00 2001
From: Abhiraj Roy <157954129+iconized@users.noreply.github.com>
Date: Wed, 5 Jun 2024 14:32:27 +0530
Subject: [PATCH] :art: style(css): color deep from coral

Signed-off-by: Abhiraj Roy <157954129+iconized@users.noreply.github.com>
---
 components/AppFooter.vue     |  3 ++-
 components/AppHeader.vue     | 12 ++++++------
 components/CommentedText.vue |  6 +++---
 components/SnakeGame.vue     | 32 ++++++++++++++++----------------
 developer.json               |  5 ++---
 pages/index.vue              | 17 ++++++++---------
 pages/projects.vue           |  6 +++---
 7 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index 7d96567d..a0e3351c 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -41,7 +41,7 @@ footer a:hover {
 }
 
 #social-icons > a {
-    border-right: 1px solid #1E2D3D;
+    border-right: 0px solid #1E2D3D;
     height: 100%;
     width: 50px;
  }
@@ -61,6 +61,7 @@ footer > a > img {
 
 #social-icons > a:hover img {
     opacity: 1;
+    color: #FF416C;
 }
 
 @media (max-width: 768px) {
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index a736816f..302bf668 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -8,24 +8,24 @@
             </NuxtLink>
 
             <NuxtLink id="nav-link" to="/" :class="{ active: isActive('/') }">
-              _hello
+              _hello.py
             </NuxtLink>
   
             <NuxtLink id="nav-link" to="/about-me" :class="{ active: isActive('/about-me') }">
-              _about
+              _about.py
             </NuxtLink>
   
             <NuxtLink id="nav-link" to="/projects" :class="{ active: isActive('/projects') }">
-              _projects
+              _projects.py
             </NuxtLink>
 
             <NuxtLink id="nav-link" to="https://forum.snigdhaos.org" :class="{ active: isActive('') }">
-              _forum
+              _forum.py
             </NuxtLink>
           </div>
 
           <NuxtLink id="nav-link-contact" to="/contact-me" :class="{ active: isActive('/contact-me')}">
-            _contact
+            _contact.py
           </NuxtLink>
       
       </nav>
@@ -86,7 +86,7 @@ export default {
 }
 
 #nav-link.router-link-active, #nav-link-contact.router-link-active {
-  border-bottom: 2px solid #FF7F53;
+  border-bottom: 1px solid #FF416C;
   color: white;
 }
 
diff --git a/components/CommentedText.vue b/components/CommentedText.vue
index 9eaea890..a334f679 100644
--- a/components/CommentedText.vue
+++ b/components/CommentedText.vue
@@ -5,9 +5,9 @@
       <!-- line numbers and asteriscs -->
       <div v-for="n in lines" class="grid grid-cols-2 justify-end" :key="n">
         <span class="col-span-1 mr-3">{{ n }}</span>
-        <div v-if="n == 1" class="col-span-1 flex justify-center">/**</div>
-        <div class="col-span-1 flex justify-center" v-if="n > 1 && n < lines">*</div>
-        <div class="col-span-1 flex justify-center pl-2" v-if="n == lines">*/</div>
+        <div v-if="n == 1" class="col-span-1 flex justify-center">#</div>
+        <div class="col-span-1 flex justify-center" v-if="n > 1 && n < lines">#</div>
+        <div class="col-span-1 flex justify-center" v-if="n == lines">#</div>
       </div>
     </div>
 
diff --git a/components/SnakeGame.vue b/components/SnakeGame.vue
index 03b88b89..014f8a74 100644
--- a/components/SnakeGame.vue
+++ b/components/SnakeGame.vue
@@ -29,8 +29,8 @@
         <div>
 
         <div id="instructions" class="font-fira_retina text-sm text-white">
-          <p>// use your keyboard</p>
-          <p>// arrows to play</p>
+          <p># use your keyboard</p>
+          <p># arrows to play</p>
 
           <div id="buttons" class="w-full flex flex-col items-center gap-1 pt-5">
 
@@ -57,7 +57,7 @@
 
         <!-- score board -->
         <div id="score-board" class="w-full flex flex-col pl-5">
-          <p class="font-fira_retina text-white pt-5">// food left</p>
+          <p class="font-fira_retina text-white pt-5"># food left</p>
 
           <div id="score" class="grid grid-cols-5 gap-5 justify-items-center pt-5 w-fit">
             <div class="food"></div>
@@ -271,9 +271,9 @@
             
             /* Food cell style */
             if (j === this.food.x && i === this.food.y) {
-              cell.style.backgroundColor = "#43D9AD";
+              cell.style.backgroundColor = "#FF7F53";
               cell.style.borderRadius = "50%";
-              cell.style.boxShadow = "0 0 10px #43D9AD";
+              cell.style.boxShadow = "0 0 10px #FF7F53";
             }
     
             /* Estilo de la serpiente a medida que va crediendo */
@@ -282,7 +282,7 @@
             );
 
             if (snakeCell) {
-                cell.style.backgroundColor = "#43D9AD";
+                cell.style.backgroundColor = "#FF7F53";
                 cell.style.opacity = 1 - (this.snake.indexOf(snakeCell) / this.snake.length);
               cell.classList.add("green");
 
@@ -409,7 +409,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: linear-gradient(to bottom, rgba(35, 123, 109, 1), rgba(67, 217, 173, 0.13));
+    background: linear-gradient(to right, #ff416c, #ff4b2b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     border-radius: 10px;
     padding: 30px;
     position: relative;
@@ -419,7 +419,7 @@
 #game-screen {
     width: 240px;
     height: 400px;
-    border-radius: 10px;
+    border-radius: 0px;
     background-color: rgba(1, 22, 39, 0.84);
     display: flex;
     flex-wrap: wrap;
@@ -429,9 +429,9 @@
 #start-button {
   padding-inline: 16px;
   padding-block: 8px;
-  border-radius: 10px;
+  border-radius: 2px;
   border: 1px solid black;
-  background-color: #FEA55F;
+  background-color: #FF7F53;
   color: black;
   cursor: pointer;
   position: absolute;
@@ -442,7 +442,7 @@
 }
 
 #start-button:hover {
-  background-color: rgb(255, 178, 119);
+  background-color: #ff416c;
 }
 
 #console-menu{
@@ -461,7 +461,7 @@
 
 #console-button:hover {
   background-color: #010c15d8;
-  box-shadow: #43D9AD 0 0 10px;
+  box-shadow: #FF7F53 0 0 10px;
 }
 
 #instructions {
@@ -471,9 +471,9 @@
 }
 
 .food {
-  background-color: #43D9AD;
+  background-color: white;
   border-radius: 50%;
-  box-shadow: 0 0 10px #43D9AD;
+  box-shadow: 0 0 10px white;
   width: 8px;
   height: 8px;
   opacity: 0.3;
@@ -482,7 +482,7 @@
 #game-over, #congrats {
   position: absolute;
   bottom: 12%;
-  color: #43D9AD;
+  color: #FF7F53;
   width: 240px;
 }
 
@@ -555,7 +555,7 @@
 #game-over, #congrats {
   position: absolute;
   bottom: 10%;
-  color: #43D9AD;
+  color: #FF7F53;
   width: 192px;
 }
 
diff --git a/developer.json b/developer.json
index 3f34ba6f..05cb8318 100644
--- a/developer.json
+++ b/developer.json
@@ -9,7 +9,7 @@
                 "icon": "icons/info-professional.svg",
                 "info": {
                     "experience": {
-                        "title": "experience",
+                        "title": "about",
                         "description": "<br>Over the past 5 years, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
                     },
                     "hard-skills": {
@@ -64,8 +64,7 @@
         "direct": {
             "title": "contacts",
             "sources": {
-                "email": "hello@snigdhaos.org",
-                "phone": "N/A"
+                "email": "hello@snigdhaos.org"
             }
         },
         "social": {
diff --git a/pages/index.vue b/pages/index.vue
index 5427dad2..498c6fb0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,7 +8,7 @@
 		<section class="hero">
 		
 			<div class="head">
-				<span>
+				<span class="mb-12">
 					<h2>greetings,</h2>
 				</span>
 				<h1>{{ config.dev.name }}</h1>
@@ -24,15 +24,14 @@
 					 or skip to see about "Snigdha OS" -->
 				</span>
 				<span :class="{hide: isMobile}">
-					# source code can be found on <br>
-					# do follow us on github
+					# source code can be found on, do follow us on github
 				</span>
 				<span>#!/usr/bin/python</span>
 				<span :class="{hide: !isMobile}">
 					# source code:<br>
 					# follow us on github
 				</span>
-				<p class="code mb-5">
+				<p class="code mb-2">
 					<!-- <span class="identifier">
 						const
 					</span> -->
@@ -53,7 +52,7 @@
 				<span :class="{hide: !isMobile}">
 					# it is recommended to download the <b>ISO</b> file on PC
 				</span>
-				<p class="code mb-5">
+				<p class="code">
 					<!-- <span class="identifier">
 						const
 					</span> -->
@@ -74,7 +73,7 @@
 				<span :class="{hide: !isMobile}">
 					# having problem with installation?
 				</span>
-				<p class="code mb-5">
+				<p class="code">
 					<!-- <span class="identifier">
 						const
 					</span> -->
@@ -176,7 +175,7 @@ function handleResize() {
 #hello .head h2, #hello .head .diple {
   font-size: 32px;
   line-height: 1;
-  color: #FF7F53;
+  color: #FF416C;
   font-family: 'Fira Code Retina';
 }
 
@@ -203,7 +202,7 @@ function handleResize() {
 }
 
 .code .identifier {
-  color: #FF7F53;
+  color: #FF416C;
 }
 
 .code .variable-name {
@@ -254,7 +253,7 @@ function handleResize() {
   height: 300px;
 	border-radius: 0% 50% 0% 50%;
 	filter: blur(70px);
-  background: radial-gradient(circle at 50% 50%,rgba(67, 217, 173, 1), rgba(76, 0, 255, 0));
+  background: radial-gradient(circle at 50% 50%,rgba(255, 127, 83, 1), rgba(76, 0, 255, 0));
   opacity: 0.5;
   z-index: 10;
 }
diff --git a/pages/projects.vue b/pages/projects.vue
index 14e10c23..35d2082e 100644
--- a/pages/projects.vue
+++ b/pages/projects.vue
@@ -164,7 +164,7 @@ input[type="checkbox"]:checked {
 }
 
 input[type="checkbox"]:checked:hover {
-  box-shadow: #FF7F53 0px 0px 0px 2px;
+  box-shadow: #FF416C 0px 0px 0px 2px;
 }
 
 input[type="checkbox"]:not(:checked) {
@@ -177,14 +177,14 @@ input[type="checkbox"]:hover {
   background-image: url("data:image/svg+xml;utf8,<svg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.38587 7.2802L11.9718 0.693573L12.9856 1.70668L5.38587 9.30641L0.826172 4.74671L1.83928 3.73361L5.38587 7.2802Z' fill='white'/></svg>");
   background-repeat: no-repeat;
   background-position: center;
-  box-shadow: #FF7F53 0px 0px 0px 2px;
+  box-shadow: #FF416C 0px 0px 0px 2px;
 }
 
 input[type="checkbox"]:hover:not(:checked) {
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0.1);
   background-image: none;
-  box-shadow: #FF7F53 0px 0px 0px 2px;
+  box-shadow: #FF416C 0px 0px 0px 2px;
 }
 
 input[type="checkbox"]:focus {