thingy

src/App.tsx

@@ -6,8 +6,10 @@ function App() {
   return (
     <div className="App">
       <Navbar />
-      <div style={{ height: 64 + "px" }} />
+      <div style={{ "height": "64px" }} />
-      <h1 style={{ "textAlign": "center" }}>test</h1>
+      <h1 style={{ "textAlign": "center" }} id="test1">test</h1>
+      <img src='https://amogus.org/amogus.png' alt="amogus" />
+      <h1 style={{ "textAlign": "center" }} id="test2">test 2</h1>
       <img src='https://amogus.org/amogus.png' alt="amogus" />
     </div>
   );

src/Navbar.tsx

@@ -1,6 +1,8 @@
 import { FunctionComponent } from 'react';
 import { useState, useEffect } from 'react';
 import './navbar.css';
+import NavbarLink from './NavbarLink';
+import NavbarLinkDivider from './NavbarLinkDivider';
 import NavbarText from './NavbarText';
 
 const Navbar: FunctionComponent = () => {
@@ -20,6 +22,11 @@ const Navbar: FunctionComponent = () => {
     return (
         <div className={`navbar ${hidden ? 'navbar-collapsed' : ''}`}>
             <NavbarText />
+            <div className='navbar-link-container'>
+                <NavbarLink text='sussy' link='#test1'/>
+                <NavbarLinkDivider />
+                <NavbarLink text='amogus' link='#test2'/>
+            </div>
         </div>
     )
 }

src/NavbarLink.tsx

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+
+const NavbarLink: FunctionComponent<{ text: string, link: string }> = (props) => {
+    return (
+        <span className="navbar-link-text" onClick={() => window.location.href = props.link}>{props.text}</span>
+    );
+}
+
+export default NavbarLink;

src/NavbarLinkDivider.tsx

@@ -0,0 +1,16 @@
+import { FunctionComponent } from "react";
+
+const NavbarLinkDivider: FunctionComponent = (props) => {
+    return (
+            <span
+              className="navbar-link-text"
+              style={{
+                  "marginLeft": "6px",
+                  "marginRight": "6px",
+                  "cursor": "unset",
+                }}
+            >|</span>
+    );
+}
+
+export default NavbarLinkDivider;

src/NavbarText.tsx

@@ -7,8 +7,14 @@ const Texts: string[] = [
     'jan://',
     './jan',
     '/usr/bin/jan',
+    '/usr/lib/libjan-0.so.14',
+    'https://rvlt.gg/jan',
 ];
 
+const HrefOverrides: { [key: number]: string } = {
+    5: 'https://rvlt.gg/jan',
+}
+
 const randomText = (excludeNum?: number): number => {
     if (excludeNum === undefined || Texts.length === 1) return Math.floor(Math.random() * Texts.length);
     else {
@@ -30,11 +36,11 @@ const NavbarText: FunctionComponent = () => {
         if (text.length < Texts[selectedText].length) {
             setText(text + Texts[selectedText].charAt(text.length));
         }
-        
+
         if (timer % 5 === 0) {
             setUnderscore(!underscore);
         }
-        
+
         if (timer >= 80) {
             if (text.length > 0) {
                 setText(text.substring(0, text.length - 1));
@@ -57,7 +63,7 @@ const NavbarText: FunctionComponent = () => {
 
     return (
         <div>
-            <span className='navbar-text' onClick={() => window.location.href = '/'}>
+            <span className='navbar-text' onClick={() => window.location.href = HrefOverrides[selectedText] || '/'}>
                 {'> '}{text}{underscore ? '_' : ''}
             </span>
         </div>

src/index.css

@@ -3,6 +3,10 @@
   --secondary-bg: #232323;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   margin: 0;
   font-family: 'Roboto',  sans-serif;

src/navbar.css

@@ -3,21 +3,26 @@
     height: 64px;
     top: 0;
     position: fixed;
-    background-color: var(--secondary-bg);
     border-radius: 0 0 15px 15px;
     text-shadow: 0 0 3px rgba(255, 255, 255, 0.85), 0 0 6px rgba(255, 255, 255, 0.45), 0 0 9px rgba(255, 255, 255, 0.3);
-    user-select: none;
+    transition: height 0.2s;
-    cursor: pointer;
-
-    transition: top 0.2s, text-shadow 0.3s;
-}
-
-.navbar:hover {
-    text-shadow: 0 0 5px rgba(255, 255, 255, 0.85), 0 0 10px rgba(255, 255, 255, 0.45), 0 0 15px rgba(255, 255, 255, 0.3);
 }
 
 .navbar-collapsed {
-    top: -64px;
+    height: 32px;
+}
+
+.navbar-collapsed .navbar-text, .navbar-collapsed .navbar-link-text {
+    font-size: 16px;
+    top: 6px;
+}
+
+.navbar-collapsed .navbar-link-text {
+    right: 4px;
+}
+
+.navbar-text:hover, .navbar-link-text:hover {
+    text-shadow: 0 0 5px rgba(255, 255, 255, 0.85), 0 0 10px rgba(255, 255, 255, 0.45), 0 0 15px rgba(255, 255, 255, 0.3);
 }
 
 .navbar-text {
@@ -26,4 +31,34 @@
     position: relative;
     top: 8px;
     left: 12px;
+    user-select: none;
+    cursor: pointer;
+    float: left;
+    transition: text-shadow 0.3s, font-size 0.2s;
+}
+
+.navbar-link-text {
+    position: relative;
+    top: 16px;
+    right: 16px;
+    font-size: 24px;
+    font-family: 'Quicksand', sans-serif;
+    text-align: center;
+    width: 100%;
+    padding-left: 6px;
+    padding-top: 8px;
+    user-select: none;
+    cursor: pointer;
+    transition: text-shadow 0.3s, font-size .2s, opacity .5s, top .2s, right .2s;
+}
+
+.navbar-link-container {
+    float: right;
+    top: 0;
+    right: 0;
+    transition: opacity .5s;
+}
+
+.navbar-collapsed .navbar-link-container {
+    opacity: .7;
 }