alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simplified website

Browse Source
This commit is contained in:
alex 3
2023-07-20 22:46:10 -04:00
parent dad9e60467
commit 7dd999700e
6 changed files with 10 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
-97
View File
@@ -8,16 +8,6 @@ body {
font-family: 'DM Sans', sans-serif;
}
ul {
list-style-position:inside;
list-style-type:none;
}
li {
padding:0;
display:inline-block;
}
a {
color:white;
}
@@ -30,13 +20,6 @@ a:hover {
height:100vh;
}
@media only screen and (max-width:700px) {
#container {
height:100vh;
padding-top:0;
}
}
#intro {
/* width:40%; */
color:white;
@@ -44,52 +27,6 @@ a:hover {
padding-top:50px;
}
#navtype {
color:white;
text-align: center;
}
.card {
background-color: #232931;
color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.card-header {
background: linear-gradient(to right, #000, #424242);
padding: 20px;
font-size:10px;
}
.card-header h2 {
margin: 0;
}
.card-body {
padding: 20px;
}
.card-body p {
margin-bottom: 20px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #000;
color: #fff;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.2s ease-in-out;
}
.btn:hover {
color:white;
background-color: #424242;
}
#socials a {
text-decoration:none;
padding:5px;
@@ -104,40 +41,6 @@ a:hover {
padding-top:2px;
}
.contact-form {
max-width: 500px;
text-align:center;
margin: 0 auto;
}
.contact-form label {
color:white;
display: block;
text-align:left;
padding-top:10px;
}
.contact-form input,
.contact-form textarea {
display: block;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.contact-form button {
background-color: #000;
color: #fff;
border: none;
border-radius: 4px;
padding: 12px 16px;
cursor: pointer;
}
.contact-form button:hover {
background-color: #424242;
}
/* global classes */
.center {
display: flex;
assets/img/pfp.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 372 KiB

contact.html
-69
View File
@@ -1,69 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/main.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap" rel="stylesheet">
<title>alex! - contact</title>
</head>
<body>
<div id="container" class="center">
<div id="intro" style="white-space: nowrap; text-align:center;">
<h1>lets get in touch</h1>
<p>reach out to me below or via <a href="mailto:alex@alexavfrantz.com">alex@alexavfrantz.com</a></p>
</div>
<br />
<form class="contact-form" method="POST" action="https://api.thatalex.dev/v3/tools/contact">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<br />
<button type="submit">Send Message</button>
</form>
<!-- br to space, fite me -->
<br />
<hr width="40%">
<br />
<div id="navtype">
<ul>
<li><a href="/">home</a></li>
<li><a href="/projects">projects</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<br />
<div id="footer">
<div id="socials">
<a href="https://twitter.com/avvex__" target="_blank" rel="noreferrer">
<i class="fa-brands fa-twitter" style="font-size:30px;"></i>
</a>
<a href="https://linkedin.com/in/thatalex" target="_blank" rel="noreferrer">
<i class="fa-brands fa-linkedin" style="font-size:30px;"></i>
</a>
<a href="mailto:alex@alexavfrantz.com" target="_blank" rel="noreferrer">
<i class="fa-solid fa-envelope" style="font-size:30px;"></i>
</a>
<a href="https://mast.thatalex.dev/@alex" rel="me" target="_blank">
<i class="fa-brands fa-mastodon" style="font-size:30px;"></i>
</a>
</div>
<p id="notice" style="color:white;">&#169; 2023, Alex Frantz. All Rights Reserved<br><a href="mailto:alex@alexavfrantz.com">alex@alexavfrantz.com</a></p>
</div>
</div>
</body>
</html>
error.html
-101
View File
@@ -1,101 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap" rel="stylesheet">
<title>alex! - page not found</title>
<style>
body {
background-color:black;
font-family: 'DM Sans', sans-serif;
}
#header {
margin-bottom: 0;
transform: translateY(100%);
animation-delay:5s;
animation: move-up 1s forwards 1s;
}
a {
color:white;
text-decoration:none;
}
a:hover {
color:gray;
}
.error-message {
margin-top: 0;
opacity: 0;
animation-delay:6s;
animation: fade-in 1s forwards 1.5s;
}
.ital {
font-size:10px;
color:darkgray;
}
@keyframes move-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0%);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#container {
color:white;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#socials {
display:inline-block;
font-size:20px;
}
</style>
</head>
<body>
<div id="container">
<h1 id="header">something's not quite right..</h1>
<p class="error-message">that page doesn't exist. how'd you get here?<br />
<a href="#" onclick="history.back()" style="text-decoration:underline;">lets head back now.</a></p>
<div id="socials" class="error-message">
<a href="https://twitter.com/avvex__" target="_blank" rel="noreferrer">
<i class="fa-brands fa-twitter" style="font-size:30px;"></i>
</a>
<a href="https://linkedin.com/in/thatalex" target="_blank" rel="noreferrer">
<i class="fa-brands fa-linkedin" style="font-size:30px;"></i>
</a>
<a href="mailto:alex@alexavfrantz.com" target="_blank" rel="noreferrer">
<i class="fa-solid fa-envelope" style="font-size:30px;"></i>
</a>
<a href="https://mast.thatalex.dev/@alex" rel="me" target="_blank">
<i class="fa-brands fa-mastodon" style="font-size:30px;"></i>
</a>
</div>
</div>
</body>
</html>
index.html
+10 -25
View File
@@ -9,45 +9,30 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap" rel="stylesheet">
<title>alex! - home</title>
<title>alex!</title>
</head>
<body>
<div id="container" class="center">
<div id="intro" style="width:50vw;">
<h1>hi, i'm alex!</h1>
<p>i'm part-time QA Manual Testing + Automation at <a href="https://medal.tv">Medal.tv</a> and a full-time Node.js, Go and Kotlin geek</p>
</div>
<div id="container" class="center" style="color:white;">
<img src="/assets/img/pfp.png" width="150" style="border-radius:50%;" />
<h1>hi, i'm alex!</h1>
<p>part-time QA at <a href="https://medal.tv" target="_blank">Medal.tv</a>, full-time NodeJS/Swift geek</p>
<!-- br to space, fite me -->
<br />
<hr width="40%">
<br />
<div id="navtype">
<ul>
<li><a href="#">home</a></li>
<li><a href="/projects">projects</a></li>
<li><a href="/contact">contact</a></li>
</ul>
</div>
<br />
<div id="footer">
<div id="footer" style="padding-top:10px;">
<div id="socials">
<a href="https://github.com/azpha" target="_blank" rel="noreferrer">
<i class="fa-brands fa-github" style="font-size:30px;"></i>
</a>
<a href="https://twitter.com/avvex__" target="_blank" rel="noreferrer">
<i class="fa-brands fa-twitter" style="font-size:30px;"></i>
</a>
<a href="https://linkedin.com/in/thatalex" target="_blank" rel="noreferrer">
<i class="fa-brands fa-linkedin" style="font-size:30px;"></i>
</a>
<a href="mailto:alex@alexavfrantz.com" target="_blank" rel="noreferrer">
<i class="fa-solid fa-envelope" style="font-size:30px;"></i>
</a>
<a href="https://mast.thatalex.dev/@alex" rel="me" target="_blank">
<i class="fa-brands fa-mastodon" style="font-size:30px;"></i>
</a>
</div>
<p id="notice" style="color:white;">&#169; 2023, Alex Frantz. All Rights Reserved<br>
<a href="mailto:alex@alexavfrantz.com">alex@alexavfrantz.com</a></p>
<p><a href="mailto:alex@alexavfrantz.com">alex@alexavfrantz.com</a></p>
</div>
</div>
</body>
projects.html
-93
View File
@@ -1,93 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/main.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap" rel="stylesheet">
<title>alex! - projects</title>
</head>
<body>
<div id="container">
<div id="intro">
<h1>what do i work on?</h1>
<p>a lot of random stuff. i mean, like, a lot.</p>
</div>
<br />
<div id="cards" class="center">
<div class="card">
<div class="card-header">
<h1>pause!</h1>
</div>
<div class="card-body">
<p>pause! is a website to live-control my music from my Spotify client over websockets & HTTP requests, built on Node.js</p>
<a href="https://github.com/azpha/pause" target="_blank" class="btn">View Project</a>
</div>
</div>
<br />
<div class="card">
<div class="card-header">
<h1>splitstat</h1>
</div>
<div class="card-body">
<p>splitstat is a Discord bot I hosted that fetched your Splitgate player stats from Tracker Network</p>
<a href="https://github.com/azpha/splitstat" target="_blank" class="btn">View Project</a>
</div>
</div>
<br />
<div class="card">
<div class="card-header">
<h1>medaltv-wrapper</h1>
</div>
<div class="card-body">
<p>medaltv-wrapper is a Node.js wrapper for the Medal.tv public REST API to fetch clips from the platform</p>
<a href="https://github.com/azpha/medaltv-wrapper" target="_blank" class="btn">View Project</a>
</div>
</div>
</div>
<br />
<span style="text-align:center;">
<h1 style="color:white;">..and more!</h1>
<p style="color:white">you can see all of my projects on my <a href="https://github.com/azpha" target="_blank">GitHub page</a></p>
</span>
<!-- br to space, fite me -->
<br />
<hr width="40%">
<br />
<div id="navtype">
<ul>
<li><a href="/">home</a></li>
<li><a href="#">projects</a></li>
<li><a href="/contact">contact</a></li>
</ul>
</div>
<br />
<div id="footer">
<div id="socials">
<a href="https://twitter.com/avvex__" target="_blank" rel="noreferrer">
<i class="fa-brands fa-twitter" style="font-size:30px;"></i>
</a>
<a href="https://linkedin.com/in/thatalex" target="_blank" rel="noreferrer">
<i class="fa-brands fa-linkedin" style="font-size:30px;"></i>
</a>
<a href="mailto:alex@alexavfrantz.com" target="_blank" rel="noreferrer">
<i class="fa-solid fa-envelope" style="font-size:30px;"></i>
</a>
<a href="https://mast.thatalex.dev/@alex" rel="me" target="_blank">
<i class="fa-brands fa-mastodon" style="font-size:30px;"></i>
</a>
</div>
<p id="notice" style="color:white;">&#169; 2023, Alex Frantz. All Rights Reserved<br><a href="mailto:alex@alexavfrantz.com">alex@alexavfrantz.com</a></p>
</div>
</div>
</body>
</html>