Jonathan Scott
Web developer building modern and responsive websites
New to Contra
Jonathan is ready for their next project!
I just launched my new web design site
Built from the ground up with JavaScript, semantic HTML5, and modular CSS, this site showcases:
Custom CSS animations
AOS (Animate on Scroll)
Cloudflare deployment with my own domain
Mailgun integration via Node.js API for email handling
I built this project with accessibility in mind from the very first line of code, earning a 9.7 AIM score with zero errors. Every semantic tag, ARIA role, and contrast decision was made to support inclusive, intuitive experiences.
This site is more than a technical showcase; it’s a reflection of my design sensibility and engineering mindset, crafted to communicate through U/X, not just words. From scroll-triggered animations to subtle microinteractions, I’ve aimed to tell a story as the user scrolls down.
https://mjscott.dev/
19
118
Portfolio Website
Built with semantic HTML and CSS animations for polished interactivity, I also integrated JavaScript sprite animation in the hero section to support visual storytelling. I used Bootstrap for responsive layout and structure, added Open Graph tags and SEO metadata for better search visibility.
I’m excited to keep refining it as I explore new technologies and design strategies. https://portfolio.mjscott.dev/
20
121
This project was inspired by the emotional weight of handcrafted jewelry and evolved into a brand identity that reflects not only the artistry but also the personality of its creator. Through the pieces she designs, she evokes feeling and celebrates life’s milestones.
I used Figma during the design phase and built the project purely with semantic HTML and CSS. I added Open Graph tags and SEO metadata to improve search visibility, and managed the project using Git version control to track growth and iteration.
Easter Egg: If you're a fan of the J.R.R. Tolkien world. Scroll to the footer and click the “©” symbol. You may find something interesting. Move your cursor around inside it to ignite the fire that reveals content only flame can unveil.
momenti-unici.netlify.app (http://momenti-unici.netlify.app)
12
82
Back to Life Auto Body is a website built for my portfolio, this time for an auto body shop.
I used Figma to design the layout and built the color palette around the hero imagery for visual consistency.
The logo was intentionally imperfectly hand-drawn to avoid generic symmetry and give the brand personality.
Built with HTML, CSS, JavaScript, Bootstrap, and AOS for layout and animation.
Deployed via Netlify, version-controlled with GitHub, and enhanced with AI-generated images from Google AI Studio. 🔗 Live site: back-to-life-auto-body.netlify.app (http://back-to-life-auto-body.netlify.app)
20
123
Shaving Soap is a fictional barbershop website, as a portfolio project.
Built with HTML, CSS, and JavaScript, the site uses Bootstrap and AOS for layout and scroll animations. Responsive design was implemented via CSS @media queries. For deployment, I used Git for version control and hosted the site on Netlify, including a fully functional contact form powered by Netlify’s form detection—no backend required.
All images were generated with Google AI Studio and refined in GIMP. The logotype was sketched by hand, digitized, and vectorized in Inkscape.
shaving-soap.netlify.app (http://shaving-soap.netlify.app)
12
80