🚀 Completely rewrote the project page

.well-known/brave-rewards-verification.txt

@@ -0,0 +1,4 @@
+This is a Brave Rewards publisher verification file.
+
+Domain: ent8r.github.io
+Token: 43c1ab2b9adebc25176e28a95dd71b464c2b6777542f2f7f8348f9df39631d2a

README.md

@@ -1,5 +1,5 @@
 # ent8r.github.io
-Just a little website for several testing purposes and to show what my projects are
 
+> Website for showcasing some of my projects
 
-Enter the page by clicking here: [ent8r.github.io](https://ent8r.github.io "ENT8R's Homepage")
+Visit the page: [ent8r.github.io](https://ent8r.github.io)

css/main.css

@@ -1,46 +1,30 @@
-#content {
-  padding-left: 300px;
-}
-
-@media only screen and (max-width : 992px) {
-  #content {
-    padding-left: 0;
-  }
-}
-
-.table-of-contents a.active {
-  border-left-color: #3f51b5;
+.emoji {
+  font-size: 100px;
 }
 
 .icon {
   display: inline-block;
   vertical-align: middle;
+  margin-bottom: 4px;
   width: 24px;
   height: 24px;
-  background-repeat: no-repeat;
-  background-size: contain;
-}
-
-.icon-account {
-  background-image: url('../images/icons/account-circle.svg');
-}
-
-.icon-code {
-  background-image: url('../images/icons/code-tags.svg');
 }
 
 .icon-email {
-  background-image: url('../images/icons/email.svg');
+  background-image: url('../icons/email.svg');
+}
+.icon-external {
+  background-image: url('../icons/external.svg');
 }
-
 .icon-github {
-  background-image: url('../images/icons/github-circle.svg');
+  background-image: url('../icons/github.svg');
 }
-
-.icon-menu-white {
-  background-image: url('../images/icons/menu-white.svg');
+.icon-html {
+  background-image: url('../icons/html.svg');
 }
-
-.icon-open-in-new {
-  background-image: url('../images/icons/open-in-new.svg');
+.icon-nodejs {
+  background-image: url('../icons/nodejs.svg');
+}
+.icon-npm {
+  background-image: url('../icons/npm.svg');
 }

data/projects.json

@@ -0,0 +1,57 @@
+[{
+  "title": "Web <i class=\"icon icon-html\"></i>",
+  "projects": [{
+    "title": "NotesReview",
+    "image": "images/projects/notesreview.png",
+    "description": "An intuitive tool for searching, finding, resolving or simply browsing OpenStreetMap notes created by other mappers. Various filter options allow to see only the notes you are currently interested in.",
+    "actions": {
+      "website": "https://ent8r.github.io/NotesReview",
+      "github": "ENT8R/NotesReview"
+    }
+  }, {
+    "title": "blacklistr",
+    "image": "images/projects/blacklistr.png",
+    "description": "Tool for visualizing in which countries certain features are either present or do not exist, legal or illegal and much more. You are also able to generate an image of the map so you can use it for other projects.",
+    "actions": {
+      "website": "https://ent8r.github.io/blacklistr",
+      "github": "ENT8R/blacklistr"
+    }
+  }]
+}, {
+  "title": "node.js <i class=\"icon icon-nodejs\"></i>",
+  "projects": [{
+    "title": "package-age",
+    "image": "images/projects/package-age.png",
+    "description": "Tired of manually checking whether there is a new version of your used npm dependencies? <code>package-age</code> checks all dependencies specified in the <code>package.json</code> file and tells you if there is a new version of a dependency.",
+    "actions": {
+      "github": "ENT8R/package-age",
+      "npm": "package-age"
+    }
+  }, {
+    "title": "wifiradio",
+    "emoji": "📻📡",
+    "description": "Library for controlling WiFi radios with a chip produced by Frontier Silicon. Supports only basic actions like switching the radio on or off, changing the volume, muting the radio or retrieving basic information.",
+    "actions": {
+      "github": "ENT8R/wifiradio",
+      "npm": "wifiradio"
+    }
+  }]
+}, {
+  "title": "Other",
+  "projects": [{
+    "title": "streetcomplete-mapstyle",
+    "image": "images/projects/streetcomplete-mapstyle.png",
+    "description": "The mapstyle used by <a href=\"https://github.com/westnordost/StreetComplete\">StreetComplete</a>. It is kept intentionally simple and does not display any POIs or other details, users are not distracted and it can be used as a background or basemap below data layers.",
+    "actions": {
+      "website": "https://ent8r.github.io/streetcomplete-mapstyle/",
+      "github": "ENT8R/streetcomplete-mapstyle"
+    }
+  }, {
+    "title": "oneway-data-api",
+    "emoji": "🚗⬅️",
+    "description": "API written in PHP to import the latest <a href=\"https://missingroads.skobbler.net/dumps/OneWays/\">oneway data</a> from <a href=\"https://improveosm.org/\">improveosm.org</a> into a MySQL database. The data can be retrieved by specifying a bounding box of all wanted results. Currently used by and <a href=\"https://github.com/westnordost/StreetComplete/issues/1022\">created for StreetComplete</a>.",
+    "actions": {
+      "github": "ENT8R/oneway-data-api"
+    }
+  }]
+}]

index.html

@@ -13,95 +13,45 @@
 								style-src 'self' https://unpkg.com;">
 	<meta charset="utf-8">
 
-	<link rel="shortcut icon" href="icon/favicon.png" type="image/x-icon">
-	<link rel="icon" href="icon/favicon.png" type="image/x-icon">
+	<link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
+	<link rel="icon" href="images/logo.png" type="image/x-icon">
 
 	<link rel="stylesheet"
-				href="https://unpkg.com/materialize-css@1.0.0-rc.1/dist/css/materialize.min.css"
-				integrity="sha384-AGqYo0VYxBkWUfLYJujCtaohTG6DnXxnWgLZ2cROBb2Lpl/2ew9aA79ke3PWsZ+B"
-				crossorigin="anonymous" />
+				href="https://unpkg.com/spectre.css@0.5.8/dist/spectre.min.css"
+				integrity="sha384-k6VaK8SMn/Mpo78m3i6rYNBu5DlUY1ef2j/LBES5AloJ8J2OwFtKiC4R4dHHo6Qg"
+				crossorigin="anonymous">
 
 	<link rel="stylesheet" href="css/main.css">
 </head>
 
-<body>
+<body class="container">
 
-	<main>
+	<header class="navbar">
+	  <section class="navbar-section"></section>
+	  <section class="navbar-center">
+			<img height="48px" src="images/logo.png">
+	  </section>
+	  <section class="navbar-section">
+			<a href="mailto:[email protected]" class="btn btn-primary mx-1"><i class="icon icon-email"></i> Email</a>
+	    <a href="https://github.com/ENT8R" class="btn mx-1"><i class="icon icon-github"></i> GitHub</a>
+	  </section>
+	</header>
 
-		<nav>
-			<div class="nav-wrapper indigo">
-				<a href="#" rel="noopener" data-target="side-menu" class="sidenav-trigger left"><span class="icon icon-menu-white"></span></a>
+	<main>
+		<div class="columns">
+	    <div class="column col-8 col-md-10 col-mx-auto">
+				<h1>Projects</h1>
+				<div id="projects"></div>
 			</div>
-		</nav>
-
-		<div class="row">
-	    <div class="col s12 m9 l10">
-
-				<ul id="side-menu" class="sidenav sidenav-fixed">
-					<li>
-						<div class="user-view">
-							<div class="background orange lighten-1">
-								<img src="images/office.jpg">
-							</div>
-							<img class="circle" src="icon/logo.png">
-							<span class="white-text name"><span class="icon icon-account"></span>ENT8R</span>
-							<a href="mailto:[email protected]" rel="noopener"><span class="white-text email"><span class="icon icon-email"></span>[email protected]</span></a>
-						</div>
-					</li>
-
-					<li class="active"><a href="#" rel="noopener"><span class="icon icon-code"></span><span data-i18n="nav.projects"></span></a></li>
-
-					<li>
-						<div class="divider"></div>
-					</li>
-
-					<li><a class="subheader">More</a></li>
-					<li><a href="mailto:[email protected]" rel="noopener"><span class="icon icon-email"></span><span data-i18n="nav.email"></span></a></li>
-					<li><a href="https://github.com/ent8r" target="_blank" rel="noopener"><span class="icon icon-github"></span><span data-i18n="nav.github"></span></a></li>
-				</ul>
-
-				<div id="content">
-					<div id="web" class="row section scrollspy">
-						<h3 class="center">Web</h3>
-					</div>
-
-					<div id="electron" class="row section scrollspy">
-						<h3 class="center">Electron</h3>
-					</div>
-
-					<div id="nodejs" class="row section scrollspy">
-						<h3 class="center">NodeJS</h3>
-					</div>
-
-					<div id="other" class="row section scrollspy">
-						<h3 class="center">Other</h3>
-					</div>
-
-					<div id="android" class="row section scrollspy">
-						<h3 class="center">Android</h3>
-					</div>
-				</div>
-
-	    </div>
-	    <div class="col hide-on-small-only m3 l2">
-	      <ul class="section table-of-contents pinned">
-	        <li><a class="active" href="#web">Web</a></li>
-	        <li><a href="#electron">Electron</a></li>
-	        <li><a href="#nodejs">NodeJS</a></li>
-					<li><a href="#other">Other</a></li>
-					<li><a href="#android">Android</a></li>
-	      </ul>
-	    </div>
 	  </div>
-
 	</main>
 
-	<script type="text/javascript"
-					src="https://unpkg.com/[email protected]/dist/js/materialize.min.js"
-					integrity="sha384-pMak5+EFfsXWhPkiRrLAdhYX5c4fOuW5RWyV4QTXlQ3WNpkZSuC/Nl3XaE3Syh1+"
-					crossorigin="anonymous"></script>
-
-	<script type="text/javascript" src="js/main.js"></script>
 </body>
 
+<script src="https://unpkg.com/[email protected]/mustache.js"
+				integrity="sha384-lsPDyNrouIXTZQC+kn1+0nrTKShEY4OS2zzTWgP7xhlFVXPK5Y6O6DAu1dfqAMxA"
+				crossorigin="anonymous"></script>
+
+<script type="text/javascript" src="js/main.js"></script>
+
 </html>