Merge pull request #9 from ethb3rlin/branch-1

Update logo and favicon, revert showing faces on hover

README.md

@@ -1,4 +1,4 @@
-# ETHBerlin4 Website
+# ETHBerlin04 Website
 
 Join the ETHBerlin Matrix space to contribute: [#ethberlin:dod.ngo](https://matrix.to/#/%23ethberlin:dod.ngo)
 

gatsby-config.js

@@ -1,9 +1,9 @@
 module.exports = {
   siteMetadata: {
-    title: "ETHBerlin4",
+    title: "ETHBerlin04",
     siteUrl: `https://ethberlin.org`,
     url: `https://ethberlin.org`,
-    description: "ETHBerlin4: Identity Crisis, May 24-26, 2024, Kreuzberg, Berlin",
+    description: "ETHBerlin04: Identity Crisis, May 24-26, 2024, Kreuzberg, Berlin",
     twitterUsername: "@ETHBerlin",
     image: `/card.png`,
   },

package.json

@@ -2,7 +2,7 @@
   "name": "ethberlin",
   "version": "4.0.0",
   "private": true,
-  "description": "ETHBerlin4 website",
+  "description": "ETHBerlin04 website",
   "author": "kuzdogan",
   "keywords": [
     "gatsby"

src/components/ETHBerlin.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const ETHBerlin = ({ className }) => (
   <span className={`font-ocra text-sm ${className} break-all`}>
-    ETHBerlin&lt;&lt;4&lt;&lt;&lt;&lt;Identity&lt;&lt;Crisis&lt;&lt;
+    ETHBerlin&lt;&lt;04&lt;&lt;&lt;&lt;Identity&lt;&lt;Crisis&lt;&lt;
   </span>
 );
 

src/components/EthBerlinLogo.jsx

@@ -1,16 +1,10 @@
 import React from "react";
+import logo from "../images/ethberlin4-logo.png";
 
 const EthBerlinLogo = React.forwardRef((props, ref) => {
   return (
-    <a
-      ref={ref}
-      className={`font-ocra tracking-widest	 text-black hover:no-underline ${props.className} text-right `}
-      href="/"
-    >
-      <div className={`${props.titleClassName}`}>ETHBerlin4</div>
-      <div className={`${props.subtitleClassName}`}>
-      <span className={`font-ocra`}>  &lt;&lt;&lt;&lt;IDENTITY&lt;&lt;CRISIS&lt;&lt; </span>
-      </div>
+    <a ref={ref} className={`${props.className}`} href="/">
+      <img src={logo} alt="EthBerlin" />
     </a>
   );
 });

src/components/Sidebar.jsx

@@ -6,7 +6,7 @@ const Sidebar = ({ className }) => {
 
   const MenuItems = ({ className, style, mobile, setShowNav }) => (
     <nav
-      className={`flex flex-col gap-2 text-xl font-ocra ${className}`}
+      className={`flex flex-col gap-2 text-lg font-ocra ${className}`}
       style={style}
     >
       {mobile && (
@@ -65,15 +65,19 @@ const Sidebar = ({ className }) => {
         {/* Non-moving logo navbar for mobile */}
         <div className=" text-black my-8 mx-4">
           {/* Header */}
-          <div className="flex justify-between">
-            <a style={{ textDecoration: "none" }} href="/">
+          <div className="flex items-center justify-between">
+            <a
+              style={{ textDecoration: "none" }}
+              href="/"
+              className="mr-8 max-w-[300px]"
+            >
               <EthBerlinLogo
                 className=""
                 titleClassName="text-2xl"
                 subtitleClassName={`text-xs `}
               />
             </a>
-            <div className=" flex flex-col flex-grow-0 font-bundessans text-black bg-white text-2xl leading-3 justify-center">
+            <div className=" flex flex-col flex-grow-0 font-bundessans whitespace-nowrap text-black bg-white text-2xl leading-3 justify-center">
               <button
                 className="p-2"
                 onClick={() => setShowNav((prev) => !prev)}

src/pages/about.jsx

@@ -40,7 +40,7 @@ const About = () => {
           an educational event, a platform for hacktivism, and a community
           initiative to push the decentralized ecosystem forward.{" "}
           <span className="font-ocra text-sm">
-            ETHBerlin4 &lt;&lt;&lt;Identity Crisis&lt;&lt;&gt;&gt;&gt;
+            ETHBerlin04 &lt;&lt;&lt;Identity Crisis&lt;&lt;&gt;&gt;&gt;
           </span>{" "}
           is the fourth edition, and we've come a long way since we hosted our
           first hackathon in 2018.{" "}

src/pages/index.jsx

@@ -1,39 +1,23 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import passface from "../assets/passface/passface.gif";
 import dod from "../assets/passface/dod.png";
 import Layout from "../components/Layout";
 import ETHBerlin from "../components/ETHBerlin";
 
 const Home = () => {
+  // mouseover image passport
   const [imageSrcPass, setImageSrcPass] = useState(dod);
 
-  // Function to toggle the image
-  const toggleImage = () => {
-    setImageSrcPass(current => current === dod ? passface : dod);
-  };
-
-  // Detect if the device is mobile based on the window's width
-  const isMobile = () => {
-    return window.innerWidth <= 768;
-  };
-
-  // Effect to add event listeners based on the device type
   useEffect(() => {
-    const imageElement = document.querySelector('.passport-image');
-
-    if (isMobile()) {
-      // Mobile: Change image on click
-      imageElement.addEventListener('click', toggleImage);
-    } else {
-      // Desktop: Change image on hover
-      imageElement.addEventListener('mouseenter', toggleImage);
-    }
-
-    // Cleanup function to remove event listeners
-    return () => {
-      imageElement.removeEventListener('click', toggleImage);
-      imageElement.removeEventListener('mouseenter', toggleImage);
+    const MAX_TIME = 2000; // Maximum interval between image changes
+    const changeImage = () => {
+      setImageSrcPass((current) => (current === dod ? passface : dod));
+      setTimeout(changeImage, Math.random() * MAX_TIME); // Reschedule with a new random interval
     };
+
+    const timeoutId = setTimeout(changeImage, Math.random() * MAX_TIME); // Initial scheduling
+
+    return () => clearTimeout(timeoutId); // Clear timeout on component unmount
   }, []);
 
   return (
@@ -45,7 +29,7 @@ const Home = () => {
             <div className="flex flex-col items-center justify-center mb-4">
               <img
                 src={imageSrcPass}
-                className="passport-image w-48 h-48 object-cover"
+                className=" w-48 h-48 object-cover"
                 alt="Fake passport image"
               />
             </div>
@@ -61,9 +45,11 @@ const Home = () => {
             a platform for hacktivism, and a community initiative to push the
             decentralized ecosystem forward.
           </p>
+
           <p>
             Loading <ETHBerlin />: May 24-26, 2024, Berlin, Germany.
           </p>
+
           <p>
             The situation is dire. We have been operating in crisis mode for
             years now. Established systems are failing, new and old imperialist
@@ -72,17 +58,20 @@ const Home = () => {
             systems are falling apart, education is on a consistent downward
             spiral — the list goes on.
           </p>
+
           <p>
             But there is hope: The soils to grow new ideas have never been more
             nutritious. It has never been more urgent to double down on new
             revolutionary concepts and ideas. It is high time to change the
             world.
           </p>
+
           <p>
             For this year's ETHBerlin hackathon, we invite you to join the
             discourse and hack on anti-identity features instead of identity
             anti-features that boost the individual's privacy.
           </p>
+
           <p>
             To learn more about our vision & mission, press{" "}
             <span className="font-ocra text-sm">&lt;&lt;M&lt;</span>

src/pages/manifesto.jsx

@@ -172,7 +172,7 @@ const Manifesto = () => {
           </p>
           <p>
             And, just like last year, we encourage hackers, workshop hosts, and
-            supporters at ETHBerlin4 to focus on the following key attributes:
+            supporters at ETHBerlin04 to focus on the following key attributes:
           </p>
           <ul>
             <li>

src/styles/global.css

@@ -26,7 +26,7 @@
   @font-face {
     font-family: DotCapital;
     font-weight: 400;
-    src: url(../assets/fonts/dot2/dot2.ttf);
+    src: url(../assets/fonts/dotCapital/dotCapital.ttf);
   }
 
   .material-symbols-outlined {