React
React Native
Vue
Gatsby
Node.JS
JavaScript
jQuery
GraphQL
HTML / CSS
LESS / SASS
Lately i've been trying to focus on supportability and extensibility when building out design specs. This site, a contract for a translation service, leads with those considerations. Who would be working with it most day-to-day?
I decided to build out a Gatsby site integrating Tina CMS. This created several distinct advantages: the static site generation and utilization of react-helmet allows for strong SEO and performance, site content can easily be modified in Tina CMS, site pages and menus are dynamically generated from Markdown at build time, this in turn allows for easy localization.
This is a work in progress, localization is being tested. Tina integration is underway. Live site changes can be viewed at the GH pages location.
Company: Eisenmann Translations
Gatsby
React
Tina CMS
Styled Components
GraphQL
Material UI
Rich, intuitive interactivity is so ubiquitous with modern web development that it’s often expected right out the box. I took on a contract as part of a dev shop’s larger development effort to create an interactive, responsive site for a waterpark in Europe. I entered with a similar mindset, that given how commonplace richly functional UI components were, the tools to create them must be similarly so.
In some ways, that was true. This project utilized Leaflet, Isotope, and Fancybox to create an interactive map where users can click on attraction markers on the map, view tiles of all attractions, filter by attraction type, and view images and video galleries for each ride.
While such libraries were readily available, adapting them to fit this exact need proved quite difficult, with lots of debugging and several forays into the source code of Leaflet specifically to try and correctly map a coordinate system over a static image. Beyond this, making that interface backward compatible with older versions of IE also took some careful planning.
Company: Lighthouse.gr
jQuery
JavaScript
LESS
Leaflet
Isotope
Fancybox
I believe there’s real power in remembering our collective history. Originally born in England, I immigrated with my family when I was young and only recently proudly participated in my citizenship ceremony having lived here my whole life.
I wanted to find a way to visual connect with the American past. I built this solo project in five days, it normalizes and massages data from the Harvard Art Museum API to feed a React-based timeline visualization tool for historical photos by US state, utilizing Redux for global state control.
It wasn’t without struggle, the Harvard API has provides a deeply variable nested object return dependent on the type of art being accessed. It also has large gaps in available meta-data for the pieces, creating limited options by which to create causal, meaningful groupings.
Ultimately however, it came together to create a fun, interactive platform by which people can explore the history of their state.
React (Class-Based)
React Router
Redux
SASS
Jest
Enzyme
Coded as part of a two-day, two-night activism hackathon, Activism Atlas was built at the request of a non-profit who found themselves regularly storing client contact data in less-than-ideal mediums such as Google Sheets. We developed a CRM to store user contact data which can be tagged and filtered by activism campaigns for easy tracking and outreach.
I acted as a technical team lead for our team of five, comprised of four Front End developers (myself included) and one Back End developer. As a result, in between coordinating sprints, I jumped in on the Python and Django Back End to assist.
The project was not without struggles, a large portion of time ended up sunk into dev-ops with many team members struggling with their local Python and Postgres environment configurations.
React (Class-Based)
Bootstrap
Python
Django
As we reached our final project of the bootcamp the full weight of COVID-19 was starting to bear down on society. Everyone was afraid for the wellbeing of themselves and their family, people in the class were unsure whether they’d find employment or face financial ruin. My team of four would then embark on a project that could well have broken us, where everything that could go wrong, did. The truest embodiment of Murphys law.
Among us two parents burdened to try find schedule balance with now homebound children. Ironically we’d be creating a self-care app, that looks to automatically schedule guilt free self-care tasks into your already jam packed google calendar.
Along the way we’d have to rebuild the React Native Front End four times due to Google OAuth dead-ends. We’d have to rebuild the Back End twice for similar conflicts with user sessions and Graph QL. All the while the team kept in spirit, kept in open communication, and cheerfully and supportively powered through setback after setback to reach a solid MVP.
While we might not have landed where we wanted, I can honestly say I’m more proud of that journey and that team more than I am of any other project.
React Native
Apollo/GraphQL
React Test Renderer
Travis CI
Expo
Google OAuth
My mind is often drifts with hyperactivity. I find I stay more engaged if I perform simple mechanical tasks in the background of whatever I'm doing.I built a very simple arrow key fidget game to funnel that passive energy.
This was a basic hackathon project, built in four hours. It served as good practice on defining a baseline MVP and then shooting for that, with outlined extensions available. I had hoped to get a points shop open, to get more dynamic animations in place, but ultimately had to reign those in to create something concrete and usable.
The struggle came from the implementation of a custom hook to track user key stroke input, something I had set as a learning goal for the project. It took a variety of implementations to prevent an infinite loop of state refreshes. Creating dynamic styling for the arrow display was also a fun experiment.
Ultimately, this project placed third in the competition. Even in its simplicity, it’s a functional tool I still regularly turn to to manage hyperactivity in my day to day.
React (Hooks)
Redux
SASS
After working in JavaScript frameworks for long enough you can start to forget how much heavy lifting they’re doing. Starting at Turing, we were tested to start in that tribulation before we got to the good stuff. Three months in, this solo project was an exploration of that more fundamental form of development, built entirely using vanilla JavaScript and jQuery.
This project was built with a focus on Test Driven Design. While I’ve found TDD to be much more accessible in vanilla JavaScript than it is with a more complex framework, stateful tracking and effective single page display was quickly becoming unwieldy for the scope of the operation at hand.
jQuery helped eliminate a slew of event listeners, but effective utilization of event bubbling was still key. Given there were many displays for many user types, effectively designing modular and reusable components while allowing enough variation and flexibility in those components proved difficult with a purely object oriented structure.
Still, ultimately the project was a fun opportunity to work more closely with class design, experiment on some different modes of styling, and work in a clean TDD workflow which made the struggle all worthwhile.
Javascript
jQuery
SASS
Mocha
Chai