Adding a section to showcase my skills.

Gabri432 · Jun 15, 2024 · 192ad9c · 192ad9c
1 parent 33f57ad
commit 192ad9c
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 6 deletions.
diff --git a/src/app/routes/home/home.component.html b/src/app/routes/home/home.component.html
@@ -16,15 +16,36 @@ <h2>
         <h2>About me</h2>
         <p>
             I'm currently studying computer science at the University of Milan. <br />
-            My favourite programming language is Java, but I also enjoy Python, Go, and Typescript. <br />
-            Among the tools that I use the most there are Angular, Github and VSCode. <br /><br />
-            Among my passions there are sports such as Basketball, Olympic Lifting and Rugby. <br />
-            Other than that I love Math and Science. <br /><br />
-            Other than my native language, italian, I do speak english and little french. <br />
-            I can also read some spanish.
+            I have a passion for creating and maintaing websites, infact I hope one day to work as a <strong>web developer</strong>. <br />
+            Aside from this, my interests spread across various fields, such as the <strong>tech industry</strong>, <strong>Science</strong>
+            and <strong>Sport</strong>. <br /><br />
+            Specifically, I like to talk about 
+            <a href="https://gabri432.github.io/angular-personal-website/blog/education/what-is-the-best-renewable-energy/" 
+            target="_blank"
+            title="View my blog 'What is the best renewable energy?'!">renewable energy sources</a>,
+            <a href="https://gabri432.github.io/angular-personal-website/blog/sport/italian-basketball-team-journey/" 
+            target="_blank"
+            title="View my blog 'Italian basketball team journey'">basketball</a> and
+            <a href="https://gabri432.github.io/angular-personal-website/what-programming-language-you-should-learn/"
+            target="_blank"
+            title="View my blog 'What programming language you should learn'">programming</a>.<br /><br />
+            Other sports are Olympic weightlifting and Rugby.<br />
+            My native language is Italian, but I do speak English and little French, and read some Spanish.
         </p>
     </div>
     <hr>
+    <div id="my-skills-section">
+        <h2>My Skills</h2>
+        <div id="hard-skills">
+           <div class="skill">Angular</div>
+           <div class="skill">Python</div>
+           <div class="skill">Java</div>
+           <div class="skill">Github</div>
+           <div class="skill">VSCode</div>
+           <div class="skill">Git</div> 
+        </div> 
+    </div>
+    <hr>
     <div id="my-projects-section">
         <app-my-projects></app-my-projects>
     </div>

diff --git a/src/app/routes/home/home.component.scss b/src/app/routes/home/home.component.scss
@@ -22,6 +22,33 @@
             margin: 3px;
         }
     }
+    #my-skills-section {
+        width: 60%;
+        margin-left: 20%;
+        margin-bottom: 10vh;
+
+        h2 {
+            color: grey;
+            font-size: 34px;
+        }
+
+        #hard-skills {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+
+            .skill {
+                border: 1px solid rgb(226, 225, 225);
+                width: 88%;
+                margin-bottom: 1%;
+                margin-left: 6%;
+                height: 100px;
+                border-radius: 5px;
+                text-align: center;
+                padding-top: 50px;
+                font-size: 22px;
+            }
+        }
+    }
 
     #more-me {
         margin-top: 10%;
@@ -33,6 +60,9 @@
             font-size: 20px;
             line-height: 1.5;
         }
+        a {
+            text-decoration: none;
+        }
 
         h2 {
             color: grey;
@@ -60,5 +90,25 @@
             width: 80%;
             margin-left: 10%;
         }
+
+        #my-skills-section {
+            width: 80%;
+            margin-left: 10%;
+
+            #hard-skills {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+
+                .skill {
+                    width: 88%;
+                    margin-bottom: 1%;
+                    margin-left: 6%;
+                    height: 60px;
+                    border-radius: 5px;
+                    text-align: center;
+                    padding-top: 30px;
+                }
+            }
+        }
     }
 }