Initial commit

.gitignore

@@ -0,0 +1,8 @@
+# Folders
+.idea/
+.cache/
+dist/
+node_modules/
+
+package-lock.json
+

Dockerfile

@@ -0,0 +1,19 @@
+# Use a node image to build the project
+FROM node:8 as builder
+
+# Use a custom builder directory and copy the required files.
+WORKDIR /builder
+COPY src/ src/
+COPY package.json .
+
+# Install the required packages
+RUN ["npm", "install"]
+
+# Build the project
+RUN ["npm", "run", "build"]
+
+# Inherit from the nginx image
+FROM nginx
+
+# Move the files to the default website defined by the nginx image
+COPY --from=builder /builder/dist /usr/share/nginx/html

README.md

@@ -0,0 +1,33 @@
+<h2 align="center">NickBelzer.Me</h2>
+
+This repo contains the code for my personal website which can be found at [nickbelzer.me](https://nickbelzer.me).
+
+The website is used as both a portfolio and way for me to play with new libraries or technologies.
+
+### Getting Started
+The website is bundled using [parcel](https://github.com/parcel-bundler/parcel). Parcel takes care of the optimisation and bundling of the images, javascript, css and html. 
+
+To install the required packages to bundle the website together, either for 
+testing or build purposes the required packages have to be installed:
+
+```bash
+# install dependencies
+npm install
+```
+
+To run the development version using parcel:
+```bash
+# start a hot-reloading development build
+npm run start
+```
+
+To package the files together in a bundle:
+```bash
+# build for production with minification
+npm run build
+```
+
+### Docker
+As can be seen in the `./Dockerfile` the final build produced by parcel will 
+be hosted in an nginx docker image. This image is meant to run using the 
+[reverse-proxy images by jwilder](https://github.com/jwilder/nginx-proxy).

build.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+# Build script
+# Produces a new version of the docker image named 'nickbelzeme'
+
+npm install
+npm run build
+docker build -t nickbelzerme .

docker-compose.yml

@@ -0,0 +1,17 @@
+version: '3.6'
+services:
+  web:
+    container_name: nickbelzerme
+    build:
+      context: .
+    networks:
+      - reverse-proxy_reverse-proxy
+    environment:
+      - VIRTUAL_HOST=${HOST}
+      - LETSENCRYPT_EMAIL=${HOST_EMAIL}
+      - LETSENCRYPT_HOST=${HOST}
+
+networks:
+  reverse-proxy_reverse-proxy:
+    external: true
+

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "nickbelzerme",
+  "version": "1.0.0",
+  "description": "personal website",
+  "main": "index.js",
+  "scripts": {
+    "start": "parcel serve src/index.pug -p 3000",
+    "build": "parcel build src/index.pug --no-source-maps --experimental-scope-hoisting --detailed-report -d dist/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MateyByrd/nickbelzerme.git"
+  },
+  "keywords": [
+    "personal",
+    "website",
+    "portfolio"
+  ],
+  "author": "Nick Belzer",
+  "devDependencies": {
+    "node-sass": "^4.11.0",
+    "parcel": "^1.11.0",
+    "pug": "^2.0.3"
+  }
+}

src/css/main.sass

@@ -0,0 +1,108 @@
+
+$title-color: black
+
+html
+	height: 100%
+	font-family: Avenir Next, Geneva, sans-serif
+	font-size: 16px
+	display: flex
+	justify-content: center
+
+body
+	margin: 0
+	background-color: white
+
+div
+	box-sizing: border-box
+
+.header
+	letter-spacing: 1px
+	text-transform: uppercase
+
+.centered
+	display: flex
+	flex-direction: column
+	align-items: center
+	width: 100%
+
+.text-column
+	width: 100%
+	max-width: 500px
+	padding: 0 2rem
+
+	@media screen and (max-width: 532px)
+		padding: 0 1rem
+
+.menu
+	display: flex
+	justify-content: space-between
+	align-items: center
+	padding: 2.5rem 2rem
+
+	@media screen and (max-width: 532px)
+		padding: 2.5rem 1rem
+
+	.title
+		color: $title-color
+		font-weight: 600
+		font-size: 1.4rem
+
+	a
+		text-transform: uppercase
+		text-decoration: none
+
+.highlight
+	margin: 2rem 0
+	font-size: 2rem
+	font-weight: 600
+
+.projects-grid
+	display: grid
+	margin-top: 3rem
+	padding: 1rem
+	grid-gap: 1.5rem
+	justify-content: center
+
+
+	.project
+		max-width: 30rem
+		display: flex
+		justify-content: center
+		align-items: center
+		position: relative
+
+		img
+			width: 100%
+			height: auto
+
+		.cover
+			position: absolute
+			left: 0
+			top: 0
+			height: 100%
+			width: 100%
+			text-align: center
+			vertical-align: baseline
+			background-color: rgba(0,0,0,0.6)
+			opacity: 0
+			transition: opacity .15s ease-out
+
+		.title, .description
+			position: relative
+			transform: translateY(-50%)
+			top: 50%
+			padding: 1rem
+			color: white
+
+		.title
+			font-weight: 600
+			font-size: 1.5rem
+
+		.description
+			top: 45%
+			padding: 1rem 3rem
+
+		&:hover
+			.cover
+				opacity: 1
+

src/index.pug

@@ -0,0 +1,10 @@
+doctype html
+html(lang='en')
+    head
+        meta(charset="UTF-8")
+        meta(name="viewport", content="width=device-width, initial-scale=1")
+        title NickBelzer.Me
+        link(href='./css/main.sass', rel='stylesheet')
+    body
+        include ./site/menu
+        include ./site/main

src/site/main.pug

@@ -0,0 +1,37 @@
+
+.highlight.text-column.header Engineer in the making.
+
+.introduction.text-column
+    p  Welcome to my personal website. This website serves as both my portfolio and a place to test new web technologies.
+
+.text-column
+    h4.header A bit about me
+    p Since a very young age I have been interested in the abilities of the computer. Slowly discovering them I now find myself completing a <i>Bachelor Computer Science and Engineering</i> at <a href="https://www.tudelft.nl/en/">Delft University of Technology</a>.
+
+    p Over the years I have been developing my skillset, expanding my field of knowledge by working on several different projects. Largest of which is a scheduler system designed for small restaurants.
+
+.projects-grid
+    a.project(href="https://live.hackjunction.com/winners/")
+        img(src="/assets/images/junction2018.png")
+        .cover
+            .title.header Table-DefendAR
+            .description Facebook Spark AR challenge winner during Junction 2018
+
+    a.project(href="https://rooster.strandpaviljoenpantarhei.nl")
+        img(src="/assets/images/panta-rhei-scheduler.png")
+        .cover
+            .title.header Panta Rhei Scheduler
+            .description Scheduler system designed for small restaurants
+
+    a.project(href="https://nickbelzer.me")
+        img(src="/assets/images/personal-website.png")
+        .cover
+            .title.header NickBelzer.Me
+
+    a.project(href="https://www.behance.net/gallery/24074729/Chesster")
+        img(src="/assets/images/chesster.jpg")
+        .cover
+            .title.header Chesster
+            .description An iOS chess game made in Unity3D
+
+

src/site/menu.pug

@@ -0,0 +1,6 @@
+.menu
+    .left
+        a.title.header(href='/') Nick Belzer
+    .center
+    .right
+        a(href='https://github.com/MateyByrd') Github