TATTOO SK WORKSHOP

View the live project here.

⇮

Introduction

This Full Stack Django project was created for a Tattoo artist business in Norway. The backend is built with Django framework and the frontend is built with HTML, CSS, JavaScript and HTMX. Combined with Nginx web server and Gunicorn web server for production environment. The website is translated into two languages English and Norwegian. The website is designed to be easy to navigate and to locate information about products and services.

Github repository: https://github.com/rp42dev/TattooSkWorkshop Live Site: https://tattooskworkshop.no

Main Technologies: HTML, CSS, JavaScript, Python+Django, Nginx, HTMX

⇮

UX

The website needs to enable the User to:

1. Navigate the website and to locate information about products and services.
2. To view the tattoo work of the artist in a gallery.
3. To be able to connect with Tattoo artist on Social media.
4. To be able contact for session or consultation appointment.
5. To locate easily Contact and support details.

The website needs to enable the company to:

1. Drive new customers to the website and retain existing costumers.
   • Search Engine Optimization (SEO) - Improve search engine rankings.
2. Provide user with structured information about products and services.
   • User Experience (UX) - Improve user experience.
3. Build trust with customers - Providing with social media links.
   • Social Media - Improve social media presence.
4. Customer Support – Improve customer satisfaction through better service.
   • Customer Support - Contact details and support.

The website needs to enable the Admin to:

1. Manage the website content and images.
2. Add or update content SEO Tags.

⇮

Scope

Functionality Requirements

• The website needs to be easy to navigate and to locate information about products and services.
• The website needs to be easy to connect with Tattoo artist on Social media.
• The website needs to be easy to contact for session or consultation appointment.
• The website needs to be easy to locate easily Contact and support details.
• The website needs to be easy to find the Tattoo shop location and map.
• The website needs to show the tattoo work of the artist.

Content Requirements

• The website needs to have a hero video.
• The website needs to have a large responsive title and subtitle.
• The website needs to have a image gallery.
• The website needs to have a about section.
• The website needs to have a social media links.
• The website needs to have a contact details.
• The website needs to have a map with location.
• The website needs to have a tattoo prices table.
• The website needs to have a FAQ section.
• The website needs to have a contact form.

⇮

Structure

Information Architecture

• The website is divided into 2 sections.
  • Landing page
  • About page
  • Gallery page
  • Prices page
  • FAQ page

Interaction Design

• The website is designed to be easy to navigate and to locate information about products and services.
• The website is designed to be easy to connect with Tattoo artist on Social media.
• The website is designed to be easy to contact for session or consultation appointment.
• The website is designed to be easy to locate easily Contact and support details.
• The website is designed to be easy to find the Tattoo shop location and map.
• The website is designed to show the tattoo work of the artist.

⇮

Technologies and Frameworks

Markup/Scripting/Programming languages

• HTML5 Hypertext Markup Language (HTML)
• CSS3 Cascading Style Sheets (CSS)
• JavaScript Interactive functionality.
• Python Python for backend development

Frameworks, Libraries & Programs Used

• Google Fonts: Making the web more beautiful.
• Font Awesome: to add icons to the website..
• Git Git was used for version control.
• GitHub: used to store the projects code.
• VS Code gitpod Was used for codding.
• django framework Django high-level Python framework.
• HTMX HTMX is a set of extensions to HTML and the Fetch API that add capabilities commonly required of rich web applications.

Content

• The Font Awesome: icons where used throughout the project. Start Bootstrap template uset to start this project projects.

⇮

Features

Existing Features

• Navigation Bar - The navigation bar is bootstrap modal that expands on click from right side of the screen. It is fixed to the top of the page and is always visible. It contains links to the Home, About, Gallery, prices, faq pages. It also contains links to the social media sites.

• Home Page - The home page contains a hero video. Large responsive title and subtitle. It also contains links to the social media sites.

• About Page - The about page contains a description of the company. It also contains Each artist profile image and description. It also contains links to the social media sites.

• Gallery Page - The gallery page contains a thumbnail gallery of the artists work. Detailed view of the image is available by clicking on the image. Zoom and pan functionality is available on the detailed view.

• Prices Page - The prices page contains a table with the prices for the services.

• FAQ Page - The FAQ page contains a list of frequently asked questions, with answers. Bootstrap accordion is used to display the questions and answers.

• Contact Modal - The contact modal contains a form for the user to fill out. The form contains a name input field, email input field, text area and a submit button. The form is validated using HTML5 and Js validation.

Functionality

• Text scaling - The text is responsive and scales with the browser window size. Jquery is used to scale the text.
• Images Resizing - The images are responsive cropped and resized do different sizes in two different formats.
• Lazy Loading - The images are lazy loaded using the HTMX library combined with the Intersection Observer API.
• Zoom and Pan - The images are zoomable and pannable using the JavaScript.
• Pagination - The gallery is paginated on scroll using the HTMX library combined with Django pagination.
• Form Validation - The form is Django form is validated using Django form validation with Bootstrap 5 form validation.
• Form Submission - The form is submitted using the HTMX library combined with Django form validation.
• Seo - The website is optimized for SEO using custom Model that can be added to the any page and created or updated from the admin interface.

Features Left to Implement

• Blog - Blog page that will allow the user to leave comments.
• Newsletter - Newsletter subscription form that will allow the user to subscribe to the newsletter.

⇮