Add base index page

This commit is contained in:
Tyler Perkins 2023-07-15 18:44:31 -04:00
parent ebb1b01c3e
commit fb64b9802f
20 changed files with 295 additions and 36 deletions

10
.gitignore vendored Normal file
View File

@ -0,0 +1,10 @@
# Vim files
*.swp
*.swo
*.swn
# Hugo
/public
/resources/_gen
/resources/_gen/*

View File

@ -3,4 +3,7 @@ title: "Home"
date: 2023-06-27 date: 2023-06-27
--- ---
Welcome to my site!
# Hi, I'm Tyler
I'm a software engineer that does a little bit of everything

36
data/footer.json Normal file
View File

@ -0,0 +1,36 @@
{
"Contact": [
{
"name": "Email",
"url": "mailto:hello@clortox.com"
},
{
"name": "LinkedIn",
"url": "https://www.linkedin.com/in/tyler-perkins-xyz/"
},
{
"name": "Github",
"url": "https://github.com/Clortox"
}
],
"Services": [
{
"name": "Git",
"url": "https://git.clortox.com/"
},
{
"name": "Files",
"url": "https://files.clortox.com/"
},
{
"name": "Search",
"url": "https://search.clortox.com/"
},
{
"name": "Youtube Frontend",
"url": "https://watch.clortox.com/"
}
]
}

27
data/header.json Normal file
View File

@ -0,0 +1,27 @@
{
"LeftHandSide": [
{
"name": "Home",
"url": "/"
},
{
"name": "Resume",
"url": "/resume/"
},
{
"name": "Blog",
"url": "/blog/"
},
{
"name": "About",
"url": "/about/"
}
],
"RightHandSide": [
{
"name": "Login",
"url": "https://auth.clortox.com/"
}
]
}

View File

@ -1,16 +1,7 @@
{{ define "main" }} {{ define "main" }}
<div class="centered top-fade dashed-bottom"> <div class="centered top-fade">
<div class="intro-content"> <div class="intro-content">
{{ .Content }} {{ .Content }}
</div> </div>
</div> </div>
<div class="content-list">
<ul>
{{ range .Site.RegularPages }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
</div>
{{ end }} {{ end }}

Binary file not shown.

16
static/css/background.css Normal file
View File

@ -0,0 +1,16 @@
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
@keyframes rotateBackground {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
body {
background-image: url("/img/webb-dark.png");
background-position: center;
background-repeat: cover;
background-attachment: fixed;
}

57
static/css/footer.css Normal file
View File

@ -0,0 +1,57 @@
/* Footer */
footer {
background-color: rgba(11,11,11,0.9);
color: white;
padding: 15px;
text-align: center;
padding-top: 3vh;
}
.footer-fade {
background: linear-gradient(rgba(11,11,12,0.2) 0%, rgba(11,11,12,1) 35%);
}
.footer-sections {
display: grid;
align-content: center;
justify-content: center;
align-items: start;
justify-items: center;
grid-template-columns: 1fr 1fr 1fr;
}
.footer-list {
width: 100%;
margin: 0;
display: grid;
grid-template-columns: 1fr;
text-align: left;
}
.footer-list a {
width: calc(100% - 30px);
background: rgba(22,22,24,1);
border: grey;
text-decoration: underline 0.1em rgba(255,255,255,0);
transition: 300ms;
margin: 1px 0px;
padding: 15px;
}
.footer-list a:hover {
text-decoration: underline 0.1em rgba(255,255,255,1);
background: rgba(33,33,36,1);
}
.footer-header {
margin-top: 5px;
}
small {
font-size: 0.8em;
color: rgba(255,255,255,0.5);
}

39
static/css/header.css Normal file
View File

@ -0,0 +1,39 @@
/* Header */
.navbar {
margin: 0;
background: rgb(11,11,12);
height: 3em;
border-color: white;
border-bottom: 5px;
overflow: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: underline 0.1em rgba(255,255,255,0);
transition: text-decoration 300ms;
}
.navbar a:hover {
text-decoration: underline 0.1em rgba(255,255,255,1);
}
.navbar-right {
float: right;
margin-right 10px;
}

View File

@ -1,3 +1,43 @@
/* General Formatting*/
@font-face {
font-family: 'Hermit';
src: url('fonts/Hermit-Regular.woff') format('woff');
url('fonts/Hermit-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
overflow-x: hidden;
margin: 0;
height: 100%;
padding-bottom: 0px;
}
h1, h2, h3, h4 {
font-family: 'Hermit', Helvetica, Arial, sans-serif;
font-size: 56px;
line-height: 80px;
text-shadow: 1px 1px 1px grey;
color: white;
}
p, a, li, tr, td, span, noscript, figcaption {
font-family: 'Hermit', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 25px;
color: white;
}
html {
scroll-behavior: smooth;
width: 100vw;
-ms-overflow-style: none;
scrollbar-width: none;
}
.centered { .centered {
width: 100vw; width: 100vw;
max-width: 100%; max-width: 100%;
@ -11,16 +51,13 @@
} }
.top-fade { .top-fade {
background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9 20%), rgba(0,0,0,0.1), 100%) background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 30%, rgba(0,0,0,0.1) 100%)
} }
.dashed-bottom { .dashed-bottom {
border-bottom: 5px dashed white; border-bottom: 5px dashed white;
} }
body { .intro-content {
overflow-x: hidden; text-align: center;
margin: 0;
height: 100%;
padding-bottom: 0px;
} }

Binary file not shown.

Binary file not shown.

BIN
static/img/prism.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
static/img/webb-dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -1,5 +1,22 @@
<footer> <footer class="footer-fade">
<p> <div class="footer-sections">
<div class="footer-list" style="width: 85%">
<h4 id="contact" class="footer-header" style="margin-bottom: 5px">Contact</h4>
{{ range .Site.Data.footer.Contact }}
<a data-value="{{ .name }}" class="scramble" href="{{ .url }}">{{ .name }}</a>
{{ end }}
</div>
<div class="footer-list" style="width: 85%"></div>
<div class="footer-list" style="width: 85%">
<h4 class="footer-header" style="margin-bottom: 5px">Services</h4>
{{ range .Site.Data.footer.Services }}
<a data-value="{{ .name }}" class="scramble" href="{{ .url }}">{{ .name }}</a>
{{ end }}
</div>
</div>
<p style="margin: 0px;">
<small>Copyright &copy; {{ now.Year }}. All rights Reserved</small> <small>Copyright &copy; {{ now.Year }}. All rights Reserved</small>
</p> </p>
</footer> </footer>

View File

@ -1,3 +1,8 @@
<head> <head>
<link rel="stylesheet" href="{{ "css/clortox.css" | relURL }}"> <link rel="stylesheet" href="{{ "css/styles.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/header.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/footer.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/background.css" | relURL }}">
<script src="{{ "js/scramble.js" | relURL }}"></script>
</head> </head>

View File

@ -1,4 +1,10 @@
<header class="navbar sticky"> <header class="navbar sticky">
<a href="{{ "/" | relURL }}">Home</a> {{ range .Site.Data.header.LeftHandSide }}
<a href="{{ "/about/" | relURL }}">About</a> <a data-value="{{ .name }}" class="scramble header-item" href="{{ .url | relURL }}">{{ .name }}</a>
{{ end }}
<div class="navbar-right">
{{ range .Site.Data.header.RightHandSide }}
<a data-value="{{ .name }}" class="scramble header-item" href="{{ .url }}">{{ .name }}</a>
{{ end }}
</div>
</header> </header>

View File

@ -1,14 +0,0 @@
.navbar {
margin: 0;
background: rgb(11,11,12);
height: 3em;
border-color: white;
border-bottom: 5px;
overflow: hidden;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}

View File

@ -0,0 +1,29 @@
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
window.onload = function() {
document.querySelectorAll(".scramble").forEach(item => {
item.addEventListener("mouseover", scramble);
});
}
function scramble(event) {
let iterations = 0;
const originalValue = event.target.dataset.value;
let interval = setInterval(() => {
event.target.innerText = event.target.innerText.split("")
.map((letter, index) => {
if(index < iterations){
return originalValue[index];
}
return letters[Math.floor(Math.random() * letters.length)];
}).join("")
iterations += 1 / 3;
if(iterations > originalValue.length){
clearInterval(interval);
event.target.innerText = originalValue;
}
}, 30);
}