commit
0e8ee6debb
18 changed files with 670 additions and 0 deletions
@ -0,0 +1,12 @@ |
||||
# Codefolio |
||||
A minimal one-page HTML portfolio. |
||||
|
||||
# Inlining |
||||
Can be done with "inliner": |
||||
|
||||
npm install -g inliner |
||||
inliner portfolio.html |
||||
|
||||
External dependencies: |
||||
W3.css (https://www.w3schools.com/w3css/4/w3.css) |
||||
W3.css "black" theme (https://www.w3schools.com/lib/w3-theme-black.css) |
||||
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 726 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 294 KiB |
@ -0,0 +1,658 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<title>Sander Vocke: Codefolio</title> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> |
||||
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css"> |
||||
|
||||
<body> |
||||
|
||||
<!-- Header --> |
||||
<header class="w3-container w3-theme w3-padding" id="myHeader"> |
||||
<div class="w3-center"> |
||||
<h4>Sander Vocke</h4> |
||||
<h1 class="w3-xxxlarge w3-animate-bottom">CODEFOLIO</h1> |
||||
</div> |
||||
</header> |
||||
|
||||
<!-- MODALS (popup windows describing portfolio items --> |
||||
|
||||
<div id="Transpara-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('Transpara-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/transpara.png" style="width:15cm"></img> |
||||
|
||||
<h3>ScreenPoint Transpara</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
I have spent about three years at !!LINK!! Screenpoint Medical in Nijmegen, The Netherlands. |
||||
ScreenPoint's sole product, Transpara, is an artificial intelligence tool capable of helping |
||||
radiologists make more accurate diagnoses reading mammograms for breast cancer. |
||||
</p> |
||||
<p style="text-align:left"> |
||||
In a small team of developers I took on many hats. My activities included: |
||||
<ul> |
||||
<li>Writing and optimizing image processing code in C++.</li> |
||||
<li>Developing DICOM communications code in C++.</li> |
||||
<li>Improving ScreenPoint's DevOps infrastructure.</li> |
||||
<li>Developing Windows-based interactive medical image viewing applications.</li> |
||||
</ul> |
||||
</p> |
||||
<p style="text-align:left"> |
||||
While I am not free to publish details about these projects, I would be happy to provide |
||||
some more details on request. |
||||
</p> |
||||
<h3>Keywords</h3> |
||||
<p><b>C++11, DICOM, Python, DevOps, Docker</b></p> |
||||
<h3>Available?</h3> |
||||
<p>No. This is proprietary software, property of ScreenPoint Medical.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="BBStudio-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('BBStudio-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/BBStudio-anim.gif" style="width:15cm"></img> |
||||
|
||||
<h3>BBStudio</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
This takes me back... BBStudio was a project I did alone back in high school for coursework. I was |
||||
interested in graphics, game programming and physics engines, so decided to "roll" my own - |
||||
literally, because to keep it manageble for myself I limited it to only spherical objects. My basic |
||||
knowledge of Newtonian physics was enough to get the ball rolling! And I learned a lot in the |
||||
process. |
||||
</p> |
||||
<p> |
||||
I added 3D graphics rendering with the <a href="http://www.ogre3d.org/">OGRE 3D engine</a> and a UI |
||||
that allowed the user to design and store small ballular physics experiments. |
||||
</p> |
||||
<p> |
||||
By far the coolest Eureka moment for me: I added the option to define a force toward a fixed point |
||||
in space, and found out that if applied in combination with initial motion, the spheres actually |
||||
started following stable elliptical orbits! That to me was awesome, since the physics engine itself |
||||
was not much more than an implementation of Newton's second law. |
||||
</p> |
||||
<h3>Keywords</h3> |
||||
<p><b>C++, graphics, physics, UI</b></p> |
||||
<h3>Available?</h3> |
||||
<p>No, but only because it's old and back then I was unaware of the concept "open source". I can send or |
||||
publish the code on request.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="Intergalactic-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('Intergalactic-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/intergalactic_1.jpg" style="width:15cm"></img> |
||||
|
||||
<h3>Intergalactic</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
Another high-school personal project. This was from even before BBStudio. As I'm sure was true for |
||||
some other teenagers, my interest in programming stemmed partly from the fantasy of creating my own |
||||
computer games. |
||||
</p> |
||||
<p> |
||||
Although the project proved too ambitious for my own attention span, Intergalactic was a pretty cool |
||||
3D game. It used the <a href="http://irrlicht.sourceforge.net/">Irrlicht 3D engine</a>. It had two |
||||
of my own spaceship designs and a castle floating in space (taken directly from a Quake map). |
||||
</p> |
||||
<p> |
||||
The player could fly around in third-person with mouse controls, control the throttle and shoot |
||||
lasers. You could crash into the castle and explode. Enemies could be spawned - unfortunately, the |
||||
most sophisticated AI I came up with was for them to fly in circles forever. The climax was being |
||||
able to "lock on" to an enemy and fire a missile, which would turn towards the target to hit it. |
||||
</p> |
||||
<h3>Keywords</h3> |
||||
<p><b>C++, graphics</b></p> |
||||
<h3>Available?</h3> |
||||
<p>No, but only because it's old and back then I was unaware of the concept "open source". I can send or |
||||
publish the code on request.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="Cuber-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('Cuber-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/Cuber-anim.gif" style="width:15cm"></img> |
||||
|
||||
<h3>Cuber</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
During my BSc period, I got increasingly interested in electronics and microcontrollers, and decided |
||||
to learn more about it by starting another personal project. |
||||
</p> |
||||
<p> |
||||
Cuber is a 8x8x8 LED cube. The first skill I honed with this project was soldering: getting all |
||||
those LEDs in place and reliably connected was hard! I went for an ambitious wiring scheme, where |
||||
one microcontroller (programmed in optimized assembly) was required to rapidly control 128 shift |
||||
registers and switch power to subsets of LEDs to create the illusion of continuous light. The other |
||||
controller provided a UI through an LCD screen and buttons, and accepted the serial control stream |
||||
from a PC. |
||||
</p> |
||||
<p>I designed the Cuber circuit board in Eagle and etched it myself. It even had a "simulator" on PC |
||||
which could consume the exact same serial control stream from a virtual serial port as the real |
||||
Cuber, and showed all the LED states in an OpenGL rendering window. This allowed me to focus on |
||||
creating cool animations and a 3D Snake game. |
||||
</p> |
||||
<h3>Keywords</h3> |
||||
<p><b>Microcontrollers, C, ASM, Circuit Design, Board Layout</b></p> |
||||
<h3>Available?</h3> |
||||
<p>No, but only because it's old and back then I was unaware of the concept "open source". I gave the |
||||
cube away, and can't even find my cool video shots of it in action - but I can send or publish the |
||||
code and board design on request.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="Brap-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('Brap-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/brap_1.jpg" style="width:15cm"></img> |
||||
|
||||
<h3>Brap</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
My girlfriend and I love to travel. We have built up a huge amount of photos and videos because of |
||||
this. |
||||
</p> |
||||
<p> |
||||
My brother and I got together and cooked up a plan. We would both build a world map with built-in |
||||
photo/video viewer. He would design the hardware and I would design the user interface. The project |
||||
never quite got off the ground, but we still use "Brap" to view our collection from our NAS. |
||||
</p> |
||||
<p> |
||||
Brap has a HTML5+CSS+Javascript web front-end, PHP+SQLite back-end and a suite of Python scripts for |
||||
database management. All that together makes for a pretty good web design learning project. |
||||
</p> |
||||
<h3>Keywords</h3> |
||||
<p><b>HTML, CSS, Javascript, PHP, SQL</b></p> |
||||
<h3>Available?</h3> |
||||
<p>No, I kept this on my private BitBucket pending the time I would deem it "ready". That being said, I |
||||
can send or publish the code on request.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="EVC-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('EVC-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/evc_1.jpg" style="width:15cm"></img> |
||||
|
||||
<h3>Embedded Visual Control</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
This coursework project during my MSc program is worth mentioning, because we took it pretty far. |
||||
</p> |
||||
<p> |
||||
With three other students, we designed and built a solar-powered rover which could track and follow |
||||
colored objects. Some of my personal contributions:<br> |
||||
- The design choice to use a 360 degree bubble lens, giving the rover omni-vision.<br> |
||||
- The effort to squeeze every drop of performance from the Raspberry Pi by implementing object |
||||
segmentation for GPU in OpenGL ES, which is not at all meant to be used for computer vision.<br> |
||||
- The deep-dive into the Pi's memory management abstraction layer to make it possible to do |
||||
zero-copy streaming from the rover's GPU output over to a control station over WiFi.<br> |
||||
- A Python simulator which we could use to develop the rover's driving behaviour.<br> |
||||
</p> |
||||
<h3>Keywords</h3> |
||||
<p><b>OpenGL ES, Computer Vision, Motor Control</b></p> |
||||
<h3>Available?</h3> |
||||
<p>The full suite: no, because it is written for a specific rover that no-one is likely to replicate. |
||||
However, here are links to a few small parts like the <a |
||||
href="https://github.com/SanderVocke/robosim">Pygame rover movement simulator</a>, <a |
||||
href="https://github.com/SanderVocke/EVCMotorDriver">motor driver</a> and a condensed example of |
||||
the <a href="https://github.com/SanderVocke/picamgpu_minimal">camera to GPU memory</a> on GitHub. |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="HalideIPU-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('HalideIPU-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/halideipu_2.jpg" style="width:20cm"></img> |
||||
|
||||
<h3>Halide for IPU</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
<a href="http://halide-lang.org">Halide</a> is an emerging domain-specific language for image |
||||
processing. It is seeing increasing adoption in the industry - most notably at Google and Adobe. |
||||
</p> |
||||
<p> |
||||
During my MSc thesis at Intel's Imaging and Camera Technologies Group (ICG), I extended Halide with |
||||
a code generation back-end and syntax extensions for Intel's imaging DSPs, which are found in Intel |
||||
IPU subsystems. In the process, I showed that high-performance code generation from Halide for such |
||||
targets is feasible. |
||||
</p> |
||||
<p> |
||||
The project has been, and still is a joy to work on. Halide's relatively low complexity (compared to |
||||
full-fledged back-end compilers such as LLVM) and high extensibility made for a great way to get |
||||
acquainted with compiler techniques, code generation and automatic optimization. It has also opened |
||||
my eyes to domain-specific languages as a solution for the problem of maintaining portable, fast |
||||
code for increasingly specialized and diverse computing platforms. |
||||
</p> |
||||
<p> |
||||
The paper I authored about the topic is set to appear in <a href="http://www.acm.org/taco/">ACM |
||||
Transactions on Architecture and Code Optimization</a>. Until it is published, an abridged early |
||||
version can be found at the <a href="http://repository.tue.nl/866731">TU/e university |
||||
repository</a>. |
||||
</p> |
||||
<h3>Keywords</h3> |
||||
<p><b>C++11, Halide, DSP, Imaging, Compiler</b></p> |
||||
<h3>Available?</h3> |
||||
<p>Unfortunately, no. The codebase is closed to protect Intel sensitive information.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="Qi-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('Qi-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/qi_1.jpg" style="width:15cm"></img> |
||||
|
||||
<h3>Qi Wireless Charging</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
I spent about a year at <a href="http://www.powerbyproxi.com">PowerByProxi</a> in Auckland, New |
||||
Zealand, working on a new generation of Qi wireless smartphone chargers. |
||||
</p> |
||||
<p>That involved getting previous products designed by PowerByProxi to comply to the existing Qi |
||||
standard, while at the same time expanding its capabilities to include multi-phone charging and free |
||||
placement.</p> |
||||
<p>Inventor on patents:<br> |
||||
<a href="https://patentscope.wipo.int/search/en/detail.jsf?docId=WO2015194969">Foreign object |
||||
detection in inductive power transfer field</a><br> |
||||
<a href="https://www.google.com/patents/US20170237296">System and method for power transfer</a></p> |
||||
<p>The most memorable moment in this pursuit was when I teamed up with a colleague specialized in power |
||||
transfer circuitry, who had an ambitious idea for controlling AC power flowing through the inductive |
||||
link. So far, the idea had only worked in circuit simulation, where all signals could be set |
||||
perfectly to control the phases and amplitudes in the system. After days of pushing, on New Year's |
||||
Day, we suddenly got the concept running on the real thing - just before I was set to leave for a |
||||
month-long holiday.</p> |
||||
<h3>Keywords</h3> |
||||
<p><b>Power Control, ARM, C</b></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="Leash-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('Leash-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/leash_1.jpg" style="height:10cm"></img> |
||||
|
||||
<h3>Leash Debugger</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
During three months of internship at <a href="https://mindtribe.com/">Mindtribe Product |
||||
Engineering</a> in San Francisco, I created Leash Debugger (<a |
||||
href="https://github.com/Mindtribe/Leash-Debugger">GitHub</a>). Finally, an open-source project |
||||
in the list! |
||||
</p> |
||||
<p>It is a JTAG debugger for the Texas Instruments CC3200 development board, which can be used over WiFi |
||||
to debug a target remotely.</p> |
||||
<p>The solution is described in more detail <a |
||||
href="http://mindtribe.com/2015/12/leash-debugger-a-wifi-enabled-jtag-debug-adapter/">here</a>. |
||||
</p> |
||||
<h3>Keywords</h3> |
||||
<p><b>JTAG, C, ARM, WiFi</b></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="Octiron-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('Octiron-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/octiron.jpg" style="height:10cm"></img> |
||||
|
||||
<h3>Octiron</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
I joined the <a href="https://soleus.nu">Soleus</a> association to tinker with my own VPS, Octiron. |
||||
Octiron runs a few web applications and serves as a test deployment server for my own web projects. |
||||
You may be reading this codefolio on Octiron! |
||||
</p> |
||||
<p> |
||||
Octiron runs Arch Linux with microk8s Kubernetes. I have deployed a small personal DevOps pipeline on |
||||
it, consisting of !!!LINK!!! Gitea for source code management and !!!LINK!!! Drone for automatic builds. |
||||
It's all secured via HTTPS with a LetsEncrypt certificate. |
||||
</p> |
||||
<p> |
||||
Feel free to visit e.g. <a href="https://gitea.octiron.soleus.nu">my Gitea</a> to have a look, although |
||||
you won't see much since my repositories are private; my public repositories are still on GitHub. |
||||
</p> |
||||
<h3>Keywords</h3> |
||||
<p><b>Kubernetes, DevOps, Gitea, Drone</b></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="Fatclient-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('Fatclient-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/digikam-fatclient.png" style="height:10cm"></img> |
||||
|
||||
<h3>Digikam-Fatclient</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
My photo collection at home is quite large, and it is stored on a NAS device. The NAS can run |
||||
a webserver, but it is excruciatingly slow. |
||||
Despite this, I want the NAS to host my photos in a web application with modern features such as |
||||
searching and querying for photos by date, location or album. |
||||
</p> |
||||
<p style="text-align:left"> |
||||
I also manage my photo collection using <a href="https://www.digikam.org/">digiKam</a>. |
||||
</p> |
||||
<p> |
||||
That is why I decided to make <a href="https://gitea.octiron.soleus.nu/sander/Digikam-FatClient">digiKam-fatClient</a>. |
||||
Instead of having a front-end and a back-end, it is a statically hosted web app that does all the fancy stuff |
||||
in the front-end. |
||||
</p> |
||||
<p> |
||||
To do that, it downloads the photo metadata database in its entirety to RAM and accesses it there using |
||||
<a href="https://github.com/kripken/sql.js/">SQL.js</a> (a Javascript/Webassembly build of SQLite). |
||||
The app can show the Digikam albums and filter photos, for example based on their geolocation. |
||||
</p> |
||||
<h3>Keywords</h3> |
||||
<p><b>Front-end, React, SQLite, Javascript</b></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="Mudbase-Modal" class="w3-modal"> |
||||
<div class="w3-modal-content"> |
||||
<div class="w3-container"> |
||||
<!-- Close button --> |
||||
<span onclick="document.getElementById('Mudbase-Modal').style.display='none'" |
||||
class="w3-button w3-display-topright">×</span> |
||||
|
||||
<div style="height:0.5cm"></div> |
||||
|
||||
<img src="img/mudbase.png" style="height:10cm"></img> |
||||
|
||||
<h3>MuDBase</h3> |
||||
|
||||
<p style="text-align:left"> |
||||
Recently, Google announced that its music service Google Play Music is shutting down. |
||||
</p> |
||||
<p> |
||||
I loved this service and I am not sure what to do with my music preferences after it is gone. |
||||
While I could (and probably will) move to another streaming service, I don't want to be dependent |
||||
on such services for remembering what music I like. |
||||
I want to be able to make back-ups. |
||||
</p> |
||||
<p> |
||||
I also would like to keep a bit more metadata about songs I like so that I can, for example, |
||||
create playlists for jazz dancing more effectively. |
||||
</p> |
||||
<p> |
||||
This is where the idea for !!!LINK!!! MuDBase came from. MuDBase is going to remember my music tastes, |
||||
including playlists, but with additional metadata added (such as beats per minute for jazz songs). |
||||
Instead of using it to play music, it will only be for keeping track of music, providing scripts to |
||||
sync it up with my music library on streaming services. |
||||
</p> |
||||
<p> |
||||
This is an early-stage WIP, but a working prototype can be found on <a href="https://gitea.octiron.soleus.nu/sander/MuDBase">my Gitea</a>. |
||||
</p> |
||||
<h3>Keywords</h3> |
||||
<p><b></b></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-row-padding w3-center w3-margin-top"> |
||||
|
||||
<div class="w3-padding"></div> |
||||
<header class="w3-container"> |
||||
<h2>Work- / Study-Related</h2> |
||||
</header> |
||||
<div class="w3-padding"></div> |
||||
|
||||
<p style="text-align:center font-size:18">A small selection of projects I have created or worked on in the work |
||||
or study environment.</p> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('Transpara-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>ScreenPoint Transpara</h3><br> |
||||
<img src="img/transpara.png" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">Full-stack development work on a medical analysis aid for breast cancer.</p> |
||||
<p><b>C++11, DICOM, Python, Dev-Ops, Docker</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('HalideIPU-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>Halide for Intel IPU</h3><br> |
||||
<img src="img/halideipu_1.jpg" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">Created a DSP compiler back-end for the emerging programming language Halide, |
||||
targeted towards Intel image processing accelerators.</p> |
||||
<p><b>C++11, Halide, DSP, Imaging, Compiler</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('Qi-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>Qi Wireless Charging</h3><br> |
||||
<img src="img/qi_1.jpg" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">Contributed to embedded software which controls inductive power transfer to |
||||
smartphones.</p> |
||||
<p><b>Power Control, ARM, C</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('Leash-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>Leash Debugger</h3><br> |
||||
<img src="img/leash_1.jpg" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">Created a JTAG microcontroller debug adapter which works over WiFi.</p> |
||||
<p><b>JTAG, C, ARM, WiFi</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('EVC-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>Embedded Visual Control</h3><br> |
||||
<img src="img/evc_1.jpg" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">A solar-powered rover with 360 degree vision and object tracking capability. |
||||
</p> |
||||
<p><b>OpenGL ES, Computer Vision, Motor Control</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-padding"></div> |
||||
<header class="w3-container"> |
||||
<h2>Personal</h2> |
||||
</header> |
||||
<div class="w3-padding"></div> |
||||
|
||||
<p style="text-align:center font-size:18">I am a tinkerer by nature. I have spent countless hours on hobby |
||||
projects of all shapes and sizes. Here are a few examples.</p> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('Fatclient-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>Digikam-FatClient</h3><br> |
||||
<img src="img/digikam-fatclient.png" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">Fast-feeling photo exploration from a dead-slow NAS device.</p> |
||||
<p><b>Front-end, React, SQLite, JavaScript</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('Mudbase-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>MuDBase</h3><br> |
||||
<img src="img/mudbase.png" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">Making sure to never lose my favorite music.</p> |
||||
<p><b>Full-stack, React, Node.js, TypeScript</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('Octiron-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>Octiron</h3><br> |
||||
<img src="img/octiron.jpg" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">My own VPS running microk8s Kubernetes and a simple open-source DevOps pipeline.</p> |
||||
<p><b>Kubernetes, DevOps, Gitea, Drone</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('Brap-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>Brap</h3><br> |
||||
<img src="img/brap_2.jpg" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">Web- and Python-based management and viewing system for my personal photos |
||||
and videos.</p> |
||||
<p><b>HTML, CSS, Javascript, PHP, SQL</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('Cuber-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>Cuber</h3><br> |
||||
<img src="img/cuber_1.jpg" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">A 8x8x8 cube of dual-color LEDs, controlled by a custom board using two |
||||
ATMega microcontrollers.</p> |
||||
<p><b>Microcontrollers, C, ASM, Circuit Design, Board Layout</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('BBStudio-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>BBStudio</h3><br> |
||||
<img src="img/bbstudio_1.jpg" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">A simple physics engine with spheres as the only kind of object.</p> |
||||
<p><b>C++, graphics, physics, UI</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="w3-quarter" onclick="document.getElementById('Intergalactic-Modal').style.display='block'" |
||||
style="cursor: pointer"> |
||||
<div class="w3-card-2 w3-container w3-row" style="height: 450px"> |
||||
<h3>Intergalactic</h3><br> |
||||
<img src="img/intergalactic_1.jpg" style="width:200px;height:200px;object-fit:contain"></img> |
||||
<p style="text-align:left">A 3D space shooter game.</p> |
||||
<p><b>C++, graphics</b></p> |
||||
</div> |
||||
</div> |
||||
|
||||
<script> |
||||
|
||||
// Expand/contract tiles |
||||
function tileExpandContract(id) { |
||||
var x = document.getElementById(id); |
||||
if (x.className.indexOf("w3-third") == -1) { |
||||
x.className = "w3-third"; |
||||
x.style.width = ""; |
||||
} else { |
||||
x.className = x.className.replace("w3-third", ""); |
||||
x.style.width = "99%"; |
||||
} |
||||
return x; |
||||
} |
||||
|
||||
// Show/hide a container. |
||||
function showHide(id) { |
||||
var x = document.getElementById(id); |
||||
if ((x.className.indexOf("w3-show") == -1) && (x.className.indexOf("w3-hide") == -1)) { |
||||
x.className = x.className + " w3-show"; |
||||
} else if (x.className.indexOf("w3-show") >= 0) { |
||||
x.className = x.className.replace("w3-show", "w3-hide"); |
||||
} else { |
||||
x.className = x.className.replace("w3-hide", "w3-show"); |
||||
} |
||||
return x; |
||||
} |
||||
|
||||
// Read More: on click, expand the tile and show the body. |
||||
function readMore(tile_id, body_id) { |
||||
var tile = document.getElementById(tile_id); |
||||
var body = document.getElementById(body_id); |
||||
tileExpandContract(tile_id); |
||||
showHide(body_id); |
||||
} |
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
|
||||
</html> |
||||
Loading…
Reference in new issue