af/pages/development.php

<?php
$bodyclasses = 'development page';
$title = 'Software development';
$tagline = 'not black magic';
$description = 'I design software and write code. Yes, I make apps.';
$keywords = 'music, learning, tabletop, research, the open university';
$twitter_image = 'images/phd-app-2x.jpg';
?>

<?=i('_header')?>

	<article class="body grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-0">
		<section class="full col-start-1 sm:col-span-2">
			<p>I have been writing code for as long as I can remember &ndash; yes, that must have been around 1990, with my Amiga 500. It has been a long journey, and I learned a thing or two along the way.</p>
		</section>
		<section class="left col-start-1 col-span-1">
			<p>One of these is that the “<em>what languages do you know?</em>” question is largely irrelevant. Once you know a bunch of them, learning a new one is easy. The hard part is knowing how to attack a problem and solve it.</p>
		</section>
		<section class="right col-start-1 col-span-1 sm:col-start-2">
			<p><strong>Languages</strong> I know:</p>
			<ul>
				<li>experienced: C, C++(11, 14…), Objective-C, XML, HTML, TypeScript, PHP, Ruby, Pure Data, Processing</li>
				<li>familiar: Swift, JavaScript, Python, x86 and ARM assembly for system programming</li>
				<li>learning: R, Julia, Haskell</li>
			</ul>
		</section>
		<section class="left col-start-1 col-span-1">
			<p>Knowing languages is only a small portion of the job. You also need to know how to not <a href="//en.wikipedia.org/wiki/Reinventing_the_wheel">reinvent the wheel</a> all the time, how to design maintainable and scalable software architectures, and so on.</p>
		</section>
		<section class="right col-start-1 col-span-1 sm:col-start-2">
			<p><strong>Frameworks</strong> and other magic tricks:</p>
			<ul>
				<li>Qt, Cinder, openFrameworks</li>
				<li>Ruby on Rails, Sinatra</li>
				<li>React, Vue.js, Nuxt.js</li>
				<li>Arduino</li>
			</ul>
		</section>
		<section class="full col-start-1 sm:col-span-2">
			<p>I may be forgetting some technologies, but the bottom line is: <strong>it's no use knowing stuff if you don't know what it's used for</strong>.</p>
			<h2>Things I've done</h2>
			<p>Enough talk, let's see some of the projects I worked on over the years.</p>
		</section>
		<section class="project full col-start-1 sm:col-span-2 pb-3" id="project_circularbells">
			<section class="_right sm:float-right sm:w-1/2 sm:pl-1">
				<h3>Circular Bells</h3>
			</section>
			<section class="_left sm:float-left sm:w-1/2 sm:pr-2">
				<figure>
					<a href="#" data-featherlight="<?=$baseurl?>images/cb_demo-2x.jpg">
						<picture>
							<source srcset="<?=$baseurl?>images/cb_demo-2x.webp" type="image/webp" />
							<source srcset="<?=$baseurl?>images/cb_demo.jpg 1x, <?=$baseurl?>images/cb_demo-2x.jpg 2x" type="image/jpeg" />
							<img class="rounded" srcset="<?=$baseurl?>images/cb_demo.jpg" alt="Circular Bells" />
						</picture>
					</a>
				</figure>
			</section>
			<section class="_right sm:float-right sm:w-1/2 sm:pl-1">
				<p>Circular Bells is a music app that for kids and grown ups to sit back and relax while playing with its brightly-coloured, ever-changing interface, and uplifting sounds.</p>
				<p><strong>Technologies</strong>: C++, Cinder, iOS.</p>
				<p><a href="//itunes.apple.com/us/app/circular-bells/id1062362784?mt=8"><strong>App Store</strong></a> | <a href="//www.youtube.com/watch?v=a_GSQNIT7xM"><strong>Demo</strong></a></p>
			</section>
		</section>
		<section class="project full col-start-1 sm:col-span-2 border-t-2 pb-3" id="project_phdappios">
			<section class="_left sm:float-left sm:w-1/2 sm:pr-1">
				<h3>PhD music app for iPad</h3>
			</section>
			<section class="_right sm:float-right sm:w-1/2 sm:pl-2">
				<figure>
					<a href="#" data-featherlight="<?=$baseurl?>images/phd-app-2x.jpg">
						<picture>
							<source srcset="<?=$baseurl?>images/phd-app-2x.webp" type="image/webp" />
							<source srcset="<?=$baseurl?>images/phd-app.jpg 1x, <?=$baseurl?>images/phd-app-2x.jpg 2x" type="image/jpeg" />
							<img class="rounded" srcset="<?=$baseurl?>images/phd-app.jpg" alt="PhD app for iPad" />
						</picture>
					</a>
				</figure>
			</section>
			<section class="_left sm:float-left sm:w-1/2 sm:pr-1">
				<p>In 2014, I needed to bring the app below with me to a conference for demos. I figured pretty soon that I was not going to bring the giant screen with me, so I did an iOS port which worked wonderfully. No, you can't have it. Yet. I'm designing a new version. You can have that once it's ready.<p>
				<p><strong>Technologies</strong>: C++, Cinder, iOS.</p>
				<p><a href="//www.github.com/Morpheu5/SecondStudy-iPad"><strong>Source code</strong></a></p>
			</section>
		</section>
		<section class="project full col-start-1 sm:col-span-2 border-t-2 pb-3" id="project_phdapp">
			<section class="_right sm:float-right sm:w-1/2 sm:pl-1">
				<h3>PhD music app</h3>
			</section>
			<section class="_left sm:float-left sm:w-1/2 sm:pr-2">
				<figure>
					<a href="#" data-featherlight="<?=$baseurl?>images/table_2-2x.jpg">
						<picture>
							<source srcset="<?=$baseurl?>images/table_2-2x.webp" type="image/webp" />
							<source srcset="<?=$baseurl?>images/table_2.jpg 1x, <?=$baseurl?>images/table_2-2x.jpg 2x" type="image/jpeg" />
							<img class="rounded" srcset="<?=$baseurl?>images/table_2.jpg" alt="PhD app for large tabletop" />
						</picture>
					</a>
				</figure>
			</section>
			<section class="_right sm:float-right sm:w-1/2 sm:pl-1">
				<p>As part of my doctoral studies, I developed a collaborative music composition tabletop application to teach people how to compose and discuss melodies.</p>
				<p><strong>Technologies</strong>: C++, Cinder, Pure Data.</p>
				<p><a href="//www.github.com/Morpheu5/FourthStudy"><strong>Source code</strong></a> | <a href="//www.youtube.com/watch?v=AONzmnAHZ6w"><strong>Demo</strong></a></p>
			</section>
		</section>
		<section class="project full col-span-2 border-t-2 pb-3" id="project_aranaboo">
			<section class="_left sm:float-left sm:w-1/2 sm:pr-1">
				<h3>Aranaboo</h3>
			</section>
			<section class="_right sm:float-right sm:w-1/2 sm:pl-2">
				<figure>
					<a href="#" data-featherlight="<?=$baseurl?>images/aranaboo-2x.jpg">
						<picture>
							<source srcset="<?=$baseurl?>images/aranaboo-2x.webp" type="image/webp" type="image/webp" />
							<source srcset="<?=$baseurl?>images/aranaboo.jpg 1x, <?=$baseurl?>images/aranaboo-2x.jpg 2x" type="image/jpeg" />
							<img class="rounded" srcset="<?=$baseurl?>images/aranaboo.jpg" alt="Aranaboo" />
						</picture>
					</a>
				</figure>
			</section>
			<section class="_left sm:float-left sm:w-1/2 sm:pr-1">
				<p>A game of peek-a-boo using face detection.<p>
				<p><strong>Technologies</strong>: iOS.</p>
				<p><a href="//www.beyoucompany.com/?page_id=8"><strong>Web site</strong></a></p>
			</section>
		</section>
		<section class="project full col-start-1 sm:col-span-2 border-t-2 pb-3" id="project_astronauta">
			<section class="_right sm:float-right sm:w-1/2 sm:pl-1">
				<h3>Da grande voglio fare l'astronauta</h3>
			</section>
			<section class="_left sm:float-left sm:w-1/2 sm:pr-2">
				<figure>
					<a href="#" data-featherlight="<?=$baseurl?>images/astronauta-2x.jpg">
						<picture>
							<source srcset="<?=$baseurl?>images/astronauta-2x.webp" type="image/webp" />
							<source srcset="<?=$baseurl?>images/astronauta.jpg 1x, <?=$baseurl?>images/astronauta-2x.jpg 2x" type="image/jpeg" />
							<img class="rounded" srcset="<?=$baseurl?>images/astronauta.jpg" alt="Da grande voglio fare l'astronauta" />
						</picture>
					</a>
				</figure>
			</section>
			<section class="_right sm:float-right sm:w-1/2 sm:pl-1">
				<p>An interactive book for children. The tale of a kid who wants to become an astronaut. I developed the iOS part of the project to completion, but sadly the app was never released.</p>
				<p><strong>Technologies</strong>: iOS.</p>
				<p><a href="//www.behance.net/gallery/1201947/DA-GRANDE-VOGLIO-FARE-LASTRONAUTA-(-IPAD-APP)"><strong>Behance</strong></a></p>
			</section>
		</section>
		<section class="project full col-start-1 sm:col-span-2 border-t-2 pb-3" id="project_bsc">
			<section class="_left sm:float-left sm:w-1/2 sm:pr-1">
				<h3>CRUSADE Bleeding Score Calculator</h3>
			</section>
			<section class="_right sm:float-right sm:w-1/2 sm:pl-2">
				<figure>
					<a href="#" data-featherlight="<?=$baseurl?>images/bsc-2x.jpg">
						<picture>
							<source srcset="<?=$baseurl?>images/bsc-2x.webp" type="image/webp" />
							<source srcset="<?=$baseurl?>images/bsc.jpg 1x, <?=$baseurl?>images/bsc-2x.jpg 2x" type="image/jpeg" />
							<img class="rounded" srcset="<?=$baseurl?>images/bsc.png" alt="CRUSADE Bleeding Score Calculator" />
						</picture>
					</a>
				</figure>
			</section>
			<section class="_left sm:float-left sm:w-1/2 sm:pr-1">
				<p>This app helps clinicians estimate a patient's baseline risk of in-hospital major bleeding during both ST and non-ST segment elevation myocardial infarction. Not that I know what that means. I was given a spreadsheet with some formulas, I was asked to make an iOS app, and so I did. Then the client did not want it anymore, so I published it myself.</p>
				<p><strong>Technologies</strong>: iOS (Swift), Android (Kotlin).</p>
				<p><a href="//itunes.apple.com/us/app/crusade-bleeding-score-calculator/id454062627?mt=8"><strong>App Store</strong></a>, <a href="//play.google.com/store/apps/details?id=net.morpheu5.bleedingscorecalculator"><strong>Google Play</strong></a></p>
			</section>
		</section>
		<section class="project full col-start-1 sm:col-span-2 border-t-2 pb-3" id="project_doodle">
			<section class="_right sm:float-right sm:w-1/2 sm:pl-1">
				<h3>Doodle</h3>
			</section>
			<section class="_left sm:float-left sm:w-1/2 sm:pr-2">
				<figure>
					<a href="#" data-featherlight="<?=$baseurl?>images/doodle-2x.png">
						<picture>
							<source srcset="<?=$baseurl?>images/doodle-2x.png" type="image/webp" />
							<source srcset="<?=$baseurl?>images/doodle.png 1x, <?=$baseurl?>images/doodle-2x.png 2x" type="image/png" />
							<img class="rounded" srcset="<?=$baseurl?>images/doodle.png" alt="Doodle" />
						</picture>
					</a>
				</figure>
			</section>
			<section class="_right sm:float-right sm:w-1/2 sm:pl-1">
				<p>I worked on the actual Reactable between 2008 and 2009, proposing a new approach to Western tonal music &ndash; the original support was quite minimal, I was tasked with making it a bit more usable.</p>
				<p><strong>Technologies</strong>: C++, <a href="//www.qt.io">Qt 4</a>, <a href="//www.jackaudio.org">Jack</a>.</p>
				<p><a href="//www.github.com/Morpheu5/Doodle"><strong>Source code</strong></a> | <a href="//vimeo.com/4325822"><strong>Demo</strong></a></p>
			</section>
		</section>
		<section class="project full col-start-1 sm:col-span-2 border-t-2" id="project_tofus">
			<section class="_left sm:float-left sm:w-1/2 sm:pr-1">
				<h3>tOfuS: the Framework OS</h3>
			</section>
			<section class="_right sm:float-right sm:w-1/2 sm:pl-2">
				<figure>
					<a href="#" data-featherlight="<?=$baseurl?>images/tofus-2x.jpg">
						<picture>
							<source srcset="<?=$baseurl?>images/doodle-2x.webp" type="image/webp" />
							<source srcset="<?=$baseurl?>images/doodle.png 1x, <?=$baseurl?>images/doodle-2x.png 2x" type="image/png" />
							<img class="rounded" srcset="<?=$baseurl?>images/tofus.jpg" alt="tOfuS" />
						</picture>
					</a>
				</figure>
			</section>
			<section class="_left sm:float-left sm:w-1/2 sm:pr-1">
				<p>Yes, there was a time when I worked on a toy operating system. It was good fun and I learned a lot about assembly code and bare-metal programming.</p>
				<p><strong>Technologies</strong>: x86 assembly, C.</p>
				<p><a href="//www.github.com/Morpheu5/tOfuS"><strong>Source code</strong></a></p>
			</section>
		</section>
		<section class="full col-start-1 sm:col-span-2">
			<p class="calltoaction">Have a cool project in mind? <a href="<?=$baseurl?>contact">Let's talk about it!</a></p>
		</section>
	</article>

<?=i('_footer')?>