Skip to content

Commit f637c23

Browse files
EssiJuniorEssiJunior
authored
Merge pull request #3 from Esssi
- Brand colors set as primary and secondary - Fonts updated from system-ui to a recommended font paring. (Dot Gothic 16 + space mono) - Updated 70% of sections UI - Corrected Hero Image error
2 parents 02a9108 + cd3fc6f commit f637c23

19 files changed

Lines changed: 669 additions & 680 deletions

‎index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@
3131
<meta name="twitter:title" content="Python Cameroon" />
3232
<meta name="twitter:description" content="Welcome to the Python Cameroon Community - a vibrant and supportive space for individuals passionate about Python programming." />
3333
<meta name="twitter:image" content="./src/assets/opengraph/og-image.png" />
34+
35+
<!-- Fonts -->
36+
<link rel="preconnect" href="https://fonts.googleapis.com">
37+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
38+
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
3439
</head>
3540

3641
<body>

‎src/App.css‎

Lines changed: 65 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -69,57 +69,71 @@
6969

7070
/* *=========== Green theme =========== */
7171
@layer base {
72-
:root {
73-
--background: 0 0% 100%;
74-
--foreground: 240 10% 3.9%;
75-
--card: 0 0% 100%;
76-
--card-foreground: 240 10% 3.9%;
77-
--popover: 0 0% 100%;
78-
--popover-foreground: 240 10% 3.9%;
79-
--primary: 142.1 76.2% 36.3%;
80-
--primary-foreground: 355.7 100% 97.3%;
81-
--secondary: 240 4.8% 95.9%;
82-
--secondary-foreground: 240 5.9% 10%;
83-
--muted: 240 4.8% 95.9%;
84-
--muted-foreground: 240 3.8% 46.1%;
85-
--accent: 240 4.8% 95.9%;
86-
--accent-foreground: 240 5.9% 10%;
87-
--destructive: 0 84.2% 60.2%;
88-
--destructive-foreground: 0 0% 98%;
89-
--border: 240 5.9% 90%;
90-
--input: 240 5.9% 90%;
91-
--ring: 142.1 76.2% 36.3%;
92-
--radius: 0.5rem;
93-
}
94-
95-
.dark {
96-
--background: 20 14.3% 4.1%;
97-
--foreground: 0 0% 95%;
98-
--card: 24 9.8% 10%;
99-
--card-foreground: 0 0% 95%;
100-
--popover: 0 0% 9%;
101-
--popover-foreground: 0 0% 95%;
102-
--primary: 142.1 70.6% 45.3%;
103-
--primary-foreground: 144.9 80.4% 10%;
104-
--secondary: 240 3.7% 15.9%;
105-
--secondary-foreground: 0 0% 98%;
106-
--muted: 0 0% 15%;
107-
--muted-foreground: 240 5% 64.9%;
108-
--accent: 12 6.5% 15.1%;
109-
--accent-foreground: 0 0% 98%;
110-
--destructive: 0 62.8% 30.6%;
111-
--destructive-foreground: 0 85.7% 97.3%;
112-
--border: 240 3.7% 15.9%;
113-
--input: 240 3.7% 15.9%;
114-
--ring: 142.4 71.8% 29.2%;
115-
}
72+
:root {
73+
--background: 0 0% 100%;
74+
--foreground: 240 10% 3.9%;
75+
--card: 0 0% 100%;
76+
--card-foreground: 240 10% 3.9%;
77+
--popover: 0 0% 100%;
78+
--popover-foreground: 240 10% 3.9%;
79+
--primary: 166, 95%, 29%;
80+
--primary-foreground: 355.7 100% 97.3%;
81+
--secondary: 50, 96%, 59%;
82+
--secondary-foreground: 240 5.9% 10%;
83+
--muted: 50, 96%, 59%;
84+
--muted-foreground: 240 3.8% 46.1%;
85+
--accent: 50, 96%, 59%;
86+
--accent-foreground: 240 5.9% 10%;
87+
--destructive: 0 84.2% 60.2%;
88+
--destructive-foreground: 0 0% 98%;
89+
--border: 240 5.9% 90%;
90+
--input: 240 5.9% 90%;
91+
--ring: 142.1 76.2% 36.3%;
92+
--radius: 0.5rem;
93+
94+
/* Fonts */
95+
--font-dotgothic16: "DotGothic16", sans-serif;
96+
--font-space-mono: "Space Mono", monospace;
97+
}
98+
99+
.dark {
100+
--background: 20 14.3% 4.1%;
101+
--foreground: 0 0% 95%;
102+
--card: 24 9.8% 10%;
103+
--card-foreground: 0 0% 95%;
104+
--popover: 0 0% 9%;
105+
--popover-foreground: 0 0% 95%;
106+
--primary: 166, 95%, 29%;
107+
--primary-foreground: 144.9 80.4% 10%;
108+
--secondary: 50, 96%, 59%;
109+
--secondary-foreground: 0 0% 98%;
110+
--muted: 0 0% 15%;
111+
--muted-foreground: 240 5% 64.9%;
112+
--accent: 12 6.5% 15.1%;
113+
--accent-foreground: 0 0% 98%;
114+
--destructive: 0 62.8% 30.6%;
115+
--destructive-foreground: 0 85.7% 97.3%;
116+
--border: 240 3.7% 15.9%;
117+
--input: 240 3.7% 15.9%;
118+
--ring: 142.4 71.8% 29.2%;
119+
}
116120
}
117121

118122
@layer base {
119-
* {
120-
@apply border-border;
121-
}
122-
body {
123-
@apply bg-background text-foreground;
124-
}
125-
}
123+
* {
124+
@apply border-border;
125+
}
126+
127+
body {
128+
@apply bg-background text-foreground font-space-mono;
129+
}
130+
131+
h1,
132+
h2,
133+
h3,
134+
h4,
135+
h5,
136+
h6 {
137+
@apply font-dotgothic16;
138+
}
139+
}

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {ScrollToTop} from "@/components/ScrollToTop";
99
import {Services} from "@/containers/Services";
1010
import {Sponsors} from "@/containers/Sponsors";
1111
import {Team} from "@/containers/Team";
12-
import {Applications} from "@/containers/Testimonials";
12+
import {Applications} from "@/containers/Applications";
1313
import "./App.css";
1414

1515

‎src/assets/images/flag-cameroon.webp‎

261 KB
Loading

‎src/assets/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// logo
2+
import logoLight from "./logo/light.svg";
3+
import logoDark from "./logo/dark.svg";
4+
5+
// Images
6+
import cameroonFlag from "./images/flag-cameroon.webp";
7+
8+
export { logoLight, logoDark, cameroonFlag };

‎src/components/HeroNetwork.tsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { useEffect, useRef } from "react";
2+
3+
const COLORS = ["#fcd116", "#ce1126", "#009a44", "#ffffff"];
4+
const NODE_COUNT = 70;
5+
const MAX_DIST = 130;
6+
7+
interface Node {
8+
x: number;
9+
y: number;
10+
vx: number;
11+
vy: number;
12+
r: number;
13+
color: string;
14+
opacity: number;
15+
}
16+
17+
const hexAlpha = (hex: string, alpha: number): string =>
18+
hex + Math.floor(alpha * 255).toString(16).padStart(2, "0");
19+
20+
export default function HeroNetwork() {
21+
const canvasRef = useRef<HTMLCanvasElement>(null);
22+
23+
useEffect(() => {
24+
const canvas = canvasRef.current;
25+
if (!canvas) return;
26+
27+
const ctx = canvas.getContext("2d");
28+
if (!ctx) return;
29+
30+
let animId: number;
31+
let nodes: Node[] = [];
32+
33+
const initNodes = () => {
34+
nodes = Array.from({ length: NODE_COUNT }, () => ({
35+
x: Math.random() * canvas.width,
36+
y: Math.random() * canvas.height,
37+
vx: (Math.random() - 0.5) * 0.4,
38+
vy: (Math.random() - 0.5) * 0.4,
39+
r: Math.random() * 2 + 1,
40+
color: COLORS[Math.floor(Math.random() * COLORS.length)],
41+
opacity: Math.random() * 0.5 + 0.25,
42+
}));
43+
};
44+
45+
const resize = () => {
46+
canvas.width = canvas.offsetWidth;
47+
canvas.height = canvas.offsetHeight;
48+
initNodes();
49+
};
50+
51+
const draw = () => {
52+
const { width: W, height: H } = canvas;
53+
ctx.clearRect(0, 0, W, H);
54+
55+
for (const n of nodes) {
56+
n.x += n.vx;
57+
n.y += n.vy;
58+
if (n.x < 0 || n.x > W) n.vx *= -1;
59+
if (n.y < 0 || n.y > H) n.vy *= -1;
60+
}
61+
62+
for (let i = 0; i < nodes.length; i++) {
63+
for (let j = i + 1; j < nodes.length; j++) {
64+
const dx = nodes[i].x - nodes[j].x;
65+
const dy = nodes[i].y - nodes[j].y;
66+
const d = Math.sqrt(dx * dx + dy * dy);
67+
if (d < MAX_DIST) {
68+
const alpha = (1 - d / MAX_DIST) * 0.22;
69+
ctx.beginPath();
70+
ctx.moveTo(nodes[i].x, nodes[i].y);
71+
ctx.lineTo(nodes[j].x, nodes[j].y);
72+
ctx.strokeStyle = hexAlpha(nodes[i].color, alpha);
73+
ctx.lineWidth = 0.6;
74+
ctx.stroke();
75+
}
76+
}
77+
}
78+
79+
for (const n of nodes) {
80+
ctx.beginPath();
81+
ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
82+
ctx.fillStyle = hexAlpha(n.color, n.opacity);
83+
ctx.fill();
84+
}
85+
86+
animId = requestAnimationFrame(draw);
87+
};
88+
89+
const ro = new ResizeObserver(() => {
90+
cancelAnimationFrame(animId);
91+
resize();
92+
draw();
93+
});
94+
95+
ro.observe(canvas);
96+
resize();
97+
draw();
98+
99+
return () => {
100+
cancelAnimationFrame(animId);
101+
ro.disconnect();
102+
};
103+
}, []);
104+
105+
return (
106+
<canvas
107+
ref={canvasRef}
108+
style={{ width: "100%", height: "100%", display: "block" }}
109+
className="absolute inset-0 z-0"
110+
/>
111+
);
112+
}

0 commit comments

Comments
 (0)