I'm Martyn, a web developer with Cursive, a web design & software development agency in York, UK.
I like to build fun, responsive & accessible websites with stuff like Vue, Sass, Node, Wagtail and Django. I enjoy creating sites with a sense of character and humour, and I have a special interest in animations and UI powered by JavaScript and CSS.
After taking an online full-stack web developer course in 2018, I fell in love with the magic of CSS and its power to create illustrations and animations. I subsequently left my career in bookselling in 2019, and found my calling as a front end web developer, where I can get greative and unleash my true nerd self.
Take a look below at some of my personal projects, and feel free to get in touch with me, if you like.
If you prefer a more condensed look at my portfolio, you can view my CV here.
GSAP / SASS / JavaScript / HTML / Git / Netlify / Codepen
The site you're on! A colourful redesigned portfolio site with tons of SASS and JavaScript animation.
This site was built in June/July 2020 as a redesign of my previous portfolio site, sharing the same basic markup but with a dramatically colourful and playful redesign.
I documented the redesign on a blog, something I think I'll continue to do going forward. I found it an incredibly gratifying experience and, combined with Codepen prototyping, this helped me record my thought process and improve my coding practices.
Both the hero and section elements make heavy use of GSAP 3, and their ScrollTrigger plugin in particular. This is most prominent in the hero element where a combination of SplittingJS, ScrollTrigger, randomly generated GSAP tweens and random colour styles come together to create a bold scroll-based animation. Sections also have GSAP timelines with ScrollTriggers, and their headers share the hero's randomised styles.
This is my first project developed entirely with SASS, using VSCode and a live compiler for development.
View Source on Github View Development Blog View Development Pens on Codepen
React / Redux / React-Router / Node / Express / Mongoose / MongoDB Atlas / CSS / Codepen / Heroku / Git
A full-stack eCommerce React app interacting with a MongoDB API through async Redux axios calls.
The front end design is built using a theme developed through Codepen prototyping using CSS root variables and style resets to ensure consistency. The site uses reusable components and responsive component rendering with React-Router for navigation. State is managed thoughout the app by Redux for data such as API calls, local storage, wishlist and cart management, The back end runs on MongoDB Atlas via Heroku, and uses multiple API end points and model cross-referencing to give consistent and easily modifiable data.
Initially created while learning React, this site continues to develop as I learn more, with a list of features in progress in the site's repo readme.
As a Strange Industries site, the client is a fictional company. In this instance, Strange Flora is an eCommerce site selling various plants and potions not recommended for human consumption.
React / Redux / React-Router / MongoDB Atlas / Mongoose / Express / Node / Bootstrap 4 / Heroku / Git
A MERN stack Twitter clone app with landing, authorisation, users and messages, with Redux handling API calls to a Mongo/Express/Node backend.
The front end is built off Bootstrap, customised to give a synthwave aesthetic.
The back end is an API running off Heroku and MongoDB Atlas and interacts with the frontend via asyncronous axios calls through Redux actions. Authorisation uses JSON web tokens and local storage.
Built initially as a basic site through Udemy's Advanced Developer Bootcamp, I have already made significant aesthetic changes and plan to keep expanding backend funcitonality based on Twitter's model.
Bootstrap 4 / GSAP / Mongoose / MongoDB Atlas / Express / Node / Passport / Heroku / Git
An extensive full stack real estate website with listings, users, admins and comments databases.
The front end is built on Bootstrap in EJS, with colour palette and styling changes. The landing page contains interactive JavaScript GSAP animation, and features are shown/hidden as appropriate for different levels of user.
The back end is built on Node.js, using packages such as Express for routing, Passport for user authentication, Mongoose for Mongo integration, Body Parser for passing parameters and Dotenv for hidden variables.
The site contains fully RESTful routing for listings and comments, and partial routing on users and admins.
As a Strange Industries site, the client is a fictional company with questionable practices. In this instance, Strange Estates is a shady lettings agency with user interactions for listing reviews and administration roles.
GSAP / SASS / API interaction / Anime.js / CSS Animation / JavaScript Animation
Small projects, prototyping, and generally a playground for me to try new libraries and preprocessors.
I use Codepen extensively for small projects and development of site components. The ease of integration with libraries & preprocessors make it an ideal playground for me to try new ideas and take part in weekly challenges.
Most pens are front end orientated pieces and animations. These frequently use JavaScript libraries such as GSAP, Anime.js, & jQuery, and preprocessors SASS and PUG.
My portfolio there also contains online course excercises and FCC projects, along with API projects using AJAX, JSON & AXIOS requests
View Profile View Codepen Challenge Collection View GSAP Animation Collection View All Collections
GSAP / Extensive CSS / JavaScript / Intersection Observer / HTML / Git
My old personal portfolio site, built using minimal plugins, as I was aiming to build as much as I could myself.
The hero section makes extensive use of the GSAP JavaScript library to run complex CSS and SVG animation. The header title animation is randomly generated, so every page load gives a different sequence of letter animations. Other sections use GSAP and CSS animations, combined with Intersection Observer to play or stop animations on scroll.
The site reflected my learning of methodoligies such as the BEM naming convention, using Git for development and continuous deployment though GitHub.
View Site View Source on Github View Development Pens on Codepen
Email me at startinmerc@gmail.com.
You can find me on Github and LinkedIn.
I'm a fairly regular Instagram user, and sometimes throw Twitter a bone, although it's mostly out-of-context remarks on road cycling to be honest.