Added a new post. Updated some styling on the front page.

Gage-BCCA · Sep 2, 2024 · 71e88bb · 71e88bb
1 parent 54eddd5
commit 71e88bb
Show file tree

Hide file tree

Showing 11 changed files with 277 additions and 24 deletions.
diff --git a/about/index.html b/about/index.html
@@ -14,7 +14,7 @@
     rel="stylesheet"
   />
     <link rel="stylesheet" href="/bundle.css" />
-    <script src="/js/test.js" defer></script>
+    <script src="/js/bigBrother.js" defer></script>
     <title>Failed Algorithm</title>
   </head>
   <body>

diff --git a/bundle.css b/bundle.css
@@ -61,15 +61,17 @@ h2 {
 
 button {
     padding: 5px;
-    background-color: #2c3e50;
+    background-color: #e74c3c;
     color: white;
     border-radius: 8px;
-    transition-duration: 200ms;
+    transition-duration: 400ms;
 }
 
 button:hover {
-    padding: 8px;
+    padding-right: 15px;
+    padding-left: 15px;
     transition-duration: 200ms;
+    background-color: #a5392c;
 }
 
 .deemphasis {
@@ -82,24 +84,22 @@ button:hover {
     margin-top: 25px;
 }
 .post-card {
-    background-color: #bdc3c7;
+    background-color: #2c3e50;
     padding: 25px;
-    border: 2px solid #7f8c8d;
+    border: 3px solid #34495e;
+    box-shadow: 15px 8px #e74c3c;
     border-radius: 8px;
     margin: 25px;
+    color: white;
 }
 
-.tag-button {
-    background-color: #e74c3c;
+.post-card a{
+    text-decoration: none;
     color: white;
-    width: fit-content;
-    height: fit-content;
-    border-radius: 8px;
-
 }
 
-.tag-button p {
-    padding: 5px;
+.post-card h3 {
+    border-bottom: 3px solid #e74c3c;
 }
 
 .skill-card-container {

diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     rel="stylesheet"
   />
     <link rel="stylesheet" href="/bundle.css" />
-    <script src="/js/test.js" defer></script>
+    <script src="/js/bigBrother.js" defer></script>
     <title>Failed Algorithm</title>
   </head>
   <body>
@@ -48,7 +48,18 @@ <h2>I write about coding, algorithms, and systems.</h2>
 <h1>Blog Posts</h1>
 
 <div class="post-card">
-  <h2><a href="/posts/learning-rust-part-1/">Learning Rust the Hard Way: Part 1</a></h2>
+  <h2><a href="/posts/writing-custom-site-analytics/">Writing Custom Site Analytics: Part 1</a></h2>
+  <h3>Anonymous Statistics</h3>
+  <p>I want to record traffic to my site, but I want to make sure that the statistics are anonymous. Let's practice our Javascript and system design.</p>
+  <a href="/posts/writing-custom-site-analytics/">
+    <button>Read More</button>
+  </a>
+</div>
+
+
+<div class="post-card">
+  <h2><a href="/posts/learning-rust-part-1/">Learning Rust the Hard Way: Recreating the touch Linux Command</a></h2>
+  <h3>Recreating the touch Linux Command</h3>
   <p>I'm trying to break into the industry, and I think knowing the memory-safe programming language Rust will set me apart from my peers. Let's begin this journey.</p>
   <a href="/posts/learning-rust-part-1/">
     <button>Read More</button>

diff --git a/js/portfolio.js b/js/portfolio.js
@@ -0,0 +1,40 @@
+// Add event listeners to the skill cards
+const skillCards = document.getElementsByClassName("skill-card");
+for (let card of skillCards) {
+  console.log(card);
+  card.addEventListener("mouseover", function focusElement() {
+    let cardHeader = this.querySelector("h2");
+
+    this.style.transitionDuration = "200ms";
+    this.style.backgroundColor = "#e74c3c";
+    this.style.padding = "20px";
+
+    cardHeader.style.transitionDuration = "400ms";
+    cardHeader.style.fontSize = "2rem";
+
+
+  });
+
+  card.addEventListener("mouseout", function unfocusElement(e) {
+    this.style.backgroundColor = "#2c3e50";
+    this.style.padding = "10px";
+
+    let cardHeader = this.querySelector("h2");
+    cardHeader.style.transitionDuration = "200ms";
+    cardHeader.style.fontSize = "1.5rem";
+  });
+
+}
+
+function showDetails(elem) {
+  let projectDetailsId = "project-details-" + elem.id;
+  let details = document.getElementById(projectDetailsId);
+  if (details.style.display === "none") {
+    console.log("DISPLAYING");
+    details.style.display = "block";
+    elem.textContent = "Show Less";
+  } else {
+    details.style.display = "none";
+    elem.textContent = "Show More";
+  }
+}
diff --git a/portfolio/index.html b/portfolio/index.html
@@ -14,7 +14,7 @@
     rel="stylesheet"
   />
     <link rel="stylesheet" href="/bundle.css" />
-    <script src="/js/test.js" defer></script>
+    <script src="/js/bigBrother.js" defer></script>
     <title>Failed Algorithm</title>
   </head>
   <body>
@@ -31,7 +31,7 @@ <h1>
       <a href="/projects">Projects</a>
       <a href="/portfolio">Portfolio</a>
     </nav>
-    <main>
+    <main><script src="/js/portfolio.js" defer></script>
 <div class="welcome-blurb-container">
   <h1>Hi! I'm Gage.</h1>
   <p>

diff --git a/posts/index.html b/posts/index.html
@@ -14,7 +14,7 @@
     rel="stylesheet"
   />
     <link rel="stylesheet" href="/bundle.css" />
-    <script src="/js/test.js" defer></script>
+    <script src="/js/bigBrother.js" defer></script>
     <title>Failed Algorithm</title>
   </head>
   <body>
@@ -41,7 +41,7 @@ <h2>Rust</h2>
     <p>rust</p>
 </div>
 
-    <h2><a href="/posts/learning-rust-part-1/">Learning Rust the Hard Way: Part 1</a></h2>
+    <h2><a href="/posts/learning-rust-part-1/">Learning Rust the Hard Way: Recreating the touch Linux Command</a></h2>
     <p>I'm trying to break into the industry, and I think knowing the memory-safe programming language Rust will set me apart from my peers. Let's begin this journey.</p>
   </div>
 </main>

diff --git a/posts/learning-rust-part-1/index.html b/posts/learning-rust-part-1/index.html
@@ -14,7 +14,7 @@
     rel="stylesheet"
   />
     <link rel="stylesheet" href="/bundle.css" />
-    <script src="/js/test.js" defer></script>
+    <script src="/js/bigBrother.js" defer></script>
     <title>Failed Algorithm</title>
   </head>
   <body>