Quickstart Guide

klef-sonatta-website/
├── index.html              # Main entry point - the complete homepage
├── favicon.ico             # Site favicon
├── README.md               # Project overview and instructions
└── test-load-basics.html   # Testing file for component loading

shared/components/
├── mega-menu/
│   ├── mega-menu.js        # Desktop navigation logic
│   └── mega-menu.css       # Navigation styles
├── search/
│   ├── search-system.js    # Search functionality
│   ├── filter-config.js    # Filter configuration
│   ├── query-parser.js     # Search query parsing
│   └── match.js            # Result matching logic
├── portfolio/
│   ├── portfolio-grid.js   # Grid layout and rendering
│   ├── portfolio-loader.js # Data fetching
│   ├── cover-hydrator.js   # Image loading optimization
│   └── tabs-navigation.js  # Portfolio filtering tabs
├── adaptive-sheet/
│   └── adaptive-sheet.js   # Bottom sheet (mobile) / side panel (desktop)
├── dynamic-island/
│   ├── dynamic-island.js   # Notification system
│   └── dynamic-island.css  # Island styles
└── hero/
    └── hero-animation.js   # Hero section animations

// From search-system.js
class SearchSystem {
  constructor() {
    this.initializeSearch();
    this.bindEvents();
  }
  
  async search(query) {
    const results = await this.filterContent(query);
    this.displayResults(results);
  }
}

// Configure which fields to search
export const searchConfig = {
  fields: ['title', 'excerpt', 'content'],
  minLength: 3,
  maxResults: 20
};

// From portfolio-grid.js
function renderPortfolioGrid(items) {
  const grid = document.querySelector('.masonry-grid');
  
  items.forEach(item => {
    const card = createPortfolioCard(item);
    grid.appendChild(card);
  });
  
  // Initialize lazy loading
  observeImages();
}

// From mega-menu.js
class MegaMenu {
  constructor() {
    this.isMobile = window.innerWidth < 768;
    this.init();
  }
  
  init() {
    if (this.isMobile) {
      this.initMobileMenu();
    } else {
      this.initDesktopMenu();
    }
  }
}

<!-- From index.html -->
<div class="hero-container">
  <div class="half-left">
    <h1 class="hero-title">
      <span class="word">
        <span class="letter">T</span>
        <span class="letter">r</span>
        <span class="letter">a</span>
        <!-- ... -->
      </span>
    </h1>
  </div>
  <div class="half-right">
    <div class="masonry-grid">
      <!-- Portfolio items -->
    </div>
  </div>
</div>

/* From index.html styles */
.carouselTrack {
  animation: infiniteLoop 40s linear infinite;
}

@keyframes infiniteLoop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

:root {
  --k-step-w: 21rem;   /* Step width */
  --k-num-size: 4rem;  /* Number indicator size */
  --k-gap: 40px;       /* Gap between steps */
}

.k-steps {
  display: flex;
  gap: var(--k-gap);
}

.k-step {
  width: var(--k-step-w);
}

# Start server on all network interfaces
python -m http.server 8000 --bind 0.0.0.0

# Access from mobile device on same network
# http://[your-computer-ip]:8000

# Create a feature branch
git checkout -b feature/new-component

# Make your changes
# ...

# Commit with descriptive messages
git add .
git commit -m "Add new portfolio filtering feature"

# Push to remote
git push origin feature/new-component