Skip to content

Commit

Permalink
update config
Browse files Browse the repository at this point in the history
  • Loading branch information
wheattoast11 committed Nov 30, 2024
1 parent faac890 commit 88b31b8
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 32 deletions.
16 changes: 5 additions & 11 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Cormorant+Garamond:ital@1&display=swap" rel="stylesheet">

<!-- CSS -->
<link rel="stylesheet" href="/style.css">
Expand All @@ -25,17 +24,12 @@
<link rel="manifest" href="/site.webmanifest">

<!-- Preload critical fonts -->
<link
rel="preload"
href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Audiowide&family=Cormorant+Garamond:ital@1&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&family=Cormorant+Garamond:ital@1&display=swap" media="print" onload="this.media='all'">

<!-- Fallback for no JavaScript -->
<noscript>
<link
href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap"
rel="stylesheet"
>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&family=Cormorant+Garamond:ital@1&display=swap">
</noscript>
</head>
<body>
Expand Down
45 changes: 30 additions & 15 deletions src/pages/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,53 @@ import { CardEffects } from '../ui/CardEffects';
import { ScrollEffects } from '../ui/ScrollEffects';

function Home({ onMount }) {
const [isLoading, setIsLoading] = useState(true);
const [isLoaded, setIsLoaded] = useState(false);
const sceneRef = useRef(null);
const scrollEffectsRef = useRef(null);
const cardEffectsRef = useRef(null);

useEffect(() => {
if (!isLoaded) {
onMount?.();
setIsLoaded(true);
const initializeApp = async () => {
try {
onMount?.();

// Initialize Three.js scene
const container = document.getElementById('bg-canvas');
if (container) {
sceneRef.current = new Scene(container, {
width: window.innerWidth,
height: window.innerHeight
});
sceneRef.current.animate(0);
}

// Initialize Three.js scene
const container = document.getElementById('bg-canvas');
if (container) {
sceneRef.current = new Scene(container, {
width: window.innerWidth,
height: window.innerHeight
});
sceneRef.current.animate(0);
}
// Initialize effects
scrollEffectsRef.current = new ScrollEffects();
cardEffectsRef.current = new CardEffects();

setIsLoaded(true);
} catch (error) {
console.error('Initialization error:', error);
} finally {
setIsLoading(false);
}
};

// Initialize effects
scrollEffectsRef.current = new ScrollEffects();
cardEffectsRef.current = new CardEffects();
initializeApp();

return () => {
sceneRef.current?.dispose();
scrollEffectsRef.current?.dispose();
// CardEffects doesn't need disposal as it only adds event listeners
};
}
}, [isLoaded, onMount]);

if (isLoading) {
return <LoadingState />;
}

const containerVariants = {
hidden: { opacity: 0 },
visible: {
Expand Down
19 changes: 16 additions & 3 deletions src/three/Scene.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,25 @@ export class Scene {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, dimensions.width / dimensions.height, 0.1, 1000);
this.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
antialias: window.devicePixelRatio < 2,
powerPreference: "high-performance",
alpha: true,
stencil: false,
depth: true
});

// Optimize renderer
this.renderer.setSize(dimensions.width, dimensions.height);
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
this.renderer.shadowMap.enabled = false;

container.appendChild(this.renderer.domElement);

// Reduce post-processing quality on mobile
const isMobile = window.innerWidth < 768;
const bloomStrength = isMobile ? 0.3 : 0.5;
const bloomRadius = isMobile ? 0.3 : 0.4;

this.composer = null;
this.flowField = new FlowField();
this.spheres = new Spheres();
Expand All @@ -24,7 +37,7 @@ export class Scene {
this.targetRotation = new THREE.Vector2();

this.lastTime = 0;
this.frameInterval = 1000 / 30; // Target 30 FPS
this.frameInterval = 1000 / (isMobile ? 30 : 60);

this.frames = 0;
this.lastFpsUpdate = 0;
Expand Down
7 changes: 4 additions & 3 deletions vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,11 @@ export default defineConfig({
headers: {
'Content-Security-Policy': `
default-src 'self';
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline';
script-src 'self' 'unsafe-inline' 'unsafe-eval';
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com;
img-src 'self' data: blob:;
font-src 'self';
connect-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com;
object-src 'none';
base-uri 'self';
form-action 'self';
Expand Down

0 comments on commit 88b31b8

Please sign in to comment.