hack4impact-calpoly · sab115 · Dec 22, 2024 · Dec 22, 2024 · Dec 23, 2024 · Dec 23, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+/node_modules
+*.log
+*.env
+.DS_Store
+.vscode/
diff --git a/blog.html b/blog.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Blog</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <nav class="navbar">
+            <h1 class="logo">
+                <a href="index.html">Sabrina's Personal Website</a>
+            </h1>
+            <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>
+            <h1 class="page-title">Blog</h1>
+            <div id="blog-container"></div>
+        </main>
+        <footer class="footer">© 2023 My Personal Website | All Rights Reserved</footer>
+        <script src="src/blog.js"></script>
+    </body>
+</html>
diff --git a/blogs/mantou-craving-for-food.html b/blogs/mantou-craving-for-food.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mantou's Craving for Food</title>
+    <link rel="stylesheet" href="../styles.css" />
+</head>
+<body>
+    <nav class="navbar">
+        <h1 class="logo">
+            <a href="../index.html">Sabrina's Personal Website</a>
+        </h1>
+        <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>
+        <article>
+            <h1>Mantou's Craving for Food</h1>
+            <p><strong>Published on: 2024-10-21</strong></p>
+            <img src="../images/craving.jpg" alt="Mantou looking eagerly at the food with big watery eyes">
+            <p>Mantou is a glutton who uses his big, watery eyes to beg for food—no one can resist him. He even stands up when he knows I'm grabbing food for him. His cuteness is absolutely irresistible!</p>
+            <p>Here's a photo of him looking so adorable, I couldn't resist snapping it while he begged for his favorite treat. Mantou has a way of stealing hearts with his eyes!</p>
+        </article>
+    </main>
+
+    <footer class="footer">© 2023 My Personal Website | All Rights Reserved</footer>
+</body>
+</html>
diff --git a/blogs/ragdoll-pic-from-tiff.html b/blogs/ragdoll-pic-from-tiff.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tiffany's Adventures in Cat Sitting</title>
+    <link rel="stylesheet" href="../styles.css" />
+</head>
+<body>
+    <nav class="navbar">
+        <h1 class="logo">
+            <a href="../index.html">Sabrina's Personal Website</a>
+        </h1>
+        <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>
+        <article>
+            <h1>Tiffany's Adventures in Cat Sitting</h1>
+            <p><strong>Published on: 2024-10-21</strong></p>
+            <img src="../images/ragdoll.jpg" alt="A beautiful Ragdoll cat, taken care of by Tiffany for her cousin.">
+            <p>Look at this gorgeous lady! Tiffany keeps sending me pictures of the Ragdoll cat to show off. It's not even hers—it's her cousin's cat, and she's just taking care of it while they're away.</p>
+            <p>Despite not being her cat, Tiffany has formed a special bond with this fluffy beauty, and she can't stop sending me the cutest pictures. I had to share this one!</p>
+        </article>
+    </main>
+
+    <footer class="footer">© 2023 My Personal Website | All Rights Reserved</footer>
+</body>
+</html>
diff --git a/contact.html b/contact.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Personal Webpage</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <nav class="navbar">
+            <h1 class="logo">
+                <a href="index.html">Sabrina's Personal Website</a>
+            </h1>
+            <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>
+            <h1 class="page-title">Contact</h1>
+            <form id="contact-form">
+                <label for="name">Name</label>
+                <input type="text" id="name" name="name" placeholder="Name" required />
+                <br>
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" placeholder="Email" />
+                <br>
+                <label for="message">Message</label>
+                <textarea type="message" id="message" name="message"></textarea> 
+                <br>
+                <input type="submit" value="Submit" />
+        </main>
+        <footer class="footer">© 2023 My Personal Website | All Rights Reserved</footer>
+    </body>
+</html>
diff --git a/images/craving.jpg b/images/craving.jpg
diff --git a/images/ragdoll.jpg b/images/ragdoll.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Personal Website</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav class="navbar">
+        <h1 class="logo"><a href="index.html">Sabrina's Personal Website</a></h1>
+        <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>
+        <h1 class="nostyle">About Me!</h1>
+        <div class="about">
+            <div class="about-image"><img src="mantou.jpg" alt="an image of mantou" style="width:476px;height:465px;"></div>
+            <div class="about-text">
+                <p>
+                    My name is <strong>Sabrina Huang</strong>. My pronouns are <em>she/her</em>.
+                    <br>
+                    I'm a 
+                    <em>second year <strong>Software Engineering</strong></em> student.
+                    <br>
+                    <em>(This is a picture of Mantou, not a picture of me.</em> :D<em>)</em>
+                </p>
+            <div>
+        </div>
+    </main>
+    <footer class="footer">© 2023 My Personal Website | All Rights Reserved</footer>
+  </body>
+</html>
diff --git a/mantou.jpg b/mantou.jpg
diff --git a/p_project1.jpg b/p_project1.jpg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "bootcamp-project-2024",
+  "version": "1.0.0",
+  "description": "This is how we will be tracking your milestones throughout bootcamp! By the end of bootcamp, you will have a fullstack personal portfolio website.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "typescript": "^5.7.2"
+  }
+}
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Personal Webpage</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <nav class="navbar">
+            <h1 class="logo">
+                <a href="index.html">Sabrina's Personal Website</a>
+            </h1>
+            <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>
+            <h1 class="page-title">Portfolio</h1>
+            <div class="project">
+                <div class="about">
+                    <div class="project-image"><a href="index.html"><img src="p_project1.jpg" alt="an image of my project" style="width:746.5px;height:351px;"></a></div>
+                    <div class="project-details">
+                        <p class="project-name">Project Name: <strong>Personal Website</strong></p>
+                        <p class="project-description">
+                            This is a <em>personal website</em> <strong>about me</strong>.
+                        </p>
+                        <a href="index.html">Learn More</a>
+                    <div>
+                </div>
+            </div>
+        </main>
+        <footer class="footer">© 2023 My Personal Website | All Rights Reserved</footer>
+    </body>
+</html>