First commit.

assets/main.css

@@ -0,0 +1,157 @@
+body {
+    background-color: black;
+    color: white;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 20px;
+    margin-top: 50px;   
+}
+
+a {
+    color: lightgray;
+    text-decoration: none;
+}
+
+a:hover {
+    color: darkgray;
+}
+
+footer {
+    text-align: center;
+}
+
+aside {
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+    border: 2px solid white;
+    background-color: #111;
+}
+
+nav.profile img {
+    width: 100px;
+    margin-top: -50px;
+    border: 4px solid white;
+}
+
+nav.profile {
+    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://i.postimg.cc/jdSrJ8GD/purplesky.png');
+    background-size: cover;
+    background-position: center;
+    border-bottom: 2px solid white;
+    padding: 20px;
+}
+
+#links {
+    border-bottom: 2px solid white;
+}
+
+
+main {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    width: 100%;
+    padding: 20px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.centerText {
+    text-align: center;
+}
+
+.box {
+    padding: 10px;
+    gap: 20px;
+}
+
+.noMargin {
+    margin: 0px;
+}
+
+.lightBackground {
+    background-color: #111;
+}
+
+.border {
+    border: 2px solid white;
+}
+
+.dottedBorder {
+    border: 2px dotted white;
+}
+
+.dashedBorder {
+    border: 2px dashed white;
+}
+
+.thumbnail {
+    border: 2px solid white;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
+
+.lightColor {
+    color: lightgray;
+}
+
+.flyOnHover:hover {
+    animation: alternate .4s fly;
+    animation-fill-mode: forwards;
+}
+
+.bnwOnHover:hover {
+    transition-duration: .4s;
+    filter: grayscale(100%);
+}
+
+.menuEntry {
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+.menuEntry:hover {
+    transition-duration: 0.4s;
+    background-color: #070707;
+}
+
+.menuEntryColor {
+    color: white;
+}
+
+.menuEntryColor:hover {
+    color: white;
+}
+
+.menuEntry:hover > img {
+    animation: alternate .4s fly;
+    animation-fill-mode: forwards;
+}
+
+
+/* Keyframes */
+@keyframes fly {
+    0% {
+        transform: translate(0, 0);
+    }
+
+    100% {
+        transform: translate(0%, -2%);
+    }
+}

assets/main.js

@@ -0,0 +1,32 @@
+class Header extends HTMLElement {
+    constructor() {
+      super();
+    }
+  
+    connectedCallback() {
+      this.innerHTML = `
+      <aside>
+      <nav class="box profile">
+          <img class="decorativeImage" src="./assets/logo.jpg" alt="logo - Shuu Maiko from Niskeoi">
+          <h1>Adrian Victor</h1>
+          <p>@tenkuma</p>
+          <p>Studying computing on <a href="http://ifc.edu.br/">IFC</a>, interessed in programming, hacking e and security.</p>
+      </nav> 
+
+      <div id="links" class="centerText box">
+          <p>Links</p>
+          <p><a href="index.html">Home</a> - <a href="http://gallery.adrian.rf.gd/">Gallery</a> - <a href="https://github.com/adrianvic/">GitHub</a></p>
+      </div>
+      
+      <div id="footer" class="box">
+          <footer>
+              <p>2024 - Adrian Victor, under <a href="https://unlicense.org/">Unlicense</a>, on <a href="https://github.com/adrianvic/website/">GitHub</a>.</p> 
+          </footer>
+      </div>
+  </aside>
+      `;
+    }
+  }
+  
+  customElements.define('header-component', Header);
+