Autumn website refresh

Author: document10

README.md

@@ -1,10 +1,9 @@
 # Personal website
 
-This is the repository for my personal website containing info about me as well as my social media links,hosted on [github.io](https://pages.github.com/). You can also use it as a template for your own personal website.
+This is the repository for my personal website containing info about me as well as my social media links, hosted on [github.io](https://pages.github.com/).
 
 ## Credits
 
-  
-[Background image](https://www.deviantart.com/document10/art/Cyberglitch-1158647488)
-[Fonts used](https://fonts.google.com/share?selection.family=Doto:wght@100..900|Playpen+Sans:wght@100..800|Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700)  
-[Icons](https://www.iconfinder.com/)  
+[Background image](https://www.deviantart.com/document10/art/Autumn-vibes-1243262341)
+[Fonts used](https://fonts.google.com/share?selection.family=Doto:wght@100..900|Playpen+Sans:wght@100..800|Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700)
+[Icons](https://www.iconfinder.com/)

img/bg.webp

@@ -6,12 +6,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="description" content="Personal Portofolio Website">
         <meta name="author" content="document10">
-        <meta name="keywords" content="HTML, CSS, JS, PY, Python, GO, USV, CTR, Personal, Portofolio, Website, Skills, Art, Dev, Developement, Software">
+        <meta name="keywords" content="HTML, CSS, JS, PY, Python, GO, CPP, AI, USV, Personal, Portofolio, Website, Skills, Art, Dev, Developement, Software">
         <meta name="theme-color" content="#1DD2EB">
         <meta property="og:url" content="https://document10.github.io">
         <meta property="og:site_name" content="document10.github.io">
         <meta property="og:title" content="Document10">
-        <meta property="og:description" content="I am a 20 years old developer and artist, currently in university and I have a lot of experience with languages like JS, Python, CSS, and more. I use Linux on a daily basis, and I learn more things about it every day.">
+        <meta property="og:description" content="I am a 20 years old developer and artist, currently in university and I have experience in multiple fields like web and fullstack development, artificial intelligence tools and more. I use Linux on a daily basis, and I learn more things about it every day.">
         <meta property="og:image" content="https://raw.githubusercontent.com/document10/document10.github.io/main/img/pfp.webp">
         <meta property="og:image:type" content="image/png">
         <meta property="og:image:width" content="256">
@@ -29,7 +29,7 @@
                 <h1>document10</h1>
             </div>
             <p id="aboutme">
-                I am a 20 years old developer and artist, currently in <a href="https://fiesc.usv.ro/" class="ext">university</a> and I have a lot of experience with languages like JS, Python, CSS, and more. I use <a href="https://endeavouros.com/" class="ext">Linux</a> on a daily basis, and I learn more things about it every day.
+                I am a 20 years old developer and artist, currently in <a href="https://fiesc.usv.ro/" class="ext">university</a> and I have experience in multiple fields like web and fullstack development, artificial intelligence tools and more. I use <a href="https://endeavouros.com/" class="ext">Linux</a> on a daily basis, and I learn more things about it every day.
             </p>
             <div id="social">
                 <div class="cat">
@@ -52,8 +52,8 @@ <h1>document10</h1>
                     <a href="https://replit.com/@document10" class="social">
                         <img src="./img/replit.webp" alt="Replit" class="linkicon" >
                     </a>
-                    <a href="https://dev.to/document10" class="social">
-                        <img src="./img/devto.webp" alt="Dev.to" class="linkicon">
+                    <a href="https://forem.com/document10" class="social">
+                        <img src="./img/forem.webp" alt="Forem" class="linkicon">
                     </a>
                 </div>
                 <div class="cat">
@@ -76,7 +76,7 @@ <h1>document10</h1>
                 </div>
             </div>
             <div id="footer">
-                <a href="https://www.deviantart.com/document10/art/Cyberglitch-1158647488" class="footer">Background</a>
+                <a href="https://www.deviantart.com/document10/art/Autumn-vibes-1243262341" class="footer">Background</a>
                 <a href="https://fonts.google.com/share?selection.family=Doto:wght@100..900|Playpen+Sans:wght@100..800|Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700" class="footer">Fonts</a>
                 <a href="https://www.iconfinder.com/" class="footer">Icons</a>
             </div>

img/devto.webp

@@ -1,8 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Playpen+Sans:wght@100..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Playpen+Sans:wght@100..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
 
-html,body{
+html,
+body {
     box-sizing: border-box;
-    background: url('./img/bg.webp') repeat center center/cover;
+    background: url("./img/bg.webp") repeat center center/cover;
     padding: 0%;
     margin: 0%;
     width: 100%;
@@ -12,24 +13,28 @@ html,body{
     justify-content: center;
 }
 
-h1{
+h1 {
     font-family: "Doto", serif;
     font-optical-sizing: auto;
     font-size: 9vh;
     line-height: 8vh;
     text-align: center;
     color: #ffffff;
-    text-shadow:3px 3px 3px #000,-3px 3px 3px #000,-3px -3px 3px #000,3px -3px 3px #000;
+    text-shadow:
+        3px 3px 3px #000,
+        -3px 3px 3px #000,
+        -3px -3px 3px #000,
+        3px -3px 3px #000;
     padding: 0%;
     margin: 0%;
     align-self: center;
-}   
+}
 
 a {
     text-decoration: none;
 }
 
-#main{
+#main {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
@@ -39,15 +44,15 @@ a {
     height: 100%;
 }
 
-#title{
+#title {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     padding: 0%;
     margin: 0%;
 }
 
-#social{
+#social {
     padding: 0%;
     margin: 0% 10vw;
     display: flex;
@@ -56,7 +61,7 @@ a {
     justify-content: center;
 }
 
-#pfp{
+#pfp {
     border: 2px dashed #101010;
     border-radius: 100%;
     width: 30vh;
@@ -66,18 +71,19 @@ a {
     margin: 0%;
 }
 
-#aboutme{
+#aboutme {
     padding: 0%;
     margin: 0% 5vw;
     text-wrap: balance;
     text-align: center;
     font-size: 3.5vh;
     line-height: 4vh;
-    font-family: 'Ubuntu', sans-serif;
-    color: #1DD2EB;
+    font-family: "Ubuntu", sans-serif;
+    color: #f2f1df;
     text-shadow: 3px 3px 3px #010101;
     border: #000000 solid 1px;
     border-radius: 10px;
+    background-color: #00000044;
     backdrop-filter: blur(5px);
 }
 
@@ -100,41 +106,41 @@ a {
 }
 
 .ext {
-    color: #F67338;
-    text-shadow: 2px 3px 4px #101010;
-    font-family: 'Ubuntu', sans-serif;
+    color: #1f8eff;
+    text-shadow: 3px 3px 3px #004699;
+    font-family: "Ubuntu", sans-serif;
     transition: all 0.3s ease-in;
 }
 
-.ext:hover{
-    color: #ED8080;
-    text-shadow: 3px 2px 4px #010101;
+.ext:hover {
+    color: #0726d9;
+    text-shadow: 3px 4px 4px #010101;
 }
 
-.social{
+.social {
     padding: 0%;
     margin: 0vh 0.25vw;
 }
 
-.cat{
+.cat {
     border: #000000 solid 2px;
     border-radius: 10px;
     padding: 0%;
     margin: 0.25vh 1vw;
-    background-color: #074DD977;
+    background-color: #0726d977;
     backdrop-filter: blur(5px);
     transition: all 0.25s ease-out;
 }
 
 .cat:hover {
-    background-color: #143D7388;
+    background-color: #02012688;
     backdrop-filter: blur(9px);
 }
 
-.cattitle{
+.cattitle {
     font-size: 4vh;
     line-height: 5vh;
-    font-family: 'Playpen Sans', sans-serif;
+    font-family: "Playpen Sans", sans-serif;
     color: #ffffff;
     text-shadow: 2px 2px 2px #010101;
     padding: 0%;
@@ -147,36 +153,37 @@ a {
     height: 7vh;
     padding: 0%;
     margin: 0%;
-    filter: invert(90%) sepia(19%) saturate(6725%) hue-rotate(63deg) brightness(103%) contrast(90%) drop-shadow(8px 8px 5px #010101);
+    filter: invert(85%) sepia(5%) saturate(5205%) hue-rotate(10deg)
+        brightness(110%) contrast(90%) drop-shadow(8px 8px 5px #010101);
     transform: none;
     transition: all 0.4s ease-out;
 }
 
-.linkicon:hover{
-    filter: invert(92%) sepia(13%) saturate(4655%) hue-rotate(137deg) brightness(92%) contrast(97%) drop-shadow(8px 8px 5px #101010);
+.linkicon:hover {
+    filter: invert(40%) sepia(90%) saturate(1290%) hue-rotate(10deg)
+        brightness(105%) contrast(95%) drop-shadow(8px 8px 5px #101010);
     transform: scale(125%) rotate(10deg);
 }
 
 .footer {
-    color: #F23005;
+    color: #f27405;
     text-shadow: 5px 5px 5px #000000;
     font-size: 3vh;
     line-height: 3vh;
-    font-family: 'Ubuntu', sans-serif;
+    font-family: "Ubuntu", sans-serif;
     padding: 0%;
     margin: 0.75%;
     transform: none;
     transition: all 0.4s ease-out;
 }
 
 .footer:hover {
-    color: #F24150;
+    color: #f2a922;
     transform: scale(110%);
-    text-shadow: 6px 6px 5px #732229;
+    text-shadow: 6px 6px 5px #590902;
 }
 
 @media screen and (max-width: 600px) {
-
     h1 {
         font-size: 11vw;
         line-height: 11vw;
@@ -196,13 +203,13 @@ a {
         height: 50vw;
         margin: 0%;
     }
-    
+
     #social {
         padding: 0%;
         margin: 0%;
     }
 
-    #footer{
+    #footer {
         display: flex;
         justify-content: center;
         align-content: center;
@@ -213,27 +220,27 @@ a {
     .ext {
         font-size: 5.5vw;
         line-height: 5.5vw;
-        font-family: 'Ubuntu', sans-serif;
+        font-family: "Ubuntu", sans-serif;
     }
 
     .social {
         margin: 0.5vh 0.75vw;
     }
 
-    .cat{
+    .cat {
         padding: 0%;
         margin: 0.25vh 0.5vw;
     }
-    
-    .cattitle{
+
+    .cattitle {
         font-size: 6vw;
         line-height: 6vw;
         padding: 0%;
         margin: 0%;
         text-align: center;
     }
-    
-    .footer{
+
+    .footer {
         font-size: 7vw;
         line-height: 7vw;
         text-align: center;
@@ -245,4 +252,4 @@ a {
         width: 11vw;
         height: 11vw;
     }
-}
+}