added background pulses

seamushinz · Oct 5, 2024 · ccd3954 · ccd3954
1 parent 85a6610
commit ccd3954
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 138 deletions.
diff --git a/Styles/backgroundPulseStyle.css b/Styles/backgroundPulseStyle.css
@@ -0,0 +1,30 @@
+/* for background pulses */
+:root {
+  --pulse-size: 20vw;
+  --pulse-scale: 5; /* Scale factor for the animation */
+  --pulse-duration: 25s; /* Duration of pulse animation */
+}
+
+.pulse {
+  position: absolute;
+  width: var(--pulse-size);  /* Using CSS variable for size */
+  height: var(--pulse-size); /* Using CSS variable for size */
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
+  animation: pulse var(--pulse-duration) infinite ease-in-out; /* Using variable for duration */
+  pointer-events: none;
+}
+
+@keyframes pulse {
+  0% {
+      transform: scale(0);
+      opacity: 0;
+  }
+  65% {
+      opacity: 0.75;
+  }
+  100% {
+      transform: scale(var(--pulse-scale)); /* Using variable for scale */
+      opacity: 0;
+  }
+}
diff --git a/Styles/styles.css b/Styles/styles.css
@@ -0,0 +1,41 @@
+:root {
+    --primary-color: #FABC2A;
+    --secondary-color: #7c7c7c44;
+    --background-color: #FAFAFF;
+    --text-color: #1C1C1C;
+}
+
+.index
+{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100%;
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+h1 {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: xx-large;
+    font-weight: bolder;
+    color: var(--text-color);
+    margin: 20px;
+}
+
+@font-face {
+    font-family: 'Blackbird';
+    src: url('../assets/Projekt\ Blackbird.otf') format('opentype');
+  }
+
+body,html {
+    font-family: Blackbird , Helvetica, Arial;
+    color: var(--text-color); 
+    background-color: var(--background-color);
+    margin: 0; /* Remove default margin */
+    padding: 0; /* Remove default padding */
+    position: relative;
+
+}
diff --git a/index.html b/index.html
@@ -5,9 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Seamus Hinz</title>
   <link rel="icon" type="image/x-con" href="Assets/Self Portrait.jpg">
-  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="Styles/styles.css">
+  <link rel="stylesheet" href="Styles/backgroundPulseStyle.css">
 </head>
 
+<body>
+
 <nav>
   <section class="topnav">
     <div class="left-items">
@@ -28,10 +31,9 @@ <h1>Seamus Hinz</h1>
 <main>
   <div class="centered-text">
     Hello there.
-    <br>
-    <br>
-    Site is under construction.
   </div>  
 </main>
+<script src="script.js"></script>
+</body>
 
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,53 @@
+// Define a color palette (use any colors you like)
+const colorPalette = [
+  'rgba(255, 99, 132, 0.5)',  // Light red
+  'rgba(54, 162, 235, 0.5)',  // Light blue
+  'rgba(75, 192, 192, 0.5)',  // Light teal
+  'rgba(255, 206, 86, 0.5)',  // Light yellow
+  'rgba(153, 102, 255, 0.5)', // Light purple
+  'rgba(255, 159, 64, 0.5)'   // Light orange
+];
+
+function getRandomColor() {
+  // Randomly select a color from the colorPalette array
+  const randomIndex = Math.floor(Math.random() * colorPalette.length);
+  return colorPalette[randomIndex];
+}
+
+function getCssVariableValue(variable) {
+  // Get the CSS variable value from the :root selector
+  return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+}
+
+function createPulse() {
+  const pulse = document.createElement('div');
+  pulse.classList.add('pulse');
+
+  // Randomize position
+  const x = Math.random() * window.innerWidth;
+  const y = Math.random() * window.innerHeight;
+
+  pulse.style.left = `${x}px`;
+  pulse.style.top = `${y}px`;
+
+  // Apply random color from palette
+  const color = getRandomColor();
+  pulse.style.background = `radial-gradient(circle, ${color} 0%, rgba(255, 255, 255, 0) 70%)`;
+
+  document.body.appendChild(pulse);
+
+  // Get the pulse duration from CSS variable
+  const pulseDuration = parseFloat(getCssVariableValue('--pulse-duration')) * 1000; // Convert to milliseconds
+
+  // Remove the pulse after animation (duration retrieved dynamically)
+  setTimeout(() => {
+    pulse.remove();
+  }, pulseDuration); 
+}
+
+function randomPulse() {
+  // Create pulses at random intervals
+  setInterval(createPulse, (2*1000)); // Every 2 seconds
+}
+
+randomPulse();
diff --git a/styles.css b/styles.css