Skip to content

Commit e8d2697

Browse files
anugrahk21anugrahk21
committed
Optimizations to improve the Performance, Accessibility, and Best Practices scores.
1 parent 36d12ee commit e8d2697

4 files changed

Lines changed: 70 additions & 30 deletions

File tree

‎frontend/app/page.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,18 @@ Note: Built for AI Cybersecurity Research Portfolio.
1313

1414
import Link from "next/link";
1515
import { ArrowRight, Terminal } from "lucide-react";
16+
import dynamic from "next/dynamic";
1617
import Spotlight from "@/components/ui/Spotlight";
1718
import TextScramble from "@/components/landing/TextScramble";
18-
import PipelineVis from "@/components/landing/PipelineVis";
19-
import BentoGrid from "@/components/landing/BentoGrid";
2019
import CursorSpotlight from "@/components/ui/CursorSpotlight";
2120
import BreathingText from "@/components/landing/BreathingText";
2221
import SystemStatusBadge from "@/components/ui/SystemStatusBadge";
2322
import HeroBackground from "@/components/landing/HeroBackground";
2423
import BackToTop from "@/components/ui/BackToTop";
2524

25+
const PipelineVis = dynamic(() => import("@/components/landing/PipelineVis"), { ssr: false });
26+
const BentoGrid = dynamic(() => import("@/components/landing/BentoGrid"), { ssr: false });
27+
2628
export default function Home() {
2729
return (
2830
<main className="relative min-h-screen bg-black text-white selection:bg-white/20 overflow-x-hidden">
@@ -111,11 +113,11 @@ export default function Home() {
111113
{/* 4. Footer */}
112114
<footer className="py-10 border-t border-white/10 bg-black">
113115
<div className="container mx-auto px-4 flex flex-col sm:flex-row justify-between items-center gap-4">
114-
<div className="flex gap-6 text-zinc-500 text-sm font-mono">
116+
<div className="flex gap-6 text-zinc-400 text-sm font-mono">
115117
<a href="https://github.com/anugrahk21/Project-Cerberus" target="_blank" rel="noopener noreferrer" className="hover:text-white cursor-pointer transition-colors">GITHUB</a>
116118
<a href="https://www.linkedin.com/in/anugrah-k/" target="_blank" rel="noopener noreferrer" className="hover:text-white cursor-pointer transition-colors">LINKEDIN</a>
117119
</div>
118-
<div className="text-zinc-500 text-sm font-mono">
120+
<div className="text-zinc-400 text-sm font-mono">
119121
© 2025 PROJECT CERBERUS
120122
</div>
121123
</div>

‎frontend/components/landing/HeroBackground.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,29 @@ Note: Renders Spline scene as hero section background overlay.
1111
"use client";
1212

1313
import { useState } from 'react';
14-
import Spline from '@splinetool/react-spline';
14+
import dynamic from 'next/dynamic';
15+
16+
const Spline = dynamic(() => import('@splinetool/react-spline'), {
17+
ssr: false,
18+
loading: () => <div className="w-full h-full bg-transparent" />,
19+
});
1520

1621
export default function HeroBackground() {
1722
const [isLoaded, setIsLoaded] = useState(false);
1823

19-
return (
20-
<div className="absolute inset-0 z-0 flex items-center justify-center">
21-
<div className={`w-full h-full flex items-center justify-center transition-opacity duration-1000 ${isLoaded ? 'opacity-40' : 'opacity-0'}`}>
22-
<div className="w-[400px] h-[800px] md:w-full md:h-full flex items-center justify-center">
23-
<Spline
24-
scene="https://prod.spline.design/b7rLFPi8bmCZyCzC/scene.splinecode"
25-
onLoad={() => setIsLoaded(true)}
26-
/>
27-
</div>
24+
return (
25+
<div className="absolute inset-0 z-0 flex items-center justify-center">
26+
<div className={`w-full h-full flex items-center justify-center transition-opacity duration-1000 ${isLoaded ? 'opacity-40' : 'opacity-0'}`}>
27+
<div className="w-[400px] h-[800px] md:w-full md:h-full flex items-center justify-center">
28+
<Spline
29+
scene="https://prod.spline.design/b7rLFPi8bmCZyCzC/scene.splinecode"
30+
onLoad={() => setIsLoaded(true)}
31+
/>
2832
</div>
29-
{/* Edge gradients to hide Spline badge */}
30-
<div className="absolute top-0 right-0 bottom-0 w-48 pointer-events-none bg-gradient-to-l from-black via-black/50 to-transparent" />
31-
<div className="absolute left-0 right-0 bottom-0 h-48 pointer-events-none bg-gradient-to-t from-black via-black/50 to-transparent" />
3233
</div>
33-
);
34+
{/* Edge gradients to hide Spline badge */}
35+
<div className="absolute top-0 right-0 bottom-0 w-48 pointer-events-none bg-gradient-to-l from-black via-black/50 to-transparent" />
36+
<div className="absolute left-0 right-0 bottom-0 h-48 pointer-events-none bg-gradient-to-t from-black via-black/50 to-transparent" />
37+
</div>
38+
);
3439
}

‎frontend/components/ui/SystemStatusBadge.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,19 @@ interface SystemStatusBadgeProps {
1010

1111
export default function SystemStatusBadge({ status, className = "", suffix = "" }: SystemStatusBadgeProps) {
1212
const { isSystemOnline } = useSystemStatus();
13-
13+
1414
// Use provided status if available, otherwise use the hook's state
1515
const isOnline = status !== undefined ? status : isSystemOnline;
1616

1717
return (
18-
<div className={`flex items-center gap-2 px-3 py-1 rounded-full border transition-colors ${
19-
isOnline
20-
? "bg-green-500/10 border-green-500/20"
18+
<div className={`flex items-center gap-2 px-3 py-1 rounded-full border ${isOnline
19+
? "bg-green-500/10 border-green-500/20"
2120
: "bg-red-500/10 border-red-500/20"
22-
} ${className}`}>
23-
<div className={`w-1.5 h-1.5 rounded-full animate-pulse ${
24-
isOnline ? "bg-green-500" : "bg-red-500"
25-
}`} />
26-
<span className={`text-xs font-mono tracking-wider ${
27-
isOnline ? "text-green-400" : "text-red-400"
28-
}`}>
21+
} ${className}`}>
22+
<div className={`w-1.5 h-1.5 rounded-full animate-pulse ${isOnline ? "bg-green-500" : "bg-red-500"
23+
}`} />
24+
<span className={`text-xs font-mono tracking-wider ${isOnline ? "text-green-400" : "text-red-400"
25+
}`}>
2926
{isOnline ? "SYSTEM ONLINE" : "SYSTEM OFFLINE"}{suffix}
3027
</span>
3128
</div>

‎frontend/next.config.ts‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,43 @@
11
import type { NextConfig } from "next";
22

33
const nextConfig: NextConfig = {
4-
/* config options here */
4+
async headers() {
5+
return [
6+
{
7+
source: '/:path*',
8+
headers: [
9+
{
10+
key: 'X-DNS-Prefetch-Control',
11+
value: 'on'
12+
},
13+
{
14+
key: 'Strict-Transport-Security',
15+
value: 'max-age=63072000; includeSubDomains; preload'
16+
},
17+
{
18+
key: 'X-XSS-Protection',
19+
value: '1; mode=block'
20+
},
21+
{
22+
key: 'X-Frame-Options',
23+
value: 'SAMEORIGIN'
24+
},
25+
{
26+
key: 'X-Content-Type-Options',
27+
value: 'nosniff'
28+
},
29+
{
30+
key: 'Referrer-Policy',
31+
value: 'origin-when-cross-origin'
32+
},
33+
{
34+
key: 'Content-Security-Policy',
35+
value: "default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://va.vercel-scripts.com; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data:; font-src 'self' data:; connect-src 'self' https://*.vercel-analytics.com;"
36+
}
37+
]
38+
}
39+
]
40+
},
541
};
642

743
export default nextConfig;

0 commit comments

Comments
 (0)