Enhancement/free code camp #167

frontend/README.md

@@ -38,10 +38,10 @@ npm install
 
 ### Set up the environment variables:
 
-Create a `.env.local` file in the root directory of the `frontend` project and add the environment variables from the `.env.local.example` file.
-You can copy the `.env.local.example` file to `.env.local` using the following command if you are using a Unix-based system:
+Create a `.env.local` file in the root directory of the `frontend` project and add the environment variables from the `.env.example` file.
+You can copy the `.env.example` file to `.env.local` using the following command if you are using a Unix-based system:
 ```
-cp .env.local.example .env.local
+cp .env.example .env.local
 ```
 
 ### Run the development server:

frontend/app/(portal)/resources/page.tsx

@@ -3,11 +3,13 @@ import InternshipsSection from "@/app/ui/portal/resources/InternshipsSection";
 import FellowshipsSection from "@/app/ui/portal/resources/FellowshipsSection";
 import InterviewSection from "@/app/ui/portal/resources/InterviewSection";
 import StudentProgramsSection from "@/app/ui/portal/resources/StudentProgramsSection";
+import LearningSection from "@/app/ui/portal/resources/LearningSection";
 
 export default function Page() {
   return (
     <main>
       <HeroSection />
+      <LearningSection />
       <InternshipsSection />
       <FellowshipsSection />
       <InterviewSection />

frontend/app/ui/portal/resources/FellowshipsSection.tsx

@@ -32,6 +32,10 @@ const items = [
     title: "America Needs You",
     link: "https://americaneedsyou.org/",
   },
+  {
+    title: "CapitalOne Full-Time Programs",
+    link: "https://www.capitalonecareers.com/full-time-programs",
+  },
 ]
 
 export default function Page() {

frontend/app/ui/portal/resources/LearningSection.tsx

@@ -0,0 +1,94 @@
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
+import { BsPlus } from "react-icons/bs";
+import { BsDash } from "react-icons/bs";
+
+const items = [
+  {
+    title: "Forge Software Engineering Simulations",
+    link: "https://www.theforage.com/career-path/software-engineering",
+    description: `The Forage’s Software Engineering career path page offers free virtual job simulations, guides,
+                  and resources to help you explore software engineering roles, build real-world technical skills, and prepare 
+                  for a successful entry into the field.`,
+  },
+  {
+    title: "Developer Roadmaps",
+    link: "https://roadmap.sh/",
+    description: `roadmap.sh is a community-driven platform offering comprehensive, actively maintained developer
+                  roadmaps, guides, and resources to help learners choose and advance their software development careers.`,
+  },
+  {
+    title: "Open Source Computer Science Degree",
+    link: "https://github.com/ForrestKnight/open-source-cs",
+    description: `ForrestKnight’s open-source-cs on GitHub is a curated curriculum of free, university-level computer 
+                  science courses that cover core CS topics equivalent to a degree, excluding general education.`,
+  },
+  {
+    title: "100 Days CSS Challenge",
+    link: "https://100dayscss.com/",
+    description: `100dayscss.com hosts a CSS challenge that encourages daily practice through templates and 
+                  submissions to help users improve their CSS skills progressively.`,
+    },
+  {
+    title: "Code Wars - Achieve Mastery Through Practice",
+    link: "https://www.codewars.com/",
+    description: `Codewars is an interactive coding platform where users solve community-created coding challenges ("kata") 
+                  to sharpen skills, earn ranks, and engage with a global developer community across 55+ languages.`,
+  },
+  {
+    title: "The Odin Project ",
+    link: "https://www.theodinproject.com/",
+    description: `The Odin Project provides a free, self-paced web development curriculum with curated tutorials and projects,
+                   supported by a community to help beginners build real-world skills and portfolios.`,
+  },
+  {
+    title: "FreeCodeCamp",
+    link: "freecodecamp.org/learn",
+    description: `FreeCodeCamp offers a free, self-paced curriculum with interactive coding lessons, projects, and certifications covering 
+                web development, JavaScript, Python, data analysis, and full stack development to help beginners and aspiring
+                 developers build real-world programming skills`,
+  }
+]
+
+export default function Page() {
+  return (
+    <div className="mx-auto max-w-7xl px-6 lg:px-8 py-8">
+      <div className="mx-auto max-w-4xl divide-y divide-gray-900/10">
+        <h2 className="text-2xl font-bold leading-10 tracking-tight text-gray-900">
+          Self-Learning Materials
+        </h2>
+        <dl className="mt-10 space-y-6 divide-y divide-gray-900/10">
+          {items.map((item) => (
+            <Disclosure key={item.title} as="div" className="pt-6">
+              <dt>
+                <DisclosureButton className="group flex w-full items-start justify-between text-left text-gray-900">
+                  <span className="text-base font-semibold leading-7">{item.title}</span>
+                  <span className="ml-6 flex h-7 items-center">
+                    <BsPlus aria-hidden="true" className="h-6 w-6 group-data-[open]:hidden" />
+                    <BsDash aria-hidden="true" className="h-6 w-6 [.group:not([data-open])_&]:hidden" />
+                  </span>
+                </DisclosureButton>
+              </dt>
+              <DisclosurePanel as="dd" className="mt-2 pr-12">
+                <span className= "text-base leading-7 font-semibold "> Description: </span>
+                <span
+                      className="text-base leading-7 break-words">
+                      {item.description}
+                </span>
+                <br />
+                <span className= "text-base leading-7 font-semibold "> Link: </span>
+                <a
+                  href={item.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-base leading-7 text-bc-red hover:text-bc-yellow break-words"
+                >
+                  {item.link}
+                </a>
+              </DisclosurePanel>
+            </Disclosure>
+          ))}
+        </dl>
+      </div>
+    </div>
+  )
+}