integrate into git

2022-03-07 11:02:16 +01:00
parent e164316466
commit 2c4f05aebf
82 changed files with 63754 additions and 386 deletions
@@ -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>
+    );
+  }
+}
@@ -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
@@ -0,0 +1,4 @@
+import React from "react";
+import { AutoGallery } from "./AutoGallery";
+
+export default AutoGallery;