My Portfolio
Developed a custom JavaScript drag-to-pan interaction for zoomed images displayed inside a jAlert modal. The feature tracks mouse movement events to enable smooth click-and-drag navigation across oversized images, updating scroll positions dynamically for intuitive panning. Implemented global mouse event listeners, state management for active drag sessions, and cursor feedback (grab/grabbing) to improve usability and mimic native image viewer behavior.
Meanwhile, the second image uses errors caused by invalid form details to prevent the details from being sent to the database. If all details are good, the details are sent.
Highlight One - Netmatters Website Copy
This project used HTML and SCSS. I discovered the services section behaved in two layout groups at different widths. My solution was splitting them into separate grids so each could respond independently — a different solution from the original site, but functionally effective.
Highlight Two - Javascript Array Gallery
This project uses; html, scss, and javascript. It was my first real project making use of javascript and jquery outside of using plugins, as well as my first time even touching apis. I think, even though I was learning as I was going, this project is the best indicator of my creativity.
Design wise, I am particularly proud of the folder-like aesthetic on the gallery. It makes use of jAlert's zoom plugin to allow me to position the images in a compact way, stacked ontop of one another, and allowing the user to click on the stack to expand it onto their page. This solved the problem of how ugly the site would look if 1 email had, say, 9 or 10 images attached.
Highlight Three - Admin Panel
One of these two images shows how I created my landing page using php, which showed all of the companies. In particular it shows the logo for a company, which is optional. I showed it because I came across an issue relating to the website breaking if the logo part was not buried in an if-statement.
The javascript image however is showing a design choice. It prevents the user from editing the company details immediately, requiring them to press a button that unlocks the forms. A problem that this accounts for is the fact that the other page involving forms (the creating company page) was also locking, I fixed that by improving my javascript to what you can see now.