Started a new, probably final homepage

ElBi21 · Aug 14, 2024 · 4cd1dfc · 4cd1dfc
1 parent 453a804
commit 4cd1dfc
Show file tree

Hide file tree

Showing 10 changed files with 184 additions and 19 deletions.
diff --git a/home2.html b/home2.html
@@ -20,7 +20,12 @@
     <div class="lat_bar">
         <div class="pic_and_name">
             <div id="pro_pic"></div>
-            <p><span style="font-size: 40px;"><b>L</b></span>eonardo<br>Biason</p>
+            <div id="socials">
+                <a class="social_icon" href="mailto:[email protected]" rel="noopener noreferrer"><i class="fa-solid fa-envelope fa-2xl"></i></a>
+                <a class="social_icon" href="https://www.linkedin.com/in/leonardobiason" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-linkedin fa-2xl"></i></a>
+                <a class="social_icon" href="https://www.github.com/ElBi21" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github fa-2xl"></i></a>
+                <a class="social_icon" href="https://mastodon.social/@diapa" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-mastodon fa-2xl"></i></a>
+            </div>
         </div>
     </div>
     <div class="main_page">
@@ -36,7 +41,7 @@ <h3><b>\begin{<span style="color: #32689B;">biography</span>}</b></h3>
                     I graduated in the year <b>2021/2022</b> at <b>Istituto Salesiano Pio XI</b>, in the scientific address, where I was a <b>representative of the institute</b> itself.</p>
                 </div>
             </div>
-            
+
 
             <h3><b>def <span style="color: #73329B">interests</span>(<i>self</i>):</b></h3>
             <div class="text_box" style="background-color: #7D329B7C">
@@ -47,17 +52,18 @@ <h3><b>def <span style="color: #73329B">interests</span>(<i>self</i>):</b></h3>
                     I am also interested in <b>LaTeX</b>, and in presenting scientific topics to other people.<br><br>
                     I am an admin in the <b>AcsAi Sapienza's course Discord server</b>, with the goal of rounding up a <b>community</b> for all the students of the course and for all
                     the other people that are interested in the course.<br><br>
+                    I recently started working on the Sapienza Students Network team, building the <a href="https://www.sapienzastudents.net"><b>Sapienza Students</b></a> website. You can find out more about the mission on the <a href="https://github.com/sapienzastudentsnetwork/sapienzastudentsnetwork.github.io">official repository</a>.<!--<br><br>
                     Here are some of the projects I have been working on, with a brief description of what they are. By clicking on them,
-                    you can be redirected to the relative GitHub page.</p>
+                    you can be redirected to the relative GitHub page.--></p>
                 </div>
             </div>
 
-            <div>
+            <!--<div>
                 <div class="repogrid">
                 </div>
                 <script src="repos/repos.js"></script>
-            </div>
-            
+            </div>-->
+
             <h3><b>let <span style="color: #D48D3E">contacts</span>: Vec&lt;String&gt;</b></h3>
             <div class="text_box" style="background-color: #d4ac3e8c">
                 <div class="lateral_line" style="background-color: #D48D3E"></div>
@@ -66,7 +72,7 @@ <h3><b>let <span style="color: #D48D3E">contacts</span>: Vec&lt;String&gt;</b></
                 </div>
             </div>
 
-            <a href="https://0atman.github.io/HumanMadeMark-com/"><img style="margin-top: 50pt; width: 150px" src="https://0atman.github.io/HumanMadeMark-com/black-logo.svg"></a>
+            <a href="https://brainmade.org/"><img style="margin-top: 50pt; width: 150px" src="https://brainmade.org/black-logo.svg"></a>
         </div>
     </div>
 </body>

diff --git a/home3.html b/home3.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <script src="https://kit.fontawesome.com/6fd9d2b408.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="styles/text_style.css">
+    <link rel="stylesheet" href="styles/home3/homepage.scss">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
+
+    <link rel="icon" href="assets/images/icon.png">
+    <meta charset="UTF-8">
+    <title>Leonardo Biason</title>
+</head>
+<body>
+    <div class="left_section">
+        <div class="avatar"></div>
+        <div class="name_bg">
+            <p class="name_text">Leonardo</p>
+            <p class="name_text">Biason</p>
+        </div>
+    </div>
+    <div class="right_section">
+        <div class="panel">
+            <h1>Who am I?</h1>
+            <p>
+                I'm Leonardo, I'm 20 and I'm an <b>Artificial Intelligence and Computer Science</b> student at <b>Sapienza</b> in Rome.<br><br>
+                I'm a passionate <b>photographer</b> and traveler, and I try to keep the memories of my trips within the art of photography.<br><br>
+                In the year <b>2020/2021</b> I attended to an <b>abroad year</b> in <b>Belgium</b> with <b>AFS</b>.
+                After returning I became an <b>AFS Volunteer</b>. Thanks to that experience, I'm now able to speak 3 languages: <b>Italian</b>, <b>English</b> and <b>Dutch</b>. I've been a <b>scout</b> (both in Italy and in Belgium) for a total of <b>10 years</b>.<br><br>
+                I graduated in the year <b>2021/2022</b> at <b>Istituto Salesiano Pio XI</b>, in the scientific address, where I was a <b>representative of the institute</b> itself.
+            </p>
+        </div>
+        <div class="panel">
+            <h1>What do I do?</h1>
+            <p>
+                I take <b>photos</b> in all the places I visit, and I'm building up a <b>portfolio</b> of my experiences.<br><br>
+                I enjoy programming in <b>Python</b>, but I'm open to learn new coding languages. I am intrigued by the <b>Rust</b> memory paradigm, so I'm learning that language too.
+                I am also interested in <b>LaTeX</b>, and in presenting scientific topics to other people.<br><br>
+                I am an admin in the <b>AcsAi Sapienza's course Discord server</b>, with the goal of rounding up a <b>community</b> for all the students of the course and for all
+                the other people that are interested in the course.<br><br>
+                I recently started working on the Sapienza Students Network team, building the <a href="https://www.sapienzastudents.net"><b>Sapienza Students</b></a> website. You can find out more about the mission on the <a href="https://github.com/sapienzastudentsnetwork/sapienzastudentsnetwork.github.io">official repository</a>.
+            </p>
+        </div>
+        <div class="panel">
+            <h1>Contacts</h1>
+            <p>
+                Do you want to stay in touch with me? You can contact me by writing an email to <b>[email protected]</b>, or by following me on the socials listed on the left side of this page.<br><br>You just have to click them!
+            </p>
+        </div>
+    </div>
+</body>
diff --git a/repos/repos.css b/repos/repos.css
@@ -11,7 +11,7 @@
 
 .repo {
     background-color: #212435;
-    width: 300px;
+    width: 370px;
     height: 200px;
     border-radius: 10px;
     box-shadow: 0px 5px 10px rgb(134, 132, 132);

diff --git a/repos/repos.js b/repos/repos.js
@@ -12,7 +12,7 @@ async function getRepoData(repoName) {
     repoData.headers = heads;
 
     let repoJson = await repoData.json();
-    console.log(repoJson);
+    // console.log(repoJson);
     return repoJson;
 }
 

diff --git a/styles/home2/mainpage.css b/styles/home2/mainpage.css
@@ -1,6 +1,6 @@
 :root {
     --menu_width: 18%;
-    --temp_height: 1900px;
+    --site_height: 1410px;
 }
 
 html {
@@ -29,7 +29,7 @@ body {
 .main_page{
     background-color: #F9F8F4;                 /* TEMP */
     width: calc(100% - var(--menu_width));
-    height: 1900px/*var(--temp_height)*/;               /* TEMP */
+    height: var(--site_height);               /* TEMP */
     align-items: top;
     display: flex;
     justify-content: center;

diff --git a/styles/home2/menubar.css b/styles/home2/menubar.css
@@ -20,6 +20,14 @@
     box-shadow: 0px 0px 15px black;
 }
 
-.links {
-
+#socials {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 40px;
+}
+
+.social_icon {
+    color: #F9F8F4;
+    margin: 20px 0 20px 0;
 }
diff --git a/styles/home3/homepage.scss b/styles/home3/homepage.scss
@@ -0,0 +1,14 @@
+@import "left.scss";
+@import "right.scss";
+@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
+
+body {
+    /*background: linear-gradient(135deg, rgba(244,244,244,1) 0%, rgba(254,255,234,1) 100%);*/
+    background: radial-gradient(circle at left top, rgba(2,6,45,1) 28%, rgba(146,114,213,1) 100%);
+    /*background-image: url("../../assets/images/home/alt_back.jpg");*/
+    background-size: 1920px;
+    background-attachment: fixed;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+}
diff --git a/styles/home3/left.scss b/styles/home3/left.scss
@@ -0,0 +1,44 @@
+.left_section {
+    width: 43%;
+    height: 800px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+}
+
+.name_bg {
+    width: 320px;
+    height: 130px;
+    margin: 20px 0 0 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.name_text {
+    font-family: "Abril Fatface", serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 80px;
+    line-height: 0.8;
+    margin: 0;
+    background: linear-gradient(118deg, rgba(42,166,247,1) 8%, rgba(148,74,201,1) 47%, rgba(245,165,18,1) 93%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.avatar {
+    background-image: url(../../assets/images/home/background.jpg);
+    background-size: 420px;
+    background-position: -122px -30px;
+    width: 250px;
+    height: 250px;
+    margin: 150px 0 0 0;
+    border-radius: 125px;
+    border: 2px solid white;
+}
diff --git a/styles/home3/right.scss b/styles/home3/right.scss
@@ -0,0 +1,21 @@
+.right_section {
+    width: 57%;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    padding-top: 80px;
+}
+
+.panel {
+    width: 90%;
+    height: fit-content;
+    background-color: rgba(185, 146, 146, 0.08);
+    margin-bottom: 80px;
+    border-radius: 32px;
+    backdrop-filter: blur(6.8px);
+    -webkit-backdrop-filter: blur(6.8px);
+    border: 1.2px solid #EFEFEF;
+    box-shadow: 0px 0px 10px #181818;
+}
diff --git a/styles/text_style.css b/styles/text_style.css
@@ -5,10 +5,22 @@
 @font-face { font-family: "JBM Regular"; src: url("../assets/fonts/JetBrainsMonoNLNerdFont-Regular.ttf"); }
 @font-face { font-family: "JBM SemiBold"; src: url("../assets/fonts/JetBrainsMonoNLNerdFont-SemiBold.ttf"); }
 
+:root {
+    --font-color: #E2E2E2;
+}
+
+.abril-fatface-regular {
+  font-family: "Abril Fatface", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
 h1 {
-    text-align: center;
-    font-family: "Lato Regular";
-    font-size: 4vmax;
+    text-align: left;
+    font-family: "Abril Fatface", serif;
+    font-size: 50px;
+    margin: -54.2px 0 -20px 25px;
+    color: var(--font-color);
 }
 
 h3 {
@@ -23,8 +35,15 @@ h3 {
 
 p {
     text-align: left;
-    font-family: "Lato Light";
+    font-family: "DM Sans", sans-serif;
+    font-weight: 100;
     font-size: 20px;
     line-height: 27px;
-    margin-left: 25px;
-}
+    margin: 25px;
+    color: var(--font-color);
+}
+
+a {
+    color: #5E86DC;
+    text-decoration: none;
+}