integrate into git

components/AutoGallery/AutoGallery.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import Flickity from "react-flickity-component";
+import "flickity/css/flickity.css";
+import styles from "./AutoGallery.module.sass";
+
+export class AutoGallery extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { activeItem: 1 };
+  }
+
+  render() {
+    return (
+      <Flickity
+        className={styles.carousel} // default ''
+        elementType={"div"} // default 'div'
+        options={{ prevNextButtons: true, wrapAround: true, autoPlay: 5000 }} // takes flickity options {}
+        disableImagesLoaded={false} // default false
+        reloadOnUpdate // default false
+        static // default false
+      >
+        <div className={styles.slide}>
+          <img className={styles.bgimg} src="/portfolio_bath.webp" alt="bath" />
+          <div className={styles.overlay}>
+            <h2>My Bachelor Thesis</h2>
+            <p>on calibration and software inside a custom power supply</p>
+            <p>see more...</p>
+          </div>
+        </div>
+        <div className={styles.slide}>
+          <img className={styles.bgimg} src="/portfolio_math.webp" alt="math" />
+          <div className={styles.overlay}>
+            <h2>My Master Thesis</h2>
+            <p>
+              on analysis, design and optimization of a analogue Pre-Amplifier
+              with the goal of transitioning to a newer manufacturing node.
+            </p>
+            <p>see more...</p>
+          </div>
+        </div>
+      </Flickity>
+    );
+  }
+}

components/AutoGallery/AutoGallery.module.sass

@@ -0,0 +1,66 @@
+.carousel
+    width: 100vw
+    max-width: 1000px
+    padding-bottom: 100px
+    border-radius: 10px
+    overflow: hidden
+    padding: 0
+    margin-bottom: 20px
+
+.slide
+    --transition-time: .5s
+    // position: relative
+    transition: var(--transition-time) filter
+    -webkit-transition: var(--transition-time) -webkit-filter
+    -moz-transition: var(--transition-time) -moz-filter
+    -ms-transition: var(--transition-time) -ms-filter
+    -o-transition: var(--transition-time) -o-filter
+
+    width: 100vw
+    max-width: 1000px
+    height: 50vw
+    max-height: 500px
+    background-size: 100%
+    background-repeat: no-repeat
+
+    display: flex
+    justify-content: center
+    align-items: center
+    z-index: 5
+
+    .bgimg
+        position: absolute
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%
+        transition: var(--transition-time) filter
+        -webkit-transition: var(--transition-time) -webkit-filter
+        -moz-transition: var(--transition-time) -moz-filter
+        -ms-transition: var(--transition-time) -ms-filter
+        -o-transition: var(--transition-time) -o-filter
+        z-index: 6
+
+    &:hover .bgimg
+        filter: blur(3px)
+
+    .overlay
+        width: 100%
+        height: 100%
+        max-width: 1000px
+        background-color: rgba(47,80,112,.8)
+        // margin: 10vw
+        // display: none
+        opacity: 0
+        z-index: 7
+        transition: opacity .25s
+
+        padding: 0 50px
+
+        display: flex
+        flex-direction: column
+        justify-content: flex-start
+        align-items: flex-start
+
+    &:hover .overlay
+        opacity: 1

components/AutoGallery/index.js

@@ -0,0 +1,4 @@
+import React from "react";
+import { AutoGallery } from "./AutoGallery";
+
+export default AutoGallery;

components/GitGallery/GitGallery.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Head from "next/head";
+import Image from "next/image";
+import ProjectCard from "../ProjectCard";
+import styles from "./GitGallery.module.sass";
+
+export function GitGallery(props) {
+  var links = [];
+
+  props.publicGiteaRepos.forEach((repo) => {
+    links.push(
+      <ProjectCard
+        classNames={styles.card_gitea}
+        url={repo.html_url}
+        fullName={repo.full_name}
+        name={repo.name}
+        description={repo.description}
+        avatarUrl={repo.avatar_url}
+      />
+    );
+  });
+
+  props.publicGithubRepos.forEach((repo) => {
+    links.push(
+      <ProjectCard
+        classNames={styles.card_github}
+        url={repo.html_url}
+        fullName={repo.full_name}
+        name={repo.name}
+        description={repo.description}
+        avatarUrl={repo.avatar_url}
+      />
+    );
+  });
+
+  return (
+    <div className={styles.cardContainer}>
+      <h2>These are my public repositories:</h2>
+      {links}
+    </div>
+  );
+}

components/GitGallery/GitGallery.module.sass

@@ -0,0 +1,11 @@
+.cardContainer
+    // border: 1px solid gray
+    width: 90vw
+    max-width: 1000px
+    display: flex
+    flex-wrap: wrap
+    justify-content: center
+
+    h2
+        width: 100%
+        text-align: center

components/GitGallery/index.js

@@ -0,0 +1,3 @@
+import { GitGallery } from "./GitGallery";
+
+export default GitGallery;

components/ProjectCard/ProjectCard.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Image from "next/image";
+import styles from "./ProjectCard.module.sass";
+
+export function ProjectCard(props) {
+  return (
+    <a
+      href={props.url}
+      key={props.fullName}
+      className={[styles.card].concat(props.classNames).join(" ")}
+    >
+      <Image
+        className={props.mockupUrl ? styles.card_mockup : styles.card_gitea}
+        src={props.mockupUrl ? props.mockupUrl : props.avatarUrl}
+        alt={props.name}
+        width="15vw"
+        height="15vw"
+        unoptimized={true}
+      />
+      <h2>{props.name}</h2>
+      <p>{props.description || "-"}</p>
+    </a>
+  );
+}
+
+ProjectCard.defaultProps = {
+  avatarUrl: "/article_black_48dp.svg",
+};

components/ProjectCard/ProjectCard.module.sass

@@ -0,0 +1,96 @@
+.card
+    --transition-time: 0.15s
+    --hover-color: #0070f3
+
+    background-color: var(--color-0)
+
+    margin: 1rem
+    text-align: left
+    color: inherit
+    text-decoration: none
+    border: 2px solid var(--color-0)
+    border-radius: 10px
+
+    min-width: 166px
+    width: 20vw
+    max-width: 250px
+
+    min-height: 250px
+    height: 30vw
+    max-height: 375px
+
+    display: flex
+    flex-direction: column
+    justify-content: flex-start
+    align-content: space-around
+
+    text-overflow: ellipsis
+    overflow: hidden
+
+    transition: var(--transition-time) color, var(--transition-time) border-color
+
+    & > *
+        padding-bottom: 1.5rem
+        padding-left: 1.5rem
+        padding-right: 1.5rem
+
+    &:hover,
+
+    &:focus,
+
+    &:active
+        color: var(--hover-color)
+        border-color: var(--hover-color)
+        background-color: var(--color-black)
+
+    &_gitea
+        --hover-color: #609926
+
+    &_github
+        --hover-color: #4078c0
+
+    & > span,
+    & > img
+        max-width: 100px !important
+        max-height: 100px !important
+
+        min-width: 56px !important
+        width: 15vw !important
+
+        min-height: 83px !important
+        height: 15vw !important
+
+        padding: 0 !important
+        margin: 50px auto !important
+        transition: var(--transition-time) filter
+
+    & img
+        flex-grow: 3
+        filter: invert(98%) sepia(29%) saturate(491%) hue-rotate(301deg) brightness(99%) contrast(98%)
+
+    &_gitea:hover img
+        filter: invert(53%) sepia(18%) saturate(1808%) hue-rotate(47deg) brightness(96%) contrast(79%)
+        fill: var(--hover-color)
+        stroke: var(--hover-color)
+
+    & img.card_mockup
+        background-color: #f8f8f8
+        width: calc(100% - 3rem)
+        min-height: 150px
+        min-width: 150px
+        max-width: 100%
+        max-height: 100%
+        margin: 0
+        border-radius: 10px 10px 0px 0px
+
+    & h2
+        margin: 0 0 1rem 0
+        font-size: 1.5rem
+
+    & p
+        margin: 0
+        font-size: 1rem
+        line-height: 1.4
+        height: 5vw
+        text-overflow: ellipsis
+        overflow: hidden

components/ProjectCard/ProjectCard.stories.mdx

@@ -0,0 +1,88 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
+
+import styles from "../styles/Home.module.css";
+import ProjectCard from "../components/ProjectCard";
+
+<style>{`
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+`}</style>
+
+<Meta title="WWW/Components/ProjectCard" component={ProjectCard} />
+
+export const Template = (args) => (
+  <ProjectCard avatarUrl="article_black_48dp.svg" {...args} />
+);
+
+a test
+
+<Story
+  name="Mockup"
+  args={{
+    name: "Example Card",
+    description: "Example Description",
+    mockupUrl: "ltstyle_mockup.svg",
+    classNames: "card",
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<Story
+  name="Gitea"
+  args={{
+    name: "Example Gitea Card",
+    description: "Example Description",
+    // avatarUrl: 'public/article_black_48dp.svg',
+    classNames: "card card_gitea",
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<Story
+  name="Github"
+  args={{
+    name: "Example Github Card",
+    description: "Example Description",
+    // avatarUrl: 'public/article_black_48dp.svg',
+    classNames: "card card_github",
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Markdown in{" "}
+  <code>src/stories/ProjectCard.stories.mdx</code>
+</div>

components/ProjectCard/index.js

@@ -0,0 +1,4 @@
+import React from "react";
+import { ProjectCard } from "./ProjectCard";
+
+export default ProjectCard;

components/RepoSummary/RepoSummary.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Bar } from "react-chartjs-2";
+import { Chart, CategoryScale, BarElement, LogarithmicScale } from "chart.js";
+import styles from "./RepoSummary.module.sass";
+
+Chart.register(CategoryScale, BarElement, LogarithmicScale);
+
+function sortByValue(obj) {
+  return Object.entries(obj).sort(([, a], [, b]) => b - a);
+}
+export function RepoSummary(props) {
+  const langs = sortByValue(props.stats.languages);
+  console.log(props.publicGithubRepos);
+  return (
+    <div className={styles.container}>
+      <Bar
+        options={{
+          indexAxis: "y",
+          responsive: true,
+          scales: {
+            myScale: {
+              type: "logarithmic",
+              position: "bottom",
+            },
+          },
+        }}
+        data={{
+          labels: langs.map((obj) => {
+            return obj[0];
+          }),
+          datasets: [
+            {
+              label: "D1",
+              data: langs.map((obj) => {
+                return obj[1];
+              }),
+              backgroundColor: "#355070",
+            },
+          ],
+        }}
+      />
+    </div>
+  );
+}

components/RepoSummary/RepoSummary.module.sass

@@ -0,0 +1,4 @@
+.container
+    max-width: 1000px
+    width: 50vw
+    margin: 150px 0

components/RepoSummary/index.js

@@ -0,0 +1,3 @@
+import { RepoSummary } from "./RepoSummary";
+
+export default RepoSummary;