Revamped website + built API ;O

This commit is contained in:
Alex / Awex
2021-08-10 09:36:58 -04:00
parent b8ead176f9
commit 65fec1140b
40 changed files with 1100 additions and 11555 deletions
+200 -149
View File
@@ -1,160 +1,211 @@
<!DOCTYPE html>
<style>
html {
scroll-behavior: smooth;
}
hr {
border-color:black;
}
</style>
<html>
<head>
<title>Home >> Awex</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="assets/css/style-new.css">
<link rel="stylesheet" href="assets/css/footer.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/medalclips.js"></script>
<script src="assets/js/clicky.js"></script>
<script src="assets/js/q.js"></script>
<!-- Metadata -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="https://awexxx.xyz/assets/img/logo.png"/>
<meta content="Awexxx" property="og:title">
<meta content="Name's awex / Alex. I'm the main web developer for the PlagueCraft Network, as well as one of the owners." property="og:description">
<meta content="https://awexxx.xyz/" property="og:url">
<meta content="https://awexxx.xyz/assets/img/logo.png" property="og:image">
<meta content="#9c2d1c" data-react-helmet="true" name="theme-color">
</head>
<div id="bodydiv">
<body onload="medalclips()">
<div id="rc_logo">
<a href="#" title="Logo">AWEX</a>
</div>
<div class="rc_nav" id="centered_nav">
<a href="#" title="Home">Home</a>
<a href="https://awexxx.xyz/about" title="About">About</a>
<!-- <a href="/projects" title="Projects">Projects</a> -->
<a href="/tools" title="Tools">Tools</a>
<a href="javascript:void(0);" title="Menu" style="font-size:18px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<head>
<title>Awex >> Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/footer.css">
<link rel="stylesheet" href="assets/css/nav.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=Quicksand:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<section class="home" style="background-image: url('assets/img/code.png');">
</section>
<div>
<br />
<!-- Scripts -->
<script src="assets/js/medal.js"></script>
<section id="welcome">
<h2>Welcome to my website!</h2>
<p>Name's awex / Alex. I'm a dev and do dev stuff with Node.js, Python and more :)</p>
</section>
<!--The good stuff. My Projects! -->
<section id="pcn">
<h1 style="padding-top:10px;">Projects</h1>
<hr>
<h2><a href="mcw">Medal Clip Webhook</a></h2>
<p>Being a Medal user, I've seen some Guilded or even Slack users want Medal clip sharing for their platform.<br> While using it directly from the app is easier, I decided to make an app that can send a webhook message to either platform with a clip link.<br>
This can be <a href="https://github.com/awexxx/medal-clip-webhook/wiki">Self Hosted</a>, but you'll need some HTML and Javascript experience most likely (depending on what you want to do with it).</p>
<h2>Contact Me</h2>
<p>My email is hi@awexxx.xyz, feel free to <a href="mailto:hi@awexxx.xyz">email me</a> there!</p>
<section id="socials">
<h3>Follow me on my socials!</h3>
<hr>
<h2>Check out my <a href="https://github.com/awexxx" target="_blank">GitHub</a> page!</h2>
<a href="https://github.com/awexxx/awexxx.github.io"><img src="https://gh-card.dev/repos/awexxx/awexxx.github.io.svg"></a>
<h2 id="twitter">Follow me on <span style="color:blue;"><a href="https://twitter.com/_awexx" target="_blank">Twitter!</a></span></h2>
<div style="text-align:center;">
<blockquote class="twitter-tweet tw-align-center"><p lang="nl" dir="ltr">cheesborbger</p>&mdash; Alex // awexx (@_awexx) <a href="https://twitter.com/_awexx/status/1400755782409412608?ref_src=twsrc%5Etfw">June 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<h2 id="medal">Follow me on <span style="color:orange;"><a href="https://medal.tv/itsawexx" target="_blank">Medal!</a></span></h2>
<div id="clip"></div>
<span id="title"></span><br /><br />
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.navbar-light .dmenu').hover(function () {
$(this).find('.sm-menu').first().stop(true, true).slideDown(150);
}, function () {
$(this).find('.sm-menu').first().stop(true, true).slideUp(105)
});
});
</script>
<!-- Meta Tags -->
<meta content="Awexxx" property="og:title">
<meta content="Hello! My name is Awex and I'm a developer doing dev stuff! This is my cool website!" property="og:description">
<meta content="https://awexxx.xyz/" property="og:url">
<meta content="#9c2d1c" data-react-helmet="true" name="theme-color">
</head>
<body>
<div class="footer-basic">
<footer>
<div class="social"><a href="https://instagram.com/_awexx"><i class="icon ion-social-instagram"></i></a><a href="https://twitter.com/lulawex"><i class="icon ion-social-twitter"></i></a><a href="https://github.com/awexxx/"><i class="icon ion-social-github"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="https://awexxx.xyz/mcw">Medal Clip Webhook</a></li>
</ul>
<p class="copyright">hi@awexxx.xyz<br>
<div id="quote"></div>
<script>
var quoteArray = ['You forget a thousand things every day, you make sure this is one of em.', 'THE DAMN SEMI COLON', `<a onclick="clickyBoy()" id="consolelog">console.log('go away')</a>`, `if else if else if else if else if else if else if elsfi fisafhjdskflsdf`,
`HELP PLEASE IM STUFK IN THE FOOTER CHOSOING THESE RESPONSES PLEASDSJAIF DSAF`]
var rand = quoteArray[Math.random() * quoteArray.length | 0]
document.querySelector("#quote").innerHTML = "<p>" + rand + "</p>"
if(rand === `<a onclick="clickyBoy()" id="consolelog">console.log('go away')</a>`) {
console.log(`go away (no, this isn't a mistake, i actually hard coded this in lmao)\nYou found the easter egg :)\nBut wait.. something isn't right.. click it!`)
}
window.onload = medalclips
</script>
</footer>
</div>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link">&ltAwex /><span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Recent Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:hi@awexxx.xyz">Contact</a>
</li>
<li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Tools
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="https://mcw.awexxx.xyz">Medal Clip Webhook</a>
<a class="dropdown-item" href="/tools/discord">Discord Webhook Sender</a>
<!-- <a class="dropdown-item" href="#">yes</a> -->
</div>
</li>
<!-- <li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
<a class="dropdown-item" href="#">Link 6</a>
</div>
</li> -->
</ul>
<div class="social-part">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
</nav>
<div id="welcome">
<span id="welcomespan"><h3>Awex</h3>
<h2>Developer | Gamer | Sleeper</h2></span>
<hr>
<!-- Social Icons -->
<div id="social">
<a href="https://twitter.com/lulawex" target="_blank"><ion-icon name="logo-twitter"></ion-icon></a>
<a href="mailto:hi@awexxx.xyz" target="_blank"><ion-icon name="mail-outline"></ion-icon></a>
</div>
</div>
<div class="bootstrap-iso">
<!-- About Me Section -->
<section id="about">
<div id="aboutContainer">
<h3>About Me</h3>
<p>I am a self-taught Node.js and Python developer, working on my own projects on my own time.. when I feel like it >:(<br>
I started coding and playing with development in late 2020 and have since dipped into building apps to make my life, along with yours, easier!<br>
<strong>Interested in what I've built?</strong> Keep reading down on this site, you'll love it!</p>
<hr>
</div>
</section>
<div style="text-align:center;">
<p id="intermission"><i>psst, ps: follow me on Twitter ;o</i></p>
<blockquote class="twitter-tweet tw-align-center"><p lang="nl" dir="ltr">cheesborbger</p>&mdash; Alex // awexx (@_awexx) <a href="https://twitter.com/_awexx/status/1400755782409412608?ref_src=twsrc%5Etfw">June 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<hr>
<!-- Projects Section -->
<section id="projects">
<div id="projectsContainer">
<h3>Projects</h3>
<p><strong>What projects have you worked on</strong>, you ask, well I'm here to answer that question! (there's a bit omg)</p>
<hr style="width:30%;">
<h4>Medal Clip Webhook</h4>
<p>This is a simple web app that POSTs to a Discord webhook.<br>
It allows users outside of the <a href="https://medal.tv" target="_blank">Medal.tv</a> platform to allow their users to share their clips to Discord without the app (ex. for Mac users).</p>
<h4>mcsrvstat-wrapper</h4>
<p>This is a simple Node.js wrapper that allows users to easily fetch the status of their (or someone elses doesn't matter) Minecraft server via the <a href="https://mcsrvstat.us">MCSRVSTAT API</a>.</p>
<h4>medaltv-wrapper</h4>
<p>This is yet another Node.js (soon web) wrapper that allows you to easily fetch Medal clips from the <a href="https://docs.medal.tv" target="_blank">Medal.tv REST API</a>.</p>
<h4>..and more (that this page doesn't have room to fit)!</h4>
<p>Check out my <a href="https://github.com/awexxx" target="_blank">GitHub Page</a> for all of the projects I've worked on!</p>
</div>
</section>
<hr>
<div style="text-align:center">
<p id="intermission"><i>another ps: follow me on <a href="https://medal.tv/lulawex" target="_blank">Medal!</a></i></p>
<div id="clip"></div>
<span id="title"></span>
</div>
<hr>
<!-- Experienced Section -->
<section id="experienced">
<h3>Currently Skilled In</h3>
<p>Currently, I'm focusing on server-side development with languages like Node.js, making APIs and tools that help make my life easier.<br>
Besides Node.js, I'm also working on perfecting Python, HTML, CSS and more! My Python is the best out of the 3, but I'm getting better everyday!<br>
Again, if you want to see some projects, check out my <a href="https://github.com/awexxx" target="_blank">Github Profile</a>, (almost) every project I've ever worked on is there!</p>
</section>
<hr>
<!-- Say Hi! -->
<section id="hi" style="text-align:center;">
<h3>Say hi!</h3>
<p>My email is <strong>hi@awexxx.xyz</strong>, you can reach out to me there or even say hi!</p>
</section>
</div>
<div class="footer-basic">
<footer>
<div class="social"><a href="https://instagram.com/_awexx"><i class="icon ion-social-instagram"></i></a><a href="https://twitter.com/lulawex"><i class="icon ion-social-twitter"></i></a><a href="https://github.com/awexxx/"><i class="icon ion-social-github"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="https://mcw.awexxx.xyz">Medal Clip Webhook</a></li>
</ul>
<p class="copyright">hi@awexxx.xyz<br>
</footer>
</div>
</body>
</div>
</html>
</html>
<style>
.home {
width: 100%;
height: 102vh;
background-position: center top;
background-size:cover;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
body {
background-color:#a3a3a3;
text-align:center;
}
body{
background-color:#878787;
text-align:center;
}
a{
color:black;
}
a:hover {
color:white;
}
i{
font-size:20px;
}
body p{
text-align:center;
color:#d4d4d4;
font-size:20px;
<style>
body {
background-color:#dedede;
}
</style>
<script>
function myFunction() {
var x = document.getElementById("centered_nav");
if (x.className === "rc_nav") {
x.className += " responsive";
} else {
x.className = "rc_nav";
}
}
</script>
</style>