Expert guidance for developing and maintaining Sidney Kylie's React portfolio website featuring architectural project showcases with advanced scroll animations and interactive transitions.
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.
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.
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
```
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
```
The application uses React Router with these routes:
Main page with horizontal scrolling:
Dual-mode component that can render as standalone page or modal:
Global click effect:
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',
}
```
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
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
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 */
```
```javascript
const titleProgress = Math.min(Math.max(scrollY / windowHeight, 0), 1);
// Image stays fixed while titleProgress < 1, then becomes absolute
```
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;
```
Projects are defined in:
Currently only project ID `1` (Casa Terra 027) has complete data including:
**IMPORTANT**: All user-facing text must be in Spanish.
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`
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
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
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/sidney-kylie-portfolio-development/raw