Merge pull request #12 from comus3/developpement

added banner + testing workflow
comus3 · Jan 11, 2025 · ddc5815 · ddc5815
2 parents 7279188 + ef81b01
commit ddc5815
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 20 deletions.
diff --git a/.github/workflows/update-start-time.yml b/.github/workflows/update-start-time.yml
@@ -0,0 +1,30 @@
+name: Update startTime on Merge to Main
+
+on:
+  push:
+    branches:
+      - main  # Trigger this workflow only when there's a push to the 'main' branch
+
+jobs:
+  update_start_time:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout the code
+      uses: actions/checkout@v3
+
+    - name: Update startTime in script.js
+      run: |
+        # Get current date in the desired format (ISO 8601 format)
+        current_time=$(date --utc +'%Y-%m-%dT%H:%M:%SZ')
+
+        # Use sed to replace the startTime in the script.js file with the current time
+        sed -i "s/const startTime = new Date(\"[^\"]*\");/const startTime = new Date(\"$current_time\");/" script.js
+
+    - name: Commit and push changes
+      run: |
+        git config user.name "GitHub Actions"
+        git config user.email "[email protected]"
+        git add script.js
+        git commit -m "Update startTime to $current_time"
+        git push
diff --git a/index.html b/index.html
@@ -6,11 +6,43 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Plantin-Carrenard | Portfolio</title>
   <link rel="stylesheet" href="style.css">
-  <link rel="script" href="script.js">
+  <script src="script.js" defer></script> <!-- Ensure script.js is loaded -->
 </head>
 
 <body>
-
+  <header>
+    <div class="banner">
+      <!-- Left part of the banner (Trigram + Time Difference) -->
+      <div class="banner-left">
+        <span class="trigram">LsL</span>
+
+        <!-- Time difference display added here -->
+        <div class="gray-box">
+          <div class="switch-row">
+            <span class="label">Dynamic/Static</span>
+            <span class="switch">
+              <span class="red"></span> <!-- Red dot -->
+              <span class="green"></span> <!-- Green dot -->
+            </span>
+          </div>
+          <div class="switch-row">
+            <span class="label">Hosted on</span>
+            <span class="value">Github</span>
+          </div>
+          <div class="switch-row">
+            <span class="label">Online since</span>
+            <span class="value" id="time-difference">Loading...</span> <!-- Time Difference Placeholder -->
+          </div>
+        </div>
+      </div>
+
+      <!-- Right part of the banner (Titles) -->
+      <div class="banner-right">
+        <a href="/" class="banner-link">Home</a>
+        <a href="/blog" class="banner-link">Blog</a>
+      </div>
+    </div>
+  </header>
 
   <div class="terminal">
     <header>

diff --git a/script.js b/script.js
@@ -1,3 +1,4 @@
+const startTime = new Date("2025-01-11T00:00:00Z");
 const textElement = document.getElementById("animated-text");
 
 // Final stages of the text
@@ -6,8 +7,8 @@ const finalDomain = "plantincarrenard.com";
 
 let currentText = ""; // Current text being animated
 let currentIndex = 0; // Index for the final text
-const delayAfterFullName = 2000; // 2-second delay after full name is written
-const matrixSpeed = 10; // Speed for random character effect
+const delayAfterFullName = 800; // 2-second delay after full name is written
+const matrixSpeed = 15; // Speed for random character effect
 
 /**
  * Matrix-style random character effect for a single character.
@@ -79,11 +80,34 @@ function transformText() {
             currentText = currentText
               .replace("plantin-carrenard ", "plantincarrenard.")
             textElement.textContent = currentText;
-          }, 500); // Delay before showing domain name
-        }, 500); // Delay for fading animation
+          }, 1400); // Delay before showing domain name
+        }, 800); // Delay for fading animation
       }, 500); // Delay after removing the accent
-    }, 500); // Delay after decapitalizing letters
+    }, 300); // Delay after decapitalizing letters
   }
 
 // Start the animation
 writeTextMatrixStyle();
+
+
+// Set start time (you can set it to a specific date/time)
+  // Example start time
+const timeDiffElement = document.getElementById('time-difference');
+
+// Function to calculate the time difference
+function updateTimeDifference() {
+  const now = new Date();
+  const diff = now - startTime; // Time difference in milliseconds
+
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  // Update the element with the calculated time
+  timeDiffElement.textContent = `${days} days, ${hours % 24} hours, ${minutes % 60} minutes`;
+}
+
+// Call the function initially and set an interval to update every minute
+updateTimeDifference();
+setInterval(updateTimeDifference, 60000); // Updates every 60 seconds
diff --git a/style.css b/style.css
@@ -8,7 +8,105 @@ body {
   overflow-x: hidden;
 }
 
-/* Title at top left */
+.banner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: black;
+  padding: 10px 30px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 60px; /* Adjust the height of the banner */
+  position: relative; /* For positioning child elements */
+}
+
+.banner-left {
+  display: flex;
+  align-items: center;
+  gap: 20px; /* Add space between the trigram and the time difference */
+}
+
+.trigram {
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: green;
+  text-shadow: 0 0 10px #00ff00;
+  margin-right: 20px;
+  text-transform: uppercase;
+}
+
+.gray-box {
+  background-color: #333;
+  padding: 5px 10px; /* Reduced padding to fit within the 60px height */
+  border-radius: 8px;
+  height: 40px; /* Fixed height */
+  color: white;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center; /* Vertically center the content */
+  gap: 5px;
+}
+
+.switch-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.label {
+  font-weight: bold;
+  font-size: 0.9rem; /* Adjusted font size to fit */
+}
+
+.switch {
+  display: flex;
+  gap: 5px;
+}
+
+.red, .green {
+  width: 10px;  /* Adjusted size for dots */
+  height: 10px; /* Adjusted size for dots */
+  border-radius: 50%;
+}
+
+.red {
+  background-color: red;
+}
+
+.green {
+  background-color: green;
+}
+
+.value {
+  color: #fffa;
+  font-size: 0.9rem; /* Adjusted font size for better fit */
+}
+
+.banner-right {
+  display: flex;
+  gap: 20px;
+}
+
+.banner-link {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #00ff00;
+  text-decoration: none;
+}
+
+.banner-link:hover {
+  text-decoration: underline;
+}
+
+/* Title adjustments to avoid overlap */
+.title h1 {
+  margin-top: 80px; /* Adjusted space for the title */
+}
+
+
+/* Styling for the h1 text and individual spans */
 .title h1 {
   position: absolute;
   top: -5px;
@@ -22,20 +120,23 @@ body {
   display: flex;
 }
 
-.title h1 span {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  display: inline-block;
-}
-
-/* Fading out effect */
-.fading {
-  opacity: 0;
-  transform: scale(0.8);
+/* Styling for the h1 text and individual spans */
+.title h1 {
+  position: absolute;
+  top: -5px;
+  left: 0px;
+  font-size: 2.5rem;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  color: #0f0; /* Matrix green color */
+  font-family: monospace;
+  display: flex;
 }
 
-/* Adjust spacing for smooth transition when a character disappears */
-.title h1 {
-  transition: letter-spacing 0.3s ease;
+.title h1 span {
+  transition: opacity 0.5s ease, transform 0.5s ease;
+  display: inline-block;
 }
 
 /* Main content (terminal-like) */