GitHub Copilot Instructions - reddy.world

Instructions for working with the reddy.world personal portfolio website - a single-page application built with Vite, Lit Element web components, and Vaadin Router.

Tech Stack

Architecture

Component Structure

Every page is a Lit Element custom element in `src/components/`:

```typescript

import {css, html, LitElement} from 'lit';

import {customElement, property} from 'lit/decorators.js';

import langCSS from "../css/langCSS";

import mainCSS from "../css/mainCSS-refined";

@customElement('my-element')

export class MyElement extends LitElement {

@property({type: String}) myProp = 'default';

static get styles() {

return [langCSS, mainCSS, css`

/* component-specific styles */

`];

}

render() {

return html`<div>Content</div>`;

}

}

```

Design System

**Brand Colors (DO NOT CHANGE)**:

**CSS Modules**:

**Design Philosophy**: Elegant, refined, sophisticated - subtle borders (2-4px), smooth transitions (300ms), transparent backgrounds with gold tints.

Routing System

Routes defined in `src/vaadin-routing.js`:

```javascript

router.setRoutes([

{ path: '/bio', component: 'bio-element', name: 'bio-element' },

{ path: '/portfolio', component: 'portfolio-element', name: 'portfolio-element' },

{ path: '/', component: 'bio-element' },

{ path: '(.*)', component: 'not-found-element' } // MUST BE LAST

]);

```

**Adding a New Route**:

1. Create component: `src/components/my-page.ts` with `@customElement('my-page-element')`

2. Import in `vaadin-routing.js`: `import './components/my-page'`

3. Add route BEFORE the `(.*)` catch-all route

4. Use `<a href="/path">` for navigation (client-side routing)

Development Workflow

Starting Dev Server

**CRITICAL**: Use the shell script due to Windows file permission issues:

```bash

./dev.sh

```

**DO NOT** run `npm run dev` directly.

Building & Deployment

```bash

Build for production

npm run build

Manual Firebase deploy

firebase deploy --only hosting

```

**Automated Deployment**:

Testing

```bash

npm test # Run all tests

npm run test:ci # CI mode (fail-fast)

```

**Test Structure**:

Key Files & Directories

UI Component Library

Located in `src/components/ui/`:

```html

<gh-button variant="primary" size="md">Click Me</gh-button>

<gh-card variant="bordered" hoverable>Content</gh-card>

<gh-input type="text" placeholder="Enter text"></gh-input>

<gh-link href="/path">Navigation</gh-link>

```

Components: `gh-button`, `gh-card`, `gh-input`, `gh-link`, `gh-text`, `gh-nav`, `gh-layout`

See `src/components/ui/README.md` for documentation.

Important Guidelines

1. **Component Patterns**:

- Always import `langCSS` and `mainCSS-refined` (or `mainCSS`) in that order

- Use `@customElement` decorator for custom elements

- Use `@property` decorator for reactive properties

2. **Routing**:

- 404 catch-all route `(.*)` MUST be last

- Import new components in `vaadin-routing.js` before adding route

3. **Styling**:

- Preserve Adobe Garamond font (brand identity)

- Keep gold/silver color palette

- Use subtle styling: 2-4px borders, 300ms transitions

- Use CSS custom properties from mainCSS-refined

4. **Development**:

- Use `./dev.sh` script (not `npm run dev`)

- OneDrive sync can cause file permission errors

- Vite config: root is `src/`, public is `public/`, output is `dist/`

5. **Deployment**:

- Firebase serves from `dist/` with SPA rewrite rules

- GitHub Actions handles CI/CD automatically

- Tests must pass before merge

Common Tasks

Add a New Page

1. Create `src/components/my-page.ts`

2. Import in `vaadin-routing.js`

3. Add route before `(.*)`

4. Component imports `langCSS` + `mainCSS-refined`

Update Global Styles

Add UI Component

File Permission Issues

OneDrive can lock files. Workarounds:

Firebase Configuration