Add hardware articles

content/articles/bank-atm.md

@@ -0,0 +1,91 @@
+---
+title: "Bank ATM"
+description: "Bank ATM."
+navigation: true
+date: "2018-03-18"
+img: "/img/bank-atm/arduino-fritzing.png"
+tags:
+  - C++14
+  - Qt4
+  - Software
+  - Hardware
+---
+
+<small>Bank ATM.<br>
+
+The goal of this project was to create a banking system, including an ATM
+client. It was created for one of the courses (project 3) at Hogeschool
+Rotterdam and was written in C++14 and Qt4.
+
+The
+[slides](https://docs.google.com/presentation/d/1W0L4e7r0Vqp5Qp3RaNcMhqrt1gkLSrU4T6heOZz_IqQ){target="_blank"}
+for the presentation that I gave at Hogeschool Rotterdam.
+
+## Product demo
+
+Korte video waarin de meeste functionaliteit van de bank ATM wordt getoond.
+
+::VideoLazy{:src="https://riyyi.com/media/bank-atm-demo.webm"}
+::
+
+## Overzicht componenten
+
+- Bank
+   - MySQL server
+   - Native applicatie
+- Arduino Nano
+   - RFID-RC522
+   - Matrix membrane 4x4 keypad
+- USB kabel voor seriële communicatie
+
+![component summary](/img/bank-atm/component-summary.png "component summary")
+
+## Overzicht systeem
+
+De applicatie bestaat uit 3 threads, welke allemaal een unieke functie hebben.
+De main thread bevat de GUI. De database thread voert alle queries uit en slaat
+deze data op. En als laatst de serial thread, deze thread bevat een listener die
+alle seriële data ontvangt. Afhankelijk van wat de serial thread aan user input
+ontvangt zal de SerialCommand class "commando's" uitvoeren die de GUI en
+database thread gebruiken.
+
+![system summary](/img/bank-atm/system-summary.png "system summary")
+
+## Database ERD
+
+Hieronder is de ER (Entity-relationship) diagram te vinden.
+
+![database ERD](/img/bank-atm/database-erd.png "database ERD")
+
+## Database ontwerp
+
+- MySQL server
+- Lokaal opgeslagen
+
+Hieronder is de EER (Enhanced entity-relationship) diagram te vinden.
+
+![database EER](/img/bank-atm/database-design.png "database EER")
+
+## Arduino - fritzing
+
+- Arduino Nano
+- RFID-RC522
+- Matrix membrane 4x4 keypad
+
+![arduino design](/img/bank-atm/arduino-fritzing.png "arduino design")
+
+## GUI
+
+- Native applicatie
+- Geschreven in C++14 en Qt4
+- Cross platform (build tool: qmake)
+- Multithreaded
+
+Ten alle tijden kan de sessie worden afgebroken door de pas uit de pinautomaat
+te verwijderen, de interface wordt daarna naar de inlogpagina doorgestuurd. Alle
+velden waar de gebruiker gegevens kan invoeren, hebben de mogelijkheid voor het
+weergeven van foutmeldingen.
+
+Hieronder zijn schermvoorbeelden te vinden.
+
+![GUI flow](/img/bank-atm/gui-flow.png "GUI flow")

content/articles/elevator-floor-module.md

@@ -0,0 +1,37 @@
+---
+title: "Elevator Floor Module"
+description: "Elevator floor module."
+navigation: false
+date: "2017-12-02"
+img: "/img/elevator-floor-module/backside-view-final.jpg"
+tags:
+  - Hardware
+---
+
+The goal of this project was to create a working miniature elevator. Each member
+of the team made his own level, which we would stack on top of each other in the
+end. The engine room was a combined effort of the team and it would talk to all
+the levels via I2C. This was my first project at Hogeschool Rotterdam.
+
+Het houten frame van de verdieping.
+
+![](/img/elevator-floor-module/wooden-frame.jpg "")
+
+Hardware schema van alle sensoren, de Arduino Mega representeerd de motorkamer.
+
+![](/img/elevator-floor-module/hardware-schematic.png "")
+
+Het bedieningspaneel aan de voorkant van de lift. De 2 pushbuttons worden
+gebruikt om de lift op te roepen. Het segment display geeft de huidige locatie
+van de liftkooi weer en het ledje aan de bovenkant simmuleert de deur.
+
+![](/img/elevator-floor-module/frontside-view.jpg "")
+
+De sensoren worden aangestuurt met een Arduino Uno.
+De uiteindelijke aansluiting ziet er als volgt uit.
+
+![](/img/elevator-floor-module/backside-view-final.jpg "")
+
+Alle lift verdiepingen van ons project groepje opgestapeld tot een toren.
+
+![](/img/elevator-floor-module/tower.png "")

content/articles/guinea-pig-cage.md

@@ -0,0 +1,130 @@
+---
+title: "Guinea Pig Cage"
+description: "Pet guinea pig cage."
+navigation: true
+date: "2018-06"
+img: "/img/guinea-pig-cage/pig.jpg"
+tags:
+  - Hardware
+---
+
+This is a custom designed and build cage for the guinea pigs of my girlfriend.
+
+## Design
+
+3D model of the cage.<br>
+[View](https://www.tinkercad.com/embed/jtFlKzD78Hj)
+the model in 3D.<br>
+See the project at
+[Thinkercad](https://www.tinkercad.com/things/jtFlKzD78Hj).
+
+![](/img/guinea-pig-cage/3d-model.png "")
+
+::GridWithImage
+---
+rows:
+  - title: Saw
+  - title: File
+  - title: Sandpaper
+  - title: Drill
+  - title: Phillips head screwdriver
+  - title: Paint brush
+  - title: Tape measure
+---
+::
+
+## Shopping list
+
+::GridWithImage
+---
+rows:
+  - title: OSB (244x122cm)
+    src: "/img/guinea-pig-cage/osb.jpg"
+  - title: Pond liner (200x250cm)
+    src: "/img/guinea-pig-cage/pond-liner.jpg"
+  - title: Timberboards (250cm)
+    src: "/img/guinea-pig-cage/timberboard-before.jpg"
+    count: 3
+  - title: Dimensional lumber (270cm)
+    src: "/img/guinea-pig-cage/dimensional-lumber.jpg"
+    count: 4
+  - title: Screws (5cm)
+    src: "/img/guinea-pig-cage/screws-5cm.jpg"
+    count: 50
+  - title: Screws (3.5cm)
+    src: "/img/guinea-pig-cage/screws-3-5cm.jpg"
+    count: 10
+  - title: Wind hook / window buckle
+    src: "/img/guinea-pig-cage/wind-hook.jpg"
+  - title: Metal rings
+    src: "/img/guinea-pig-cage/metal-rings.jpg"
+    count: 9
+  - title: Hinges
+    src: "/img/guinea-pig-cage/hinges.jpg"
+    count: 1
+  - title: Child safe paint (375ml)
+    src: "/img/guinea-pig-cage/paint.jpg"
+  - title: Brick
+---
+::
+
+## Build
+
+All measurements of the wooden materials.
+
+| OSB                                               |   | Timberboard                                                |   | Dimensional lumber                                               |
+|---------------------------------------------------|---|------------------------------------------------------------|---|------------------------------------------------------------------|
+| ![](/img/guinea-pig-cage/osb-measurements.jpg "") |   | ![](/img/guinea-pig-cage/timberboards-measurements.jpg "") |   | ![](/img/guinea-pig-cage/dimensional-lumber-measurements.jpg "") |
+
+\* = optional<br>
+~ = around
+
+### Construction
+
+![](/img/guinea-pig-cage/saw-file-beams.jpg "")
+
+![](/img/guinea-pig-cage/osb-bottom.jpg "")
+
+![](/img/guinea-pig-cage/osb-flipped.jpg "")
+
+![](/img/guinea-pig-cage/osb-pond-liner.jpg "")
+
+The timberboard has to be painted on the inward facing side, for wear protection.
+
+![](/img/guinea-pig-cage/timberboard-before.jpg "")
+
+![](/img/guinea-pig-cage/timberboard-after.jpg "")
+
+![](/img/guinea-pig-cage/saw-marks-door.jpg "")
+
+![](/img/guinea-pig-cage/saw-door.jpg "")
+
+![](/img/guinea-pig-cage/one-board.jpg "")
+
+![](/img/guinea-pig-cage/all-boards.jpg "")
+
+![](/img/guinea-pig-cage/upper-level.jpg "")
+
+![](/img/guinea-pig-cage/upper-level-lumber.jpg "")
+
+![](/img/guinea-pig-cage/upper-level-front.jpg "")
+
+![](/img/guinea-pig-cage/upper-level-back.jpg "")
+
+![](/img/guinea-pig-cage/water-bottle-line.jpg "")
+
+![](/img/guinea-pig-cage/water-bottle-hole.jpg "")
+
+![](/img/guinea-pig-cage/water-bottle-done.jpg "")
+
+![](/img/guinea-pig-cage/water-bottle-show.jpg "")
+
+![](/img/guinea-pig-cage/legs.jpg "")
+
+![](/img/guinea-pig-cage/door.jpg "")
+
+![](/img/guinea-pig-cage/water-bottle.jpg "")
+
+![](/img/guinea-pig-cage/complete.jpg "")
+
+![](/img/guinea-pig-cage/pig.jpg "")

content/articles/smart-outlet.md

@@ -0,0 +1,80 @@
+---
+title: "Smart Outlet"
+description: "Home automation smart outlet."
+navigation: false
+date: "2018-10-31"
+img: "/img/smart-outlet/result.jpg"
+tags:
+  - Hardware
+---
+
+This page describes my version of a smart socket for home automation.
+The device can be toggled via the button on the enclosure or a wireless signal.
+
+## Build
+
+Pictured below is a scetch of the concept of the project.<br>
+As well as an electrical circuit.
+
+![](/img/smart-outlet/concept-drawing.jpg "")
+
+The MDF enclosure is cut out with a laser cutter. The base of the design is
+generated via
+[boxes.py](https://www.festi.info/boxes.py/ClosedBox).
+Holes have been added to the base so that the cable,
+socket, LED and button can be mounted.
+
+![](/img/smart-outlet/box-design.png "")
+
+The button is printed with a 3D printer, the bottom part of the button is
+extended by 2mm on each side (4mm in total), so that it stays in place.
+
+![](/img/smart-outlet/button-3d-model.png "")
+
+This is the final electrical circuit that was used, which is made in Fritzing.
+All hardware components (minus the power supply) are incorporated in this
+circuit. A red LED is used as an example appliance that can be toggled.
+
+![](/img/smart-outlet/fritzing.png "")
+
+Pictured below is a model of the design in Tinkercad, the button will be printed
+in 3D and the housing will be cut out with the laser cutter. The black cylinder
+represents the power cable.
+
+Front view.
+
+![](/img/smart-outlet/concept-3d-front.png "")
+
+Side view.
+
+![](/img/smart-outlet/concept-3d-side.png "")
+
+Back view.
+
+![](/img/smart-outlet/concept-3d-back.png "")
+
+Box cut out.
+
+![](/img/smart-outlet/box-cut-out.jpg "")
+
+3D printed button.
+
+![](/img/smart-outlet/button-3d-print.jpg "")
+
+Overview of all the electronics.
+
+![](/img/smart-outlet/electronics-overview.jpg "")
+
+The electronics mounted in the box.
+
+![](/img/smart-outlet/electronics-in-box.jpg "")
+
+Completed assembly.
+
+![](/img/smart-outlet/result.jpg "")
+
+Domoticz is used as a controller, which completes the smart outlet project. View
+the demo below.
+
+::VideoLazy{:src="https://riyyi.com/media/smart-outlet-demo.webm"}
+::

content/articles/type-c-mod.md

@@ -0,0 +1,83 @@
+---
+title: "Xbox 360 Controller Type-C Mod"
+description: "Mod to change the Xbox 360 wired controller to Type-C."
+navigation: false
+date: "2022-11-28"
+img: "/img/type-c-mod/controller-after.jpg"
+tags:
+  - Hardware
+---
+
+<small>Mod to change the Xbox 360 wired controller to Type-C.<br>
+
+## Result
+
+![](/img/type-c-mod/controller-before.jpg "")
+
+![](/img/type-c-mod/controller-after.jpg "")
+
+## Tools
+
+::GridWithImage
+---
+rows:
+  - title: Soldering iron
+  - title: Wire stripper
+    src: "/img/type-c-mod/wire-stripper.jpg"
+  - title: Round file
+    src: "/img/type-c-mod/round-file.jpg"
+  - title: Nail file
+    src: "/img/type-c-mod/nail-file.jpg"
+---
+::
+
+## Shopping list
+
+::GridWithImage
+---
+rows:
+  - title: Solder
+  - title: 3D printed bezel
+    src: "/img/type-c-mod/printed-bezel.jpg"
+  - title: USB Type-C female socket
+    src: "/img/type-c-mod/port.jpg"
+---
+::
+
+Unfortunately, the original design was a little fragile at the round part that
+would slide into the housing and it would snap off. I tweaked the design by
+moving the USB port up by 1mm and reinforcing it by attaching it on the sides,
+as there was space to do so. The 3D bezel design was taken from here:
+[thingiverse.com/thing:3066354](https://thingiverse.com/thing:3066354).<br>
+The new edited design:
+[thingiverse.com/thing:5664077](https://thingiverse.com/thing:5664077).<br>
+This is the USB-C port I used:
+[aliexpress.com/item/1005002328403673.html](https://aliexpress.com/item/1005002328403673.html)
+
+## Build
+
+Unmodified, the original cable hole is a little too narrow to fit a Type-C port.
+
+![](/img/type-c-mod/before-filing.jpg "")
+
+I used the nail file to slightly widen the hole, this is what it looks like afterwards.
+
+![](/img/type-c-mod/after-filing.jpg "")
+
+Initially, my plan was to replace the original connector with a male pin header
+and dupont connectors, but my soldering iron couldn't get hot enough to melt the
+solder of the thick pins. So instead, I repurposed the original wires.
+
+![](/img/type-c-mod/failed-idea.jpg "")
+
+I used a third hand to help keep the port in place while soldering.
+
+![](/img/type-c-mod/soldering-port.jpg "")
+
+Finished soldering.
+
+![](/img/type-c-mod/soldering-port-finished.jpg "")
+
+Test fitting everything together.
+
+![](/img/type-c-mod/test-fit.jpg "")

src/components.d.ts

@@ -20,6 +20,7 @@ declare module 'vue' {
     IFaGithub: typeof import('~icons/fa/github')['default']
     IFaGitlab: typeof import('~icons/fa/gitlab')['default']
     IFaHome: typeof import('~icons/fa/home')['default']
+    IFaImage: typeof import('~icons/fa/image')['default']
     IFaLink: typeof import('~icons/fa/link')['default']
     IFaLinkedinSquare: typeof import('~icons/fa/linkedin-square')['default']
     IFaMoonO: typeof import('~icons/fa/moon-o')['default']

src/components/grid-with-image.vue

@@ -0,0 +1,46 @@
+<template>
+	<ul class="list-group pb-3">
+		<li v-for="(row, index) in props.rows" :key="index" class="list-group-item d-flex justify-content-between align-items-start">
+			{{ row.title }} &nbsp;
+			<div>
+				<span v-if="row.count" class="badge text-bg-primary rounded-pill">{{row.count}}</span>
+				<template v-if="row.src && row.count">
+					&nbsp;
+				</template>
+				<a v-if="row.src" :href="getPublicPath(row.src)" class="text-end" target="_blank">
+					<IFaImage class="text-end" />
+				</a>
+			</div>
+		</li>
+	</ul>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	rows: {
+		title: string,
+		src?: string,
+		count?: number
+	}[]
+}>();
+</script>
+
+<!--
+	 Usage:
+
+	 YAML method.
+
+	::GridWithImage
+	---
+	rows:
+	- title: My title
+	- title: Another title
+		src: "/img/path-to-img.jpg"
+	---
+	::
+
+	 Inline method.
+
+	::GridWithImage{:rows='[ {"title": "My title" }, {"title": "Another title", "src": "/img/path-to-img.jpg"} ]'}
+	::
+-->

src/pages/about-me.vue

@@ -1,3 +1,11 @@
 <template>
-	Man of few words.
+	<h2>CV</h2>
+	<p>
+		Download the PDF here:
+		<a href="https://riyyi.com/media/cv-en-rick-van-vonderen.pdf">English</a>,&nbsp;
+		<a href="https://riyyi.com/media/cv-rick-van-vonderen.pdf">Nederlands</a>
+	</p>
+
+	<object data="https://riyyi.com/media/cv-en-rick-van-vonderen.pdf" type="application/pdf"
+		style="width: 100%; height: calc(100vh - 280px)"></object>
 </template>