Contact person: SvelteKit Conversion of Astro Project

Phone:Show

Email:Show

Location: Manchester, United Kingdom

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"Project Overview & Current State
Goal: Convert an Astro project to SvelteKit while maintaining the original custom scroll behavior
and [login to view URL] Issue: Blank screen after conversion, despite all components being properly
converted.
Key Technical Challenges & Root Causes
1. Custom Scroll Logic Implementation
• Problem: The original Astro project uses a complex GSAP-based scroll system that creates a
fixed, full-viewport scrolling experience
• Current State: The scroll script ([login to view URL]) exists but may not be
executing properly
• What Freelancer Should Check:
• Verify GSAP plugins are properly registered (ScrollTrigger, ScrollToPlugin)
• Check if the script is loading in the correct order
• Ensure the mainWrap element is found by the script
• Debug the scroll trigger setup and animation timeline
2. CSS Layout Conflicts
• Problem: The fixed positioning and full-height sections may be conflicting with SvelteKit's
rendering
• Current CSS Structure:
.MainWrap {
height: 100vh;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.SectionLayout {
height: 100vh;
height: 100svh;
overflow-y: hidden;
}
• What Freelancer Should Check:
• Verify CSS is being applied correctly
• Check for CSS conflicts with SvelteKit's default styles
• Ensure viewport units work properly across browsers
3. Client-Side Rendering Issues
• Problem: React components (FloatingForm, LogoSlider) wrapped in {#if typeof window !==
'undefined'} may not render
• Current Implementation: Components are conditionally rendered client-side only
• What Freelancer Should Check:
• Verify React components are mounting properly
• Check for hydration mismatches
• Ensure proper client-side component loading
4. Asset Path Resolution
• Problem: Static assets (fonts, images) may not be loading correctly
• Current Setup: Fonts moved to static/fonts/, images in static/images/
• What Freelancer Should Check:
• Verify all asset paths are correct
• Check if fonts are loading (network tab)
• Ensure proper SvelteKit static asset handling
5. GSAP Integration with SvelteKit
• Problem: GSAP animations may not work properly in SvelteKit's SSR environment
• Current Implementation: Script loaded in onMount() in layout
• What Freelancer Should Check:
• Ensure GSAP is properly imported and configured
• Check if animations are running on the correct elements
• Verify timeline creation and execution
Specific Files to Focus On
Critical Files:
1. src/lib/scripts/[login to view URL] - Core scroll logic
2. src/routes/+[login to view URL] - Script loading and global styles
3. src/routes/+[login to view URL] - Main page structure
4. src/lib/layouts/[login to view URL] - Section wrapper
Potential Issues in Each File:
[login to view URL]:
• Element selectors may not match SvelteKit's DOM structure
• GSAP timeline may not be created properly
• Scroll trigger setup may be failing
+[login to view URL]:
• Script loading timing issues
• Global CSS conflicts
• Font loading problems
+[login to view URL]:
• Main wrapper structure may be incorrect
• Section ordering issues" (client-provided description)