Name reveal! Plus retheme

Dragon863 · Oct 24, 2024 · 8682ad4 · 8682ad4
1 parent 44fde74
commit 8682ad4
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 60 deletions.
diff --git a/themes/dragon863/layouts/404.html b/themes/dragon863/layouts/404.html
@@ -11,7 +11,7 @@
             src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js"></script>
         <script src='https://analytics.stacc.cc/api/script/4Wx5IIzJGQ8p'></script>
         <script src="/js/clipboard.js"></script>
-        <meta name="author" content="Daniel B">
+        <meta name="author" content="Daniel Benge">
         <meta name="description" content="404: Page not found">
         <link rel="icon" type="image/x-icon" href="/favicon.ico">
     </head>

diff --git a/themes/dragon863/layouts/_default/single.html b/themes/dragon863/layouts/_default/single.html
@@ -52,7 +52,7 @@ <h1 class="bold large-padding s" id="header-small">{{ .Title }}</h1>
 <div class="max" style="border-bottom: 4px solid #FF2D2D;"></div>
 
 <h5 class="large-text" style="font-size: 24px;"><a class="link bold underline" href="/">
-        Daniel B</a>&nbsp;&nbsp;&nbsp;{{ .PublishDate.Format $dateFormat}}
+        Daniel Benge</a>&nbsp;&nbsp;&nbsp;{{ .PublishDate.Format $dateFormat}}
 </h5>
 
 <br>

diff --git a/themes/dragon863/layouts/index.html b/themes/dragon863/layouts/index.html
@@ -3,30 +3,33 @@
 
     <head>
         <meta charset="utf-8">
-        <title>Dragon863 - Home</title>
+        <title>Daniel Benge</title>
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css" rel="stylesheet" />
-        <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js"></script>
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css" rel="stylesheet" />
+        <link href="/css/index.css" rel="stylesheet" />
+        <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js"></script>
         <script type="module"
             src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js"></script>
         <script src='https://analytics.stacc.cc/api/script/4Wx5IIzJGQ8p'></script>
+        <script src="https://unpkg.com/feather-icons"></script>
         <script src="/js/clipboard.js"></script>
-        <meta name="author" content="Daniel B">
+        <script src="/js/light.js"></script>
+        <meta name="author" content="Daniel Benge">
         <meta name="description"
-            content="Hi there, I'm Daniel B (aka @Dragon863), a 16 year old developer. Welcome to my personal blog and portfolio!">
-        <meta name="keywords" content="Daniel B, Cybersecurity, Dragon863">
+            content="Hi there, I'm Daniel Benge (aka @Dragon863), a 16 year old developer. Welcome to my personal blog / portfolio!">
+        <meta name="keywords" content="Daniel Benge, Cybersecurity, Dragon863">
         <link rel="icon" type="image/x-icon" href="/favicon.ico">
         <meta name="google-site-verification" content="ondYOXSCfn-zhOWKssd1D4U6X_cJBX8XNXnEj79Zr3E" />
         <!-- Cloudflare Web Analytics -->
         <script defer src='https://static.cloudflareinsights.com/beacon.min.js'
             data-cf-beacon='{"token": "096a034c74df42b2a391b8b82892b2e1"}'></script>
         <!-- End Cloudflare Web Analytics -->
     </head>
+    <!--We'll only use beercss for nav, everything else will be in plain css/html-->
 
-    <body class="dark"
-        style="--primary:#FF2D2D;--secondary-container:#ff242465;--on-primary-container:#FFFFFF;--on-secondary-container:#FFFFFF;--on-surface:#FFFFFF;--on-primary:#FFFFFF;--on-secondary:#FFFFFF;background-color:black;">
-        <nav class="right right-shadow white-text m l">
-            <img src="/img/profile-picture.png" class="circle large transparent" alt="Profile Picture"></img>
+    <body class="dark" style="height:100vh">
+        <nav class="right white-text m l">
+            <img src="/img/profile-picture.png" class="circle large transparent" alt="Profile Picture" />
             <a class="active" href="/">
                 <i>home</i>
                 <div>Home</div>
@@ -40,7 +43,7 @@
                 <div>Share</div>
             </a>
         </nav>
-        <div class="modal" id="share">
+        <dialog class="modal" id="share">
             <h5 class="white-text bold">Share Page</h5>
             <div>Send the link to this page!</div>
             <nav class="left-align">
@@ -56,7 +59,7 @@ <h5 class="white-text bold">Share Page</h5>
                 </nav>
 
             </nav>
-        </div>
+        </dialog>
         <nav class="bottom s bottom-shadow">
             <a class="active" href="/">
                 <i>home</i>
@@ -68,58 +71,50 @@ <h5 class="white-text bold">Share Page</h5>
                 <i>share</i>
             </a>
         </nav>
-        <main>
-            <div style="height:100vh">
-                <img src="/img/index-bg.svg" class="responsive" alt="Background image - red waves"></img>
-                <div class="absolute top bottom left large large-margin m l" style="padding-top: 5%;">
-                    <div class="large-padding">
-                        <h2 class="bold white-text no-margin">Daniel B</h2>
-                        <h4 class="white-text no-margin"><a class="link"
-                                href="https://github.com/Dragon863">@Dragon863</a></h4>
-                        <div style="margin-top: 1rem;">Hi there! I am Daniel, a 16 year old developer whose interests
-                            include
-                            cybersecurity and hardware hacking, low level hardware, web design, and linux. You can
-                            contact me <a class="link" href="mailto:[email protected]">here</a></div>
-                        <nav>
-                            <button class="large white black-text" onclick="document.location.href='/posts/'">
-                                <i>book</i>
-                                <span>&nbsp;Blog</span>
-                            </button>
-                            <button class="large border white-border white-text"
-                                onclick="document.location.href='https://github.com/Dragon863'">
+        <main style="height:100%">
+            <div style="height:100%">
+                <div id="main-box"
+                    style="background: radial-gradient(circle at -100px -100px, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.8) 80px);">
+                </div>
+                <div class="main-top">
+                    <div class="content">
+                        <h3 class="eyebrow center-align mobile">HEY THERE 👋️! I'M</h3>
+                        <h3 class="eyebrow desktop">HEY THERE 👋️! I'M</h3>
+                        <h1 class="name desktop">Daniel Benge</h1>
+                        <h1 class="name center-align mobile">Daniel Benge</h1>
+                        <h2 class="sub-name desktop">Developer + A-Level Student</h2>
+                        <h2 class="sub-name center-align mobile">Developer + A-Level Student</h2>
+                        <div class="spacer"></div>
+                        <div class="spacer"></div>
+                        <p class="white-text limit-width description">I'm a 16 year old developer in the UK. I love
+                            cybersecurity,
+                            hardware
+                            hacking, linux, self-hosting, web design and flutter, and I'm also the founder of <a
+                                class="link underline" href="https://runshaw.hackclub.com/">Runshaw Hack Club</a>. Want
+                            to get in touch? Feel free to e-mail me at <a class="link underline"
+                                href="mailto:[email protected]">[email protected]</a>!</p>
+                        <div class="spacer"></div>
+                        <div class="buttons-grid">
+                            <button class="extend border circle" onclick="navigateToGithub()">
                                 <i>code</i>
-                                <span>&nbsp;Code</span>
+                                <span>GitHub</span>
                             </button>
-                        </nav>
-                    </div>
-                </div>
-                <div class="absolute top bottom left small large-margin s" style="padding-top: 5%;">
-                    <div class="medium-padding">
-                        <h2 class="bold white-text no-margin">Daniel B</h2>
-                        <h4 class="white-text no-margin"><a class="link"
-                                href="https://github.com/Dragon863">@Dragon863</a></h4>
-                        <div style="margin-top: 1rem;">Hi there! I am Daniel B, a 16 year old developer whose interests
-                            include
-                            cybersecurity and hardware hacking, low level hardware, web design, and linux. You can
-                            contact me <a class="link" href="mailto:[email protected]">here</a></div>
-                        <nav>
-                            <button class="large white black-text" onclick="document.location.href='/posts/'">
-                                <i>book</i>
-                                <span>&nbsp;Blog</span>
+                            <button class="extend border circle" onclick="mailTo()">
+                                <i>mail</i>
+                                <span>Email</span>
                             </button>
-                            <button class="large border white-border white-text"
-                                onclick="document.location.href='https://github.com/Dragon863'">
-                                <i>code</i>
-                                <span>&nbsp;Code</span>
+                            <button class="extend border circle" onclick="navigateToBlog()">
+                                <i>book</i>
+                                <span>Blog</span>
                             </button>
-                        </nav>
+                        </div>
                     </div>
                 </div>
-                <div class="toast green white-text" id="toast">
-                    <i>done</i>
-                    <span>Copied URL!</span>
-                </div>
+            </div>
         </main>
     </body>
+    <script>
+        feather.replace();
+    </script>
 
 </html>
diff --git a/themes/dragon863/layouts/partials/head.html b/themes/dragon863/layouts/partials/head.html
@@ -14,7 +14,7 @@
     {{ with .Site.Params.description }}
     <meta name=" description" content="{{ . }}">
     {{ end }}
-    <meta name="author" content="Daniel B">
+    <meta name="author" content="Daniel Benge">
     <meta name="keywords" content="Daniel, Dragon863, Cybersecurity, Alexa, Blog">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
diff --git a/themes/dragon863/static/css/index.css b/themes/dragon863/static/css/index.css
@@ -0,0 +1,143 @@
+body {
+    --primary: #FF2D2D !important;
+    --secondary-container: #ff242465 !important;
+    --on-primary-container: #FFFFFF !important;
+    --on-secondary-container: #FFFFFF !important;
+    --on-surface: #FFFFFF !important;
+    --on-primary: #FFFFFF !important;
+    --on-secondary: #FFFFFF !important;
+    background-color: black !important;
+}
+
+main {
+    box-sizing: border-box;
+    margin: 0;
+    min-width: 0;
+    background-color: #000000;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/img/bg.svg');
+    color: #ffffff;
+    position: relative;
+}
+
+#main-box {
+    box-sizing: border-box;
+    margin: 0;
+    min-width: 0;
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #000000;
+    pointer-events: none;
+}
+
+
+.main-top {
+    z-index: 5;
+    position: relative;
+    display: flex;
+}
+
+.name {
+    font-weight: 700;
+    font-family: Rubik, sans-serif;
+    font-size: 5em;
+    margin-top: 0px;
+}
+
+a .link {
+    text-shadow: 0 0 40px var(--primary) !important;
+}
+
+
+
+.eyebrow {
+    font-weight: 700;
+    font-family: Rubik, sans-serif;
+    color: grey !important;
+    font-size: 1.8em;
+    margin-bottom: 4px;
+    text-transform: uppercase;
+}
+
+.sub-name {
+    font-weight: 700;
+    font-family: Rubik, sans-serif;
+    font-size: 1.8em;
+    margin-top: 24px;
+    color: var(--primary);
+    text-transform: uppercase;
+}
+
+@media (min-width: 769px) {
+    .content {
+        width: 85vw;
+        margin-top: 100px;
+        margin-left: 50px;
+    }
+
+    .name {
+        font-size: 7em;
+    }
+
+    .limit-width {
+        max-width: 45vw;
+    }
+
+
+    .spacer {
+        height: 50px;
+    }
+
+    .mobile {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .content {
+        width: 100vw;
+        margin-top: 3vh;
+        margin-left: 15px;
+        text-align: center;
+        padding-right: 7vw;
+    }
+
+    .sub-name {
+        font-size: 1.5em;
+    }
+
+    .limit-width {
+        max-width: 95vw;
+    }
+
+    .spacer {
+        height: 2.5vh;
+    }
+
+    .desktop {
+        display: none;
+    }
+
+    .description {
+        text-align: center;
+    }
+
+    main {
+        background-size: 200%;
+    }
+}
+
+
+.description {
+    font-family: Rubik, sans-serif;
+    font-size: 1.1em;
+    color: #ffffff;
+}
+
+button i,
+button span {
+    color: white;
+}
diff --git a/themes/dragon863/static/img/bg.svg b/themes/dragon863/static/img/bg.svg
diff --git a/themes/dragon863/static/js/light.js b/themes/dragon863/static/js/light.js
@@ -0,0 +1,15 @@
+window.addEventListener("pointermove", (event) => {
+    document.getElementById("main-box").style.background = `radial-gradient(circle at ${event.pageX}px ${event.pageY}px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0.8) 80px)`;
+});
+
+function navigateToGithub() {
+    window.open("https://github.com/Dragon863", "_blank");
+}
+
+function navigateToBlog() {
+    document.location = "/posts";
+}
+
+function mailTo() {
+    window.location.href = "mailto:[email protected]";
+}