adding image link block
This commit is contained in:
parent
edf5c6ace2
commit
e24224bdf9
@ -4,6 +4,12 @@ date: 2021-01-17T22:59:40+00:00
|
||||
draft: false
|
||||
---
|
||||
|
||||
{{% image-box-link src="/posts/visual-search/mapSurfaceWithMax2.png" href="/posts/visual-search" title="Visual Search" caption="MATLAB" %}}
|
||||
|
||||
{{% image-box-link src="/posts/lpss/hood_m_gram.png" href="/posts/lpss" title="Speech Synthesiser" caption="MATLAB" %}}
|
||||
|
||||
{{% image-box-link src="/posts/markov/StateTopology.png" href="/posts/markov" title="Hidden Markov Models" caption="MATLAB" %}}
|
||||
|
||||
# [Holoportation](/holo)
|
||||
|
||||
`C++ [Kinect SDK, OpenCV]`
|
||||
@ -21,6 +27,10 @@ My undergraduate dissertation documented extending the [__LiveScan3D__](https://
|
||||
|
||||
[Read More](/holo)
|
||||
|
||||
{{% image-box-link src="/posts/draught/checkers-board.png" href="/posts/draught" title="Draught" caption="Rust + Js" %}}
|
||||
|
||||
{{% image-box-link src="/posts/game-of-life/gameoflife1.png" href="/posts/game-of-life" title="Game of Life" caption="Rust + Js" %}}
|
||||
|
||||
# [Mixonomer](/mixonomer)
|
||||
|
||||
`Python [Flask]`
|
||||
@ -30,7 +40,7 @@ Mixonomer is a web app for creating smart playlists for __Spotify__. These playl
|
||||
|
||||
Updates are run multiple times a day or on-demand. Additionally, __Last.fm__ integration provides listening statistics for your playlists.
|
||||
|
||||
|
||||
{{< figure src="/mixonomer/cloud-structure-3.png" alt="cloud structure" >}}
|
||||
|
||||
The project began as an exercise in recreating the functionality of [__Paul Lamere‘s__](https://twitter.com/plamere) [__Smarter Playlists__](http://playlistmachinery.com/) app. This tool had become a really important part of my daily listening habits as a way of combining my smaller sub-genre playlists into larger mixes.
|
||||
|
||||
@ -44,6 +54,8 @@ The system is now deployed with a fully serverless architecture.
|
||||
|
||||
[Source Code](https://github.com/Sarsoo/Mixonomer)
|
||||
|
||||
---
|
||||
|
||||
# [Selector](/selector)
|
||||
|
||||
`.NET [ASP.NET, Redis, Docker]`
|
||||
@ -51,7 +63,7 @@ The system is now deployed with a fully serverless architecture.
|
||||
|
||||
A __Spotify__ listening agent which watches what you listen to and presents related data and information in a live dashboard. __Spotify__ presents some interesting track data that isn’t visible in the official clients such as its beats-per-minute, key signature and a musical descriptor.
|
||||
|
||||
|
||||
{{< figure src="/selector/dashboard.png" alt="dashboard" >}}
|
||||
|
||||
[Read More](/selector)
|
||||
|
||||
@ -59,7 +71,9 @@ A __Spotify__ listening agent which watches what you listen to and presents rela
|
||||
|
||||
[Source Code](https://github.com/Sarsoo/Selector)
|
||||
|
||||
# Listening Engineering
|
||||
---
|
||||
|
||||
# [Listening Engineering](/posts/listening-analysis)
|
||||
|
||||
`Python [scikit-learn, Jupyter]`
|
||||
|
||||
@ -69,7 +83,9 @@ I wanted to explore what insights could be found in my 3 years of __Last.fm__ sc
|
||||
|
||||
__Spotify__ provides audio features for the tracks on its platform. These features describe a number of qualities for the tracks including how much energy it has and how vocal it is. I investigated whether the set of audio features for my larger genre playlists could be used to classify tracks by genre.
|
||||
|
||||
[Read More]()
|
||||
[Read More](/posts/listening-analysis)
|
||||
|
||||
---
|
||||
|
||||
# Signal Processing
|
||||
|
||||
@ -91,6 +107,8 @@ Throughout my studies I found myself particularly interested in the signal proce
|
||||
|
||||
[Coursework Code](https://github.com/Sarsoo?tab=repositories&q=coursework)
|
||||
|
||||
---
|
||||
|
||||
I've been coding for 7 years and I now work as a software engineer in fintech. Day-to-day this is in [__C#__](/holo/) and [__TypeScript__](/mixonomer) but I also like working with [__Python__](/mixonomer) and [__Rust__](https://github.com/Sarsoo?tab=repositories&q=&type=&language=rust&sort=). I keep all of my projects on [__GitHub__](http://github.com/sarsoo).
|
||||
|
||||
Alongside development I also enjoy working on infrastructure, I have 5 years experience using __Linux__ and managing networks. I have experience working with cloud technologies – from [__virtual machines__](/holo), [__web server PaaS__](/mixonomer) and [__serverless functions__](/mixonomer) to [__NoSQL__](/mixonomer), Big Data SQL and [__pub/sub messaging__](/mixonomer). Much of this experience was gained during my [__Mixonomer__](/mixonomer) project and during my __Disney__ internship. As part of my [dissertation](/holo#research), I used a global cluster of virtual machines as an environment to measure and experiment with holographic video QoS over long distances.
|
||||
@ -99,6 +117,8 @@ At university, I was particularly interested in the software side of the field i
|
||||
|
||||
[Posts](/posts)
|
||||
|
||||
---
|
||||
|
||||
# Awards
|
||||
|
||||
Throughout my time at university, I earned multiple awards for academic achievement
|
||||
|
||||
@ -27,7 +27,7 @@ The app works by capturing what is called a [_point cloud_](https://en.wikipedia
|
||||
|
||||
# Multi-Source
|
||||
|
||||
|
||||
{{< figure src="pair.png" alt="pair of subjects facing each other" >}}
|
||||
|
||||
My undergraduate dissertation was tasked with extending the original software to allow _multi-source_ streaming. The current system could stream one scene to one server for viewing. This scene being captured, whether by one camera or from multiple angles, is called a _source_. Multi-source operation allows more than one scene to be composited and displayed at the server or a connected AR client.
|
||||
|
||||
@ -59,6 +59,6 @@ The work that I did used a collection of virtual machines hosted in various glob
|
||||
|
||||
# Photoshoot
|
||||
|
||||
|
||||
{{< figure src="ballcap.jpg" alt="ballcap" >}}
|
||||
|
||||
The system uses a [_point cloud_](https://en.wikipedia.org/wiki/Point_cloud) to capture and transmit 3D video. When zoomed in with a small point size, the medium looked really cool with the black virtual background, see here for more.
|
||||
@ -12,13 +12,13 @@ Mixonomer is a web app to augment your __Spotify__ listening experience with _sm
|
||||
|
||||
[Read the Docs](https://docs.mixonomer.sarsoo.xyz/)
|
||||
|
||||
|
||||
{{< figure src="Playlists.png" alt="playlist list" >}}
|
||||
|
||||
Include recommendations for additional __Spotify__ suggestions based on a playlist’s tracklist. Reference your playlists and those you follow by name or add references to other _smart playlists_ to additionaly include their watchlist.
|
||||
|
||||
Select library tracks for the playlists to include your __Spotify__ saved tracks in the mix.
|
||||
|
||||
|
||||
{{< figure src="PlaylistExample.png" alt="playlist example" >}}
|
||||
|
||||
You can shuffle playlists for output or sort by reverse release date for a thumbnail that stays fresh with new music artwork.
|
||||
|
||||
@ -26,7 +26,7 @@ You can shuffle playlists for output or sort by reverse release date for a thumb
|
||||
|
||||
Tags are a listening statistics visualiser for exploring your [__Last.fm__](https://last.fm) habits. __Last.fm__ is great for exploring your listening history but sometimes I’ve wanted to be able to group some artists or albums to see their data in one place.
|
||||
|
||||
|
||||
{{< figure src="TagExample.png" alt="tag example" >}}
|
||||
|
||||
Mixonomer’s tags lets you do this, I use it for stuff like grouping a label’s artists together to see how many times I’ve listened to _Dreamville_ artists, for example. Tick time to estimate the amount of time you’ve spent listening to each.
|
||||
|
||||
|
||||
@ -10,15 +10,13 @@ _I wrote a checkers game with a computer AI player that runs locally in the brow
|
||||
|
||||
I wanted to play with Rust + WASM to see what could be done in the browser without Javascript, previously I knew little about either beyond the basic tutorials. In my masters AI module, I studied adversarial game models including the [MiniMax algorithm](https://en.wikipedia.org/wiki/Minimax). This algorithm generates a tree of possible moves and compares scores to decide which move should be made. Generating this tree can be expensive as it explodes exponentially, as such it would be a good candidate to try and speed up using compiled Rust over interpreted Javascript. If I'm honest, I'm not crazy passionate about checkers but I thought it would be a cool application of some of my uni theory
|
||||
|
||||
|
||||
###### Standard checkers board rendered on an HTML canvas using Rust
|
||||
{{< figure src="checkers-board.png" alt="checkers board" caption="Standard checkers board rendered on an HTML canvas using Rust" >}}
|
||||
|
||||
The project took about 3 weeks off and on. Initially, I wanted to model the game board without the off-diagonal pieces that aren't played on. This would have helped reduce the memory footprint of each board which would be ideal when we are going to be handling a lot. Unfortunately, this significantly increased the complexity of modelling piece movements - after some trial and error I resorted to just modelling the whole board.
|
||||
|
||||
The MiniMax algorithm was also a bit of a pain. The algorithm relies on a tree structure for which I used the [IndexTree crate](https://crates.io/crates/indextree). Instead of using pointers between nodes that could rely on unsafe code, this library instead relies on a single backing array of nodes. Working out how to effectively create, populate and traverse the trees while following the borrow checker's rules was an effective learning exercise.
|
||||
|
||||
|
||||
###### Javascript UI with a Rust-controlled canvas
|
||||
{{< figure src="screenshot.png" caption="Javascript UI with a Rust-controlled canvas" >}}
|
||||
|
||||
The performance of the game and the AI was pretty impressive. This was also without any Alpha-Beta pruning, a method to reduce the number of tree nodes that need searching. Below are the results of a basic benchmark for expanding the MiniMax tree to given depths both in development mode and release mode.
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ The project was divided into three areas of concern:
|
||||
|
||||
[Github Repo](https://github.com/Sarsoo/electric-vehicle-scheduler)
|
||||
|
||||
|
||||
{{< figure src="cloud-structure.png" alt="cloud-structure" >}}
|
||||
|
||||
I was responsible for designing, writing and deploying the cloud service, my report on this aspect can be seen below,
|
||||
|
||||
|
||||
@ -6,8 +6,7 @@ draft: false
|
||||
|
||||
During my speech & audio processing & recognition post-grad module, I completed two pieces of coursework. The first of which involved writing and analysing a speech synthesiser utilising linear predictive coding. The report achieved 95%.
|
||||
|
||||
|
||||
###### Spectrogram analysing one of the original vowel segments; the red circles highlight areas of interest, the lower are the formant frequencies
|
||||
{{< figure src="hood_m_gram.png" caption="Spectrogram analysing one of the original vowel segments; the red circles highlight areas of interest, the lower are the formant frequencies" alt="spectrogram" >}}
|
||||
|
||||
The report analysed two vowel segments in order to identify their fundamental frequencies and the first handful of formant frequencies. After this, linear predictive coefficients of varying orders were calculated and used in conjunction with the fundamental frequency to re-synthesise the vowel.
|
||||
|
||||
|
||||
62
layouts/shortcodes/image-box-link.html
Normal file
62
layouts/shortcodes/image-box-link.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div>
|
||||
<div style="
|
||||
border: 50px black;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;">
|
||||
<span aria-hidden="true" style="
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
opacity: .5;
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
z-index: 1; "></span>
|
||||
<img loading="lazy" alt="" src="{{ .Get "src" }}" style="
|
||||
/* object-position:38% 50%; */
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
outline: none;
|
||||
border: 4px solid black;
|
||||
border-radius: 10px;
|
||||
box-shadow: 5px 5px;">
|
||||
<div style="
|
||||
z-index: 1;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
margin-right: 5%;
|
||||
margin-left: 5%;">
|
||||
<p style="
|
||||
font-size:30px; color: white;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
text-shadow: 0px 2px black;">
|
||||
<a href="{{ .Get "href" }}"
|
||||
style="
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-skip-ink: all;">{{ .Get "title" }}</a>
|
||||
</p>{{if isset .Params "caption" }}
|
||||
<p style="
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
text-shadow: 0px 1px black;">{{ .Get "caption" }}</p>{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user