Feat/new design

docusaurus.config.js

@@ -8,7 +8,7 @@
     baseUrl: "/",
     onBrokenLinks: "throw",
     onBrokenMarkdownLinks: "warn",
-    favicon: "img/favicon.ico",
+    favicon: "./static/img/favicon.ico",
     organizationName: "looplanguage", // Usually your GitHub org/user name.
     projectName: "looplanguage.github.io", // Usually your repo name.
     presets: [
@@ -75,8 +75,8 @@
           title: " ",
           logo: {
             alt: "Loop Logo",
-            src: "img/loopLogoBlack.png",
-            srcDark: "img/loopLogoWhite.png",
+            src: "img/loopLogoBlack.svg",
+            srcDark: "img/loopLogoWhite.svg",
           },
           items: [
             {
@@ -90,6 +90,11 @@
               label: "Updates",
               position: "left",
             },
+            {
+              to: "/about",
+              label: "About",
+              position: "left",
+            },
             {
               label: "GitLab",
               href: "https://gitlab.com/looplanguage",
@@ -102,7 +107,7 @@
           ],
         },
         footer: {
-          style: "dark",
+          style: "light",
           links: [
             {
               title: "Docs",

src/components/AboutpageFeatures.js

@@ -0,0 +1,78 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./AboutpageFeatures.module.css";
+
+function LightningIcon() {
+  return (
+    <svg style={{ maxHeight: 130, marginBottom: 20 }} xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+      <path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
+    </svg>
+  );
+}
+
+function LightbulbIcon() {
+  return (
+    <svg style={{ maxHeight: 130, marginBottom: 20 }} xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+      <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
+    </svg>
+  );
+}
+
+function ComputerIcon() {
+  return (
+    <svg style={{ maxHeight: 130, marginBottom: 20 }} xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+      <path fillRule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clipRule="evenodd" />
+    </svg>
+  );
+}
+
+const FeatureList = [
+  {
+    title: "Accessibility",
+    Svg: LightbulbIcon,
+    description: <> Loop is made with ease of use in mind, it's primary target audience is just regular folk. Meaning that each design decision went into being easy!</>,
+  },
+  {
+    title: "Passion for ICT",
+    Svg: LightningIcon,
+    description: <>Placeholder</>,
+  },
+  {
+    title: "Cross Platform",
+    Svg: ComputerIcon,
+    description: <> You can use Loop anywhere! Including Windows, Mac & Linux. But also on multiple architectures, like x86_64 and ARM64 </>,
+  },
+];
+
+function Feature({ Svg, title, description }) {
+  return (
+    <div className={clsx("col col--4")}>
+      <div className={clsx("text--center")}>
+        <Svg className={styles.featureSvg} alt={title} />{" "}
+      </div>{" "}
+      <div className={clsx("text--center padding-horiz--md")}>
+        <h3> {title} </h3> <p> {description} </p>{" "}
+      </div>{" "}
+    </div>
+  );
+}
+
+export default function AboutpageFeatures() {
+  return (
+    <section className={styles.features}>
+      <div className={clsx("container")}>
+        <div className={styles.row}>
+          <h6 className={styles.subHeaderText}>our 3 greatest</h6>
+          <h1 className={styles.headerText}>core values</h1>
+        </div>
+        <div className="row">
+          {" "}
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}{" "}
+        </div>{" "}
+      </div>{" "}
+    </section>
+  );
+}
+

src/components/AboutpageFeatures.module.css

@@ -0,0 +1,46 @@
+h3 {
+  font-family: var(--ifm-font-family);
+}
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+  margin-bottom: 200px; 
+}
+
+.subHeaderText { 
+  text-align: center; 
+  text-transform: uppercase;
+  color: var(--ifm-color-primary);
+  margin: 0; 
+  font-family: var(--ifm-font-family);
+  font-size: 1em; 
+  font-weight: 500;
+}
+
+.headerText { 
+  text-align: center;
+  text-transform: capitalize;
+  margin: 7px 0 75px 0;
+  font-family: var(--ifm-font-family);
+  font-size: 3em; 
+  font-weight: 600;
+}
+
+@media only screen and (max-width: 1050px) {
+
+  .headerText { 
+    font-size: 2em; 
+  }
+
+  .subHeaderText { 
+    font-size: 0.9em; 
+  }
+}

src/components/AboutpageTeamMembers.js

@@ -0,0 +1,129 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./AboutpageTeamMembers.module.css";
+import ThemedImage from '@theme/ThemedImage';
+
+// Profile Pictures
+
+import kanePetra from "./../../static/img/team-members/KanePetra.png"
+import wouterPennings from "./../../static/img/team-members/WouterPennings.png"
+import nealGeilen from "./../../static/img/team-members/NealGeilen.png"
+import nickvOoijen from "./../../static/img/team-members/NickvOoijen.png"
+import damienKusters from "./../../static/img/team-members/DamienKusters.png"
+import jessevdLaar from "./../../static/img/team-members/JessevdLaar.png"
+import sefvHalbeek from "./../../static/img/team-members/SefvHalbeek.png"
+import manonYkema from "./../../static/img/team-members/ManonYkema.png"
+
+// Social Media
+import githubLogoDM from "./../../static/img/social-media/githubLogo.png"
+import githubLogoNM from "./../../static/img/social-media/githubLogoNM.png"
+import linkedinLogoDM from "./../../static/img/social-media/linkedinLogoDM.png"
+import linkedinLogoNM from "./../../static/img/social-media/linkedinLogoNM.png"
+import twitterLogoDM from "./../../static/img/social-media/twitterLogoDM.png"
+import twitterLogoNM from "./../../static/img/social-media/twitterLogoNM.png"
+import portfolioLogoDM from "./../../static/img/social-media/portfolioLogoDM.png"
+import portfolioLogoNM from "./../../static/img/social-media/portfolioLogoNM.png"
+import noSocials from "./../../static/img/social-media/noSocialMedia.png"
+
+// Switch Case Numbers
+const githubInfo = 0
+const linkedinInfo = 1
+const twitterInfo = 2
+const portfolioInfo = 3
+const noSocialInfo = 4
+
+
+class SMInfo{
+  constructor(imageLight, imageDark, alt){
+    this.imageLight = imageLight
+    this.imageDark = imageDark
+    this.alt = alt
+  }
+}
+
+class SocialMediaLink{
+  constructor(url, infoId){
+    this.url = url
+    let info = this.GetInfo(infoId)
+    this.imageLight = info.imageLight
+    this.imageDark = info.imageDark
+    this.alt = info.alt
+  }
+
+  GetInfo(infoId){
+    switch(infoId){
+      case githubInfo:
+        return new SMInfo(githubLogoDM, githubLogoNM, "GitHub Social Media Icon")
+      case linkedinInfo:
+        return new SMInfo(linkedinLogoDM, linkedinLogoNM, "LinkedIn Social Media Icon")
+      case twitterInfo: 
+        return new SMInfo(twitterLogoDM, twitterLogoNM, "Twitter Social Media Icon")
+      case portfolioInfo: 
+        return new SMInfo(portfolioLogoDM, portfolioLogoNM, "Portfolio Icon")
+      case noSocialInfo: 
+        return new SMInfo(noSocials, noSocials, "No Social Media")
+    }
+  }
+}
+
+function GeneratePerson(img, namePic, name, focus, description, socialMediaLinks) { 
+  return (
+    <li key={namePic} className={styles.listMembers}>
+      <img src={img} alt={namePic} className={styles.picMember} />
+      <div className={styles.descMembers}>
+        <div className={styles.headerMembers}>
+          <h2>{name}</h2>
+          <h5>{focus}</h5>
+        </div>
+        <p>{description}</p>
+        <div className={styles.socialMedia}>
+
+        {socialMediaLinks.map(socialMediaLink=>(
+          <a href={socialMediaLink.url} target="_blank" >  
+            <ThemedImage alt={socialMediaLink.alt}
+            sources={{
+              light: socialMediaLink.imageLight,
+              dark: socialMediaLink.imageDark,
+            }}
+            ></ThemedImage>
+          </a>   
+        ))}
+        </div>
+      </div>
+    </li>
+  )
+}
+
+function TeamMembers(){
+  let description = "Testimonials. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.";
+
+  return [ 
+    GeneratePerson(kanePetra, "Profiel foto Kane Petra", "Kane Petra", "Lead Maintainer", "Responsible for the main Loop repositories, its official libraries and final decisions within the project.", [new SocialMediaLink("https://github.com/kanersps", githubInfo), new SocialMediaLink("https://www.linkedin.com/in/kane-petra-a05bb8158/", linkedinInfo), new SocialMediaLink("https://twitter.com/Kanersps", twitterInfo)]),//
+    GeneratePerson(wouterPennings, "Profiel foto Wouter Pennings", "Wouter Pennings", "Maintaining + Developing Loop", "I am a maintainer for the project. Developing Loop and supporting its sub-projects.", [new SocialMediaLink("https://github.com/wouterpennings", githubInfo), new SocialMediaLink("https://www.linkedin.com/in/wouter-pennings-6808211b5/", linkedinInfo), new SocialMediaLink("https://www.wouterpennings.com/", portfolioInfo)]),
+    GeneratePerson(nickvOoijen, "Profiel foto Nick van Ooijen", "Nick van Ooijen", "Package Repository Developer", "Worked on features such as downloading and uploading package versions, User verification using JWT, and Authentication using GitHub OAuth.", [new SocialMediaLink("https://github.com/nickonos", githubInfo), new SocialMediaLink("https://www.linkedin.com/in/nick-van-oijen-7998221b5/ ", linkedinInfo)]), 
+    GeneratePerson(nealGeilen, "Profiel foto Neal Geilen", "Neal Geilen", "Main Developer Loop Package Repository", "Lead the development of the loop package repository. Ensuring that the Lpr is ready for the future.", [new SocialMediaLink(" ", noSocialInfo)]), 
+    GeneratePerson(damienKusters, "Profiel foto Damien Kusters", "Damien Kusters", "Package Repository Developer", "Assisted in the LPR Backend architecture design. Developed the Authentication and authorisation capabilities of the Package Repository", [new SocialMediaLink("https://github.com/DamienKusters", githubInfo), new SocialMediaLink("https://www.linkedin.com/in/damien-kusters-7baa33197/", linkedinInfo)]), 
+    GeneratePerson(sefvHalbeek, "Profiel foto Sef van Halbeek", "Sef van Halbeek", "Brand Design", description, [new SocialMediaLink("https://github.com/SEFFFFF", githubInfo)]),
+    GeneratePerson(jessevdLaar, "Profiel foto Jesse van de Laar","Jesse van de Laar", "Software Engineer", description, [new SocialMediaLink("https://github.com/Jesse2001", githubInfo)]),
+    GeneratePerson(manonYkema, "Profiel foto Manon Ykema", "Manon Ykema", "Front-end Design + Development", "Designed and developed the Welcome and Documentation page.", [new SocialMediaLink("https://github.com/manontheresa", githubInfo), new SocialMediaLink("https://www.linkedin.com/in/manon-ykema-1708/", linkedinInfo), new SocialMediaLink("https://www.manontheresa.com/", portfolioInfo)] ),
+  ];
+}
+
+export default function AboutpageTeamMembers() {
+    var members = TeamMembers();
+
+    return (
+        <section>
+          <div className={clsx("container")}>
+            <div>
+              <h6 className={styles.subHeaderText}>meet our</h6>
+              <h1 className={styles.headerText}>team members</h1>
+            </div>
+            <ul>
+              {" "}
+              {members}{" "}
+            </ul>
+          </div>{" "}
+        </section>
+    );
+}