Add description and some statistics

Signed-off-by: trivernis <trivernis@protonmail.com>

src/app.rs

@@ -74,12 +74,20 @@ impl Component for App {
                             onclick_signal = self.link.callback(|_| Msg::ChangeNavbarItem(0))
                             >
                             <RouterAnchor<AppRouter>route=AppRouter::RootPath>{"Home"}</RouterAnchor<AppRouter>></NavbarItem>
+                        <NavbarItem
+                            class_name="navbar-route">
+                            <a href="https://github.com/trivernis" target="_blank">{"GitHub"}</a>
+                        </NavbarItem>
+                        <NavbarItem
+                            class_name="navbar-route">
+                            <a href="https://discord.gg/ZxzM2bTeXU" target="_blank">{"Discord"}</a>
+                        </NavbarItem>
                         <NavbarItem
                             class_name="navbar-route"
                             active = self.navbar_items[1]
                             onclick_signal = self.link.callback(|_| Msg::ChangeNavbarItem(1))
                             >
-                            <RouterAnchor<AppRouter>route=AppRouter::AboutPath>{"About"}</RouterAnchor<AppRouter>></NavbarItem>
+                            <RouterAnchor<AppRouter>route=AppRouter::AboutPath>{"About this Website"}</RouterAnchor<AppRouter>></NavbarItem>
                     </NavbarContainer>
                 </Navbar>
                 <Router<AppRouter, ()>

src/pages/about.rs

@@ -26,7 +26,7 @@ impl Component for About {
         html! {
             <Container direction=Direction::Row wrap=Wrap::Wrap class_name="content">
                 <Item layouts=vec!(ItemLayout::ItXs(12))>
-                    <h3>{"Libraries used for building this website"}</h3>
+                    <h3>{"Stuff used for building this website"}</h3>
                 </Item>
                 <Item layouts=vec!(ItemLayout::ItXs(12))>
                     <ul>
@@ -37,6 +37,8 @@ impl Component for About {
                             {"parceljs"}</a>{" : builder js library"}</li>
                         <li><a href="https://github.com/paulmillr/chokidar" target="_blank">
                         {"chokidar"}</a>{" : watcher js library"}</li>
+                        <li><a href="https://github.com/anuraghazra/github-readme-stats" target="_blank">
+                        {"GitHub Readme Stats"}</a>{": showing statistics about my github"}</li>
                     </ul>
                 </Item>
             </Container>

src/pages/home.rs

@@ -28,6 +28,16 @@ impl Component for Home {
                 <Item layouts=vec!(ItemLayout::ItXs(12), ItemLayout::ItM(8)) class_name="home-greeting">
                     <h1>{"Welcome to my website"}</h1>
                 </Item>
+                <Item layouts=vec!(ItemLayout::ItXs(12), ItemLayout::ItM(8)) class_name="home-description">
+                    <p>{r#"
+                    I'm a german software developer working on way too many projects at once.
+                    I primarily use rust because it's just the best programming language.
+                    "#}</p>
+                </Item>
+                <Item layouts=vec!(ItemLayout::ItXs(12), ItemLayout::ItM(8)) class_name="github-stats">
+                    <img src="https://github-readme-stats.vercel.app/api?username=trivernis&show_icons=true&theme=tokyonight"/>
+                    <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=trivernis&hide=html&show_icons=true&theme=tokyonight" />
+                </Item>
             </Container>
         }
     }

src/styles/main.scss

@@ -29,5 +29,5 @@ body {
 
 
 .content {
-    margin: 15% 20%;
+    margin: 10% 15% 5em;
 }

src/styles/pages/home.scss

@@ -7,4 +7,24 @@
     text-align: center;
     width: 100%;
   }
+}
+
+.home-description {
+  width: 100%;
+  font-size: 1.5em;
+  margin: auto;
+  text-align: center;
+}
+
+.github-stats {
+  margin: auto;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  flex-wrap: wrap;
+  img {
+    padding: 5px;
+    margin: auto;
+    display: flex;
+  }
 }