Published on 2024-11-25 10:09 by Adam Surette
The Soodles Tattoo Website
The Soodles Tattoo website is a clean and responsive online presence for a Pittsburgh-based tattoo artist. The goal was to create a site that reflects the artistry and creativity of the brand while offering practical functionality for potential clients to explore services, browse a portfolio, and make appointments.
Core Features
Homepage: Showcases a featured tattoo design, an artist bio, and a call-to-action “BOOK NOW” button.
Flash Book: A gallery of tattoo designs that can be picked out without a design consultation.
Booking Form: Clients can easily schedule consultations or appointments through the embeded jotform page.
Challenges and Solutions
Mobile Responsiveness
Challenge: Ensuring the portfolio gallery and text content adjusted properly across devices without compromising the aesthetic. Solution: Used @media queries to dynamically scale images and adjust layouts for smaller screens. For example, all text now fits perfectly within the screen width without horizontal scrolling.
@media (max-width: 768px) {
.portfolio-item {
width: 100%; /* Ensures images scale to fit the viewport */
margin: 0 auto;
}
.text-content {
padding: 0 1rem; /* Avoids edge clipping */
}
}
Lessons Learned
• Client Feedback Is Key: Regular feedback from the artist ensured the website matched their vision and needs.
• Iterative Design Process: Multiple iterations of the portfolio gallery improved usability and visual impact.
• Astro.js Simplicity: Astro’s component-based structure made it easy to manage reusable sections like the navigation bar and footer as well as .
Potential Future Plans
• Online Store Integration: Add a shop for Soodle’s artwork, such as prints and linoleum stamped clothing.
• Blog Section: A space for the artist to share tattoo care tips and insights into their creative process.
Book Now
Are you looking to get inked? Visiting Pittsburgh any time soon?
Visit the Soodles Tattoo website to explore the portfolio and book your session today!
Check out her flash!
Written by Adam Surette
← Back to all projects