A modern, responsive single-page website designed and developed for a professional tattoo artist. The website showcases the artist's work, provides information about services, and facilitates client contact.
The entire design concept was created from scratch using Figma, focusing on:
- Clean and modern aesthetics
- User-friendly interface
- Professional presentation
- Consistent branding
- Mobile-first approach
The color scheme was carefully chosen to reflect professionalism and artistry:
- Primary Color (#212021): Represents sophistication and professionalism
- Secondary Color (#F3D914): Adds vibrant contrast and draws attention to key elements
- React.js
- CSS3 with custom properties
- JavaScript (ES6+)
- Figma for UI/UX design
- Adobe Photoshop for image optimization
- Google Maps API for location services
- @react-google-maps/api for Google Maps integration
- @fortawesome for icons
- @fontsource/bebas-neue for typography
- Responsive design that works on all devices
- Interactive portfolio gallery with modal view
- Google Maps integration for business location
- Client testimonials section
- WhatsApp integration for easy contact
- Instagram portfolio integration
- Pricing information section
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/yourusername/natan-tattoo.git- Install dependencies
cd natan-tattoo
npm install- Start the development server
npm startnpm run build- Custom breakpoints for different screen sizes
- Mobile-first approach
- Flexible layouts using CSS Flexbox
- Interactive image gallery
- Modal view for detailed image viewing
- Smooth animations and transitions
- Interactive Google Maps
- Custom marker for business location
- Business hours and contact information
- Client reviews with profile pictures
- Star ratings
- Integration with Google Reviews
The website is fully responsive with specific optimizations for:
- Mobile phones (up to 480px)
- Tablets (up to 768px)
- Small laptops (up to 1024px)
- Larger screens (1024px+)
- Semantic HTML structure
- Optimized meta tags
- Proper heading hierarchy
- Alt text for images
- Fast loading times
- Optimized images
- Lazy loading for images
- Efficient CSS organization
- Minimized HTTP requests
This project is licensed under the MIT License.
- GitHub: @unimiadev
- Design inspiration from modern portfolio websites
- React.js community for excellent documentation
- Google Maps API documentation
- FontAwesome for icons