T!KAS — Artist Website

A modern, responsive website for music producer, songwriter and visual artist T!KAS.

Features

• 🎵 Music Integration - Spotify embed and album showcase
• 🎨 Visual Gallery - Lightbox gallery for artwork
• 📱 Fully Responsive - Mobile-first design
• ⚡ Fast & Modern - Smooth animations and transitions
• 🎯 SEO Optimized - Structured data and meta tags
• ♿ Accessible - ARIA labels and keyboard navigation

Quick Start

Option 1: Using npm (Recommended)

npm start

This will start a local server at http://localhost:8080 and open it in your browser.

For development with auto-reload:

npm run dev

Option 2: Using Python

If you have Python installed:

npm run serve
# or directly:
python -m http.server 8080

Then open http://localhost:8080 in your browser.

Option 3: Using Node.js http-server

npx http-server . -p 8080 -o

Project Structure

tikas/
├── index.html          # Main HTML file
├── css/
│   └── styles.css      # All styles
├── js/
│   └── main.js         # JavaScript functionality
├── assets/
│   ├── favicon.svg
│   ├── hero-illustration.svg
│   ├── highlights/     # Images folder
│   └── *.svg           # Placeholder images
└── package.json        # npm configuration

Customization

Update Content

• Edit index.html to change text, links, and structure
• Modify css/styles.css to adjust colors, fonts, and styling
• Update js/main.js for custom interactions

Color Scheme

The color scheme is defined in CSS variables at the top of css/styles.css:

:root {
  --accent: #e11d48;      /* Primary accent color */
  --accent-2: #b91c1c;    /* Secondary accent */
  --text: #ffffff;        /* Primary text */
  --muted: #9aa0a6;       /* Muted text */
  --bg: #000000;          /* Background */
  --panel: #0f0f10;       /* Panel background */
}

Adding Images

Place your images in the assets/highlights/ folder:

• hero.jpg - Hero section image
• cover1.jpg, cover2.jpg, cover3.jpg - Album covers
• highlight1.jpg, highlight2.jpg, highlight3.jpg - Gallery images

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT License - feel free to use this template for your own projects.

---

Built with ❤️ for T!KAS