Jason Rundell. Full stack development: Genesis Land. Full Stack Developer: Portfolio

Size: px

Start display at page:

Download "Jason Rundell. Full stack development: Genesis Land. Full Stack Developer: Portfolio"

Reynard Pope
5 years ago
Views:

Jason Rundell Full Stack Developer: Portfolio Full stack development: Genesis Land Architecture, Project Management, Client Support, LAMP, PHP, MySQL, WordPress, Amazon S3, Amazon EC2, Amazon RDS,

1 Jason Rundell Full Stack Developer: Portfolio Full stack development: Genesis Land Architecture, Project Management, Client Support, LAMP, PHP, MySQL, WordPress, Amazon S3, Amazon EC2, Amazon RDS, Amazon Route 53, Amazon CloudFront, HTML5, CSS3 (animations), Foundation 4, SASS, jquery, JavaScript, Google Maps API, Google Places API, Documentation, Responsive Design, Adobe Photoshop, Adobe Illustrator genesisland.com 52 Pick-up Inc. The Genesisland.com project was a complete redesign and rebuild of the Genesis Land Development Corporation website. I was responsible for architecting the back end, front end, deployment, testing, and debugging. WordPress was later introduced to incorporate a blog and then the entire website itself in order to allow the client to make content changes on their own. A MySQL (RDS) database captures form data and manages the real estate inventory. Google Maps and Google s Places API were used to show the user the development areas and places of interest. The website is responsive and utilizes a Foundation 4 CSS (SASS) framework. A challenging requirement of this website was that it needed to work well in Internet Explorer 8 and BlackBerry browsers.

Full stack development: Code Play Architecture, LAMP, PHP, CodeIgniter, MySQL, jquery, HTML, SASS, Ace Editor playbeta.codesummoner.com Code Summoner Combining inspiration from services like CodePen.

2 Full stack development: Code Play Architecture, LAMP, PHP, CodeIgniter, MySQL, jquery, HTML, SASS, Ace Editor playbeta.codesummoner.com Code Summoner Combining inspiration from services like CodePen.io, Ace Editor, Codeanywhere.com, and my wife (designer) needing an easy and fast place to paste code snippets, I began building Code Play: an easy solution for designers or developers to have a place on the web to paste code and save for easy sharing/embedding. Over time, I plan to make small improvements, richer features, and use this as my service of choice for prototyping front end code, storing front end fragments (e.g. boilerplates), and sharing code on the web. Current Features: HTML, JS, and CSS editor Preview and Embed modes JSON mode (for GET request functionality) Code editor themes Code editor font size settings Quick-create Official HTML5 Boilerplate Hash-based URL can be shared for others to view

3 Full stack development: Pocket Goblin and Goblin API Architecture, LAMP, PHP, CodeIgniter, MySQL, JSON, AngularJS api.pocketgoblin.com Code Summoner A JSON API built for a Magic: The Gathering (a card game owned by Hasbro) project I have been working on. The API is needed in order to make a thin client for users to search, find, trade, buy, and sell their Magic cards. In addition to the API for the cards, I built a custom Content Management System (CMS) for Magic: The Gathering cards which has the following features: Builds an index of cards by using CURL to get a result of a full card set from Saves raw CURL data Parses and extrapolates the important card information from the raw CURL data Validates extracted data and places into MySQL (images are also involved with the cards being built in MySQL, but the source of the images is different from comes from ) Publishing/unpublishing of sets and cards User management Full edit capabilities of sets and cards

4 Full stack development: Facebook Contest Platform Architecture, Project Management, Documentation, Amazon EC2, Amazon RDS, LAMP, PHP, MySQL, AJAX, jquery, Facebook API, Facebook Development, HTML5, CSS3, JavaScript, Google Maps API, Google Analytics API In my role as Social Media Technologist at Flight Centre, I was in charge of designing a technical solution from end-to-end for a platform which allowed a team of seven social media specialists around the world to produce one Facebook contest for their brand every month. I developed the following: Authored documentation on building a contest from beginning to end for the business and developers Authored documentation of platform s architecture and maintenance needs Presentations and reports for platform s performance and features in annual company meetings Provided 24/7 support for platform Collaboration with Australian technical support team Designed Amazon Web Services architecture and technology needs for tens of thousands of users per month and scaleable for much more Performed LAMP setup and system administrator tasks on Ubuntu server Along with integration with Google Analytics API for reporting, I developed a back end solution for reporting contest activity to moderate abuse Developed platform to allow different levels of user access so that social media specialists could not access administrator functionality, and also not access other running contests managed by other social media specialists

Full stack development: BestTravelJobEver.ca Architecture, LAMP, PHP, MySQL, AJAX, jquery, XHTML, CSS, JavaScript, Adobe Photoshop besttraveljobever.

5 Full stack development: BestTravelJobEver.ca Architecture, LAMP, PHP, MySQL, AJAX, jquery, XHTML, CSS, JavaScript, Adobe Photoshop besttraveljobever.ca (site no longer running) Flight Centre Canada The Best Travel Job Ever contest website was a very exciting and rewarding project that I worked on during my first year at Flight Centre Canada. My role was to architect, develop, and build this full-featured contest and community website. Features: Dynamic home page with the latest submissions (with filtering) and voting leaderboard Account registration for users who 1) just want to vote and 2) Have a video submission to submit and become a contestant Account login (for contestants to update their submission description, tags, title, and other details) Vanity URL created for each submission so that users can visit and share their unique profile page Voting mechanism with protection against multiple vote abuse and tracking for crunching data later on to find abuse A custom made Content Management System which allowed for: Editing content pages by users with admin access Moderating new contest submissions (with filtering) A dashboard for an overview on the health of the site

Full stack development: TreadWell.ca Project Management, Client Support, Hosting Management, LAMP, PHP, MySQL, WordPress, CSS3, LESS, jquery, FlexSlider 2, Adobe Photoshop treadwell.

6 Full stack development: TreadWell.ca Project Management, Client Support, Hosting Management, LAMP, PHP, MySQL, WordPress, CSS3, LESS, jquery, FlexSlider 2, Adobe Photoshop treadwell.ca Code Summoner A new business owner, Dwayne Stanshall, approached me for a corporate identity and website for Tread Well. I worked as the liaison between Dwayne and a talented designer, Donna Vitan, to produce a professional identity and online presence. I took steps to understand what Dwayne wanted his website to do for his business, and then gathered a selection of responsive WordPress template designs and selected the best, based on his needs and tastes. Once a theme was selected, I worked with the branding guidelines created by Donna and changed the theme s CSS and HTML to meet these design requirements. A custom, responsive, image slider was also created in order to achieve Dwayne s requirements for his home page. Along with training Dwayne and an associate on how to use WordPress (update pages, add new products and services), I created a website guide document for quick reference when common questions arise (i.e. how do I add an image or add a new slider).

Full stack development: Geolocation map marker prototype Architecture, LAMP, PHP, MySQL, Amazon S3, Amazon EC2, HTML5, JSON, jquery, JavaScript, Google Maps API, Panoramio API Flight Centre Canada

7 Full stack development: Geolocation map marker prototype Architecture, LAMP, PHP, MySQL, Amazon S3, Amazon EC2, HTML5, JSON, jquery, JavaScript, Google Maps API, Panoramio API Flight Centre Canada Having kept a great working relation with Flight Centre, they contacted me to prototype a solution that uses Google Maps and holds possibly hundreds of thousands of map markers made by users during a contest. I produced a contract that outlined the goals for the project and made a working solution that would group marker clusters in an intelligent way so that users can navigate and drill-down into areas of their choosing. Upon selecting a marker, I also prototyped a dynamic info bubble which shows a photo or video, comments, and ratings for the content. All code was made to be modular and also documented for Flight Centre s ease of use. Panoramio s API was used in order to obtain locations and images that would be relevant for testing and populating the world map. The aesthetic of the design is left intentionally as bare-bones, but HTML was structure for easy placement of CSS classes.

Mobile app development: Mega Scoreboard HTML5, CSS3, SASS, Foundation, jquery, PhoneGap Build Code Summoner From my experience with responsive website development, mobile app development has really

8 Mobile app development: Mega Scoreboard HTML5, CSS3, SASS, Foundation, jquery, PhoneGap Build Code Summoner From my experience with responsive website development, mobile app development has really started to interest me. With the launch of the PhoneGap Build service, I started building a web app using HTML5, CSS3, and JavaScript to port to Android, ios, and Windows. Mega Scoreboard is an application which will allow users to record the score of a game, save it for later, and share it.

Front end development: Sassy Swine AngularJS, Jade, CSS3 (animations), Grunt, SASS, JavaScript, GitHub, Foundation, Bootstrap github.com/jasonrundell/sassyswine sassyswine.

9 Front end development: Sassy Swine AngularJS, Jade, CSS3 (animations), Grunt, SASS, JavaScript, GitHub, Foundation, Bootstrap github.com/jasonrundell/sassyswine sassyswine.com Personal project Sassy Swine is my on-going project to create a front end development suite. Modeled after Todd Motto s FireShell, I tasked myself to better understand how a JavaScript taskrunner like Grunt, JS framework like Angular, templating framework like Jade, and SASS can be combined into a suite to easily start up a front end development environment.

10 Front end development: Taylor Lofts HTML5, CSS3 (animations), Foundation, jquery, JavaScript taylorlofts.ca 52 Pick-Up inc. The Taylor is a brand new condo development by Streetcar in Toronto. 52 Pick-Up was tasked to design and build a micro-site to allow users to register for information regarding the new condos. I was tasked to create the opening animation of a responsive grid of images and transition in the Taylor logo. I was given design direction, the image assets and then allowed to use my own sense of design and animation to bring the whole thing to life on the web. JavaScript is used to determine screen ratio and then randomly transition in squares in a grid formation.

Facebook app development: Skinny Cow Facebook Contest PHP, MySQL, Facebook API, Facebook Development, Twitter Bootstrap, jquery, JSON, HTML5, CSS3 Colour Social Colour Social reached out to me to

11 Facebook app development: Skinny Cow Facebook Contest PHP, MySQL, Facebook API, Facebook Development, Twitter Bootstrap, jquery, JSON, HTML5, CSS3 Colour Social Colour Social reached out to me to work together on a Facebook contest for Skinny Cow (a Nestle company). Colour provided the requirements, wireframes and design files, while I created the database, back end PHP code, and front end HTML and CSS for the Facebook app pages. Development ran over 3 weeks long and the contest ran for a month. The biggest challenge for this Facebook application was to make one code base that worked for both desktop and mobile devices and have front end code that was optimized for IE 7 browsers.

Front end development: Hydrogen PHP, HTML5, CSS3 (animations), Foundation, LESS, SASS, jquery/zepto, JavaScript, GitHub github.com/jasonrundell/hydrogen Demo: jasonrundell.

12 Front end development: Hydrogen PHP, HTML5, CSS3 (animations), Foundation, LESS, SASS, jquery/zepto, JavaScript, GitHub github.com/jasonrundell/hydrogen Demo: jasonrundell.com/hydrogen/ Personal project I take a mobile-first approach to all projects (big or small) and as an exercise to put my skills as a developer who can develop responsive websites to the test, in 2012, I tasked myself to create a one-page website that is responsive and easily customizable thanks to LESS CSS. In November 2013, I updated Hydrogen to version 2.0 and replaced LESS with SASS and Skeleton.js with Foundation 4.

Full Stack Web Developer

Full Stack Web Developer Course Contents: Introduction to Web Development HTML5 and CSS3 Introduction to HTML5 Why HTML5 Benefits Of HTML5 over HTML HTML 5 for Making Dynamic Page HTML5 for making Graphics