Sidney Kylie Portfolio Development

Expert guidance for working with the Sidney Kylie Portfolio codebase - a React-based portfolio website for an architect featuring advanced scroll animations and interactive project showcases.

Project Overview

Sidney Kylie Portfolio is a React portfolio website focused on architectural project showcases with advanced scroll animations and interactive transitions. The site is primarily in Spanish and features interior design and sustainable architecture projects.

Development Commands

When working with this project, use these commands:

```bash

npm run dev # Start development server (Vite) - http://localhost:5173

npm run build # Build for production (outputs to /dist)

npm run lint # Run ESLint for code quality checks

npm run preview # Preview production build locally

```

Project Structure

Understand the codebase organization:

```

/

├── public/

│ ├── images/ # Static images (logo, profile photos, building renders)

│ ├── projects/ # Project-specific assets

│ │ └── casa-1/ # Casa Terra 027 project

│ │ ├── photos/ # Project photographs

│ │ ├── plans/ # Architectural floor plans

│ │ └── renders/ # 3D renders

│ └── video/ # Background video assets

├── src/

│ ├── components/ # Reusable React components

│ │ └── ClickSpark.jsx # Blue spark animation on click (canvas-based)

│ ├── pages/ # Page-level components

│ │ ├── LandingPage.jsx # Main page with horizontal scroll sections

│ │ └── ProjectDetail.jsx # Project showcase with sticky scroll effect

│ ├── styles/ # CSS Modules

│ │ ├── LandingPage.module.css

│ │ └── ProjectDetail.module.css

│ ├── App.jsx # Root component with React Router

│ ├── App.css # Global app styles (minimal)

│ ├── index.css # Base global styles

│ └── main.jsx # Application entry point

```

Key Technologies

Routing Structure

The application uses React Router with these routes:

Component Architecture

LandingPage.jsx

Main page with horizontal scrolling:

ProjectDetail.jsx

Dual-mode component that can render as standalone page or modal:

ClickSpark.jsx

Global click effect:

Styling Guidelines

CSS Modules Convention

Custom Color Palette

Use the custom Tailwind color palette:

```javascript

'arch-gray': {

50: '#fafafa',

100: '#f5f5f5',

200: '#e5e5e5',

300: '#d4d4d4',

400: '#a3a3a3',

500: '#737373',

600: '#525252',

700: '#404040',

800: '#262626',

900: '#171717',

}

```

Accent Color

Typography Standards

Design Patterns

Animation Implementation

Scroll Animations

1. **Horizontal Section Scroll**: CSS transition on `transform: translateX()`

2. **Vertical Carousel Effect**: Scale and opacity based on distance from center

3. **Sticky Image Scroll**: `position: fixed` switches to `absolute` based on scroll progress

4. **Apple-style Reveal**: Elements animate in based on `--progress` CSS custom property

Transition Patterns

1. **Circle Expansion**: Project click triggers expanding circle from thumbnail position

2. **Letter Float**: Individual letters animate with staggered delays

3. **Scroll Indicators**: Bounce and fade animations

Animation Values

Use these standard easing and timing values:

```css

/* Common easing */

cubic-bezier(0.4, 0, 0.2, 1) /* Standard ease */

cubic-bezier(0.25, 0.46, 0.45, 0.94) /* Smooth transitions */

cubic-bezier(0.76, 0, 0.24, 1) /* Dramatic ease */

/* Common durations */

0.3s - 0.4s /* UI feedback */

0.6s - 0.8s /* Page transitions */

2s - 8s /* Ambient animations */

```

Implementation Details

Scroll Handling

ProjectDetail Sticky Scroll Effect

```javascript

const titleProgress = Math.min(Math.max(scrollY / windowHeight, 0), 1);

// Image stays fixed while titleProgress < 1, then becomes absolute

```

Circle Expansion Transition

Responsive Breakpoints

Code Conventions

File Naming

Component Structure

Follow this standard structure:

```jsx

const Component = ({ props }) => {

// 1. State declarations

// 2. Refs

// 3. useEffect hooks

// 4. Event handlers

// 5. Return JSX

};

export default Component;

```

State Management

Comments

Project Data

Projects are defined in:

Currently only project ID `1` (Casa Terra 027) has complete data including:

Language Convention

**IMPORTANT**: All user-facing text must be in Spanish.

Development Workflow

When making changes to this project:

1. **Read before editing**: Always read the relevant component files before making changes

2. **Maintain animation patterns**: Preserve existing scroll and transition effects

3. **Test scroll behavior**: Verify horizontal and sticky scroll effects work correctly

4. **Check responsive design**: Test at 768px and 1024px breakpoints

5. **Preserve Spanish text**: Keep all user-facing content in Spanish

6. **Use CSS Modules**: Follow the established CSS Modules pattern for component styles

7. **Performance**: Use `passive: true` on scroll listeners, optimize animations with `requestAnimationFrame`

Common Tasks

Adding a New Project

1. Add project preview data to `LandingPage.jsx` project list

2. Add full project data to `ProjectDetail.jsx` (create new case in switch statement)

3. Add project assets to `/public/projects/{project-slug}/`

4. Test circle expansion transition from project grid to detail page

Modifying Scroll Animations

1. Locate scroll event listener in relevant component

2. Adjust progress calculation or easing function

3. Test at different viewport sizes

4. Ensure smooth 60fps performance

Adding New Sections

1. Update section count and navigation in `LandingPage.jsx`

2. Add new section JSX with appropriate `styles` classes

3. Create corresponding styles in `LandingPage.module.css`

4. Update horizontal scroll calculation if needed