mirror of
https://github.com/gmemstr/gmemstr.github.io.git
synced 2024-09-20 04:31:09 +01:00
Complete rewrite taking inspiration from nintendo switch's interface
This commit is contained in:
parent
b99e9de6ec
commit
97d5b9989f
|
@ -1,2 +1,3 @@
|
||||||
# GabrielSimmer.com
|
# GabrielSimmer.com
|
||||||
Source for GabrielSimmer.com
|
|
||||||
|
A port of the Nintendo Switch's interface to HTML :)
|
77
assets/custom.css
Normal file
77
assets/custom.css
Normal file
|
@ -0,0 +1,77 @@
|
||||||
|
body, html {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
background-color: #2D2D2D;
|
||||||
|
color: #F6F6F6;
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: bolder;
|
||||||
|
margin: 0 auto; padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-img {
|
||||||
|
margin: 10px;
|
||||||
|
max-width: 5vw;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 0.20vw solid #4F4F51;
|
||||||
|
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
|
||||||
|
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
|
||||||
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
position: absolute;
|
||||||
|
right:5vw;
|
||||||
|
top: 6vh;
|
||||||
|
font-size: 3vh;
|
||||||
|
}
|
||||||
|
.status span {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
color: #FFFFFF;
|
||||||
|
width: 99vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.games {
|
||||||
|
margin-top: 10vh;
|
||||||
|
padding-left: 5%;
|
||||||
|
display: flex;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project {
|
||||||
|
margin: 10px;
|
||||||
|
background-color: white;
|
||||||
|
width: 40vh;
|
||||||
|
height: 40vh;
|
||||||
|
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
|
||||||
|
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
|
||||||
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
.project-img {
|
||||||
|
max-width: 40vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 5vw;
|
||||||
|
margin-top: 10vh;
|
||||||
|
margin-bottom: 5vh;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
margin: 0 0.5vw;
|
||||||
|
background-color: #505050;
|
||||||
|
width: 125px;
|
||||||
|
height: auto;
|
||||||
|
border: 1px solid #4F4F51;
|
||||||
|
border-radius: 50%;
|
||||||
|
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
|
||||||
|
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
|
||||||
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #F6F6F6 ;
|
||||||
|
}
|
BIN
assets/platypus.png
Normal file
BIN
assets/platypus.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
BIN
assets/pogo.png
Normal file
BIN
assets/pogo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.9 KiB |
BIN
assets/primetime.ttf
Normal file
BIN
assets/primetime.ttf
Normal file
Binary file not shown.
160
index.html
160
index.html
|
@ -1,110 +1,62 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>GabrielSimmer.com</title>
|
|
||||||
<link rel="stylesheet" href="stylesheet.css" type="text/css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<article>
|
|
||||||
<h1 id="projects"><a href="#projects" aria-hidden="true"></a>GabrielSimmer.com</h1>
|
|
||||||
<p><em>Please note, some of these are “codenames” for unfinalized projects.</em></p>
|
|
||||||
<div class="toc">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="#dart">Dart</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#go">Go</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#nodejs">Nodejs</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#other">Other</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#python">Python</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#webapps">Webapps</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#websites">Websites</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<h2 id="dart"><a href="#dart" aria-hidden="true"></a>Dart</h2>
|
|
||||||
<h3 id="store"><a href="#store" aria-hidden="true"></a>Store</h3>
|
|
||||||
<p><a href="">Coming soon</a></p>
|
|
||||||
<p>This is a simple web application for online stores built in Dart.</p>
|
|
||||||
<h2 id="go"><a href="#go" aria-hidden="true"></a>Go</h2>
|
|
||||||
<h3 id="subdomains"><a href="#subdomains" aria-hidden="true"></a>subdomains</h3>
|
|
||||||
<p><a href="">Coming soon</a></p>
|
|
||||||
<p>A small application for registering subdomains for gameservers on CloudFlare.</p>
|
|
||||||
<h2 id="nodejs"><a href="#nodejs" aria-hidden="true"></a>Nodejs</h2>
|
|
||||||
<h3 id="core"><a href="#core" aria-hidden="true"></a>CORE</h3>
|
|
||||||
<p><a href="https://github.com/nodemc/core">NodeMC/CORE</a></p>
|
|
||||||
<p>Core of NodeMC, a project I used to be a part of but handed off to Jared Allard to persure other projects.</p>
|
|
||||||
<h3 id="dashboard"><a href="#dashboard" aria-hidden="true"></a>Dashboard</h3>
|
|
||||||
<p><a href="https://github.com/nodemc/dashboard">NodeMC/Dashboard</a></p>
|
|
||||||
<p>React-based dashboard for NodeMC, intended to be the default dashboard. See above.</p>
|
|
||||||
<h2 id="other"><a href="#other" aria-hidden="true"></a>Other</h2>
|
|
||||||
<h3 id="tabdo"><a href="#tabdo" aria-hidden="true"></a>TabDo</h3>
|
|
||||||
<p><a href="">Coming soon</a></p>
|
|
||||||
<p>Basic todo list in Chrome’s new tab. Idea was to have cloud syncing using Chrome APIs and HTML5.</p>
|
|
||||||
<h3 id="twitter-improvement-project"><a name="user-content-twitter-improvement-project" href="#twitter-improvement-project" aria-hidden="true"></a>twitter-improvement-project</h3>
|
|
||||||
<p><a href="https://github.com/gmemstr/twitter-improvement-project">gmemstr/twitter-improvement-project</a></p>
|
|
||||||
<p>Chrome extension for adding and modifying Twitter’s web frontend. Includes night mode and hiding of clutter.</p>
|
|
||||||
<h2 id="python"><a href="#python" aria-hidden="true"></a>Python</h2>
|
|
||||||
<h3 id="archey"><a href="#archey" aria-hidden="true"></a>archey</h3>
|
|
||||||
<p><a href="https://github.com/gmemstr/archey3">gmemstr/archey3</a></p>
|
|
||||||
<p><strong>FORKED</strong> Outputs computer specs and logo in Linux, with optional screenshots. Planning on augmenting with more platform support.</p>
|
|
||||||
<h3 id="clims"><a href="#clims" aria-hidden="true"></a>clims</h3>
|
|
||||||
<p><a href="https://github.com/gmemstr/clims">gmemstr/clims</a></p>
|
|
||||||
<p>A barebones blog content management system primarily using the command line interface for postsconfiguration.</p>
|
|
||||||
<h3 id="comprank"><a href="#comprank" aria-hidden="true"></a>comprank</h3>
|
|
||||||
<p><a href="https://gist.github.com/gmemstr/8446e4e4454a8c9a94631e7217d99b12">gist.github.com</a></p>
|
|
||||||
<p>Small little script for playing around with Overwatch competitive rank algorithms. </p>
|
|
||||||
<h3 id="mcadmin"><a href="#mcadmin" aria-hidden="true"></a>mcadmin</h3>
|
|
||||||
<p><a href="">Coming soon</a></p>
|
|
||||||
<p>Rewrite of mcadmin.net’s web frontend in Python/Flask, provides direct links to download from Jenkins server.</p>
|
|
||||||
<h3 id="platypus"><a href="#platypus" aria-hidden="true"></a>Platypus</h3>
|
|
||||||
<p><a href="https://github.com/gmemstr/Platypus">gmemstr/Platypus</a></p>
|
|
||||||
<p>Server monitoring using websockets for active online reporting. Uses Tornado as a webserver.</p>
|
|
||||||
<h3 id="tfbots"><a href="#tfbots" aria-hidden="true"></a>tfbots</h3>
|
|
||||||
<p><a href="https://github.com/gmemstr/tfbots">gmemstr/TFBots</a></p>
|
|
||||||
<p>Calculates and graphs worth of various TF2 trading sites using backpack.tf.</p>
|
|
||||||
<h2 id="webapps"><a href="#webapps" aria-hidden="true"></a>Webapps</h2>
|
|
||||||
<h3 id="foo"><a href="#foo" aria-hidden="true"></a>Foo</h3>
|
|
||||||
<p><a href="">Coming soon</a></p>
|
|
||||||
<p>Food activity and reaction webapplication with offline support.</p>
|
|
||||||
<h2 id="websites"><a href="#websites" aria-hidden="true"></a>Websites</h2>
|
|
||||||
<h3 id="gabrielsimmercom"><a href="#gabrielsimmercom" aria-hidden="true"></a>gabrielsimmer.com</h3>
|
|
||||||
<p><a href="https://github.com/gmemstr/gabrielsimmer.com">gmemstr/gabrielsimmer.com</a></p>
|
|
||||||
<p>Basic portfolio for Gabriel Simmer with links to various projects.</p>
|
|
||||||
<h3 id="launchgg"><a href="#launchgg" aria-hidden="true"></a>launchgg</h3>
|
|
||||||
<p><a href="https://github.com/gmemstr/launchgg">gmemstr/launchgg</a></p>
|
|
||||||
<p>Since discontinued free Minecraft server provider that used NodeMC as a wrapper for servers.</p>
|
|
||||||
<h3 id="simmertech"><a href="#simmertech" aria-hidden="true"></a>SimmerTech</h3>
|
|
||||||
<p><a href="https://simmer.tech">simmer.tech</a></p>
|
|
||||||
<p>Basic landing page for Simmer.Tech</p>
|
|
||||||
</article>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
=======
|
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Gabriel Simmer</title>
|
<title>Gabriel Simmer</title>
|
||||||
<meta name="description" content="Gabriel Simmer's Portfolio / Landing Page" />
|
<meta name="description" content="Gabriel Simmer's Portfolio / Landing Page" />
|
||||||
|
<meta charset="UTF-8">
|
||||||
<meta name="author" content="Gabriel Simmer" />
|
<meta name="author" content="Gabriel Simmer" />
|
||||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
|
||||||
<!-- Because sometimes nukes are the only option -->
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
|
||||||
<link rel="stylesheet" type="text/css" href="css/reset.css" />
|
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
|
||||||
<!-- More like "skeleton-grid-custom-css.css" /s -->
|
<link rel="stylesheet" href="assets/custom.css">
|
||||||
<link rel="stylesheet" type="text/css" href="css/skeleton.css" />
|
|
||||||
</head>
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<img src="https://avatars2.githubusercontent.com/u/1878840?s=400&u=b433687936e1e1c1bfd858737d8323c6a5b58c33&v=4" alt="Github Profile Picture" class="profile-img">
|
||||||
|
<div class="status">
|
||||||
|
<span class="time">10:32 <small>AM</small></span>
|
||||||
|
<span class="wifi"><i class="fas fa-wifi"></i></span>
|
||||||
|
<span class="battery">100% <i class="fas fa-battery-full"></i></span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="games">
|
||||||
|
<div class="project" id="pogo">
|
||||||
|
<a href="https://github.com/gmemstr/pogo"><img src="assets/pogo.png" alt="Pogo Logo" class="project-img"></a>
|
||||||
|
</div>
|
||||||
|
<div class="project" id="platypus">
|
||||||
|
<img src="assets/platypus.png" alt="Platypus Logo" class="project-img">
|
||||||
|
</div>
|
||||||
|
<div class="project" id="placeholder">
|
||||||
|
<img src="https://placehold.it/400x400" alt="Placeholder Logo" class="project-img">
|
||||||
|
</div>
|
||||||
|
<div class="project" id="placeholder">
|
||||||
|
<img src="https://placehold.it/400x400" alt="Placeholder Logo" class="project-img">
|
||||||
|
</div>
|
||||||
|
<div class="project" id="placeholder">
|
||||||
|
<img src="https://placehold.it/400x400" alt="Placeholder Logo" class="project-img">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="buttons">
|
||||||
|
<div class="button" id="twitter">
|
||||||
|
<a href="https://twitter.com/gmem_"><i class="fab fa-twitter" style="color:#1da1f2;"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="button" id="github">
|
||||||
|
<a href="https://github.com/gmemstr"><i class="fab fa-github-alt"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="button" id="twitch">
|
||||||
|
<a href="https://twitch.tv/gmem_"><i class="fab fa-twitch" style="color:#b9a3e3;"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="button" id="reddit">
|
||||||
|
<a href="https://reddit.com/gmemstr"><i class="fab fa-reddit-alien" style="color:#ff4500;"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="button" id="email">
|
||||||
|
<a href="mailto:gabriel@gitgalaxy.com"><i class="far fa-envelope"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
</body>
|
|
@ -1,13 +0,0 @@
|
||||||
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
|
|
||||||
|
|
||||||
body { font-family: 'Roboto'; font-weight:300; sans-serif; background-color: #1B2836; color: #C7CBCE;text-align: center; margin-left: 25%; max-width: 50%;}
|
|
||||||
|
|
||||||
h1 { font-weight: 100; }
|
|
||||||
h2 { font-weight: 300; }
|
|
||||||
h3 { font-weight: 400 }
|
|
||||||
a { text-decoration: none; color: #1DA1F2; font-weight:bolder; font-weight: 400; }
|
|
||||||
li { text-decoration: none; list-style: none; text-align: center; display: inline-block;}
|
|
||||||
ul { text-align: center; padding-left: 0; }
|
|
||||||
.email { color: #1DA1F2; }
|
|
||||||
|
|
||||||
.twitter { color: #1DA1F2; }
|
|
Loading…
Reference in a new issue