mirror of
https://github.com/web3privacy/web
synced 2024-10-15 18:26:27 +02:00
Merge pull request #4 from NoobDeveloper412/pages-redesign
Pages redesign
This commit is contained in:
commit
4d8e971230
18 changed files with 1626 additions and 1500 deletions
13
public/icons/signal.svg
Normal file
13
public/icons/signal.svg
Normal file
|
@ -0,0 +1,13 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_140_218)">
|
||||
<path
|
||||
d="M18.24 0.701236L18.78 2.88374C16.6557 3.40615 14.6227 4.24691 12.75 5.37749L11.595 3.44999C13.6587 2.20398 15.8991 1.27725 18.24 0.701236ZM29.76 0.701236L29.22 2.88374C31.3442 3.40615 33.3772 4.24691 35.25 5.37749L36.4125 3.44999C34.3464 2.20329 32.1035 1.27654 29.76 0.701236ZM3.44999 11.595C2.20398 13.6587 1.27725 15.8991 0.701236 18.24L2.88374 18.78C3.40615 16.6557 4.24691 14.6227 5.37749 12.75L3.44999 11.595ZM2.24999 24C2.24926 22.9092 2.33074 21.8198 2.49374 20.7412L0.269986 20.4037C-0.0899954 22.7877 -0.0899954 25.2122 0.269986 27.5962L2.49374 27.2587C2.33074 26.1802 2.24926 25.0908 2.24999 24ZM36.405 44.55L35.25 42.6225C33.3796 43.7524 31.3491 44.5931 29.2275 45.1162L29.7675 47.2987C32.1058 46.722 34.3435 45.7953 36.405 44.55ZM45.75 24C45.7507 25.0908 45.6692 26.1802 45.5062 27.2587L47.73 27.5962C48.09 25.2122 48.09 22.7877 47.73 20.4037L45.5062 20.7412C45.6692 21.8198 45.7507 22.9092 45.75 24ZM47.2987 29.76L45.1162 29.22C44.5938 31.3442 43.7531 33.3772 42.6225 35.25L44.55 36.4125C45.7967 34.3464 46.7234 32.1035 47.2987 29.76ZM27.2587 45.51C25.0984 45.835 22.9016 45.835 20.7412 45.51L20.4037 47.7337C22.7877 48.0937 25.2122 48.0937 27.5962 47.7337L27.2587 45.51ZM41.5087 36.9037C40.2115 38.6606 38.6579 40.2129 36.9 41.5087L38.235 43.32C40.1743 41.8941 41.8884 40.1851 43.32 38.25L41.5087 36.9037ZM36.9 6.49124C38.6582 7.78819 40.2118 9.34175 41.5087 11.1L43.32 9.74999C41.893 7.81602 40.1839 6.10701 38.25 4.67999L36.9 6.49124ZM6.49124 11.1C7.78819 9.34175 9.34175 7.78819 11.1 6.49124L9.74999 4.67999C7.81602 6.10701 6.10701 7.81602 4.67999 9.74999L6.49124 11.1ZM44.55 11.595L42.6225 12.75C43.7524 14.6204 44.5931 16.6508 45.1162 18.7725L47.2987 18.2325C46.722 15.8942 45.7953 13.6564 44.55 11.595ZM20.7412 2.49374C22.9016 2.16871 25.0984 2.16871 27.2587 2.49374L27.5962 0.269986C25.2122 -0.0899954 22.7877 -0.0899954 20.4037 0.269986L20.7412 2.49374ZM7.64624 43.9162L2.99999 45L4.08374 40.3537L1.89374 39.84L0.809986 44.4862C0.722695 44.859 0.731962 45.2479 0.836911 45.616C0.941859 45.9842 1.13902 46.3195 1.40973 46.5902C1.68044 46.861 2.01575 47.0581 2.38393 47.1631C2.75211 47.268 3.14098 47.2773 3.51374 47.19L8.15624 46.125L7.64624 43.9162ZM2.36249 37.8337L4.55249 38.3437L5.30249 35.1225C4.2093 33.2852 3.39421 31.2961 2.88374 29.22L0.701236 29.76C1.1905 31.7484 1.93413 33.6655 2.91374 35.4637L2.36249 37.8337ZM12.8625 42.7087L9.64124 43.4587L10.1512 45.6487L12.5212 45.0975C14.3195 46.0771 16.2365 46.8207 18.225 47.31L18.765 45.1275C16.6932 44.6109 14.7093 43.7908 12.8775 42.6937L12.8625 42.7087ZM24 4.49999C20.5159 4.50179 17.0959 5.43705 14.0957 7.20848C11.0955 8.97992 8.62472 11.5228 6.94032 14.5727C5.25593 17.6226 4.41944 21.0681 4.51787 24.5508C4.61629 28.0336 5.64603 31.4263 7.49999 34.3762L5.62499 42.375L13.6237 40.5C16.182 42.1113 19.0799 43.1056 22.0885 43.4045C25.0971 43.7033 28.134 43.2985 30.9593 42.222C33.7845 41.1455 36.3208 39.4267 38.3676 37.2015C40.4145 34.9764 41.9159 32.3057 42.7532 29.4006C43.5906 26.4954 43.7409 23.4354 43.1924 20.4622C42.6439 17.4889 41.4115 14.684 39.5926 12.2689C37.7738 9.85375 35.4182 7.89467 32.7121 6.54637C30.006 5.19808 27.0234 4.4975 24 4.49999Z"
|
||||
fill="white" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_140_218">
|
||||
<rect width="48" height="48" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
@ -1,99 +1,105 @@
|
|||
function applyScrambleEffect() {
|
||||
const glitchTextOnceElements = document.querySelectorAll('.glitch-text');
|
||||
const glitchTextRepeatElements = document.querySelectorAll('.glitch-text-interval');
|
||||
const glitchTextHoverElements = document.querySelectorAll('.glitch-text-hover');
|
||||
|
||||
const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
|
||||
function animateScramble(element, text, duration = 1000) {
|
||||
const chars = [];
|
||||
element.innerHTML = '';
|
||||
const preScrambleWidth = element.offsetWidth;
|
||||
element.style.width = `${preScrambleWidth}px`;
|
||||
|
||||
for (let t = 0; t < text.length; t++) {
|
||||
const span = document.createElement('span');
|
||||
span.innerHTML = text[t] === ' ' ? ' ' : text[t];
|
||||
chars[t] = span;
|
||||
span.style.display = 'inline-block';
|
||||
element.appendChild(span);
|
||||
}
|
||||
|
||||
const rand = Math.random;
|
||||
const SECONDS = 1000;
|
||||
const FPS = 30;
|
||||
const animationLength = duration;
|
||||
|
||||
function animate3(k) {
|
||||
const kk = k * text.length;
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
if (kk < i) {
|
||||
chars[i].innerHTML = String.fromCharCode(~~(65 + rand() * 26));
|
||||
} else {
|
||||
chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i];
|
||||
}
|
||||
const chars = [];
|
||||
element.innerHTML = '';
|
||||
const preScrambleWidth = element.offsetWidth;
|
||||
element.style.width = `${preScrambleWidth}px`;
|
||||
|
||||
for (let t = 0; t < text.length; t++) {
|
||||
const span = document.createElement('span');
|
||||
span.innerHTML = text[t] === ' ' ? ' ' : text[t];
|
||||
chars[t] = span;
|
||||
span.style.display = 'inline-block';
|
||||
element.appendChild(span);
|
||||
}
|
||||
}
|
||||
|
||||
let start = Date.now();
|
||||
function animate() {
|
||||
const current = Date.now();
|
||||
const time = current - start;
|
||||
const k = time / animationLength;
|
||||
|
||||
if (k < 1) {
|
||||
setTimeout(animate, SECONDS / FPS);
|
||||
animate3(k);
|
||||
} else {
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i];
|
||||
}
|
||||
element.style.width = 'auto';
|
||||
element.isAnimating = false;
|
||||
|
||||
const rand = Math.random;
|
||||
const SECONDS = 1000;
|
||||
const FPS = 30;
|
||||
const animationLength = duration;
|
||||
|
||||
function animate3(k) {
|
||||
const kk = k * text.length;
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
if (kk < i) {
|
||||
chars[i].innerHTML = charset[Math.floor(rand() * charset.length)];
|
||||
} else {
|
||||
chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
let start = Date.now();
|
||||
function animate() {
|
||||
const current = Date.now();
|
||||
const time = current - start;
|
||||
const k = time / animationLength;
|
||||
|
||||
if (k < 1) {
|
||||
setTimeout(animate, SECONDS / FPS);
|
||||
animate3(k);
|
||||
} else {
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i];
|
||||
}
|
||||
element.style.width = 'auto';
|
||||
element.isAnimating = false;
|
||||
}
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
|
||||
|
||||
// Use IntersectionObserver for once-only animation
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const element = entry.target;
|
||||
const text = element.innerText;
|
||||
animateScramble(element, text);
|
||||
observer.unobserve(element);
|
||||
}
|
||||
});
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const element = entry.target;
|
||||
const text = element.innerText;
|
||||
animateScramble(element, text);
|
||||
observer.unobserve(element);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1
|
||||
threshold: 0.1
|
||||
});
|
||||
|
||||
|
||||
glitchTextOnceElements.forEach((element) => {
|
||||
observer.observe(element);
|
||||
observer.observe(element);
|
||||
});
|
||||
|
||||
|
||||
glitchTextRepeatElements.forEach((element) => {
|
||||
const text = element.innerText;
|
||||
|
||||
animateScramble(element, text);
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
if (!element.isAnimating) {
|
||||
animateScramble(element, text);
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
element.addEventListener('mouseenter', () => {
|
||||
if (!element.isAnimating) {
|
||||
clearInterval(intervalId);
|
||||
animateScramble(element, text, 800);
|
||||
element.isAnimating = true;
|
||||
|
||||
setTimeout(() => {
|
||||
element.isAnimating = false;
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
const text = element.innerText;
|
||||
|
||||
animateScramble(element, text);
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
if (!element.isAnimating) {
|
||||
animateScramble(element, text);
|
||||
}
|
||||
}, 5000);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', applyScrambleEffect);
|
||||
|
||||
|
||||
// Hover functionality for `.glitch-text-hover` elements
|
||||
glitchTextHoverElements.forEach((element) => {
|
||||
const text = element.innerText;
|
||||
|
||||
element.addEventListener('mouseenter', () => {
|
||||
// Only start the animation if it isn't already in progress
|
||||
if (!element.isAnimating) {
|
||||
element.isAnimating = true;
|
||||
animateScramble(element, text, 800);
|
||||
}
|
||||
});
|
||||
|
||||
// No need for 'mouseleave' as the animation will complete even if the mouse leaves
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', applyScrambleEffect);
|
||||
|
|
|
@ -20,7 +20,6 @@ const {
|
|||
],
|
||||
} = Astro.props;
|
||||
|
||||
console.log(sectionsConfig);
|
||||
// Function to sort sections by order
|
||||
const sortedSections = sectionsConfig
|
||||
.filter((section) => section.visible)
|
||||
|
@ -90,21 +89,29 @@ const sortedSections = sectionsConfig
|
|||
{section.name === "speakers" && (
|
||||
<div class="middle-pane-medium mt-16">
|
||||
<h1 class="my-6 glitch-text ">Speakers</h1>
|
||||
<SpeakerGrid people={core.people} team={core.teams["core-team"]} />
|
||||
<SpeakerGrid
|
||||
people={core.people}
|
||||
team={core.teams["core-team"]}
|
||||
core={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{section.name === "core contributors" && (
|
||||
<div class="middle-pane-medium mt-16">
|
||||
<h1 class="my-6 glitch-text">Core Contributors</h1>
|
||||
<SpeakerGrid people={core.people} team={core.teams["core-team"]} />
|
||||
<SpeakerGrid
|
||||
people={core.people}
|
||||
team={core.teams["core-team"]}
|
||||
core={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{section.name === "contributors" && (
|
||||
<div class="middle-pane-medium">
|
||||
<h1 class="my-6 glitch-text">Contributors</h1>
|
||||
<div class="flex gap-3 flex-wrap mb-4 items-center">
|
||||
<div class="flex gap-3 flex-wrap mb-4 items-center justify-center md:justify-start">
|
||||
{contributors.items.map((contrib) => (
|
||||
<div>
|
||||
<a
|
||||
|
@ -114,7 +121,7 @@ const sortedSections = sectionsConfig
|
|||
>
|
||||
<img
|
||||
src={contrib.avatar_url}
|
||||
class="w-14 rounded-full aspect-square"
|
||||
class="w-6 md:w-14 rounded-full aspect-square"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -3,7 +3,7 @@ const { item } = Astro.props;
|
|||
import { marked } from 'marked';
|
||||
import EventsExt from '../events-ext.json';
|
||||
import core from "../core.json";
|
||||
import { dateFormat, dateInfo, dateEnd, nameRenderer, ccRenderer, eventStatus, getSpeaker, findExt, getEventPoster } from '../lib/events.js';
|
||||
import { dateFormat, dateEnd, nameRenderer, ccRenderer, eventStatus, getSpeaker, findExt, getEventPoster } from '../lib/events.js';
|
||||
import SpeakerList from './SpeakerList.astro';
|
||||
import PeopleCarousel from './PeopleCarousel.astro';
|
||||
|
||||
|
|
|
@ -14,12 +14,14 @@ const {
|
|||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div class="middle-pane-big flex flex-wrap lg:flex-nowrap gap-[3px]">
|
||||
<div
|
||||
class="middle-pane-big grid grid-cols-2 lg:flex lg:flex-nowrap gap-2 md:gap-[3px]"
|
||||
>
|
||||
{
|
||||
images.slice(0, 4).map((image, index) => (
|
||||
<div class="flex-auto overflow-hidden" key={index}>
|
||||
<div class="flex-auto overflow-hidden">
|
||||
<img
|
||||
class="object-cover w-full max-h-[223px] cursor-pointer gallery-image"
|
||||
class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image"
|
||||
src={image}
|
||||
alt={`Image ${index + 1}`}
|
||||
data-index={index}
|
||||
|
@ -29,12 +31,14 @@ const {
|
|||
}
|
||||
</div>
|
||||
|
||||
<div class="middle-pane-big flex flex-wrap lg:flex-nowrap gap-[3px]">
|
||||
<div
|
||||
class="middle-pane-big grid grid-cols-2 lg:flex lg:flex-nowrap gap-2 md:gap-[3px]"
|
||||
>
|
||||
{
|
||||
images.slice(4).map((image, index) => (
|
||||
<div class="flex-auto overflow-hidden" key={index + 4}>
|
||||
<div class="flex-auto overflow-hidden">
|
||||
<img
|
||||
class="object-cover w-full max-h-[223px] cursor-pointer gallery-image"
|
||||
class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image"
|
||||
src={image}
|
||||
alt={`Image ${index + 5}`}
|
||||
data-index={index + 4}
|
||||
|
@ -49,8 +53,7 @@ const {
|
|||
>
|
||||
<div class="relative modal-content">
|
||||
<button class="absolute top-6 right-0 text-white close-modal z-100"
|
||||
></button
|
||||
>
|
||||
></button>
|
||||
</div>
|
||||
<div class="flex flex-col" style="width: 54vw; height: 60vh;">
|
||||
<img
|
||||
|
@ -64,7 +67,6 @@ const {
|
|||
{
|
||||
images.map((image, index) => (
|
||||
<img
|
||||
key={index}
|
||||
class="w-24 h-24 object-contain cursor-pointer thumbnail-image"
|
||||
src={image}
|
||||
alt={`Thumbnail ${index + 1}`}
|
||||
|
|
|
@ -86,42 +86,51 @@ let filteredPeople = [
|
|||
const limitedPeople = filteredPeople.slice(0, 12);
|
||||
|
||||
function personLink(person) {
|
||||
return person.refs?.twitter
|
||||
? `https://twitter.com/${person.refs.twitter}`
|
||||
: person.refs?.bsky
|
||||
? `https://bsky.app/profile/${person.refs.bsky}`
|
||||
: "#";
|
||||
if (person.refs?.twitter) {
|
||||
return `https://twitter.com/${person.refs.twitter}`;
|
||||
} else if (person.refs?.bsky) {
|
||||
return `https://bsky.app/profile/${person.refs.bsky}`;
|
||||
} else if (person.refs?.linkedin) {
|
||||
return `https://www.linkedin.com/in/${person.refs.linkedin}`;
|
||||
} else if (person.refs?.github) {
|
||||
return `https://github.com/${person.refs.github}`;
|
||||
} else if (person.refs?.matrix) {
|
||||
return `https://matrix.to/#/${person.refs.matrix}`;
|
||||
} else if (person.refs?.email) {
|
||||
return `mailto:${person.refs.email}`;
|
||||
} else {
|
||||
return "#";
|
||||
}
|
||||
}
|
||||
|
||||
function truncateCaption(caption) {
|
||||
if (!caption) return "";
|
||||
const words = caption.split(" ");
|
||||
if (words.length > 10) {
|
||||
return words.slice(0, 20).join(" ") + "...";
|
||||
}
|
||||
return caption;
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
<div
|
||||
class="grid place-items-center grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2"
|
||||
class="grid place-items-start grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2"
|
||||
>
|
||||
{
|
||||
limitedPeople.map((person) => (
|
||||
<div class=" max-w-xs w-full h-[340px] bg-transparent overflow-hidden p-1 space-y-1 mb-2">
|
||||
<div class="max-w-xs w-full max-h-[340px] bg-transparent overflow-hidden p-1 space-y-1 mb-2">
|
||||
<a href={personLink(person)}>
|
||||
<img
|
||||
src={person.imageUrl}
|
||||
alt={person.name}
|
||||
class="w-full h-48 object-cover filter grayscale"
|
||||
class="h-24 w-full md:h-48 object-cover object-center h-full grayscale"
|
||||
/>
|
||||
</a>
|
||||
<div class=" flex items-center justify-center flex-col pt-8">
|
||||
<h3 class="text-lg font-bold">{person.name}</h3>
|
||||
{person.refs && person.refs.twitter && (
|
||||
<p class="text-sm text-gray-500">@{person.refs.twitter}</p>
|
||||
<div class="mt-4 flex items-center justify-center flex-col ">
|
||||
<h3 class="text-xs md:text-lg font-bold leading-6">{person.name}</h3>
|
||||
{person.refs && (
|
||||
<p class="text-xs md:text-sm text-gray-500">
|
||||
{person.refs.twitter && `@${person.refs.twitter}`}
|
||||
{person.refs.bsky && ` | bsky: ${person.refs.bsky}`}
|
||||
{person.refs.linkedin && ` | LinkedIn: ${person.refs.linkedin}`}
|
||||
{person.refs.github && ` | GitHub: ${person.refs.github}`}
|
||||
{person.refs.matrix && ` | Matrix: ${person.refs.matrix}`}
|
||||
{person.refs.email && ` | Email: ${person.refs.email}`}
|
||||
</p>
|
||||
)}
|
||||
{/* <p class="text-sm">{truncateCaption(person.caption)}</p> */}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
|
|
|
@ -21,8 +21,10 @@ let currentTestimonial = 0;
|
|||
---
|
||||
|
||||
<div class="w-full mx-auto px-8 border-2 border-[#202020]">
|
||||
<div class="relative testimonial-fade active" id="testimonial-container">
|
||||
<div class="flex items-center justify-center overflow-hidden">
|
||||
<div class="relative" id="testimonial-container">
|
||||
<div
|
||||
class="flex flex-col md:flex-row my-4 md:my-0 items-center justify-center testimonial-fade active overflow-hidden"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
src={testimonials[currentTestimonial].imageUrl}
|
||||
|
|
|
@ -1,49 +1,59 @@
|
|||
---
|
||||
const { people, team } = Astro.props;
|
||||
const { people, team, core } = Astro.props;
|
||||
|
||||
// Filter the people and limit the results to 12
|
||||
const filteredPeople = people
|
||||
.filter((p) => !team.includes(p.id))
|
||||
.filter((p) => p.imageUrl)
|
||||
.slice(0, 12); // Limit to the first 12 people
|
||||
// Filter based on the `core` parameter
|
||||
const members = core
|
||||
? people.filter((p) => team.includes(p.id)) // If `core` is true, filter for team members
|
||||
: people.filter((p) => !team.includes(p.id)); // If `core` is false or undefined, filter for non-team members
|
||||
|
||||
const filteredPeople = members.filter((p) => p.imageUrl).slice(0, 12);
|
||||
|
||||
function personLink(person) {
|
||||
return person.refs?.twitter
|
||||
? `https://twitter.com/${person.refs.twitter}`
|
||||
: person.refs?.bsky
|
||||
? `https://bsky.app/profile/${person.refs.bsky}`
|
||||
: "#";
|
||||
}
|
||||
|
||||
function truncateCaption(caption) {
|
||||
if (!caption) return "";
|
||||
const words = caption.split(" ");
|
||||
if (words.length > 10) {
|
||||
return words.slice(0, 20).join(" ") + "...";
|
||||
if (person.refs?.twitter) {
|
||||
return `https://twitter.com/${person.refs.twitter}`;
|
||||
} else if (person.refs?.bsky) {
|
||||
return `https://bsky.app/profile/${person.refs.bsky}`;
|
||||
} else if (person.refs?.linkedin) {
|
||||
return `https://www.linkedin.com/in/${person.refs.linkedin}`;
|
||||
} else if (person.refs?.github) {
|
||||
return `https://github.com/${person.refs.github}`;
|
||||
} else if (person.refs?.matrix) {
|
||||
return `https://matrix.to/#/${person.refs.matrix}`;
|
||||
} else if (person.refs?.email) {
|
||||
return `mailto:${person.refs.email}`;
|
||||
} else {
|
||||
return "#";
|
||||
}
|
||||
return caption;
|
||||
}
|
||||
---
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
|
||||
{filteredPeople.map((person) => (
|
||||
<div
|
||||
class="max-w-xs w-full h-[340px] bg-transparent overflow-hidden p-1 space-y-1 mb-2"
|
||||
>
|
||||
<a href={personLink(person)}>
|
||||
<img
|
||||
src={person.imageUrl}
|
||||
alt={person.name}
|
||||
class="w-full h-48 object-cover"
|
||||
/>
|
||||
</a>
|
||||
<div class="mt-4">
|
||||
<h3 class="text-lg font-bold leading-6 ">{person.name}</h3>
|
||||
{person.refs && person.refs.twitter && (
|
||||
<p class="text-sm text-gray-500">@{person.refs.twitter}</p>
|
||||
)}
|
||||
<p class="text-sm">{truncateCaption(person.caption)}</p>
|
||||
<div
|
||||
class="grid grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 md:gap-4 place-items-start"
|
||||
>
|
||||
{
|
||||
filteredPeople.map((person) => (
|
||||
<div class="max-w-xs w-full max-h-[340px] bg-transparent overflow-hidden p-1 space-y-1 mb-2">
|
||||
<a href={personLink(person)}>
|
||||
<img
|
||||
src={person.imageUrl}
|
||||
alt={person.name}
|
||||
class="h-24 w-full md:h-48 object-cover object-center h-full"
|
||||
/>
|
||||
</a>
|
||||
<div class="mt-4">
|
||||
<h3 class="text-xs md:text-lg font-bold leading-6">{person.name}</h3>
|
||||
{person.refs && (
|
||||
<p class="text-xs text-gray-500">
|
||||
{person.refs.twitter && `@${person.refs.twitter}`}
|
||||
{person.refs.bsky && ` | bsky: ${person.refs.bsky}`}
|
||||
{person.refs.linkedin && ` | LinkedIn: ${person.refs.linkedin}`}
|
||||
{person.refs.github && ` | GitHub: ${person.refs.github}`}
|
||||
{person.refs.matrix && ` | Matrix: ${person.refs.matrix}`}
|
||||
{person.refs.email && ` | Email: ${person.refs.email}`}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
|
|
@ -22,7 +22,7 @@ header:
|
|||
link: news
|
||||
- name: Docs
|
||||
link: docs
|
||||
- name: Membership
|
||||
- name: Get Involved
|
||||
link: membership
|
||||
url: /membership
|
||||
#- name: Manifesto
|
||||
|
|
|
@ -38,7 +38,7 @@
|
|||
"received_events_url": "https://api.github.com/users/Msiusko/received_events",
|
||||
"type": "User",
|
||||
"site_admin": false,
|
||||
"contributions": 3012
|
||||
"contributions": 3013
|
||||
},
|
||||
{
|
||||
"login": "burningtree",
|
||||
|
@ -122,7 +122,7 @@
|
|||
"received_events_url": "https://api.github.com/users/niclaz/received_events",
|
||||
"type": "User",
|
||||
"site_admin": false,
|
||||
"contributions": 322
|
||||
"contributions": 329
|
||||
},
|
||||
{
|
||||
"login": "cryptomar1o",
|
||||
|
@ -187,6 +187,27 @@
|
|||
"site_admin": false,
|
||||
"contributions": 58
|
||||
},
|
||||
{
|
||||
"login": "DeBelg",
|
||||
"id": 38403795,
|
||||
"node_id": "MDQ6VXNlcjM4NDAzNzk1",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/38403795?v=4",
|
||||
"gravatar_id": "",
|
||||
"url": "https://api.github.com/users/DeBelg",
|
||||
"html_url": "https://github.com/DeBelg",
|
||||
"followers_url": "https://api.github.com/users/DeBelg/followers",
|
||||
"following_url": "https://api.github.com/users/DeBelg/following{/other_user}",
|
||||
"gists_url": "https://api.github.com/users/DeBelg/gists{/gist_id}",
|
||||
"starred_url": "https://api.github.com/users/DeBelg/starred{/owner}{/repo}",
|
||||
"subscriptions_url": "https://api.github.com/users/DeBelg/subscriptions",
|
||||
"organizations_url": "https://api.github.com/users/DeBelg/orgs",
|
||||
"repos_url": "https://api.github.com/users/DeBelg/repos",
|
||||
"events_url": "https://api.github.com/users/DeBelg/events{/privacy}",
|
||||
"received_events_url": "https://api.github.com/users/DeBelg/received_events",
|
||||
"type": "User",
|
||||
"site_admin": false,
|
||||
"contributions": 45
|
||||
},
|
||||
{
|
||||
"login": "jiricepelka",
|
||||
"id": 87526329,
|
||||
|
@ -208,27 +229,6 @@
|
|||
"site_admin": false,
|
||||
"contributions": 45
|
||||
},
|
||||
{
|
||||
"login": "DeBelg",
|
||||
"id": 38403795,
|
||||
"node_id": "MDQ6VXNlcjM4NDAzNzk1",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/38403795?v=4",
|
||||
"gravatar_id": "",
|
||||
"url": "https://api.github.com/users/DeBelg",
|
||||
"html_url": "https://github.com/DeBelg",
|
||||
"followers_url": "https://api.github.com/users/DeBelg/followers",
|
||||
"following_url": "https://api.github.com/users/DeBelg/following{/other_user}",
|
||||
"gists_url": "https://api.github.com/users/DeBelg/gists{/gist_id}",
|
||||
"starred_url": "https://api.github.com/users/DeBelg/starred{/owner}{/repo}",
|
||||
"subscriptions_url": "https://api.github.com/users/DeBelg/subscriptions",
|
||||
"organizations_url": "https://api.github.com/users/DeBelg/orgs",
|
||||
"repos_url": "https://api.github.com/users/DeBelg/repos",
|
||||
"events_url": "https://api.github.com/users/DeBelg/events{/privacy}",
|
||||
"received_events_url": "https://api.github.com/users/DeBelg/received_events",
|
||||
"type": "User",
|
||||
"site_admin": false,
|
||||
"contributions": 40
|
||||
},
|
||||
{
|
||||
"login": "0xdevant",
|
||||
"id": 26415019,
|
||||
|
@ -691,6 +691,27 @@
|
|||
"site_admin": false,
|
||||
"contributions": 2
|
||||
},
|
||||
{
|
||||
"login": "ElektrikSheep",
|
||||
"id": 182003614,
|
||||
"node_id": "U_kgDOCtknng",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/182003614?v=4",
|
||||
"gravatar_id": "",
|
||||
"url": "https://api.github.com/users/ElektrikSheep",
|
||||
"html_url": "https://github.com/ElektrikSheep",
|
||||
"followers_url": "https://api.github.com/users/ElektrikSheep/followers",
|
||||
"following_url": "https://api.github.com/users/ElektrikSheep/following{/other_user}",
|
||||
"gists_url": "https://api.github.com/users/ElektrikSheep/gists{/gist_id}",
|
||||
"starred_url": "https://api.github.com/users/ElektrikSheep/starred{/owner}{/repo}",
|
||||
"subscriptions_url": "https://api.github.com/users/ElektrikSheep/subscriptions",
|
||||
"organizations_url": "https://api.github.com/users/ElektrikSheep/orgs",
|
||||
"repos_url": "https://api.github.com/users/ElektrikSheep/repos",
|
||||
"events_url": "https://api.github.com/users/ElektrikSheep/events{/privacy}",
|
||||
"received_events_url": "https://api.github.com/users/ElektrikSheep/received_events",
|
||||
"type": "User",
|
||||
"site_admin": false,
|
||||
"contributions": 2
|
||||
},
|
||||
{
|
||||
"login": "nullfekt",
|
||||
"id": 118863467,
|
||||
|
|
2589
src/core.json
2589
src/core.json
File diff suppressed because it is too large
Load diff
|
@ -7,7 +7,7 @@
|
|||
"2024-10-03T20:00:00.000Z"
|
||||
],
|
||||
"coverUrl": "https://images.lumacdn.com/event-covers/3q/4f28bcb7-a158-412a-92d8-27419b113e58",
|
||||
"guestCount": 56
|
||||
"guestCount": 66
|
||||
},
|
||||
{
|
||||
"url": "w3pn-meetup-devcon7",
|
||||
|
@ -17,6 +17,6 @@
|
|||
"2024-11-11T12:00:00.000Z"
|
||||
],
|
||||
"coverUrl": "https://images.lumacdn.com/event-covers/7g/87ce6260-c05a-46be-9576-93d5c02f766f",
|
||||
"guestCount": 407
|
||||
"guestCount": 450
|
||||
}
|
||||
]
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"projects": 495,
|
||||
"contributors": 24
|
||||
"projects": 496,
|
||||
"contributors": 25
|
||||
}
|
|
@ -151,10 +151,12 @@ function genHeading(str) {
|
|||
banner && typeof banner !== "object" && (
|
||||
<div class="w-full flex mt-20 sm:mt-32 middle-pane-medium">
|
||||
<div>
|
||||
{/* <div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96" /> */}
|
||||
<h1 class="glitch-text-interval text-6xl">
|
||||
<div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96" />
|
||||
|
||||
|
||||
{/* <h1 class="glitch-text-interval text-6xl">
|
||||
web3privacy summit #1
|
||||
</h1>
|
||||
</h1> */}
|
||||
<div class="text-left mt-10">{config.hero.text}</div>
|
||||
<div class="mt-6">
|
||||
<a class="button" href="/about">
|
||||
|
@ -172,7 +174,11 @@ function genHeading(str) {
|
|||
<>
|
||||
<div class="middle-pane-medium mt-8 sm:mt-14 sm:mb-8">
|
||||
<div class="leading-none flex justify-center mb-3 text-[4px] sm:text-[8px] text-white">
|
||||
<pre>{genHeading(title)}</pre>
|
||||
<pre>
|
||||
<code class="font-mono layout-heading ">
|
||||
{genHeading(title)}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="flex items-center justify-center w-full text-center">
|
||||
<h3 class=" w-full max-w-[938px] glitch-text">{subtext}</h3>
|
||||
|
|
|
@ -20,7 +20,6 @@ const sectionsConfig = [
|
|||
{ name: "contributors", visible: true, order: 3 },
|
||||
{ name: "membersGrid", visible: true, order: 4 },
|
||||
{ name: "socialLinks", visible: true, order: 5 },
|
||||
// { name: "community", visible: false, order: 6 },
|
||||
];
|
||||
|
||||
for (const ev of events) {
|
||||
|
@ -33,21 +32,33 @@ for (const ev of events) {
|
|||
}
|
||||
}
|
||||
|
||||
const allowedFeaturedTypes = [
|
||||
"summit",
|
||||
"meetup",
|
||||
"online-summit",
|
||||
"congress",
|
||||
"privacy-corner",
|
||||
"meta-hackathons",
|
||||
];
|
||||
|
||||
const featuredEvents = [];
|
||||
for (const e of upcomingEvents) {
|
||||
if (featuredEvents.length > 2) {
|
||||
break;
|
||||
}
|
||||
if (
|
||||
["summit", "meetup", "online-summit"].includes(e.type) &&
|
||||
allowedFeaturedTypes.includes(e.type) &&
|
||||
e.links?.rsvp &&
|
||||
!featuredEvents.find((ex) => ex.type === e.type)
|
||||
) {
|
||||
featuredEvents.push(e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
<BaseLayout
|
||||
title="About web3privacy"
|
||||
image="og_about"
|
||||
|
@ -63,14 +74,14 @@ for (const e of upcomingEvents) {
|
|||
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 gap-16 mb-[82px]">
|
||||
<div class="flex flex-col gap-[36px] md:order-2">
|
||||
<div class="md:hidden block mb-[12px] ">
|
||||
<div class="md:hidden block mb-[12px]">
|
||||
<h1>activism. care. solidarity.</h1>
|
||||
<div set:html={config.landing.mission} />
|
||||
<div class="mt-8 flex gap-6 items-center w-full">
|
||||
<a class="button inverted" href={core.links.manifesto}
|
||||
><button>Read manifesto</button></a
|
||||
>
|
||||
<a class="button font-bold " href={core.links.telegram}
|
||||
<a class="button font-bold" href={core.links.telegram}
|
||||
><button>Join us</button></a
|
||||
>
|
||||
</div>
|
||||
|
@ -87,7 +98,7 @@ for (const e of upcomingEvents) {
|
|||
<a class="button inverted" href={core.links.manifesto}
|
||||
><button>Read manifesto</button></a
|
||||
>
|
||||
<a class="button " href={core.links.manifesto}
|
||||
<a class="button" href={core.links.manifesto}
|
||||
><button>Join us</button></a
|
||||
>
|
||||
</div>
|
||||
|
@ -95,7 +106,7 @@ for (const e of upcomingEvents) {
|
|||
<hr class="mt-10 border-[#e0e0e0]" />
|
||||
<div class="md:block hidden mt-[26px]">
|
||||
<h1 class="glitch-text">Our mission</h1>
|
||||
<div set:html={config.landing.mission} />
|
||||
<div set:html={config.landing.mission} />
|
||||
</div>
|
||||
<hr class="mt-10 border-[#e0e0e0]" />
|
||||
|
||||
|
@ -124,7 +135,6 @@ for (const e of upcomingEvents) {
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -147,5 +157,3 @@ for (const e of upcomingEvents) {
|
|||
<AboutFooter {sectionsConfig} />
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
|
||||
|
|
|
@ -25,13 +25,22 @@ for (const ev of events) {
|
|||
}
|
||||
}
|
||||
|
||||
const allowedFeaturedTypes = [
|
||||
"summit",
|
||||
"meetup",
|
||||
"online-summit",
|
||||
"congress",
|
||||
"privacy-corner",
|
||||
"meta-hackathons",
|
||||
];
|
||||
|
||||
const featuredEvents = [];
|
||||
for (const e of upcomingEvents) {
|
||||
if (featuredEvents.length > 2) {
|
||||
break;
|
||||
}
|
||||
if (
|
||||
["summit", "meetup", "online-summit"].includes(e.type) &&
|
||||
allowedFeaturedTypes.includes(e.type) &&
|
||||
e.links?.rsvp &&
|
||||
!featuredEvents.find((ex) => ex.type === e.type)
|
||||
) {
|
||||
|
@ -49,7 +58,7 @@ for (const e of upcomingEvents) {
|
|||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w3pn-hp-grid gap-2 mt-2"
|
||||
>
|
||||
<div class="bg-events" data-url="/events">
|
||||
<div class="title">Events</div>
|
||||
<div class="title glitch-text">Events</div>
|
||||
<div class="numbers">
|
||||
<div>
|
||||
<div class="big">{eventsUpcoming}</div>
|
||||
|
@ -71,6 +80,7 @@ for (const e of upcomingEvents) {
|
|||
<div class="text-white mt-1 ml-1.5">
|
||||
<a
|
||||
href="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents"
|
||||
class="glitch-text"
|
||||
>Web3 Privacy Database</a
|
||||
>
|
||||
</div>
|
||||
|
@ -95,7 +105,7 @@ for (const e of upcomingEvents) {
|
|||
</div>
|
||||
</div>
|
||||
<div class="bg-talks" data-url="/research">
|
||||
<div class="title">Research</div>
|
||||
<div class="title glitch-text">Research</div>
|
||||
<div class="numbers">
|
||||
<div>
|
||||
<div class="big">{core.research.length} research projects →</div>
|
||||
|
@ -106,12 +116,9 @@ for (const e of upcomingEvents) {
|
|||
</div>
|
||||
|
||||
<div class="middle-pane-medium mt-10">
|
||||
<!--div class="mt-10">
|
||||
<h1>Our Projects</h1>
|
||||
</div-->
|
||||
|
||||
<div class="mt-16">
|
||||
<h1>Featured Events</h1>
|
||||
<h1 class="glitch-text">Featured Events</h1>
|
||||
</div>
|
||||
|
||||
<div class="text-left">
|
||||
|
@ -140,7 +147,7 @@ for (const e of upcomingEvents) {
|
|||
</div>
|
||||
|
||||
<div class="mt-16">
|
||||
<h1>Latest Articles</h1>
|
||||
<h1 class="glitch-text">Latest Articles</h1>
|
||||
</div>
|
||||
|
||||
<div class="w3pn-articles grid md:grid-cols-2 gap-6">
|
||||
|
@ -171,7 +178,7 @@ for (const e of upcomingEvents) {
|
|||
</div>
|
||||
|
||||
<div class="mt-16">
|
||||
<h1>Latest Talks</h1>
|
||||
<h1 class="glitch-text">Latest Talks</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
|
|
|
@ -50,14 +50,14 @@ const sectionsConfig = [
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 flex-wrap mb-4 justify-start mx-4">
|
||||
<div class="flex gap-3 flex-wrap mb-4 justify-center md:justify-start mx-4">
|
||||
{
|
||||
contributors.items.map((contrib) => (
|
||||
<div>
|
||||
<a href={contrib.html_url} target="_blank" title={contrib.login}>
|
||||
<img
|
||||
src={contrib.avatar_url}
|
||||
class="w-14 rounded-full aspect-square"
|
||||
class="w-6 md:w-14 rounded-full aspect-square"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -33,6 +33,25 @@
|
|||
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
.glitch-text {
|
||||
font-family: Major Mono Display, ui-monospace, SFMono-Regular, Menlo, Monaco,
|
||||
Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 500ms;
|
||||
text-transform: lowercase!important;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.testimonial-fade {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.testimonial-fade.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@tailwind components;
|
||||
|
||||
@layer components {
|
||||
|
@ -86,7 +105,6 @@
|
|||
a.button button {
|
||||
fill: #fff;
|
||||
stroke: #fff;
|
||||
|
||||
}
|
||||
|
||||
a.button button::after {
|
||||
|
|
Loading…
Reference in a new issue