Complete rewrite taking inspiration from nintendo switch's interface

This commit is contained in:
Gabriel Simmer 2018-03-03 11:46:46 -08:00
parent b99e9de6ec
commit 97d5b9989f
7 changed files with 136 additions and 119 deletions

View file

@ -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
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/pogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
assets/primetime.ttf Normal file

Binary file not shown.

View file

@ -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 &ldquo;codenames&rdquo; 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&rsquo;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&rsquo;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&rsquo;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>

View file

@ -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; }