A modern, responsive single-page application showcasing the work and services of Vicentart, a professional tattoo artist based in New Port Richey, FL.
- Modern Design: Clean, professional layout with artistic typography
- Responsive Layout: Optimized for all devices and screen sizes
- Smooth Navigation: Single-page application with smooth scroll navigation
- Portfolio Gallery: Interactive image gallery showcasing tattoo artwork
- Contact Information: Easy access to booking and contact details
- Performance Optimized: Built with Vite for fast loading and development
- Frontend: React 19 + TypeScript
- Build Tool: Vite 7
- Styling: Tailwind CSS
- Fonts: Google Fonts (Cinzel, Roboto)
- Code Quality: ESLint + Prettier with StandardJS configuration
src/
├── components/
│ ├── NavigationBar.tsx # Fixed navigation bar
│ ├── PortfolioCard.tsx # Portfolio image component
│ └── index.ts # Component exports
├── assets/
│ └── images/ # Portfolio and profile images
│ └── index.ts # Image exports
├── App.tsx # Main application component
├── App.css # Global styles and font imports
└── main.tsx # Application entry point- Node.js (v18 or higher)
- pnpm (recommended) or npm
Clone the repository:
git clone <repository-url>
cd VicentArtTattooInstall dependencies:
pnpm installStart the development server:
pnpm devOpen http://localhost:5173 in your browser
pnpm dev- Start development serverpnpm build- Build for productionpnpm preview- Preview production buildpnpm lint- Run ESLint to check for code issuespnpm lint:fix- Automatically fix ESLint issues where possiblepnpm format- Format code with Prettierpnpm format:check- Check if code is properly formattedpnpm type-check- Run TypeScript type checkingpnpm check-all- Run all quality checks (TypeScript, ESLint, Prettier)
- Primary Font: Cinzel (elegant serif for headings)
- Secondary Font: Roboto (clean sans-serif for body text)
- Special Characters: Unicode styling for unique text effects
- Home: Hero section with artist introduction and booking information
- Portfolio: Gallery of tattoo artwork with hover effects
- Contact: Booking information and contact details
- About: Artist biography and philosophy
- Background logo pattern with opacity overlay
- Smooth hover animations and transitions
- Responsive image galleries
- Fixed navigation with smooth scroll
This project is configured with:
- ESLint with StandardJS configuration (
eslint-config-love) for TypeScript/React - Prettier for code formatting with StandardJS-compatible settings
- TypeScript with strict type checking
The project includes VS Code settings that will:
- Format code with Prettier on save
- Fix ESLint issues on save
- Provide proper TypeScript support
Install the recommended extensions for the best development experience.
- Location: 9117 Little Rd, New Port Richey, FL 34654
- Email: vicentartattoo@gmail.com
- Phone: 813-696-1137
- Booking: By appointment only
Please include in your message:
- A short description of your idea
- Desired size & placement
- Days of the week or specific dates that work for you
- Budget
- Cash App
- Zelle
- Apple Pay
- Venmo
- Cash (in-person at shop)
- Deposits: Required to confirm appointments (non-refundable)
- Design Process: Custom designs created before appointment
- Rescheduling: Second deposit required for date changes
- Cancellations: Please provide adequate notice
The website showcases Vicentart's expertise in:
- Hyperrealistic black and grey tattoos
- Vibrant color designs
- Custom artwork tailored to each client
- Personal storytelling through ink
pnpm buildThe build artifacts will be stored in the dist/ directory.
This project can be deployed to any static hosting service:
- Netlify: Drag and drop the
distfolder - Vercel: Connect your GitHub repository
- GitHub Pages: Use GitHub Actions for automatic deployment
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Vite Team for the excellent build tool
- Tailwind CSS for the utility-first CSS framework
- Google Fonts for the beautiful typography
- React Community for the robust ecosystem
Transforming personal stories into breathtaking pieces of art, one tattoo at a time.