Skip to content

Commit a4bc5b2

Browse files
R3DRUN3R3DRUN3
committed
feat: update ui
Signed-off-by: r3drun3 <simone.ragonesi@protonmail.com>
1 parent 4a4f4a6 commit a4bc5b2

File tree

4 files changed

+55
-28
lines changed

4 files changed

+55
-28
lines changed

‎src/components/Header.astro‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,5 +46,13 @@
4646
</a>
4747
</li>
4848
</ul>
49+
<button id="theme-toggle" aria-label="Toggle theme" class="ml-4 p-2 rounded-full hover:bg-surface/20 transition-colors">
50+
<svg id="theme-icon-light" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hidden text-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
51+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v2m0 14v2m9-9h-2M3 12H1m15.36-7.36l-1.415 1.415M6.05 17.95l-1.415 1.415m12.728 0l1.415-1.415M6.05 6.05L4.636 4.636" />
52+
</svg>
53+
<svg id="theme-icon-dark" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hidden text-foreground" fill="currentColor" viewBox="0 0 20 20">
54+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
55+
</svg>
56+
</button>
4957
</nav>
5058
</header>

‎src/layouts/Base.astro‎

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Footer from '../components/Footer.astro';
88
<meta charset="UTF-8" />
99
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1010
<meta name="description" content="DarkVectr - Cybersecurity Consulting for the Bold" />
11-
<meta name="theme-color" content="#0d1117" />
11+
<meta name="theme-color" content="#121212" />
1212
<title>DarkVectr | Cybersecurity Consulting</title>
1313
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
1414
<link
@@ -26,7 +26,23 @@ import Footer from '../components/Footer.astro';
2626
document.documentElement.classList.remove("dark");
2727
}
2828
</script>
29-
<style>html { scroll-behavior: smooth; }</style>
29+
<style>
30+
html { scroll-behavior: smooth; }
31+
.parallax-shape { transition: transform 0.2s ease-out; }
32+
body::before {
33+
content: "";
34+
position: fixed;
35+
inset: 0;
36+
background: radial-gradient(circle at center, rgba(16,185,129,0.2), transparent 70%);
37+
pointer-events: none;
38+
animation: pulseGradient 6s ease-in-out infinite;
39+
}
40+
@keyframes pulseGradient {
41+
0% { opacity: 0.2; transform: scale(1); }
42+
50% { opacity: 0.05; transform: scale(1.2); }
43+
100% { opacity: 0.2; transform: scale(1); }
44+
}
45+
</style>
3046
</head>
3147
<body class="bg-background text-foreground font-sans">
3248
<Header />
@@ -37,23 +53,11 @@ import Footer from '../components/Footer.astro';
3753
<script>
3854
const htmlEl = document.documentElement;
3955
const toggle = document.getElementById("theme-toggle");
40-
const iconLight = document.getElementById("theme-icon-light");
4156
const iconDark = document.getElementById("theme-icon-dark");
42-
function updateIcons() {
43-
if (htmlEl.classList.contains("dark")) {
44-
iconLight.classList.add("hidden");
45-
iconDark.classList.remove("hidden");
46-
} else {
47-
iconLight.classList.remove("hidden");
48-
iconDark.classList.add("hidden");
49-
}
50-
}
5157
toggle.addEventListener("click", () => {
5258
htmlEl.classList.toggle("dark");
5359
localStorage.theme = htmlEl.classList.contains("dark") ? "dark" : "light";
54-
updateIcons();
5560
});
56-
updateIcons();
5761
</script>
5862
<!-- Particle background and tilt effects -->
5963
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tsparticles@2/tsparticles.min.js"></script>
@@ -95,12 +99,12 @@ import Footer from '../components/Footer.astro';
9599
fpsLimit: 60,
96100
particles: {
97101
number: { value: 50 },
98-
color: { value: '#58a6ff' },
102+
color: { value: '#10b981' },
99103
shape: { type: 'circle' },
100104
opacity: { value: 0.2 },
101105
size: { value: { min: 1, max: 3 } },
102106
move: { enable: true, speed: 1, outModes: 'out' },
103-
links: { enable: true, distance: 150, color: '#58a6ff', opacity: 0.1, width: 1 }
107+
links: { enable: true, distance: 150, color: '#10b981', opacity: 0.1, width: 1 }
104108
},
105109
interactivity: {
106110
detectsOn: 'canvas',
@@ -118,6 +122,21 @@ import Footer from '../components/Footer.astro';
118122
background: { color: 'transparent' }
119123
});
120124
}
125+
126+
// Parallax movement for hero background shapes
127+
const heroSection = document.getElementById('hero');
128+
if (heroSection) {
129+
const shapes = heroSection.querySelectorAll('.parallax-shape');
130+
heroSection.addEventListener('mousemove', e => {
131+
const { width, height, left, top } = heroSection.getBoundingClientRect();
132+
const x = ((e.clientX - left) / width - 0.5) * 2;
133+
const y = ((e.clientY - top) / height - 0.5) * 2;
134+
shapes.forEach(shape => {
135+
const speed = parseFloat(shape.dataset.speed) || 0;
136+
shape.style.transform = `translate(${x * speed}px, ${y * speed}px)`;
137+
});
138+
});
139+
}
121140
});
122141
</script>
123142
</body>

‎src/pages/index.astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import BaseLayout from '../layouts/Base.astro';
55
<BaseLayout>
66
<section id="hero" class="relative mb-16 text-center overflow-hidden">
77
<div id="tsparticles" class="absolute inset-0 z-0"></div>
8-
<div class="absolute inset-0 bg-gradient-to-r from-accent/50 via-accent/30 to-accent/50 blur-3xl animate-gradient"></div>
9-
<div class="absolute top-10 left-1/4 w-40 h-40 bg-accent/20 rounded-full animate-float delay-[0ms]"></div>
10-
<div class="absolute top-0 right-1/4 w-56 h-56 bg-accent/30 rounded-full animate-float delay-[2000ms]"></div>
11-
<div class="absolute bottom-10 left-1/2 w-64 h-64 bg-accent/10 rounded-full animate-float delay-[4000ms]"></div>
8+
<div class="absolute inset-0 bg-gradient-to-r from-accent/40 via-accent/20 to-accent/40 blur-3xl animate-gradient"></div>
9+
<div class="absolute top-10 left-1/4 w-40 h-40 bg-accent/20 rounded-full animate-float delay-[0ms] parallax-shape" data-speed="30"></div>
10+
<div class="absolute top-0 right-1/4 w-56 h-56 bg-accent/30 rounded-full animate-float delay-[2000ms] parallax-shape" data-speed="-20"></div>
11+
<div class="absolute bottom-10 left-1/2 w-64 h-64 bg-accent/10 rounded-full animate-float delay-[4000ms] parallax-shape" data-speed="45"></div>
1212
<div class="relative z-10 px-4 py-20 animate-slideInUp">
13-
<h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-accent via-purple-500 to-pink-500 bg-[length:200%] bg-clip-text text-transparent animate-gradientText">
13+
<h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-accent/80 via-accent to-accent/80 bg-[length:200%] bg-clip-text text-transparent animate-gradientText">
1414
Redefining Offensive Security
1515
</h2>
1616
<p class="text-subtext max-w-xl mx-auto">
@@ -147,7 +147,7 @@ import BaseLayout from '../layouts/Base.astro';
147147
</p>
148148
<a
149149
href="mailto:hello@darkvectr.io"
150-
class="inline-block px-6 py-3 bg-accent text-background font-medium rounded hover:opacity-90 hover:scale-105 transition-transform duration-200 ease-in-out animate-bounce"
150+
class="inline-block px-6 py-3 bg-accent text-background font-medium rounded-lg hover:opacity-90 hover:scale-105 transition-transform duration-200 ease-in-out animate-pulse"
151151
>
152152
Contact Us
153153
</a>

‎tailwind.config.cjs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ module.exports = {
77
'200%': '200% 200%',
88
},
99
colors: {
10-
background: "#0d1117",
11-
surface: "#161b22",
12-
foreground: "#c9d1d9",
13-
subtext: "#8b949e",
14-
accent: "#58a6ff",
15-
border: "#30363d"
10+
background: "#121212",
11+
surface: "#1e1e1e",
12+
foreground: "#e0e0e0",
13+
subtext: "#9e9e9e",
14+
accent: "#10b981",
15+
border: "#272727"
1616
},
1717
fontFamily: {
1818
sans: [

0 commit comments

Comments
 (0)