First commit.

LICENSE

@@ -1,24 +0,0 @@
-This is free and unencumbered software released into the public domain.
-
-Anyone is free to copy, modify, publish, use, compile, sell, or
-distribute this software, either in source code form or as a compiled
-binary, for any purpose, commercial or non-commercial, and by any
-means.
-
-In jurisdictions that recognize copyright laws, the author or authors
-of this software dedicate any and all copyright interest in the
-software to the public domain. We make this dedication for the benefit
-of the public at large and to the detriment of our heirs and
-successors. We intend this dedication to be an overt act of
-relinquishment in perpetuity of all present and future rights to this
-software under copyright law.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
-OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
-ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-OTHER DEALINGS IN THE SOFTWARE.
-
-For more information, please refer to <https://unlicense.org>

README.md

@@ -1,2 +0,0 @@
-# Website
-my website, currently hosted on InfinityFree (thanks) at http://adrian.rf.gd/

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);
+  

index.htm

@@ -1,35 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<title>Adrian</title>
-		<link rel="stylesheet" type="text/css" href="styles.css">
-	</head>
-
-	<body class="vertcentered">
-		<center>
-			<h1 class="nobottommargin">adrian's webspace</h1>
-            <h3 class="italic lightcol nospace">fantasy is not a crime, find your castle in the sky</h2>
-			<table height="100%" width="100%">
-				<h3 class="nospace">
-					<a href="http://blog.adrian.rf.gd/" style="text-decoration:blink">blog</a>
-					<a href="http://gallery.adrian.rf.gd/" style="text-decoration:blink">gallery</a>
-					<a href="projects.htm" style="text-decoration:blink">projects</a>
-					
-				</h3>
-				<h3 class="nospace">
-					<a href="https://youtube.com/@adrianvic8/" style="text-decoration:blink">YouTube</a>
-					<a href="https://github.com/adrianvic/" style="text-decoration:blink">GitHub</a>
-					<a href="https://reddit.com/u/Afox200" style="text-decoration:blink">Reddit</a>
-				</h3>
-					<tr>
-						<td align="center" valign="middle" style="padding-left: 10%; padding-right: 10%;">
-							<p>Hello, I'm Adrian, a newbie developer, tech enthusiast, photographer and conlang creator who loves literature.</p>
-							<p>Check this video:</p>
-							<iframe width="560" height="315" src="https://www.youtube.com/embed/KwjGAcV7w_M?si=6EQfXmDovGw_ZqDc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-						</td>
-					</tr>
-            </table>
-            <p class="bold">Adrian Victor, under unlicense, <a href="https://github.com/adrianvic/website">on GitHub</a> <p>
-		</center>
-	</body>
-</html>

index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <title>Adrian - Home</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" media="screen" href="./assets/main.css">
+    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+    <script src="./assets/main.js" type="text/javascript" defer></script>
+
+</head>
+
+<body>
+    <header-component></header-component>
+        <main class="flex flex-column">
+            <h1>Home</h1>
+            <a class="menuEntryColor" href="https://github.com/adrianvic/haruma">
+                <div class="flex flex-row box bnwOnHover menuEntry">
+                    <img class="thumbnail" src="./assets/img/HarumaThumbnail.png" width="500">
+                    <div class="flex flex-column">
+                        <h2 class="noMargin">Haruma</h2>
+                        <p class="lightColor">Project</p>
+                        <p class="noMargin">Haruma is a Discord bot to help you with mod, roleplay and getting lyrics from Genius.</p>
+                    </div>
+                </div>
+            </a>
+        </main>
+</body>
+</html>

projects.htm

@@ -1,30 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<title>Adrian</title>
-		<link rel="stylesheet" type="text/css" href="styles.css">
-	</head>
-
-	<body class="vertcentered">
-		<center>
-			<h1 class="nobottommargin">adrian's webspace</h1>
-            <h3 class="italic lightcol nospace">all my projects listed below</h2>
-			<table height="100%" width="100%">
-				<h3 class="nospace">
-					<a href="http://adrian.rf.gd/" style="text-decoration:blink">home</a>
-				</h3>
-				<h3 class="nospace">
-				</h3>
-					<tr>
-						<td align="center" valign="middle" style="padding-left: 10%; padding-right: 10%;">
-							<h4><a href="https://github.com/adrianvic/APKrenamer" class="nobottommargin">APKrenamer</a></h4>
-							<p class="notopmargin ">Simple, user-friendly tool to bulk-rename APK files according to it's manifest</p>
-							<h4><a href="https://youtube.com/pisica_obraznica/" class="nobottommargin">TheCoolCat!</a></h4>
-							<p class="notopmargin">A channel where I review malware.</p>
-						</td>
-					</tr>
-            </table>
-            <p class="bold">Adrian Victor, under unlicense, <a href="https://github.com/adrianvic/website">on GitHub</a> <p>
-		</center>
-	</body>
-</html>

styles.css

@@ -1,49 +0,0 @@
-@font-face {
-	font-family: "segoeUI";
-	src: url("./fonts/segoeui.ttf");
-}
-
-body {
-    background-color: black;
-    color: white;
-	font-family: "segoeUI"
-}
-
-a {
-    color: gray;
-}
-
-.italic {
-    font-style: italic;
-}
-
-.bold {
-    font-style: bold;
-}
-
-.lightcol {
-    color: lightgray;
-}
-
-.nospace {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.notopmargin {
-    margin-top: 0;
-}
-
-.nobottommargin {
-    margin-bottom: 0;
-}
-
-
-.vertcentered {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -moz-transform: translateX(-50%) translateY(-50%);
-    -webkit-transform: translateX(-50%) translateY(-50%);
-    transform: translateX(-50%) translateY(-50%);
-}