Merge pull request #22 from asusoda/Blogging

Blogging

package.json

@@ -20,10 +20,13 @@
     "framer-motion": "^11.3.21",
     "gh-pages": "^6.1.1",
     "i": "^0.3.7",
+    "markdown-to-jsx": "^7.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
-    "react-router-dom": "^6.23.1",
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "^6.26.1",
+    "remark-gfm": "^4.0.0",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.5",
     "tailwind-merge": "^2.4.0",

public/markdown/mentorship.md

@@ -0,0 +1,65 @@
+# Mentoring Program Details
+
+## Overview
+- Program Idea: Pair underclassmen with upperclassmen
+- Collaboration: Software Developers Association (SoDA)
+- Team Size: 3-5 people to vet applications and pair mentors/mentees
+- Estimated Duration: 3-4 weeks for the entire process
+
+## Timeline
+1. Late July/early August: Poll officers to find 10-15 mentors (include backups)
+2. Create application forms for mentors/mentees
+3. Send out forms after first or second General Body Meeting (GBM)
+4. Assign mentors to mentees
+5. Announce program at first meeting
+
+## Mentor Responsibilities
+- Provide mentees with resumes
+- Offer internship tips
+- Provide professional help as capable
+
+## Program Structure
+
+### Mentorship Options
+1. One-on-one pairing (3:3 or 3:4 ratio)
+2. Group mentorship (group of mentors helping group of mentees)
+
+### Communication
+- Discord channel accessible only to mentors and mentees
+- Mentorship/office hours
+
+### End-of-program Project
+- Assign projects for mentees to work on with their mentors
+- Project options:
+  1. Build an app (SoDA or CodeDevils project)
+  2. Create a portfolio website (SoDA)
+  3. AI-related project
+  4. Free choice
+
+## Participant Benefits
+
+### Mentors
+- Volunteer opportunity
+- Special privileges (potentially related to SoDA/Industry speakers)
+- Certificate of Mentorship for resume
+- Potential rewards: gift cards
+
+### Mentees
+- Personalized help
+- Expanded skills from workshops
+- Support system for freshman year
+- Resume review
+
+## Application Process
+1. Submission of resume and application form
+2. Short interview with 2-3 mentors
+3. Evaluation based on:
+   - Involvement in SoDA
+   - Skills demonstrated through resume and workshop performance
+   - Interest and potential gain from the program
+
+## Notes for Future Consideration
+- Potential for intern/mid-season hiring of successful mentees
+- Need to develop better incentives for mentors
+- Consider mentor/mentee-specific events
+- Possibility of stipends for mentors

public/markdown/points.md

@@ -0,0 +1,31 @@
+# Points System
+
+## About this Project
+This system aims to incentivize active involvement through a structured framework of rewards and recognitions, enhancing the overall club experience and offering tangible benefits to our members.
+
+## Objectives
+1. **Increase Active Participation:** Encourage consistent attendance at meetings, workshops, and club events.
+2. **Enhance Member Skills:** Motivate members to engage deeply with technical content and collaborative projects.
+3. **Build Community:** Strengthen the sense of belonging and teamwork within the club.
+4. **Recognize Contributions:** Acknowledge and reward the efforts and achievements of our members.
+
+## Perks and Rewards
+Members can earn points through various activities such as attending meetings, participating in discussions, contributing to projects, and more. These points lead to numerous benefits, including:
+
+- **Priority Opportunities:** Access to limited-space events and workshops (more details to come as the semester progresses).
+- **Professional Advancement:** Enhanced visibility in our Resume Book and potential recommendation letters.
+- **Exclusive Access:** Voting rights on future workshop topics and direct interactions with industry professionals.
+- **Public Recognition:** Features in club newsletters and social media as "Member of the Month."
+
+## Point System Breakdown
+
+| Activity Category | Specific Activity | Points Awarded | Notes |
+|-------------------|-------------------|----------------|-------|
+| Meetings | Attend in-person meeting | 10 | Higher points for in-person attendance |
+| | Attend online meeting | Approx. 5 | Encourages participation regardless of location |
+| | Attend Lounge hours | 5 | |
+| Active Participation | Asking questions or contributing to meetings by interacting with the workshops/presenters | 1 each time | Promotes lively discussions and engagement |
+| | Bonus points for participation | 5 | |
+| Discord Engagement | Engaging with the Discord in general and asking questions (not answering questions) | 2 per month | Maximum of 10 points per semester; subject to director's discretion |
+| | Helpful post or solving a query | 5 per instance | Encourages peer support (cap of 15 points per semester) |
+| Workshop Contribution | Submit a workshop challenge | 20 | Encourages taking the initiative to engage with the events |

src/App.tsx

@@ -1,14 +1,21 @@
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Navbar from "./components/Navigation/Navbar";
 import Home from "./pages/Home";
+import Mentorship from "./pages/Mentorship";
+import PointsSystem from "./pages/PointsSystem";
 import Footer from "./components/Footer/Footer";
 
 function App() {
   return (
-    <>
+    <Router>
       <Navbar />
-      <Home />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/mentorship" element={<Mentorship />} />
+        <Route path="/points-system" element={<PointsSystem />} />
+      </Routes>
       <Footer />
-    </>
+    </Router>
   );
 }
 

src/components/Blog.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import Markdown from "markdown-to-jsx";
+import { Link } from "react-router-dom";
+
+interface IndividualBlogProps {
+  imageURL: string;
+  tag: string[];
+  title: string;
+  summary: string;
+  link: string;
+}
+
+const getRandomColor = () => {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+};
+
+const IndividualBlog: React.FC<IndividualBlogProps> = ({
+  imageURL,
+  tag,
+  title,
+  summary,
+  link,
+}) => {
+  return (
+    <Link to={link} className="group relative block">
+      <div className="bg-soda-white rounded-lg p-6 w-80 h-100 overflow-hidden text-black font-sans transition transform hover:scale-105 hover:shadow-lg">
+        <img src={imageURL} alt={title} className="w-full rounded-lg" />
+        <div className="flex flex-wrap gap-2 mt-2">
+          {tag.map((t, index) => (
+            <span
+              key={index}
+              className="rounded-full px-3 py-1 text-xs text-black"
+              style={{ backgroundColor: getRandomColor() }}
+            >
+              {t}
+            </span>
+          ))}
+        </div>
+        <h2 className="text-2xl font-bold mt-3">{title}</h2>
+        <Markdown className="text-gray-900 mt-2 text-sm overflow-hidden text-ellipsis h-16">
+          {summary}
+        </Markdown>
+        <div className="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+          <span className="text-white text-lg font-bold">Read More</span>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default function Blog() {
+  return (
+    <main className="mt-10">
+      <h1 className="section-header-text mb-6">SoDA Developers News</h1>
+      <section className="flex max-md:flex-col gap-8 items-center justify-center">
+        <IndividualBlog
+          imageURL="/events/microsoft.JPG"
+          tag={["mentorship", "community development"]}
+          title="Mentoring Program 🧑‍🏫"
+          summary="SoDA offers a comprehensive mentorship program designed to support those in need. Our program connects experienced mentors with mentees, providing guidance, and support to help them navigate their academic and professional journeys. "
+          link="/mentorship"
+        />
+        <IndividualBlog
+          imageURL="/how-to-start-a-points-system.png"
+          tag={["mentorship", "community development"]}
+          title="Points System 📊"
+          summary="SoDA introduced points system designed to encourage active participation in our community. By attending meetings, events, and engaging in various activities, members can earn points that contribute to their standing within the organization."
+          link="/points-system"
+        />
+      </section>
+    </main>
+  );
+}

src/pages/Home.tsx

@@ -7,17 +7,19 @@ import { Contacts } from "../components/Team/Contacts";
 import AboutUs from "../components/AboutUs";
 import { ShootingStars } from "../components/ui/shooting-star";
 import { StarsBackground } from "../components/ui/stars-background";
+import Blog from "../components/Blog";
 
 function Home() {
   return (
     <main className="home area">
+      {/* <ShootingStars minDelay={1000} maxSpeed={20} starWidth={40} />
+      <StarsBackground starDensity={0.0009} /> */}
       <Hero />
       <AboutUs />
       <SponsorsMarquee />
       <MemberCards contacts={contactsData as Contacts} />
+      <Blog />
       <InfoCards />
-      <ShootingStars minDelay={1000} maxSpeed={20} starWidth={40} />
-      <StarsBackground starDensity={0.0009} />
     </main>
   );
 }

src/pages/Mentorship.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+const markdownContent = `
+# Mentorship Program Details
+
+## Overview
+
+The Mentorship Program is designed to connect underclassmen with experienced upperclassmen to foster professional growth and development. This initiative, in collaboration with the Software Developers Association (SoDA), aims to provide valuable guidance and support to students through a structured mentoring process.
+
+- **Program Idea:** Pair underclassmen with upperclassmen for mentorship.
+- **Collaboration:** Partnered with SoDA.
+- **Team Size:** 3-5 individuals to manage applications and mentor/mentee pairings.
+- **Estimated Duration:** 3-4 weeks for the entire process.
+
+## Timeline
+
+1. **Late July/Early August:** Poll officers to find 10-15 mentors, including backups.
+2. **Create Application Forms:** Develop forms for both mentors and mentees.
+3. **Distribute Forms:** Send out application forms after the first or second General Body Meeting (GBM).
+4. **Assign Mentors:** Match mentors with mentees.
+5. **Announce Program:** Reveal the program details at the first meeting.
+
+## Mentor Responsibilities
+
+- Provide mentees with resume reviews.
+- Offer tips for securing internships.
+- Share professional insights and support.
+
+## Program Structure
+
+### Mentorship Options
+
+1. **One-on-One Pairing:** Direct pairing of one mentor with one mentee.
+2. **Group Mentorship:** Groups of mentors assisting groups of mentees.
+
+### Communication
+
+- **Discord Channel:** Dedicated space for mentors and mentees to communicate.
+- **Mentorship/Office Hours:** Scheduled times for direct interaction and support.
+
+### End-of-Program Project
+
+Mentees will work on projects with their mentors, including:
+
+1. **Build an App:** Contribute to a SoDA or CodeDevils project.
+2. **Create a Portfolio Website:** Develop a personal or SoDA-related website.
+3. **AI-Related Project:** Engage in a project related to artificial intelligence.
+4. **Free Choice:** Select a project of personal interest.
+
+## Participant Benefits
+
+### Mentors
+
+- **Volunteer Opportunity:** Contribute to the professional growth of students.
+- **Special Privileges:** Potential access to industry speakers and events.
+- **Certificate of Mentorship:** Enhance your resume with formal recognition.
+- **Potential Rewards:** Gift cards or other incentives.
+
+### Mentees
+
+- **Personalized Help:** Receive tailored advice and support.
+- **Skill Expansion:** Gain new skills from workshops and practical experience.
+- **Support System:** Benefit from a structured support system, particularly useful during the freshman year.
+- **Resume Review:** Get feedback and improvement tips for your resume.
+
+## Application Process
+
+1. **Submit Resume and Application Form:** Provide necessary documentation and information.
+2. **Short Interview:** Participate in an interview with 2-3 mentors.
+3. **Evaluation Criteria:** Assessment based on involvement in SoDA, skills demonstrated through the resume and workshops, and potential gain from the program.
+
+## Notes for Future Consideration
+
+- **Intern/Mid-Season Hiring:** Explore the possibility of hiring successful mentees.
+- **Incentives for Mentors:** Develop better incentives to attract and retain mentors.
+- **Mentor/Mentee-Specific Events:** Consider organizing exclusive events for mentors and mentees.
+- **Stipends for Mentors:** Investigate the possibility of providing stipends for mentors.
+`;
+
+export default function Mentorship() {
+  return (
+    <div className="max-w-5xl mx-auto p-6 mt-20  shadow-md rounded-lg">
+      <h1 className="section-header-text">Mentorship Program 🧑‍🏫</h1>
+      <ReactMarkdown
+        children={markdownContent}
+        remarkPlugins={[remarkGfm]}
+        className="prose lg:prose-xl"
+      />
+    </div>
+  );
+}

src/pages/PointsSystem.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+const markdownContent = `# Points System
+
+## About this Project
+This system aims to incentivize active involvement through a structured framework of rewards and recognitions, enhancing the overall club experience and offering tangible benefits to our members.
+
+## Objectives
+1. **Increase Active Participation:** Encourage consistent attendance at meetings, workshops, and club events.
+2. **Enhance Member Skills:** Motivate members to engage deeply with technical content and collaborative projects.
+3. **Build Community:** Strengthen the sense of belonging and teamwork within the club.
+4. **Recognize Contributions:** Acknowledge and reward the efforts and achievements of our members.
+
+## Perks and Rewards
+Members can earn points through various activities such as attending meetings, participating in discussions, contributing to projects, and more. These points lead to numerous benefits, including:
+
+- **Priority Opportunities:** Access to limited-space events and workshops (more details to come as the semester progresses).
+- **Professional Advancement:** Enhanced visibility in our Resume Book and potential recommendation letters.
+- **Exclusive Access:** Voting rights on future workshop topics and direct interactions with industry professionals.
+- **Public Recognition:** Features in club newsletters and social media as "Member of the Month."
+
+## Point System Breakdown
+
+| Activity Category | Specific Activity | Points Awarded | Notes |
+|-------------------|-------------------|----------------|-------|
+| Meetings | Attend in-person meeting | 10 | Higher points for in-person attendance |
+| | Attend online meeting | Approx. 5 | Encourages participation regardless of location |
+| | Attend Lounge hours | 5 | |
+| Active Participation | Asking questions or contributing to meetings by interacting with the workshops/presenters | 1 each time | Promotes lively discussions and engagement |
+| | Bonus points for participation | 5 | |
+| Discord Engagement | Engaging with the Discord in general and asking questions (not answering questions) | 2 per month | Maximum of 10 points per semester; subject to director's discretion |
+| | Helpful post or solving a query | 5 per instance | Encourages peer support (cap of 15 points per semester) |
+| Workshop Contribution | Submit a workshop challenge | 20 | Encourages taking the initiative to engage with the events |
+`;
+
+export default function PointsSystem() {
+  return (
+    <div className="max-w-5xl mx-auto p-6 my-20  shadow-md rounded-lg">
+      <h1 className="section-header-text">Points System 🎯</h1>
+      <ReactMarkdown
+        children={markdownContent}
+        remarkPlugins={[remarkGfm]}
+        className="prose lg:prose-xl"
+      />
+    </div>
+  );
+}