Instructions for working with reddy.world personal portfolio built with Vite, Lit Element, and Vaadin Router
Instructions for working with the reddy.world personal portfolio website - a single-page application built with Vite, Lit Element web components, and Vaadin Router.
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>`;
}
}
```
**Brand Colors (DO NOT CHANGE)**:
**CSS Modules**:
**Design Philosophy**: Elegant, refined, sophisticated - subtle borders (2-4px), smooth transitions (300ms), transparent backgrounds with gold tints.
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)
**CRITICAL**: Use the shell script due to Windows file permission issues:
```bash
./dev.sh
```
**DO NOT** run `npm run dev` directly.
```bash
npm run build
firebase deploy --only hosting
```
**Automated Deployment**:
```bash
npm test # Run all tests
npm run test:ci # CI mode (fail-fast)
```
**Test Structure**:
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.
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
1. Create `src/components/my-page.ts`
2. Import in `vaadin-routing.js`
3. Add route before `(.*)`
4. Component imports `langCSS` + `mainCSS-refined`
OneDrive can lock files. Workarounds:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/github-copilot-instructions-reddyworld/raw