Merge pull request #32 from DEVxNetwork/sam/redesign

2025 Redesign

app/about/OrganizerCard.tsx

@@ -3,7 +3,7 @@ export const OrganizerCard = ({
 }: {
 	organizer: { name: string; imageSrc: string; linkedIn: string }
 }) => (
-	<div className="bg-gray-700 p-6 rounded-lg text-center">
+	<div className="bg-neutral-900 p-6 rounded-lg text-center">
 		<img src={imageSrc} alt={name} className="w-40 h-40 object-cover mx-auto mb-4" />
 		<h3 className="text-xl font-bold">{name}</h3>
 		<a

app/about/page.tsx

@@ -4,22 +4,22 @@ import { organizers } from "./info"
 
 export default function About() {
 	return (
-		<main className="p-8 bg-gray-900 min-h-screen text-white">
+		<main className="p-8 min-h-screen text-white" style={{ backgroundColor: "black" }}>
 			<section className="relative mb-12">
 				<img
 					src="/images/crowd.jpg"
 					alt="Big crowd"
 					className="w-full h-[40rem] object-cover rounded-lg shadow-md opacity-75"
 				/>
 			</section>
-			<section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
+			<section className="bg-neutral-950 p-8 rounded-lg shadow-md mb-12">
 				<h2 className="text-3xl font-bold mb-4 text-center">About us</h2>
 				<div className="w-full flex justify-center">
 					<p className="mt-2 text-xl text-center max-w-screen-lg">
 						{" "}
 						{`We're a community of developers of all skill levels, dedicated to fostering a fun and
-						educational environment. Hosted by Sam Holmes and a team of passionate organizers, our
-						monthly meetups offer an opportunity to network, learn, and showcase your projects. At
+						educational environment. Hosted by a team of passionate organizers, our
+						monthly meetups offer an opportunity to network, learn, and showcase community projects. At
 						each event, you'll enjoy complimentary food and drinks during our networking lunch,
 						followed by a series of engaging presentations on various developer and engineering
 						topics. After the talks, we break into groups for casual networking, project showcases,
@@ -31,7 +31,7 @@ export default function About() {
 				</div>
 			</section>
 
-			<section className="bg-gray-800 p-8 rounded-lg shadow-md">
+			<section className="bg-neutral-950 p-8 rounded-lg shadow-md">
 				<h2 className="text-2xl font-bold mb-6 text-center">Organizers</h2>
 				<div className="flex flex-wrap justify-center gap-6">
 					{organizers.map((organizer) => (

app/components/DeepNote.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+let hasPlayed = false
+
+export function DeepNote({ children }: { children: React.ReactNode }) {
+	const handleMouseEnter = () => {
+		if (!hasPlayed) {
+			playDeepNote()
+			hasPlayed = true
+		}
+	}
+
+	return <div onMouseMove={handleMouseEnter}>{children}</div>
+}
+
+function playDeepNote() {
+	const audioContext = new (window.AudioContext || window.AudioContext)()
+	const duration = 6 // Duration of the frequency sweep in seconds
+	const fadeDuration = 2 // Duration of the fade-out in seconds
+	const totalDuration = duration + fadeDuration
+	const numOscillators = 30 // Number of oscillators to simulate the original effect
+	const initialMinFreq = 50 // Initial minimum frequency in Hz (two octaves lower)
+	const initialMaxFreq = 100 // Initial maximum frequency in Hz (two octaves lower)
+	const finalMinFreq = 18.75 // Final minimum frequency in Hz (D0, two octaves lower)
+	const finalMaxFreq = 450 // Final maximum frequency in Hz (A4, two octaves lower)
+
+	// Create a gain node for volume control
+	const gainNode = audioContext.createGain()
+	gainNode.gain.setValueAtTime(0.05, audioContext.currentTime) // Start with low volume
+	gainNode.connect(audioContext.destination)
+
+	// Function to generate a random frequency within a specified range
+	function randomFrequency(min: number, max: number) {
+		return Math.random() * (max - min) + min
+	}
+
+	// Function to generate a random detune value
+	function randomDetune(cents: number) {
+		return (Math.random() - 0.5) * cents
+	}
+
+	// Create oscillators with random initial frequencies and sweeping to target frequencies
+	for (let i = 0; i < numOscillators; i++) {
+		const oscillator = audioContext.createOscillator()
+		const startFrequency = randomFrequency(initialMinFreq, initialMaxFreq)
+		const endFrequency = randomFrequency(finalMinFreq, finalMaxFreq)
+		const detune = randomDetune(20) // Detune by up to ±10 cents
+
+		oscillator.type = "sawtooth" // Richer harmonic content
+		oscillator.frequency.setValueAtTime(startFrequency, audioContext.currentTime)
+		oscillator.frequency.linearRampToValueAtTime(endFrequency, audioContext.currentTime + duration)
+		oscillator.detune.setValueAtTime(detune, audioContext.currentTime)
+
+		// Apply subtle vibrato
+		const vibrato = audioContext.createOscillator()
+		vibrato.frequency.setValueAtTime(5, audioContext.currentTime) // 5 Hz vibrato rate
+		const vibratoGain = audioContext.createGain()
+		vibratoGain.gain.setValueAtTime(2, audioContext.currentTime) // ±2 Hz vibrato depth
+		vibrato.connect(vibratoGain)
+		vibratoGain.connect(oscillator.frequency)
+		vibrato.start()
+		vibrato.stop(audioContext.currentTime + totalDuration)
+
+		// Connect oscillator to the gain node
+		oscillator.connect(gainNode)
+		oscillator.start()
+		oscillator.stop(audioContext.currentTime + totalDuration)
+	}
+
+	// Create a gain envelope for fade-in and fade-out
+	gainNode.gain.linearRampToValueAtTime(0.4, audioContext.currentTime + 2) // Gradual fade-in
+	gainNode.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + duration) // Sustain moderate volume
+	gainNode.gain.linearRampToValueAtTime(0.0, audioContext.currentTime + totalDuration) // Smooth fade-out
+}

app/components/Footer.tsx

@@ -2,14 +2,25 @@ import { links } from "../siteConfig"
 
 const Footer = () => {
 	return (
-		<footer className="footer flex items-center p-4  justify-between bg-neutral text-neutral-content p-4">
+		<footer className="footer flex items-center p-4 justify-between text-neutral-content p-4">
 			<aside className="flex items-center devx-logo-copyright">
-				<img src="/images/logo.jpeg" className="w-8 rounded mr-2" />
 				<p className="flex items-center">
 					© Copyright {new Date().getFullYear()}. All rights reserved
 				</p>
 			</aside>
 			<nav className="flex grid-flow-col gap-4 md:place-self-center md:justify-self-end">
+				<a href={links.linkedInUrl} aria-label="LinkedIn" className="mr-4" target="_blank">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 50 50"
+						className="fill-current"
+					>
+						<path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z" />
+					</svg>
+				</a>
+
 				<a href={links.youtube} aria-label="Youtube" className="mr-4" target="_blank">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"

app/components/GiveATalkCTA.tsx

@@ -7,7 +7,7 @@ const GiveATalkCTA: React.FC = () => {
 			href={links.talkSubmissionUrl}
 			target="_blank"
 			rel="noopener noreferrer"
-			className="fixed flex items-center px-6 py-3 space-x-2 font-bold text-white transition-all duration-300 ease-in-out transform -translate-x-1/2 rounded-full shadow-lg bg-gradient-to-r from-blue-500 to-purple-600 sm:bottom-12 bottom-6 left-1/2 hover:from-blue-600 hover:to-purple-700 hover:scale-105 animate-pulse"
+			className="fixed flex items-center px-6 py-3 space-x-2 font-bold text-white transition-all duration-300 ease-in-out transform -translate-x-1/2 rounded-full shadow-lg bg-gradient-to-r from-purple-500 to-purple-600 sm:bottom-12 bottom-6 left-1/2 hover:from-purple-600 hover:to-purple-700 hover:scale-105 animate-pulse"
 		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"

app/components/Header.tsx

@@ -24,13 +24,13 @@ const Header = () => {
 						</div>
 						<ul
 							tabIndex={0}
-							className="menu menu-lg dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+							className="menu menu-lg dropdown-content bg-neutral rounded-box z-[1] mt-3 w-52 p-2 shadow"
 						>
 							<NavLinks />
 						</ul>
 					</div>
-					<a className="inline p-0 btn btn-ghost" href="/">
-						<img src="/images/logo.jpeg" className="w-12 rounded" />
+					<a className="inline p-0" href="/">
+						<img src="/images/logo-header.png" className="h-12 rounded" />
 					</a>
 				</div>
 				<div className="hidden navbar-center lg:flex">

app/components/PotionBackground.tsx

@@ -18,47 +18,68 @@ export const PotionBackground = () => {
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 100 100"
 				preserveAspectRatio="none"
-				style={{ width: "100%", height: "100%" }}
+				style={{ aspectRatio: 1, minWidth: "100%", minHeight: "100%" }}
 			>
 				<defs>
 					<filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
 						<feGaussianBlur in="SourceGraphic" stdDeviation="6" />
 					</filter>
 					<radialGradient id="gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
-						<stop offset="0%" stopColor="#E2ABFF71" />
-						<stop offset="99%" stopColor="#3AF79B96" />
-						<stop offset="100%" stopColor="#3AF79B00" />
+						<stop offset="0%" stop-color="#80008066"></stop>
+						<stop offset="90%" stop-color="#ffffff22"></stop>
+						<stop offset="100%" stop-color="#ffffff66"></stop>
 					</radialGradient>
 					<radialGradient id="gradient2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
-						<stop offset="0%" stopColor="#3B69FF4F" />
-						<stop offset="72%" stopColor="#3A66F770" />
-						<stop offset="100%" stopColor="#3A66F700" />
+						<stop offset="0%" stop-color="#ffffff99"></stop>
+						<stop offset="72%" stop-color="#80008033"></stop>
+						<stop offset="100%" stop-color="#80008000"></stop>
 					</radialGradient>
 					<radialGradient id="gradient3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
-						<stop offset="0%" stopColor="#FF3BEB" />
-						<stop offset="72%" stopColor="#3A9EF7A8" />
-						<stop offset="100%" stopColor="#3A9EF700" />
+						<stop offset="0%" stop-color="#80008066"></stop>
+						<stop offset="50%" stop-color="#80008000"></stop>
+						<stop offset="100%" stop-color="#ffffff66"></stop>
 					</radialGradient>
 				</defs>
-				<g filter="url(#blur)" opacity={"60%"}>
-					<circle cx="0" cy="0" r="70" fill="url(#gradient1)">
+				<g filter="url(#blur)" opacity="60%">
+					<circle cx="0" cy="0" r="70" opacity="0" fill="url(#gradient1)">
+						<animate
+							attributeName="opacity"
+							values="0;1;0"
+							keyTimes="0;0.5;1"
+							dur="13s"
+							repeatCount="indefinite"
+						/>
 						<animateMotion
 							path="M 90,10 m -15,0 a 15,15 0 1,1 30,0 a 15,15 0 1,1 -30,0"
-							dur="16s"
+							dur="21s"
 							repeatCount="indefinite"
 						/>
 					</circle>
-					<circle cx="0" cy="0" r="70" fill="url(#gradient2)">
+					<circle cx="0" cy="0" r="70" opacity="0" fill="url(#gradient2)">
+						<animate
+							attributeName="opacity"
+							values="0;1;0"
+							keyTimes="0;0.5;1"
+							dur="34s"
+							repeatCount="indefinite"
+						/>
 						<animateMotion
 							path="M 50,50 m -15,0 a 15,15 0 1,1 30,0 a 15,15 0 1,1 -30,0"
-							dur="24s"
+							dur="13s"
 							repeatCount="indefinite"
 						/>
 					</circle>
-					<circle cx="0" cy="0" r="70" fill="url(#gradient3)">
+					<circle cx="0" cy="0" r="70" opacity="0" fill="url(#gradient3)">
+						<animate
+							attributeName="opacity"
+							values="0;1;0"
+							keyTimes="0;0.5;1"
+							dur="21s"
+							repeatCount="indefinite"
+						/>
 						<animateMotion
 							path="M 10,90 m -15,0 a 15,15 0 1,1 30,0 a 15,15 0 1,1 -30,0"
-							dur="32s"
+							dur="34s"
 							repeatCount="indefinite"
 						/>
 					</circle>

app/globals.css

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+	--b1: #000000;
+	--n: 21% 0.003 296.813;
+}
+
 @media (prefers-color-scheme: dark) {
 	html {
 		color-scheme: dark;
@@ -51,4 +56,4 @@ main {
 	.devx-logo-copyright {
 		margin-top: 0;
 	}
-}
+}

app/page.tsx

@@ -1,31 +1,33 @@
 import React from "react"
 import { PotionBackground } from "./components/PotionBackground"
+import { DeepNote } from "./components/DeepNote"
 
 const Home: React.FC = () => {
 	return (
 		<>
 			<main className="p-8 text-white flex flex-col items-center justify-center">
-				<PotionBackground />
-				<section className="relative">
-					<img
-						src="/images/sd-devx-brand.png"
-						alt="Developer meetup hero"
-						style={{
-							width: "100%",
-							maxWidth: "512px",
-							margin: "0 auto"
-						}}
-					/>
-				</section>
+				<DeepNote>
+					<PotionBackground />
+					<section className="relative">
+						<img
+							src="/images/sd-devx-brand.png"
+							alt="Developer meetup hero"
+							style={{
+								width: "100%",
+								maxWidth: "688px",
+								margin: "0 auto"
+							}}
+						/>
+					</section>
 
-				<section className="p-12 rounded-lg mb-12">
-					<p className="text-xl text-center max-w-screen-lg">
-						Fostering developer community through events and open-source projects in San Diego,
-						California.
-					</p>
-				</section>
+					<section className="p-12 rounded-lg">
+						<p className="text-xl text-center max-w-screen-lg">
+							Fostering developer community through events and open-source projects in San Diego,
+							California.
+						</p>
+					</section>
 
-				{/* <section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
+					{/* <section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
 				<h2 className="text-3xl font-bold mb-4 text-center">Past Events</h2>
 				<div className="w-full flex justify-center">
 					<p className="mt-2 text-xl text-center max-w-screen-lg">
@@ -35,7 +37,7 @@ const Home: React.FC = () => {
 				</div>
 			</section> */}
 
-				{/* <section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
+					{/* <section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
 					<h2 className="text-3xl font-bold mb-4 text-center">Sponsors</h2>
 					<div className="w-full flex justify-center">
 						<p className="mt-2 text-xl text-center max-w-screen-lg">
@@ -44,6 +46,7 @@ const Home: React.FC = () => {
 						</p>
 					</div>
 				</section> */}
+				</DeepNote>
 			</main>
 		</>
 	)

app/siteConfig.ts

@@ -8,6 +8,7 @@ export const siteConfig = {
 export const links = {
 	talkSubmissionUrl: "https://forms.gle/6gtGEuL7XExHvc6c9",
 	meetupUrl: "https://meetup.com/san-diego-devx",
+	linkedInUrl: "https://www.linkedin.com/company/devxsd/",
 	lumaUrl: "https://lu.ma/DEVxNetwork",
 	discord: "https://discord.gg/J3YrrErwjc",
 	github: "https://github.com/DEVxNetwork",