Skip to content

Commit cc6cb03

Browse files
samholmessamholmes
authored
Merge pull request #32 from DEVxNetwork/sam/redesign
2025 Redesign
2 parents 49e1b38 + 5d52975 commit cc6cb03

File tree

15 files changed

+165
-50
lines changed

15 files changed

+165
-50
lines changed

‎app/about/OrganizerCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export const OrganizerCard = ({
33
}: {
44
organizer: { name: string; imageSrc: string; linkedIn: string }
55
}) => (
6-
<div className="bg-gray-700 p-6 rounded-lg text-center">
6+
<div className="bg-neutral-900 p-6 rounded-lg text-center">
77
<img src={imageSrc} alt={name} className="w-40 h-40 object-cover mx-auto mb-4" />
88
<h3 className="text-xl font-bold">{name}</h3>
99
<a

‎app/about/page.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@ import { organizers } from "./info"
44

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

34-
<section className="bg-gray-800 p-8 rounded-lg shadow-md">
34+
<section className="bg-neutral-950 p-8 rounded-lg shadow-md">
3535
<h2 className="text-2xl font-bold mb-6 text-center">Organizers</h2>
3636
<div className="flex flex-wrap justify-center gap-6">
3737
{organizers.map((organizer) => (

‎app/components/DeepNote.tsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
"use client"
2+
3+
let hasPlayed = false
4+
5+
export function DeepNote({ children }: { children: React.ReactNode }) {
6+
const handleMouseEnter = () => {
7+
if (!hasPlayed) {
8+
playDeepNote()
9+
hasPlayed = true
10+
}
11+
}
12+
13+
return <div onMouseMove={handleMouseEnter}>{children}</div>
14+
}
15+
16+
function playDeepNote() {
17+
const audioContext = new (window.AudioContext || window.AudioContext)()
18+
const duration = 6 // Duration of the frequency sweep in seconds
19+
const fadeDuration = 2 // Duration of the fade-out in seconds
20+
const totalDuration = duration + fadeDuration
21+
const numOscillators = 30 // Number of oscillators to simulate the original effect
22+
const initialMinFreq = 50 // Initial minimum frequency in Hz (two octaves lower)
23+
const initialMaxFreq = 100 // Initial maximum frequency in Hz (two octaves lower)
24+
const finalMinFreq = 18.75 // Final minimum frequency in Hz (D0, two octaves lower)
25+
const finalMaxFreq = 450 // Final maximum frequency in Hz (A4, two octaves lower)
26+
27+
// Create a gain node for volume control
28+
const gainNode = audioContext.createGain()
29+
gainNode.gain.setValueAtTime(0.05, audioContext.currentTime) // Start with low volume
30+
gainNode.connect(audioContext.destination)
31+
32+
// Function to generate a random frequency within a specified range
33+
function randomFrequency(min: number, max: number) {
34+
return Math.random() * (max - min) + min
35+
}
36+
37+
// Function to generate a random detune value
38+
function randomDetune(cents: number) {
39+
return (Math.random() - 0.5) * cents
40+
}
41+
42+
// Create oscillators with random initial frequencies and sweeping to target frequencies
43+
for (let i = 0; i < numOscillators; i++) {
44+
const oscillator = audioContext.createOscillator()
45+
const startFrequency = randomFrequency(initialMinFreq, initialMaxFreq)
46+
const endFrequency = randomFrequency(finalMinFreq, finalMaxFreq)
47+
const detune = randomDetune(20) // Detune by up to ±10 cents
48+
49+
oscillator.type = "sawtooth" // Richer harmonic content
50+
oscillator.frequency.setValueAtTime(startFrequency, audioContext.currentTime)
51+
oscillator.frequency.linearRampToValueAtTime(endFrequency, audioContext.currentTime + duration)
52+
oscillator.detune.setValueAtTime(detune, audioContext.currentTime)
53+
54+
// Apply subtle vibrato
55+
const vibrato = audioContext.createOscillator()
56+
vibrato.frequency.setValueAtTime(5, audioContext.currentTime) // 5 Hz vibrato rate
57+
const vibratoGain = audioContext.createGain()
58+
vibratoGain.gain.setValueAtTime(2, audioContext.currentTime) // ±2 Hz vibrato depth
59+
vibrato.connect(vibratoGain)
60+
vibratoGain.connect(oscillator.frequency)
61+
vibrato.start()
62+
vibrato.stop(audioContext.currentTime + totalDuration)
63+
64+
// Connect oscillator to the gain node
65+
oscillator.connect(gainNode)
66+
oscillator.start()
67+
oscillator.stop(audioContext.currentTime + totalDuration)
68+
}
69+
70+
// Create a gain envelope for fade-in and fade-out
71+
gainNode.gain.linearRampToValueAtTime(0.4, audioContext.currentTime + 2) // Gradual fade-in
72+
gainNode.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + duration) // Sustain moderate volume
73+
gainNode.gain.linearRampToValueAtTime(0.0, audioContext.currentTime + totalDuration) // Smooth fade-out
74+
}

‎app/components/Footer.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,25 @@ import { links } from "../siteConfig"
22

33
const Footer = () => {
44
return (
5-
<footer className="footer flex items-center p-4 justify-between bg-neutral text-neutral-content p-4">
5+
<footer className="footer flex items-center p-4 justify-between text-neutral-content p-4">
66
<aside className="flex items-center devx-logo-copyright">
7-
<img src="/images/logo.jpeg" className="w-8 rounded mr-2" />
87
<p className="flex items-center">
98
© Copyright {new Date().getFullYear()}. All rights reserved
109
</p>
1110
</aside>
1211
<nav className="flex grid-flow-col gap-4 md:place-self-center md:justify-self-end">
12+
<a href={links.linkedInUrl} aria-label="LinkedIn" className="mr-4" target="_blank">
13+
<svg
14+
xmlns="http://www.w3.org/2000/svg"
15+
width="24"
16+
height="24"
17+
viewBox="0 0 50 50"
18+
className="fill-current"
19+
>
20+
<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" />
21+
</svg>
22+
</a>
23+
1324
<a href={links.youtube} aria-label="Youtube" className="mr-4" target="_blank">
1425
<svg
1526
xmlns="http://www.w3.org/2000/svg"

‎app/components/GiveATalkCTA.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const GiveATalkCTA: React.FC = () => {
77
href={links.talkSubmissionUrl}
88
target="_blank"
99
rel="noopener noreferrer"
10-
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"
10+
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"
1111
>
1212
<svg
1313
xmlns="http://www.w3.org/2000/svg"

‎app/components/Header.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ const Header = () => {
2424
</div>
2525
<ul
2626
tabIndex={0}
27-
className="menu menu-lg dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
27+
className="menu menu-lg dropdown-content bg-neutral rounded-box z-[1] mt-3 w-52 p-2 shadow"
2828
>
2929
<NavLinks />
3030
</ul>
3131
</div>
32-
<a className="inline p-0 btn btn-ghost" href="/">
33-
<img src="/images/logo.jpeg" className="w-12 rounded" />
32+
<a className="inline p-0" href="/">
33+
<img src="/images/logo-header.png" className="h-12 rounded" />
3434
</a>
3535
</div>
3636
<div className="hidden navbar-center lg:flex">

‎app/components/PotionBackground.tsx

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,47 +18,68 @@ export const PotionBackground = () => {
1818
xmlns="http://www.w3.org/2000/svg"
1919
viewBox="0 0 100 100"
2020
preserveAspectRatio="none"
21-
style={{ width: "100%", height: "100%" }}
21+
style={{ aspectRatio: 1, minWidth: "100%", minHeight: "100%" }}
2222
>
2323
<defs>
2424
<filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
2525
<feGaussianBlur in="SourceGraphic" stdDeviation="6" />
2626
</filter>
2727
<radialGradient id="gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
28-
<stop offset="0%" stopColor="#E2ABFF71" />
29-
<stop offset="99%" stopColor="#3AF79B96" />
30-
<stop offset="100%" stopColor="#3AF79B00" />
28+
<stop offset="0%" stop-color="#80008066"></stop>
29+
<stop offset="90%" stop-color="#ffffff22"></stop>
30+
<stop offset="100%" stop-color="#ffffff66"></stop>
3131
</radialGradient>
3232
<radialGradient id="gradient2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
33-
<stop offset="0%" stopColor="#3B69FF4F" />
34-
<stop offset="72%" stopColor="#3A66F770" />
35-
<stop offset="100%" stopColor="#3A66F700" />
33+
<stop offset="0%" stop-color="#ffffff99"></stop>
34+
<stop offset="72%" stop-color="#80008033"></stop>
35+
<stop offset="100%" stop-color="#80008000"></stop>
3636
</radialGradient>
3737
<radialGradient id="gradient3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
38-
<stop offset="0%" stopColor="#FF3BEB" />
39-
<stop offset="72%" stopColor="#3A9EF7A8" />
40-
<stop offset="100%" stopColor="#3A9EF700" />
38+
<stop offset="0%" stop-color="#80008066"></stop>
39+
<stop offset="50%" stop-color="#80008000"></stop>
40+
<stop offset="100%" stop-color="#ffffff66"></stop>
4141
</radialGradient>
4242
</defs>
43-
<g filter="url(#blur)" opacity={"60%"}>
44-
<circle cx="0" cy="0" r="70" fill="url(#gradient1)">
43+
<g filter="url(#blur)" opacity="60%">
44+
<circle cx="0" cy="0" r="70" opacity="0" fill="url(#gradient1)">
45+
<animate
46+
attributeName="opacity"
47+
values="0;1;0"
48+
keyTimes="0;0.5;1"
49+
dur="13s"
50+
repeatCount="indefinite"
51+
/>
4552
<animateMotion
4653
path="M 90,10 m -15,0 a 15,15 0 1,1 30,0 a 15,15 0 1,1 -30,0"
47-
dur="16s"
54+
dur="21s"
4855
repeatCount="indefinite"
4956
/>
5057
</circle>
51-
<circle cx="0" cy="0" r="70" fill="url(#gradient2)">
58+
<circle cx="0" cy="0" r="70" opacity="0" fill="url(#gradient2)">
59+
<animate
60+
attributeName="opacity"
61+
values="0;1;0"
62+
keyTimes="0;0.5;1"
63+
dur="34s"
64+
repeatCount="indefinite"
65+
/>
5266
<animateMotion
5367
path="M 50,50 m -15,0 a 15,15 0 1,1 30,0 a 15,15 0 1,1 -30,0"
54-
dur="24s"
68+
dur="13s"
5569
repeatCount="indefinite"
5670
/>
5771
</circle>
58-
<circle cx="0" cy="0" r="70" fill="url(#gradient3)">
72+
<circle cx="0" cy="0" r="70" opacity="0" fill="url(#gradient3)">
73+
<animate
74+
attributeName="opacity"
75+
values="0;1;0"
76+
keyTimes="0;0.5;1"
77+
dur="21s"
78+
repeatCount="indefinite"
79+
/>
5980
<animateMotion
6081
path="M 10,90 m -15,0 a 15,15 0 1,1 30,0 a 15,15 0 1,1 -30,0"
61-
dur="32s"
82+
dur="34s"
6283
repeatCount="indefinite"
6384
/>
6485
</circle>

‎app/globals.css

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
:root {
6+
--b1: #000000;
7+
--n: 21% 0.003 296.813;
8+
}
9+
510
@media (prefers-color-scheme: dark) {
611
html {
712
color-scheme: dark;
@@ -51,4 +56,4 @@ main {
5156
.devx-logo-copyright {
5257
margin-top: 0;
5358
}
54-
}
59+
}

‎app/page.tsx

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,33 @@
11
import React from "react"
22
import { PotionBackground } from "./components/PotionBackground"
3+
import { DeepNote } from "./components/DeepNote"
34

45
const Home: React.FC = () => {
56
return (
67
<>
78
<main className="p-8 text-white flex flex-col items-center justify-center">
8-
<PotionBackground />
9-
<section className="relative">
10-
<img
11-
src="/images/sd-devx-brand.png"
12-
alt="Developer meetup hero"
13-
style={{
14-
width: "100%",
15-
maxWidth: "512px",
16-
margin: "0 auto"
17-
}}
18-
/>
19-
</section>
9+
<DeepNote>
10+
<PotionBackground />
11+
<section className="relative">
12+
<img
13+
src="/images/sd-devx-brand.png"
14+
alt="Developer meetup hero"
15+
style={{
16+
width: "100%",
17+
maxWidth: "688px",
18+
margin: "0 auto"
19+
}}
20+
/>
21+
</section>
2022

21-
<section className="p-12 rounded-lg mb-12">
22-
<p className="text-xl text-center max-w-screen-lg">
23-
Fostering developer community through events and open-source projects in San Diego,
24-
California.
25-
</p>
26-
</section>
23+
<section className="p-12 rounded-lg">
24+
<p className="text-xl text-center max-w-screen-lg">
25+
Fostering developer community through events and open-source projects in San Diego,
26+
California.
27+
</p>
28+
</section>
2729

28-
{/* <section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
30+
{/* <section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
2931
<h2 className="text-3xl font-bold mb-4 text-center">Past Events</h2>
3032
<div className="w-full flex justify-center">
3133
<p className="mt-2 text-xl text-center max-w-screen-lg">
@@ -35,7 +37,7 @@ const Home: React.FC = () => {
3537
</div>
3638
</section> */}
3739

38-
{/* <section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
40+
{/* <section className="bg-gray-800 p-8 rounded-lg shadow-md mb-12">
3941
<h2 className="text-3xl font-bold mb-4 text-center">Sponsors</h2>
4042
<div className="w-full flex justify-center">
4143
<p className="mt-2 text-xl text-center max-w-screen-lg">
@@ -44,6 +46,7 @@ const Home: React.FC = () => {
4446
</p>
4547
</div>
4648
</section> */}
49+
</DeepNote>
4750
</main>
4851
</>
4952
)

‎app/siteConfig.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const siteConfig = {
88
export const links = {
99
talkSubmissionUrl: "https://forms.gle/6gtGEuL7XExHvc6c9",
1010
meetupUrl: "https://meetup.com/san-diego-devx",
11+
linkedInUrl: "https://www.linkedin.com/company/devxsd/",
1112
lumaUrl: "https://lu.ma/DEVxNetwork",
1213
discord: "https://discord.gg/J3YrrErwjc",
1314
github: "https://github.com/DEVxNetwork",

0 commit comments

Comments
 (0)