added social links

index.html

@@ -14,12 +14,13 @@
   <header>
     <div class="topHeader">
       <div class="avatar"><img src="./src/images/avatar_img.jpeg"></div>
+      <a class="linklist" href="https://www.linkedin.com/in/charlie-rios/" target="_blank"><img src="./src/images/icon-linkedin_red.png" ></a>
+      <a class="linklist" href="https://github.com/xarlizard" target="_blank"><img src="./src/images/icon-github_red.png"></a>
       <div class="headerInfo">
         <h1>Charlie - @xarlizard</h1>
         <text class="headerText">Fullstack Web 3.0 Developer & UI/UX Designer</text>
       </div>
     </div>
-    <hr>
     <div class="bottomHeader">
       <text class="headerText">Dark Mode</text>
       <label class="switch">

src/css/style.css

@@ -92,7 +92,38 @@ header{
 
 .avatar img{
     max-width: 90px;
-    border-radius: 50%;}
+    border-radius: 50%;
+    transition: .5s ease;
+}
+.avatar:hover img{
+    opacity: 0.3;
+    cursor: pointer;
+    background-image: url('../images/icon-cv.png');
+}
+.avatar:hover .middle{
+    opacity: 0.3;
+    cursor: pointer;
+    background-image: url('../images/icon-cv.png');
+    .middle {
+  transition: .5s ease;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
+}
+}
+.linklist img{
+    max-width: 90px;
+    border-radius: 50%;
+    transition: .5s ease;
+}
+.linklist:hover img{
+    opacity: 0.3;
+    cursor: pointer;
+}
 .topHeader{
     display: flex;
     gap: 10px;