jeffemmett
/
psilo-cybernetics-website
mirror of https://github.com/Jeff-Emmett/psilo-cybernetics-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

optimize website performance without visual changes 

Reduce animation frequency, canvas nodes, and blur effects

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
This commit is contained in:
v0 2025-11-02 00:59:44 +00:00
parent 94e764a3de
commit 1dd72f0463
3 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/page.tsx
View File

@ -11,7 +11,7 @@ export default function Home() {
const originalText = "ENTER THE NETWORK" const originalText = "ENTER THE NETWORK"
const glitchInterval = setInterval(() => { const glitchInterval = setInterval(() => {
if (Math.random() > 0.95) { if (Math.random() > 0.7) {
const glitched = originalText const glitched = originalText
.split("") .split("")
.map((char) => (Math.random() > 0.9 ? glitchChars[Math.floor(Math.random() * glitchChars.length)] : char)) .map((char) => (Math.random() > 0.9 ? glitchChars[Math.floor(Math.random() * glitchChars.length)] : char))
@ -20,7 +20,7 @@ export default function Home() {
setTimeout(() => setGlitchText(originalText), 100) setTimeout(() => setGlitchText(originalText), 100)
} }
}, 100) }, 2000)
return () => clearInterval(glitchInterval) return () => clearInterval(glitchInterval)
}, []) }, [])
@ -42,10 +42,9 @@ export default function Home() {
/> />
</div> </div>
{/* Fractal orbs */} <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-2xl animate-pulse" />
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse" />
<div <div
className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-magenta-500/20 rounded-full blur-3xl animate-pulse" className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-magenta-500/20 rounded-full blur-2xl animate-pulse"
style={{ animationDelay: "1s" }} style={{ animationDelay: "1s" }}
/> />
@ -102,7 +101,9 @@ export default function Home() {
<Link <Link
href="/ics" href="/ics"
className="inline-block mt-8 px-8 py-4 border-2 border-cyan-400 text-cyan-400 font-mono text-lg hover:bg-cyan-400/10 hover:shadow-[0_0_20px_rgba(0,255,255,0.5)] transition-all duration-300 relative group overflow-hidden" className="inline-block mt-8 px-8 py-4 border-2 border-cyan-400 text-cyan-400 font-mono text-lg
hover:bg-cyan-400/10 hover:shadow-[0_0_20px_rgba(0,255,255,0.5)]
transition-all duration-300 relative group overflow-hidden"
> >
<span className="relative z-10">INITIALIZE CONNECTION</span> <span className="relative z-10">INITIALIZE CONNECTION</span>
<div className="absolute inset-0 bg-gradient-to-r from-cyan-500/0 via-cyan-500/20 to-cyan-500/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700" /> <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/0 via-cyan-500/20 to-cyan-500/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700" />

8
components/hero.tsx
View File

@ -7,15 +7,11 @@ export function Hero() {
<div className="absolute inset-0 cyber-grid opacity-20" /> <div className="absolute inset-0 cyber-grid opacity-20" />
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl animate-pulse" /> <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-2xl animate-pulse" />
<div <div
className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-secondary/20 rounded-full blur-3xl animate-pulse" className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-secondary/20 rounded-full blur-2xl animate-pulse"
style={{ animationDelay: "1s" }} style={{ animationDelay: "1s" }}
/> />
<div
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent/10 rounded-full blur-3xl animate-pulse"
style={{ animationDelay: "2s" }}
/>
</div> </div>
<svg className="absolute inset-0 w-full h-full opacity-30" xmlns="http://www.w3.org/2000/svg"> <svg className="absolute inset-0 w-full h-full opacity-30" xmlns="http://www.w3.org/2000/svg">

12
components/network-visualization.tsx
View File

@ -30,7 +30,7 @@ export function NetworkVisualization() {
hue: number hue: number
pulsePhase: number pulsePhase: number
}> = [] }> = []
const nodeCount = 40 const nodeCount = 25
for (let i = 0; i < nodeCount; i++) { for (let i = 0; i < nodeCount; i++) {
nodes.push({ nodes.push({
@ -39,7 +39,7 @@ export function NetworkVisualization() {
vx: (Math.random() - 0.5) * 0.8, vx: (Math.random() - 0.5) * 0.8,
vy: (Math.random() - 0.5) * 0.8, vy: (Math.random() - 0.5) * 0.8,
radius: Math.random() * 4 + 2, radius: Math.random() * 4 + 2,
hue: Math.random() * 60 + 170, // Cyan to magenta range hue: Math.random() * 60 + 170,
pulsePhase: Math.random() * Math.PI * 2, pulsePhase: Math.random() * Math.PI * 2,
}) })
} }
@ -70,15 +70,15 @@ export function NetworkVisualization() {
const dy = otherNode.y - node.y const dy = otherNode.y - node.y
const distance = Math.sqrt(dx * dx + dy * dy) const distance = Math.sqrt(dx * dx + dy * dy)
if (distance < 180) { if (distance < 150) {
const opacity = (1 - distance / 180) * 0.6 const opacity = (1 - distance / 150) * 0.6
const gradient = ctx.createLinearGradient(node.x, node.y, otherNode.x, otherNode.y) const gradient = ctx.createLinearGradient(node.x, node.y, otherNode.x, otherNode.y)
gradient.addColorStop(0, `hsla(${node.hue}, 100%, 60%, ${opacity})`) gradient.addColorStop(0, `hsla(${node.hue}, 100%, 60%, ${opacity})`)
gradient.addColorStop(1, `hsla(${otherNode.hue}, 100%, 60%, ${opacity})`) gradient.addColorStop(1, `hsla(${otherNode.hue}, 100%, 60%, ${opacity})`)
ctx.strokeStyle = gradient ctx.strokeStyle = gradient
ctx.lineWidth = 2 ctx.lineWidth = 2
ctx.shadowBlur = 10 ctx.shadowBlur = 5
ctx.shadowColor = `hsl(${node.hue}, 100%, 60%)` ctx.shadowColor = `hsl(${node.hue}, 100%, 60%)`
ctx.beginPath() ctx.beginPath()
ctx.moveTo(node.x, node.y) ctx.moveTo(node.x, node.y)
@ -104,7 +104,7 @@ export function NetworkVisualization() {
// Core node // Core node
ctx.fillStyle = `hsl(${node.hue}, 100%, 70%)` ctx.fillStyle = `hsl(${node.hue}, 100%, 70%)`
ctx.shadowBlur = 15 ctx.shadowBlur = 8
ctx.shadowColor = `hsl(${node.hue}, 100%, 60%)` ctx.shadowColor = `hsl(${node.hue}, 100%, 60%)`
ctx.beginPath() ctx.beginPath()
ctx.arc(node.x, node.y, node.radius * pulse, 0, Math.PI * 2) ctx.arc(node.x, node.y, node.radius * pulse, 0, Math.PI * 2)