hack4impact-calpoly · varnao · Oct 16, 2025 · Oct 16, 2025 · Oct 16, 2025 · Oct 17, 2025
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+/bootcamp-milestone-1
diff --git a/README copy.md b/README copy.md
@@ -0,0 +1,3 @@
+# Valeria Arnao's Personal Website
+This is a personal website built using the Hack4Impact Starter Pack!
+[Visit it Here!](https://varnao.github.io)
diff --git a/blogs/my-involvement-in-wish.html b/blogs/my-involvement-in-wish.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My Involvement in WISH</title>
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+  <body>
+    <nav class="navbar">
+      <h1 class="logo"><a href="../index.html">Valeria Arnao</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>
+    <!--the details of our blog post-->
+    <main class="blog-post">
+      <h1>My Involvement in WISH</h1>
+      <p class="blog-date">Posted on October 14, 2025</p>
+      <img src="../wishclublogo.png" alt="cal poly wish club logo" />
+      <!--main content of the blog post below-->
+      <p>
+        I first discovered the Women Involved In Software & Hardware (WISH) club
+        in my freshman year. Throughout the year, I attended their general
+        meetings, events, and trips. I really liked the community of people
+        there and decided to apply for a leadership position for the following
+        year.
+      </p>
+      <p>
+        My sophomore year, I was part of the Mentorship team, which was in
+        charge of WISH's mentorship program. As a team, we planned bonding
+        events, fun themed meetings and outings, and also helped plan several
+        general meetings. I sincerely enjoyed getting to work together with this
+        team and grow as a leader while improving my communication and
+        organization skills.
+      </p>
+      <p>
+        This school year, I serve as the Graphic Designer. I am in charge of
+        creating all of our graphics as well as managing our social media
+        accounts. I also had the opportunity to design new merchandise for our
+        club, which will help us do a bit of fundraising. In this role, I've
+        gotten the chance to sharpen my skills in design, planning, and time
+        management.
+      </p>
+    </main>
+
+    <footer class="footer">
+      © 2025 Valeria Arnao's Website | All Rights Reserved
+    </footer>
+  </body>
+</html>
diff --git a/blogs/why-i-love-frontend-development.html b/blogs/why-i-love-frontend-development.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Why I Love Frontend Development</title>
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+  <body>
+    <nav class="navbar">
+      <h1 class="logo"><a href="../index.html">Valeria Arnao</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>
+
+    <!--the details of our blog post-->
+    <main class="blog-post">
+      <h1>Why I Love Frontend Development</h1>
+      <p class="blog-date">Posted on October 14, 2025</p>
+      <img
+        src="../frontend.jpeg"
+        alt="photo of a computer screen"
+        class="blog-image"
+      />
+      <!--the main content of our blog post-->
+      <p>
+        I love frontend development because it combines my interests in both
+        technology and design. It allows me to create things that are not only
+        functional but also visually appealing and enjoyable to use. As someone
+        who currently serves as a Graphic Designer for WISH, I've developed a
+        strong appreciation for good design and attention to detail, both of
+        which carry over into my code. I'm excited to keep improving my frontend
+        skills and continue building projects that reflect both my creativity
+        and technical growth.
+      </p>
+    </main>
+
+    <footer class="footer">
+      © 2025 Valeria Arnao's Website | All Rights Reserved
+    </footer>
+  </body>
+</html>
diff --git a/bootcamp-milestone-2/.env b/bootcamp-milestone-2/.env
@@ -0,0 +1,2 @@
+# .env
+MONGO_URI=mongodb+srv://bootcampUser:bootcampPass@cluster0.fqphuhu.mongodb.net/?appName=Cluster0
diff --git a/bootcamp-milestone-2/.env.local b/bootcamp-milestone-2/.env.local
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_EMAILJS_SERVICE_ID=service_7kdlvfh
+NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=template_qoim8sf
+NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=zphilcLAZX1-OG2MS
diff --git a/bootcamp-milestone-2/.gitignore b/bootcamp-milestone-2/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+# .env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/bootcamp-milestone-2/README.md b/bootcamp-milestone-2/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/bootcamp-milestone-2/app/api/Blogs/[slug]/route.ts b/bootcamp-milestone-2/app/api/Blogs/[slug]/route.ts
@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from "next/server";
+import connectDB from "../../../../../src/database/db";
+import Blog from "../../../../../src/database/blogSchema";
+
+type IParams = {
+  params: {
+    slug: string;
+  };
+};
+
+export async function GET(req: NextRequest, { params }: IParams) {
+  await connectDB();
+  const { slug } = params;
+
+  try {
+    const blog = await Blog.findOne({ slug }).orFail();
+    return NextResponse.json(blog);
+  } catch (err) {
+    return NextResponse.json("Blog not found.", { status: 404 });
+  }
+}
diff --git a/bootcamp-milestone-2/app/api/blog/[slug]/comment/route.ts b/bootcamp-milestone-2/app/api/blog/[slug]/comment/route.ts
@@ -0,0 +1,45 @@
+import { NextResponse } from "next/server";
+import connectDB from "../../../../../../src/database/db";
+import Blog from "../../../../../../src/database/blogSchema";
+
+export async function POST(
+  req: Request,
+  context: { params: { slug: string } }
+) {
+  try {
+    const { slug } = await context.params;
+    const { user, comment } = await req.json();
+
+    // validate
+    if (!user || !comment) {
+      return NextResponse.json(
+        { error: "Missing user or comment" },
+        { status: 400 }
+      );
+    }
+
+    // connect to DB
+    await connectDB();
+
+    // find the blog
+    const blog = await Blog.findOne({ slug });
+
+    if (!blog) {
+      return NextResponse.json({ error: "Blog not found" }, { status: 404 });
+    }
+
+    // add comment
+    blog.comments.push({
+      user,
+      comment,
+      time: new Date(),
+    });
+
+    await blog.save();
+
+    return NextResponse.json({ message: "Comment added successfully" });
+  } catch (err) {
+    console.error("Error adding comment:", err);
+    return NextResponse.json({ error: "Server error" }, { status: 500 });
+  }
+}
diff --git a/bootcamp-milestone-2/app/blog/[slug]/page.tsx b/bootcamp-milestone-2/app/blog/[slug]/page.tsx
@@ -0,0 +1,75 @@
+import { IComment } from "../../../../src/types";
+import Comment from "@/components/Comment";
+import connectDB from "../../../../src/database/db";
+import Blog from "../../../../src/database/blogSchema";
+import { IBlog } from "../../../../src/types";
+import AddCommentForm from "../../../components/AddCommentForm";
+
+type Props = {
+  params: Promise<{ slug: string }>;
+};
+
+// helper function to format blog date into readable format
+function formatDate(d: Date | string | undefined) {
+  if (!d) return "";
+  const date = typeof d === "string" ? new Date(d) : d;
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+export default async function BlogPage({ params }: Props) {
+  const { slug } = await params;
+
+  await connectDB();
+
+  // query the blog by slug
+  const blog = (await Blog.findOne({ slug }).lean()) as IBlog | null;
+
+  if (!blog) {
+    return (
+      <main style={{ padding: 40 }}>
+        <h1>Blog not found</h1>
+        <p>
+          No blog exists with slug: <strong>{slug}</strong>
+        </p>
+      </main>
+    );
+  }
+
+  // render blog content when blog exists
+  return (
+    <main className="page-wrapper">
+      <article className="blog-article">
+        <h1 className="blog-title">{blog.title}</h1>
+        <p className="blog-date">{formatDate(blog.date)}</p>
+
+        {blog.image && (
+          <img
+            src={blog.image}
+            alt={blog.image_alt || blog.title}
+            className="blog-image"
+          />
+        )}
+
+        <p className="blog-content">{blog.content}</p>
+
+        <section className="comment-section">
+          <h2>Comments</h2>
+
+          {blog.comments && blog.comments.length > 0 ? (
+            blog.comments.map((comment: IComment, index: number) => (
+              <Comment key={index} comment={comment} />
+            ))
+          ) : (
+            <p>No comments yet.</p>
+          )}
+
+          <AddCommentForm slug={slug} />
+        </section>
+      </article>
+    </main>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# .env
		MONGO_URI=mongodb+srv://bootcampUser:bootcampPass@cluster0.fqphuhu.mongodb.net/?appName=Cluster0