Zac Hogan - Web Developer

Web development is a fascinating process!

The combination of technical problem solving, watching complex interactive systems at work, and providing real-world experiences to users is incredibly fulfilling.

I'm looking for a Junior Frontend Developer role.

I've been messing with computers my entire life. From tinkering with Half Life 2 mods as a teenager to diving into game design and development at University, I've tried it all.

For the past few years I've been managing the systems, services, and technology for a public library Makerspace. My life with tech has been one of self-teaching, finding the solutions that help me to meet my goals, and fixing things.

Now I'm back behind the keyboard, wearing out my angle brackets and curly braces as I work towards entering the industry as a Frontend developer.

Web

project - www.zachoGAn.com

A little portfolio site about me. Largely designed and developed from scratch, and with the help of a couple of external libraries.

Responsibilities:
The whole shebang - code, visual design, and UX decisions. Libraries listed below.

Languages:
It's got all the basic ingredients - HTML, CSS, and JS.

Libraries:
Using

Glide.js for image carousel,
Anime.js for the more complex animations.

Stack:
The page was developed locally using a LAMP server on a Ubuntu VM.
There's no real stack for the backend - it's all hosted on Github Pages.

project - virtual innkeeper[alphA]

View Site
A platform that allows tabletop RPG game masters to generate and interact with virtual NPCs.

The basics:
This site queries NASA's public Mars Rover Photos API, extracts data from the resulting JSON, and presents it in list-form for easy navigation and viewing.

Responsibilities and tools

Frontend - HTML, CSS, JS, Fetch API
Backend - PHP, PHP-CURL
API Calls - OpenAI (DaVinci3-turbo)
Basic sysadmin - LAMP server on Digital Ocean

More detail:
Source code (doc root): Github repository
Source code (backend): available on request.
Roadmap: Github project

project - friends on mars

View Site
A gateway into viewing images taken by NASA's Curiosity rover.

Curiosity landed on Mars in 2012, and has taken over 60,000 images using its 17 cameras. Nearly 11 years later, it's still travelling!

The basics:
This site queries NASA's public Mars Rover Photos API, extracts data from the resulting JSON, and presents it in list-form for easy navigation and viewing.

Responsibilities and tools

Frontend - HTML, CSS, JS, AJAX
Backend - PHP
Visual development - Inkscape, Photoshop
Basic sysadmin - LAMP server on Digital Ocean

api calls

There are two key API calls to NASA's servers that need to be actioned. The mission manifest is fetched on page load, and this provides the start date of the rover's mission as well as the most recent database update date. This gives our date picker the correct bounds. The photo list is fetched when the user interacts with the form date-form.

Script fetchManager.js uses AJAX to query a PHP interface sitting in frontend ("frontController.php"). This interface filters queries by type ("manifest" or "photos") and then includes the nececessary file in backend ("getManifest.php" or "getPhotolist.php").

Queries to "frontController.php" of type "photos" require a second query ("date"). Both "getManifest.php" and "getPhotolist.php" simply call echo file_get_contents(), using the necessary URL for the NASA API call and appending my API key from Apache's env vars. "getPhotoList.php" also appends the user's specified date to the URL query.

Note that the above probably isn't entirely best practice, and I am seeking advice and further info on how to ensure my PHP is secure and robust.

frontend data management

When the API call for fetching photos is resolved, "fetchManager.js" processes the data for display. This includes pulling the relevant data for each photo entry from the resulting JSON (img URL, photo ID, camera name). This data is sorted into a photosObjFull object which contains nested keys for each camera type. Photos are sorted by camera type, so that they can be displayed on the page under the correct headings. HTML is then generated and rendered for the user. Users are notified if a date has no photos recorded for it (try 1st March 2023).

frontend design implementation

The background planet system is constructed through rotating divs and imgs in 3D. The moons are divs attached to an inclined div plane. The moons themselves are animated to be rotated using the inverse of the rotations applied to the rest of the system - this keeps them facing the camera at all times. The background planet's 'spin' is created using a scrolling background image within a circular div. The starfield is a simple HTML5 canvas. The number of stars generated scales with the size of the viewport.

frontend design considerations

Target audience is children. Key considerations include visual appeal (rounded shapes, a variety of colours, and big buttons), responsiveness, and accessibility.

major todos before full release:

Mobile performance (background animation, try shifting all to Canvas)
Modal image previews

More detail:
For source code see the Github repository for this project.

project - easyscrollto.js

A tiny JS library that I developed to quickly implement smooth scrolling to page sections driven by page links and buttons.

The basics:
This library links buttons with page sections via ID names. Once buttons or hyperlinks and their associated page sections have been named in accordance with this library's guidelines, the script facilitates smooth scrolling to each section from anywhere in the page, triggered by button click.

There's an adjustable topNavBarHeight value to help you ensure that any persistent navigation bars don't obscure page content.

This is designed to be plug-and-play. Integration into your project is as simple as adding a few ID names to your HTML.

Further development:
I'm aiming to make this library easier to implement for developers across various projects by adding methods to allow a wider variety of class naming methodologies, and removing the need to edit the easyScrollTo.js to achieve this.

More detail:
For more details about implementation, see the Github repository for this project.

skills

Languages:
HTML - CSS - Javascript
Libraries:
jQuery - Anime.js - Glide.js - more
Tools:
Git - Github - Terminal - VMs - Lighthouse/Web.dev - w3 Validator - Windows/MacOS/Linux
Methodologies:
BEM

Web-adjacent skills

Passion for tech:
Experienced in building hardware/software solutions with the end-user experience in mind. Passionate about learning new skills.
2D Design:
Experience in design and illustration, Bachelors degree in Visual Arts.
3D Design:
Experienced in designing, rendering, and basic animation in Blender 3D.
Video and Animation:
Experienced in Premiere Pro and After Effects.

other skills

I've done a broad range of work in my professional and hobbyist life that has given me cross-disciplinary skills and understanding.

makerspAce

management, development, and design

From 2018 - present I've been the Makerspace Librarian at Auckland Central City Library. I'm responsible for the varied and unusual technologies we host in the Makerspace, as well as the services, processes, and design of the space.

During my time managing the Makerspace I've used my technical knowledge and drive to self-learn to develop interactive digital services for customers, always with a focus on maintainability for our less-tech-savvy staff.

My development responsibilities have included:

Makerspace Public Computers: The selection and configuration of software and tools to convert Dell desktop workstations into public computers. The key drivers behind decisions were low costs, user safety, minimal maintenance, and user friendliness.
Digital Displays: The selection of hardware (Raspberry Pi) and configuration of software to enable Library staff to easily display video playlists on any HDMI-capable display. The key driver was user friendliness and the reduction of time spent daily setting up individual display TVs and projectors with their own disparate user interfaces.
Video Wall: We were provided with a 9-TV video wall running software that was over-engineered for our purposes and for the technical savvy of many of our staff. I worked through solutions to settle on an (admittedly hacky - the budget was $0) but robust and simple solution that ensured that any staff member could load content onto the video wall.

I have also worked to develop the Makerspace from a bland and uninviting space to a visually and audibly exciting area of the library through the creation and implementation of distinct branding, eye-catching and effective signage and brochures, and spatial design.

design and illustrAtion

I studied Visual Art at the University of Auckland, with a partial focus on illustration and concept art for media. I've developed skills in 3D design and rendering, as well as 2D painting and editing in Photoshop.

I have a good visual eye which has been invaluable in supporting design decisions in my personal web development work.