hack4impact-calpoly · jlinnie · Oct 29, 2025 · Oct 29, 2025 · Oct 31, 2025 · Oct 31, 2025
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+.DS_Store
diff --git a/README 2.md b/README 2.md
@@ -0,0 +1,3 @@
+# Jacqueline's Personal Website
+This is a personal website built using the Hack4Impact Starter Pack!
+[Visit it Here!](https://jlinnie.github.io)
diff --git a/blog.html b/blog.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            Blog
+        </title>
+        <link rel="stylesheet" href="styles.css" />
+
+    </head>
+  <body>
+    <nav class="navbar">
+      <a href="index.html"><h1 class = "logo">Jlinnie</h1></a>
+                <ul class="nav-list">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="blog.html">Blog</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="resume.html">Resume</a></li>
+        <li><a href="contact.html">Contact</a></li>
+
+
+    </nav>
+    <main>
+      <h1 class="page-title">Blog</h1>
+    <div id="blog-container"></div>
+
+
+
+    </main>
+    <footer class="footer">
+      © 2025 My Personal Website | All Rights Reserved
+    </footer>
+    <script src="./src/blog.js"></script>
+  </body>
+</html>
diff --git a/blogs/post.html b/blogs/post.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title id="post-page-title">Blog Post</title>
+    <link rel="stylesheet" href="../styles.css" />
+    <script defer src="../src/blog.js"></script>
+    <script defer src="./post.js"></script>
+  </head>
+  <body>
+    <nav class="navbar"> 
+      <a href="../index.html"><h1 class="logo">Jlinnie</h1></a>
+      <ul class="nav-list">
+        <li><a href="../index.html">Home</a></li>
+        <li><a href="../blog.html">Blog</a></li>
+        <li><a href="../portfolio.html">Portfolio</a></li>
+        <li><a href="../resume.html">Resume</a></li>
+        <li><a href="../contact.html">Contact</a></li>
+      </ul>
+    </nav>
+
+    <main class="blog-post">
+      <h1 id="post-title" class="page-title"></h1>
+      <p id="post-date" class="post-date"></p>
+      <img id="post-image" src="" alt="" style="max-width: 400px; border-radius: 8px;">
+      <p id="post-content" class="post-body"></p>
+    </main>
+
+    <footer class="footer">
+      © 2025 My Personal Website | All Rights Reserved
+    </footer>
+  </body>
+</html>
diff --git a/blogs/post.js b/blogs/post.js
@@ -0,0 +1,14 @@
+const params = new URLSearchParams(window.location.search);
+const slug = params.get("slug");
+
+const blog = blogs.find(b => b.slug === slug);
+
+  document.getElementById("post-title").textContent = blog.title;
+  document.getElementById("post-page-title").textContent = blog.title;
+  document.getElementById("post-date").textContent = blog.date;
+
+  const img = document.getElementById("post-image");
+  img.src = blog.image;          
+  img.alt = blog.imageAlt;       
+
+  document.getElementById("post-content").textContent = blog.description;
diff --git a/contact.html b/contact.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            Contact Information 
+        </title>
+        <link rel="stylesheet" href="styles.css" />
+
+    </head>
+  <body>
+    <nav class="navbar">
+      <a href="index.html"><h1 class = "logo">Jlinnie</h1></a>
+                <ul class="nav-list">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="blog.html">Blog</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="resume.html">Resume</a></li>
+        <li><a href="contact.html">Contact</a></li>
+
+
+
+    </nav>
+    <main>
+      <h1 class="page-title">Contact Information</h1>
+      <form id="contact-form">
+        <br><br>
+        <label for="name">Name</label>
+        <input type="text" id="name" name="name" placeholder="Name" required />
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" placeholder="Email" />
+                <label for="comments">Comments</label>
+        <textarea
+          id="comments"
+          name="comments"
+          placeholder="Comments"
+          required
+        ></textarea>
+
+         <input type="submit" value="Submit" />
+
+
+
+      </form>
+
+
+    </main>
+    <footer class="footer">
+© 2025 My personal website | All Rights Reserved
+    </footer>
+  </body>
+</html>
diff --git a/images/sexy_shrek_by_sailormoonrocko_dg5ur4h-fullview.jpg b/images/sexy_shrek_by_sailormoonrocko_dg5ur4h-fullview.jpg
diff --git a/images/tennisbird.webp b/images/tennisbird.webp
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            Personal Website 
+        </title>
+        <link rel="stylesheet" href="styles.css" />
+
+    </head>
+  <body>
+    <header>
+    </header>
+    <nav class="navbar">
+      <a href="index.html"><h1 class = "logo">Jlinnie</h1></a>
+        <ul class="nav-list">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="blog.html">Blog</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="resume.html">Resume</a></li>
+        <li><a href="contact.html">Contact</a></li>
+
+
+
+    </nav>
+    <main>
+      <h1 class="page-title">Jacqueline Bartholomew's Personal Website</h1>
+       <div class="about">
+        <div class="about-image">
+          <img src="images/sexy_shrek_by_sailormoonrocko_dg5ur4h-fullview.jpg" alt="sexy shrek>">
+          </div>
+
+        <div class="about-text"> 
+
+          <p>Welcome to my personal website! I'm <strong>Jacqueline Bartholomew</strong>, a current undergraduate student and apiring developer at 
+          <em>Cal Poly San Luis Obispo</em>. This site is a space where I share my ideas, projects, and creative experiments as I keep learning and growing. Take a look around and get to know what I’ve been working on!</p>
+        </div>
+        </div>
+    </main>
+    <footer class="footer">
+      © 2025 My Personal Website | All Rights Reserved
+    </footer>
+
+  </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            Portfolio 
+        </title>
+        <link rel="stylesheet" href="styles.css" />
+
+    </head>
+  <body>
+    <nav class="navbar"> 
+      <a href="index.html"><h1 class = "logo">Jlinnie</h1></a>
+                <ul class="nav-list">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="blog.html">Blog</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="resume.html">Resume</a></li>
+        <li><a href="contact.html">Contact</a></li>
+
+
+</nav>
+    <main>
+      <h1 class="page-title">Portfolio</h1>
+      <div class = "project"> 
+        <a href="index.html"><img src="/Users/jackiebartholomew/jlinnie.github.io/images/sexy_shrek_by_sailormoonrocko_dg5ur4h-fullview.jpg" alt="sexy shrek>"></div></a>
+        <div class= "project-details">
+          <p class = "project-name">
+            random text for first paragraph
+          </p>
+          <p class = "project-description">
+            random text for second paragraph
+          </p>
+            <a href="index.html">Learn More</a>        
+          </div>
+
+      </div>
+
+
+    </main>
+    <footer class="footer">
+      © 2025 My Personal Website | All Rights Reserved
+    </footer>
+  </body>
+</html>
diff --git a/resume.html b/resume.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            Resume 
+        </title>
+        <link rel="stylesheet" href="styles.css" />
+
+    </head>
+  <body>
+    <nav class="navbar">
+      <a href="index.html"><h1 class = "logo">Jlinnie</h1></a>
+                <ul class="nav-list">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="blog.html">Blog</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="resume.html">Resume</a></li>
+        <li><a href="contact.html">Contact</a></li>
+
+
+
+    </nav>
+    <main>
+      <h1 class="page-title">Resume</h1>
+      <a href="resume.pdf" download>Download Resume</a>
+      <div class="section">
+        <h2 class = "section-title"> Education </h2>
+        <div class="entry">
+          <h3 class="entry-title">Title Here</h3>
+          <p class="entry-info">Information Here</p>
+        </div>
+        <h2 class = "section-title"> Coursework </h2>
+        <div class="entry">
+          <h3 class="entry-title">Title Here</h3>
+          <p class="entry-info">Information Here</p>
+          <ul class="course-list">
+            <li>This is a special example course that tests the limit of this page to see how much it can handle</li>
+            <li>Example Course 2</li>
+          </ul>
+        </div>
+        <h2 class = "section-title"> Skills </h2>
+        <div class="entry">
+          <h3 class="entry-title">Title Here</h3>
+          <p class="entry-info">Information Here</p>
+          <ul class="skill-list">
+            <li>Example Skill 1</li>
+            <li>Example Skill 2</li>
+          </ul>
+        </div>
+        <h2 class = "section-title"> Projects </h2>
+        <div class="entry">
+          <h3 class="entry-title">Title</h3>
+          <p class="entry-info">Information Here</p>
+          <p class="entry-description">Description Here</p>
+        </div>
+<h2 class="section-title">Experience</h2>
+
+<div class="entry">
+  <h3 class="entry-title">Title Here</h3>
+  <p class="entry-info">Information Here</p>
+  <p class="entry-description">Description Here</p>
+</div>
+
+<div class="entry">
+  <h3 class="entry-title">Title Here for the second one</h3>
+  <p class="entry-info">Loooooooooooooooooooooooooooooong information</p>
+  <p class="entry-description">If you're looking for random paragraphs, you've come to the right place. When a random word or a random sentence isn't quite enough, the next logical step is to find a random paragraph. We created the Random Paragraph Generator with you in mind. The process is quite simple. Choose the number of random paragraphs you'd like to see and click the button. Your chosen number of paragraphs will instantly appear.
+
+</p>
+</div>
+        </div>
+
+        <section></section>
+        <section></section>
+        <section></section>
+        <section></section>
+        <section></section>
+
+      </div>
+
+
+    </main>
+    <footer class="footer">
+      © 2025 My Personal Website | All Rights Reserved
+    </footer>
+  </body>
+</html>
diff --git a/src/blog.d.ts b/src/blog.d.ts
@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=blog.d.ts.map
diff --git a/src/blog.d.ts.map b/src/blog.d.ts.map
diff --git a/src/blog.js b/src/blog.js
@@ -0,0 +1,45 @@
+const blogs = [
+  {
+    title: "My First Blog Post",
+    date: "2025-10-28",
+    description: "This is my first blog post where I talk about blog stuff!",
+    image: "./images/tennisbird.webp",
+    imageAlt: "Tennis bird",
+    slug: "my-first-blog-post",
+  },
+  {
+    title: "My Second Blog Post",
+    date: "2025-10-27",
+    description: "This is my second blog post where I talk about more blog stuff",
+    image: "./images/learning-ts.png",
+    imageAlt: "second image",
+    slug: "learning-typescript",
+  },
+  {
+    title: "My Third Blog Post",
+    date: "2025-10-27",
+    description: "This is my third blog post where I talk about more blog stuff",
+    image: "./images/learning-ts.png",
+    imageAlt: "third image",
+    slug: "learning-typescript",
+  },
+];
+
+document.addEventListener("DOMContentLoaded", () => {
+  const container = document.getElementById("blog-container");
+
+  if (container) {
+    blogs.forEach((blog) => {
+      const div = document.createElement("div");
+      div.className = "blog-card";
+      div.innerHTML = `
+        <a href="./blogs/post.html?slug=${blog.slug}" class="blog-link">
+          <h2>${blog.title}</h2>
+          <p>${blog.date}</p>
+          <img src="${blog.image}" alt="${blog.imageAlt}">
+        </a>
+      `;
+      container.appendChild(div);
+    });
+  }
+});
diff --git a/src/blog.js.map b/src/blog.js.map