├── .gitignore
├── README.md
├── package.json
├── public
    ├── _redirects
    ├── index.html
    ├── logo.png
    ├── manifest.json
    └── robots.txt
├── src
    ├── App.js
    ├── App.test.js
    ├── components
    │   ├── Chat
    │   │   ├── Answer.js
    │   │   ├── Chat.scss
    │   │   ├── Message.js
    │   │   ├── Typing.js
    │   │   ├── data.js
    │   │   └── index.js
    │   ├── Container
    │   │   ├── Container.scss
    │   │   └── index.js
    │   ├── Footer
    │   │   ├── Footer.scss
    │   │   └── index.js
    │   ├── Header
    │   │   ├── Header.scss
    │   │   └── index.js
    │   ├── Loader
    │   │   ├── Loader.scss
    │   │   └── index.js
    │   ├── Portfolio
    │   │   ├── Portfolio.scss
    │   │   ├── data.js
    │   │   ├── index.js
    │   │   └── project.js
    │   └── index.js
    ├── images
    │   ├── Github.js
    │   ├── LinkedIn.js
    │   ├── Logo.js
    │   ├── chat.svg
    │   ├── head.jpeg
    │   ├── head.jpg
    │   ├── head.svg
    │   ├── index.js
    │   └── showcase
    │   │   ├── cpr-how_99715-114.jpg
    │   │   ├── do386.svg
    │   │   ├── do386_logo_q.68383ae1.png
    │   │   ├── first-aid-emergency-flat-icons-set_1284-9666 (1).jpg
    │   │   ├── first-aid-emergency-flat-icons-set_1284-9666.jpg
    │   │   ├── first-aid-techniques-guide-infographic-poster_1284-9667.jpg
    │   │   ├── maxout.svg
    │   │   ├── muellkoenig.svg
    │   │   ├── p365.svg
    │   │   ├── palabg.jpg
    │   │   ├── scan.svg
    │   │   ├── tymelog.svg
    │   │   └── wonderquiz.svg
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    ├── setupTests.js
    └── styles
    │   ├── globals.scss
    │   ├── index.scss
    │   └── variables.scss
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Website 2.0
2 | 
3 | https://westhofen.netlify.app
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "westhofen20",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.3.2",
 8 |     "@testing-library/user-event": "^7.1.2",
 9 |     "framer-motion": "^2.6.15",
10 |     "node-sass": "^4.14.1",
11 |     "react": "^16.13.1",
12 |     "react-dom": "^16.13.1",
13 |     "react-router-dom": "^5.2.0",
14 |     "react-scripts": "3.4.3",
15 |     "react-sound": "^1.2.0"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": "react-app"
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/logo.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
13 |     <link
14 |       href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap"
15 |       rel="stylesheet"
16 |     />
17 |     <!--
18 |       manifest.json provides metadata used when your web app is installed on a
19 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
20 |     -->
21 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
22 |     <!--
23 |       Notice the use of %PUBLIC_URL% in the tags above.
24 |       It will be replaced with the URL of the `public` folder during the build.
25 |       Only files inside the `public` folder can be referenced from the HTML.
26 | 
27 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
28 |       work correctly both with client-side routing and a non-root public URL.
29 |       Learn how to configure a non-root public URL by running `npm run build`.
30 |     -->
31 |     <title>Magnus Westhofen - Designer & Developer</title>
32 |   </head>
33 |   <body>
34 |     <noscript>You need to enable JavaScript to run this app.</noscript>
35 |     <div id="root"></div>
36 |     <!--
37 |       This HTML file is a template.
38 |       If you open it directly in the browser, you will see an empty page.
39 | 
40 |       You can add webfonts, meta tags, or analytics to this file.
41 |       The build step will place the bundled scripts into the <body> tag.
42 | 
43 |       To begin the development, run `npm start` or `yarn start`.
44 |       To create a production bundle, use `npm run build` or `yarn build`.
45 |     -->
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/groev/westhofen20/74a526f5d0e0c0befb8c8ddccf84a10e71d1a823/public/logo.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Magnus Westhofen",
 4 |   "icons": [
 5 |     {
 6 |       "src": "logo.png",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/png"
 9 |     },
10 |     {
11 |       "src": "logo.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useLayoutEffect, useState } from "react";
 2 | import "./styles/index.scss";
 3 | import { BrowserRouter, Switch, Route } from "react-router-dom";
 4 | import {
 5 |   Header,
 6 |   Container,
 7 |   Chat,
 8 |   Portfolio,
 9 |   Footer,
10 |   Loader,
11 | } from "./components";
12 | 
13 | function App() {
14 |   const [isLoading, setIsLoading] = useState(true);
15 |   useLayoutEffect(() => {
16 |     setTimeout(() => {
17 |       setIsLoading(false);
18 |     }, 2500);
19 |   }, []);
20 |   return (
21 |     <BrowserRouter>
22 |       <div className="App">
23 |         {!isLoading && (
24 |           <React.Fragment>
25 |             {" "}
26 |             <Header />
27 |             <Container>
28 |               <Switch>
29 |                 <Route path="/portfolio" component={Portfolio} />
30 |                 <Route path="/chat/:slug/:status" component={Chat} />
31 |                 <Route path="/chat/:slug/" component={Chat} />
32 |                 <Chat />
33 |               </Switch>
34 |             </Container>
35 |             <Footer />
36 |           </React.Fragment>
37 |         )}
38 |       </div>
39 |       <Loader isLoading={isLoading} />
40 |     </BrowserRouter>
41 |   );
42 | }
43 | 
44 | export default App;
45 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   const { getByText } = render(<App />);
 7 |   const linkElement = getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/components/Chat/Answer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | 
 4 | export default function Answer({ data }) {
 5 |   return (
 6 |     <Link className="Answer" to={data.link}>
 7 |       {data.label}
 8 |     </Link>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/Chat/Chat.scss:
--------------------------------------------------------------------------------
 1 | @import "../../styles/variables.scss";
 2 | 
 3 | .Chat {
 4 |   min-height: calc(100vh - 100px);
 5 |   @include flexCenter;
 6 |   .Head {
 7 |     height: 130px;
 8 |     width: auto;
 9 |     margin-bottom: 2rem;
10 |     display: block;
11 |     border: 1px solid #ccc;
12 |     border-radius: 50%;
13 |   }
14 |   .Window {
15 |     max-width: 400px;
16 |   }
17 |   .MessageContainer {
18 |     .Message {
19 |       margin-right: 2rem;
20 |       background: $color1;
21 |       border-radius: 10px;
22 |       display: inline-block;
23 |       color: $color2;
24 |       padding: 0.5rem 1rem;
25 |       margin: 0 2rem 0.5rem 0;
26 |       .Typing {
27 |         display: flex;
28 |         justify-content: center;
29 |         svg {
30 |           height: 10px;
31 |           width: auto;
32 |         }
33 |       }
34 |     }
35 |   }
36 |   .AnswerContainer {
37 |     margin-top: 2rem;
38 |     .Answer {
39 |       @include ease;
40 |       border: 1px solid $color1;
41 |       border-radius: 10px;
42 |       color: $color1;
43 |       padding: 0.5rem 1rem;
44 |       margin: 0 2rem 0.5rem 0;
45 |       float: right;
46 |       text-decoration: none;
47 |       &:hover {
48 |         background: $color1;
49 |         color: $color2;
50 |         @include ease;
51 |       }
52 |     }
53 |   }
54 |   .Typing {
55 |     background: rgba(0, 0, 0, 0.2);
56 |     display: inline-block;
57 |     border-radius: 10px;
58 |     padding: 0.5rem 1rem;
59 |     svg {
60 |       height: 10px;
61 |       width: auto;
62 |     }
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/src/components/Chat/Message.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | export default function Message({ message }) {
4 | 	return <div className="Message">{message}</div>;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/components/Chat/Typing.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function Typing() {
 4 |   return (
 5 |     <div className="Typing">
 6 |       <svg
 7 |         version="1.1"
 8 |         id="L4"
 9 |         xmlns="http://www.w3.org/2000/svg"
10 |         x="0px"
11 |         y="0px"
12 |         viewBox="0 0 58 24"
13 |         enableBackground="new 0 0 0 0"
14 |       >
15 |         <circle fill="#fff" stroke="none" cx="6" cy="12" r="6">
16 |           <animate
17 |             attributeName="opacity"
18 |             dur="1s"
19 |             values="0;1;0"
20 |             repeatCount="indefinite"
21 |             begin="0.1"
22 |           ></animate>
23 |         </circle>
24 |         <circle fill="#fff" stroke="none" cx="26" cy="12" r="6">
25 |           <animate
26 |             attributeName="opacity"
27 |             dur="1s"
28 |             values="0;1;0"
29 |             repeatCount="indefinite"
30 |             begin="0.2"
31 |           ></animate>
32 |         </circle>
33 |         <circle fill="#fff" stroke="none" cx="46" cy="12" r="6">
34 |           <animate
35 |             attributeName="opacity"
36 |             dur="1s"
37 |             values="0;1;0"
38 |             repeatCount="indefinite"
39 |             begin="0.3"
40 |           ></animate>
41 |         </circle>
42 |       </svg>
43 |     </div>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/Chat/data.js:
--------------------------------------------------------------------------------
 1 | const data = [
 2 | 	{
 3 | 		slug: 'start',
 4 | 		messages: [
 5 | 			'Hey, nice to meet you. Welcome to my personal website.',
 6 | 			'How can I help you?',
 7 | 		],
 8 | 		answers: [
 9 | 			{ label: 'Tell me a little about yourself.', link: '/chat/bio' },
10 | 			{ label: 'Show me your projects!', link: '/chat/portfolio' },
11 | 			{ label: 'How can I contact you?', link: '/chat/contact' },
12 | 		],
13 | 	},
14 | 	{
15 | 		slug: 'bio',
16 | 		messages: [
17 | 			"My name is Magnus and I'm from Solingen, Germany and I'm 30 years old.",
18 | 			"I've been designing and developing stuff for the web since I'm 14. The first website I've done was for my CS clan ;-)",
19 | 			'I am working for a small agency shop in Solingen and my main focus is building cool frontends with React.',
20 | 		],
21 | 		answers: [
22 | 			{ label: 'What technologies are you using?', link: '/chat/tech' },
23 | 			{ label: "Show me some stuff you've done.", link: '/chat/portfolio' },
24 | 		],
25 | 	},
26 | 	{
27 | 		slug: 'tech',
28 | 		messages: [
29 | 			"I love building with React right now, but I don't shy away from vanilla CSS/HTML and Javascript if needed.",
30 | 			'I really like using serverless/jamstacky backends like Firebase, but I can spin up some basic node Backend stack if needed.',
31 | 			'My guilty pleasure is developing with/for WordPress. Especially using it as headless CMS to power React Frontends.',
32 | 		],
33 | 		answers: [
34 | 			{ label: 'Cool, show me some projects', link: '/chat/portfolio' },
35 | 		],
36 | 	},
37 | 	{
38 | 		slug: 'contact',
39 | 		messages: [
40 | 			'You can contact me on Github and LinkedIn, the links are in the right corner of this page.',
41 | 			'Or just simply hit me up at magnus@westhofen.me ...',
42 | 		],
43 | 		answers: [
44 | 			{
45 | 				label: "Okay! Let's start again.",
46 | 				link: '/chat/start/completed',
47 | 			},
48 | 		],
49 | 	},
50 | 	{
51 | 		slug: 'portfolio',
52 | 		messages: ['Wait a second, let me get my projects ...'],
53 | 	},
54 | ];
55 | 
56 | export default data;
57 | 


--------------------------------------------------------------------------------
/src/components/Chat/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import "./Chat.scss";
 3 | import { useParams, useHistory } from "react-router-dom";
 4 | import data from "./data";
 5 | import Message from "./Message";
 6 | import Answer from "./Answer";
 7 | import Typing from "./Typing";
 8 | import { Head } from "../../images";
 9 | import { motion } from "framer-motion";
10 | 
11 | export default function Chat() {
12 |   const history = useHistory();
13 |   const { slug, status } = useParams();
14 |   const currentDialog = data.find((dialog) => dialog.slug === slug) || data[0];
15 |   const [messages, setMessages] = useState([]);
16 |   const [completed, setCompleted] = useState(false);
17 | 
18 |   useEffect(() => {
19 |     setMessages([]);
20 |     setCompleted(false);
21 |     if (status !== "completed") {
22 |       currentDialog.messages &&
23 |         currentDialog.messages.forEach((message, idx) => {
24 |           setTimeout(function () {
25 |             setMessages((prevMessages) => [...prevMessages, message]);
26 |             if (idx + 1 === currentDialog.messages.length) {
27 |               setTimeout(function () {
28 |                 if (slug === "portfolio") {
29 |                   history.push("/portfolio");
30 |                 }
31 |                 setCompleted(true);
32 |               }, 1500);
33 |             }
34 |           }, idx * 1500);
35 |         });
36 |     } else {
37 |       setMessages(currentDialog.messages);
38 |       setCompleted(true);
39 |     }
40 |   }, [slug, status]);
41 | 
42 |   const containerMotion = {
43 |     show: {
44 |       transition: {
45 |         staggerChildren: 1,
46 |       },
47 |     },
48 |   };
49 | 
50 |   const itemMotion = {
51 |     hidden: { x: -100, scale: 0, opacity: 0 },
52 |     show: { x: 0, opacity: 1, scale: 1 },
53 |   };
54 | 
55 |   return (
56 |     <section className="Chat">
57 |       <motion.div
58 |         variants={containerMotion}
59 |         initial="hidden"
60 |         animate="show"
61 |         className="Window"
62 |       >
63 |         <img className="Head" src={Head} alt="Head" />
64 |         <div className="MessageContainer">
65 |           {messages &&
66 |             messages.map((message, idx) => {
67 |               return (
68 |                 <motion.div key={`message-${idx}`} variants={itemMotion}>
69 |                   <Message status={status} message={message} />
70 |                 </motion.div>
71 |               );
72 |             })}
73 |         </div>
74 |         {!completed && <Typing />}
75 |         <div className="AnswerContainer">
76 |           {completed &&
77 |             currentDialog.answers &&
78 |             currentDialog.answers.map((message, idx) => {
79 |               return (
80 |                 <motion.div key={`answer-${idx}`} variants={itemMotion}>
81 |                   <Answer data={message} />
82 |                 </motion.div>
83 |               );
84 |             })}
85 |         </div>
86 |       </motion.div>
87 |     </section>
88 |   );
89 | }
90 | 


--------------------------------------------------------------------------------
/src/components/Container/Container.scss:
--------------------------------------------------------------------------------
1 | .Container {
2 | 	padding: 0.5rem 0.5rem 4rem 0.5rem;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/components/Container/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Container.scss";
 3 | 
 4 | export default function Container({ children }) {
 5 |   return (
 6 |     <main role="main" className="Container">
 7 |       {children}
 8 |     </main>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/Footer/Footer.scss:
--------------------------------------------------------------------------------
 1 | @import '../../styles/variables.scss';
 2 | 
 3 | .Footer {
 4 | 	background: $color1;
 5 | 	padding: 2rem;
 6 | 	@include flexCenter;
 7 | 	flex-direction: column;
 8 | 	color: $color2;
 9 | 	font-size: 12px;
10 | 	svg {
11 | 		margin-bottom: 2rem;
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/Footer/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Footer.scss";
 3 | import { Logo } from "../../images";
 4 | 
 5 | export default function Footer() {
 6 |   return (
 7 |     <footer role="footer" className="Footer">
 8 |       <Logo color="#FFF" />
 9 |       <div>Made with ❤ by Magnus</div>
10 |     </footer>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/Header/Header.scss:
--------------------------------------------------------------------------------
 1 | @import "../../styles/variables.scss";
 2 | 
 3 | .Header {
 4 |   display: flex;
 5 |   justify-content: space-between;
 6 |   padding: 0.5rem 1rem 0.5rem 0.5rem;
 7 |   align-items: center;
 8 |   height: 100px;
 9 |   .Logo {
10 |     svg {
11 |       height: 80px;
12 |       width: auto;
13 |       @include ease;
14 |     }
15 |     &:hover {
16 |       @include ease;
17 |       transform: scale(1.1);
18 |     }
19 |   }
20 |   .MainMenu {
21 |     ul {
22 |       margin: 0;
23 |       li {
24 |         float: left;
25 |         margin-right: 0.5rem;
26 |         list-style: none;
27 |         a {
28 |           display: inline-block;
29 |           @include ease;
30 |           svg {
31 |             height: 2rem;
32 |             width: auto;
33 |           }
34 |           &:hover {
35 |             @include ease;
36 |             transform: scale(1.1);
37 |           }
38 |         }
39 |       }
40 |     }
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/Header/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Header.scss";
 3 | import { Link } from "react-router-dom";
 4 | import { Logo, Github, LinkedIn } from "../../images";
 5 | 
 6 | export default function Header() {
 7 |   return (
 8 |     <header role="header" className="Header">
 9 |       <Link to="/" className="Logo">
10 |         <Logo color={"#000"} />
11 |       </Link>
12 |       <nav className="MainMenu">
13 |         <ul>
14 |           <li>
15 |             <a
16 |               href="https://github.com/groev"
17 |               target="_blank"
18 |               rel="noopener noreferrer"
19 |             >
20 |               <Github />
21 |             </a>
22 |           </li>
23 |           <li>
24 |             <a
25 |               href="https://www.linkedin.com/in/magnuswesthofen/"
26 |               target="_blank"
27 |               rel="noopener noreferrer"
28 |             >
29 |               <LinkedIn />
30 |             </a>
31 |           </li>
32 |         </ul>
33 |       </nav>
34 |     </header>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/src/components/Loader/Loader.scss:
--------------------------------------------------------------------------------
 1 | @import "../../styles/variables.scss";
 2 | 
 3 | .Loader {
 4 |   text-align: center;
 5 |   background: $color1;
 6 |   position: fixed;
 7 |   @include flexCenter;
 8 |   position: fixed;
 9 |   top: 0;
10 |   left: 0;
11 |   right: 0;
12 |   bottom: 0;
13 |   svg {
14 |     max-width: 200px;
15 |     height: auto;
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/Loader/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Loader.scss";
 3 | import { motion, AnimatePresence } from "framer-motion";
 4 | 
 5 | export default function Loader({ isLoading }) {
 6 |   return (
 7 |     <AnimatePresence>
 8 |       {isLoading && (
 9 |         <motion.div
10 |           className="Loader"
11 |           initial={{ opacity: 1 }}
12 |           visible={{ opacity: 1 }}
13 |           exit={{ opacity: 0 }}
14 |           transition={{
15 |             duration: 1,
16 |             ease: "easeInOut",
17 |           }}
18 |         >
19 |           <svg
20 |             version="1.1"
21 |             xmlns="http://www.w3.org/2000/svg"
22 |             x="0px"
23 |             y="0px"
24 |             width="258.8px"
25 |             height="164.2px"
26 |             viewBox="0 0 258.8 164.2"
27 |           >
28 |             <motion.path
29 |               initial={{ fill: "#FFF" }}
30 |               animate={{ fill: "#FFF" }}
31 |               transition={{
32 |                 duration: 2,
33 |                 ease: "easeInOut",
34 |               }}
35 |               d="M248.4,28.2c-4,7.8-8,15.5-12.1,23.3c-4.1,7.7-8.1,15.5-12.3,23.2c-4.1,7.7-8.2,15.4-12.4,23.1l-12.5,23l-2.9,5.4l-2.8-5.6
36 |           c-2.5-4.9-4.9-9.7-7.3-14.6l-7.2-14.6l-7.2-14.6c-2.4-4.9-4.8-9.8-7.2-14.7l7.6,0.3L156.4,90l-7.9,13.8l-7.9,13.8l-6.1,10.5
37 |           l-2.8-11.8L122,75.9c-1.6-6.7-3.2-13.5-4.7-20.3l-4.7-20.3l9.1,1.1l-12.6,24c-4.2,8-8.5,15.9-12.7,23.9l-12.7,23.9
38 |           c-4.2,8-8.6,15.9-12.9,23.8l-5,9.2l-2.3-10.1l-4.2-18.8c-1.4-6.3-2.8-12.6-4.1-18.8c-2.7-12.6-5.5-25.1-8.1-37.7l4,0.9
39 |           C44.2,64.8,37.3,72.9,30.4,81c-7,8.1-13.9,16.2-21,24.2c6.3-8.6,12.6-17.2,19-25.8c6.3-8.6,12.8-17.1,19.2-25.6l2.7-3.6l1.2,4.5
40 |           C55,67.1,58.2,79.6,61.5,92c1.7,6.2,3.3,12.4,4.9,18.7l4.8,18.7l-7.2-0.9c4-8.1,8-16.2,12.1-24.2l12.3-24.1
41 |           c4.1-8,8.1-16.1,12.3-24.1L113,32l6-11.7l3.1,12.8l4.8,20.2c1.6,6.7,3.2,13.5,4.8,20.2l9.4,40.5l-8.9-1.3l8.1-13.7l8.1-13.7
42 |           l16.3-27.3l4.2-7l3.4,7.4c2.3,4.9,4.6,9.9,6.8,14.8l6.8,14.9l6.8,14.9c2.3,4.9,4.5,9.9,6.7,14.9l-5.7-0.2l13.5-22.5
43 |           c4.5-7.5,9.1-14.9,13.6-22.4c4.5-7.5,9.1-14.9,13.7-22.3C239,43,243.7,35.6,248.4,28.2z"
44 |             />
45 |             <motion.path
46 |               strokeIinejoin="round"
47 |               initial={{ pathLength: 1 }}
48 |               animate={{ pathLength: 0 }}
49 |               transition={{
50 |                 duration: 2,
51 |                 ease: "easeInOut",
52 |               }}
53 |               style={{
54 |                 stroke: "#000",
55 |                 fill: "transparent",
56 |                 strokeWidth: 20,
57 |                 strokeMiterlimit: 20,
58 |               }}
59 |               d="M248.4,28.2 196.4,119.2 168.4,60.2 136.4,115.2 117.4,34.2 67.4,130.2 49.4,55.2 9.4,105.2"
60 |             />
61 |           </svg>
62 |         </motion.div>
63 |       )}
64 |     </AnimatePresence>
65 |   );
66 | }
67 | 


--------------------------------------------------------------------------------
/src/components/Portfolio/Portfolio.scss:
--------------------------------------------------------------------------------
 1 | @import '../../styles/variables.scss';
 2 | 
 3 | .Portfolio {
 4 | 	max-width: 1000px;
 5 | 	margin: 0 auto;
 6 | 
 7 | 	h1 {
 8 | 		@media (max-width: 800px) {
 9 | 			font-size: 1.5rem;
10 | 		}
11 | 	}
12 | 	.backButton {
13 | 		color: $color1;
14 | 		text-decoration: none;
15 | 		font-weight: bold;
16 | 		&:hover {
17 | 			text-decoration: underline;
18 | 		}
19 | 		img {
20 | 			height: 20px;
21 | 			width: auto;
22 | 			margin-bottom: -3px;
23 | 			margin-right: 3px;
24 | 		}
25 | 	}
26 | 	.grid {
27 | 		margin-top: 4rem;
28 | 		grid-template-columns: 1fr 1fr 1fr;
29 | 		display: grid;
30 | 		grid-gap: 1rem;
31 | 		@media (max-width: $breakMobile) {
32 | 			grid-template-columns: 1fr;
33 | 		}
34 | 		.Project {
35 | 			background: #000;
36 | 			border-radius: 10px;
37 | 			height: 200px;
38 | 			color: #fff;
39 | 			position: relative;
40 | 			overflow: hidden;
41 | 			@media (max-width: $breakMobile) {
42 | 				height: 150px;
43 | 				grid-gap: 0.5rem;
44 | 			}
45 | 			.front,
46 | 			.back {
47 | 				position: absolute;
48 | 				left: 0;
49 | 				top: 0;
50 | 				width: 100%;
51 | 				height: 100%;
52 | 				font-size: 2rem;
53 | 				padding: 30px;
54 | 				@include ease;
55 | 				@include flexCenter;
56 | 				text-align: center;
57 | 				color: $color2;
58 | 				overflow: hidden;
59 | 				img {
60 | 					max-height: 80%;
61 | 					width: auto;
62 | 					height: auto;
63 | 					max-width: 50%;
64 | 				}
65 | 			}
66 | 
67 | 			.back {
68 | 				transform: translateY(100%);
69 | 				font-size: 1rem;
70 | 				a {
71 | 					margin: 5px;
72 | 					display: inline-block;
73 | 					background: $color2;
74 | 					border-radius: 5px;
75 | 					padding: 5px 10px;
76 | 					text-decoration: none;
77 | 					color: $color1;
78 | 					@include ease;
79 | 					&:hover {
80 | 						@include ease;
81 | 						background: $color1;
82 | 						color: $color2;
83 | 					}
84 | 				}
85 | 			}
86 | 			&:hover .front {
87 | 				@include ease;
88 | 				transform: translateY(-100%);
89 | 			}
90 | 			&:hover .back {
91 | 				@include ease;
92 | 				transform: translateY(0);
93 | 			}
94 | 		}
95 | 	}
96 | }
97 | 


--------------------------------------------------------------------------------
/src/components/Portfolio/data.js:
--------------------------------------------------------------------------------
 1 | import MKLogo from "../../images/showcase/muellkoenig.svg";
 2 | import p365 from "../../images/showcase/p365.svg";
 3 | import tymelog from "../../images/showcase/tymelog.svg";
 4 | import maxout from "../../images/showcase/maxout.svg";
 5 | import do386 from "../../images/showcase/do386.svg";
 6 | import QRLogo from "../../images/showcase/scan.svg";
 7 | import WQLogo from "../../images/showcase/wonderquiz.svg";
 8 | 
 9 | const Project = [
10 |   {
11 |     name: "wonderquiz",
12 |     logo: WQLogo,
13 |     beschreibung: "Creating beautiful quiz-applications.",
14 |     github: "",
15 |     demo: "https://wonderquiz.app",
16 |   },
17 |   {
18 |     name: "WP React App Importer",
19 |     beschreibung: "Easily import your CRA App into wordpress.",
20 |     github: "https://github.com/groev/wp-react-app-importer",
21 |   },
22 |   {
23 |     name: "Paladins 365",
24 |     logo: p365,
25 |     beschreibung:
26 |       "Fan app for the Solingen Paladins. Live scores, online-ticketing and more. Build with react, wordpress & firebase",
27 |     github: "",
28 |     demo:
29 |       "https://play.google.com/store/apps/details?id=com.westhofen.android.paladins&hl=de",
30 |   },
31 |   {
32 |     name: "Müllkönig",
33 |     logo: MKLogo,
34 |     beschreibung:
35 |       "Simple game for praciting responsibility. Sort your trash the right way. Build with react",
36 |     github: "https://github.com/groev/muellkoenig",
37 |     demo: "http://muellkoenig.westhofen.me",
38 |   },
39 |   {
40 |     name: "tymelog",
41 |     logo: tymelog,
42 |     beschreibung:
43 |       "Track your Wordpress hours automatically. Build with mern stack.",
44 |     demo: "https://tymelog.netlify.app/",
45 |   },
46 |   {
47 |     name: "max out",
48 |     logo: maxout,
49 |     beschreibung:
50 |       "Simple app for increasing your one rep max in the weightroom. Build with react.",
51 |     demo: "https://max-out.netlify.app/",
52 |     github: "https://github.com/groev/max-out",
53 |   },
54 |   {
55 |     name: "do386",
56 |     logo: do386,
57 |     beschreibung:
58 |       "Really simple todo app in 386 style. Build with react & firebase.",
59 |     github: "https://github.com/groev/do386",
60 |     demo: "https://do386.netlify.app",
61 |   },
62 | 
63 |   {
64 |     name: "QR code participation",
65 |     logo: QRLogo,
66 |     beschreibung:
67 |       "Solving the problem of paper filling at local businesses in the wake of Covid-19",
68 |     github: "https://github.com/groev/qr-code-participation-system",
69 |     demo: "https://scanner.westhofen.me",
70 |   },
71 |   {
72 |     name: "React Gravitiy Sort",
73 |     beschreibung: "Adaptable game idea, making use of React and framer-motion.",
74 |     github: "https://github.com/groev/react-gravity-sort",
75 |     demo: "https://sort-presidents.netlify.app",
76 |   },
77 |   {
78 |     name: "Options value calculator",
79 |     beschreibung: "Calculating the value of an option based on black-scholes.",
80 |     github: "https://github.com/groev/options-value",
81 |     demo: "https://options-value.netlify.app/",
82 |   },
83 |   {
84 |     name: "Covid-Town",
85 |     beschreibung: "Game to visualize the impact of a viral disease.",
86 |     github: "https://github.com/groev/covid-town",
87 |     demo: "https://covidtown.netlify.app/game",
88 |   },
89 | ];
90 | export default Project;
91 | 


--------------------------------------------------------------------------------
/src/components/Portfolio/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Project from "./project";
 3 | import Projects from "./data";
 4 | import { Link } from "react-router-dom";
 5 | import { motion } from "framer-motion";
 6 | import { Chat } from "../../images";
 7 | import "./Portfolio.scss";
 8 | 
 9 | export default function Portfolio() {
10 |   const item = {
11 |     hidden: { opacity: 0 },
12 |     show: { opacity: 1 },
13 |   };
14 | 
15 |   return (
16 |     <section className="Portfolio">
17 |       <h1>Here are some of my personal Projects</h1>
18 |       <Link className="backButton" to="/chat/start/completed">
19 |         <img src={Chat} alt="Chat" /> Go back to chatting.
20 |       </Link>
21 |       <motion.div className="grid" initial="hidden" animate="show">
22 |         {Projects.map((project) => {
23 |           return (
24 |             <motion.div variants={item}>
25 |               <Project data={project} />
26 |             </motion.div>
27 |           );
28 |         })}
29 |       </motion.div>
30 |     </section>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/Portfolio/project.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function Project(props) {
 4 |   return (
 5 |     <div className="Project">
 6 |       <div className="front">
 7 |         {props.data.logo ? (
 8 |           <img src={props.data.logo} alt="Logo" />
 9 |         ) : (
10 |           props.data.name
11 |         )}
12 |       </div>
13 |       <div className="back">
14 |         <div>
15 |           <p>{props.data.beschreibung}</p>
16 |           {props.data.demo && (
17 |             <a target="_blank" rel="noopener noreferrer" href={props.data.demo}>
18 |               Demo
19 |             </a>
20 |           )}
21 |           {props.data.github && (
22 |             <a
23 |               target="_blank"
24 |               rel="noopener noreferrer"
25 |               href={props.data.github}
26 |             >
27 |               Github
28 |             </a>
29 |           )}
30 |         </div>
31 |       </div>
32 |     </div>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | import Header from "./Header";
2 | import Container from "./Container";
3 | import Chat from "./Chat";
4 | import Portfolio from "./Portfolio";
5 | import Footer from "./Footer";
6 | import Loader from "./Loader";
7 | 
8 | export { Header, Container, Chat, Portfolio, Footer, Loader };
9 | 


--------------------------------------------------------------------------------
/src/images/Github.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function Github({ color }) {
 4 |   return (
 5 |     <svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none">
 6 |       <path
 7 |         fill={color}
 8 |         fillRule="evenodd"
 9 |         clipRule="evenodd"
10 |         d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
11 |         transform="scale(64)"
12 |       />
13 |     </svg>
14 |   );
15 | }
16 | 
17 | Github.defaultProps = {
18 |   color: "#000",
19 | };
20 | 


--------------------------------------------------------------------------------
/src/images/LinkedIn.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function LinkedIn({ color }) {
 4 |   return (
 5 |     <svg
 6 |       version="1.1"
 7 |       xmlns="http://www.w3.org/2000/svg"
 8 |       x="0px"
 9 |       y="0px"
10 |       width="90px"
11 |       height="90px"
12 |       viewBox="0 0 90 90"
13 |     >
14 |       <g>
15 |         <circle cx="45" cy="45" r="45" fill={color} />
16 |       </g>
17 |       <path
18 |         fill="#FFF"
19 |         id="path28_1_"
20 |         d="M30.9,65.6V31.2H19.4v34.4H30.9z M25.1,26.5
21 | 	c4,0,6.5-2.6,6.5-5.9c-0.1-3.4-2.5-5.9-6.4-5.9c-3.9,0-6.5,2.6-6.5,5.9C18.7,23.8,21.2,26.5,25.1,26.5L25.1,26.5L25.1,26.5z"
22 |       />
23 |       <path
24 |         fill="#FFF"
25 |         id="path30_1_"
26 |         d="M37.2,65.6h11.4V46.4c0-1,0.1-2.1,0.4-2.8
27 | 	c0.8-2.1,2.7-4.2,5.9-4.2c4.1,0,5.8,3.2,5.8,7.8v18.4h11.4V45.9c0-10.6-5.6-15.5-13.2-15.5c-6.2,0-8.9,3.5-10.4,5.8h0.1v-5H37.2
28 | 	C37.3,34.4,37.2,65.6,37.2,65.6L37.2,65.6z"
29 |       />
30 |     </svg>
31 |   );
32 | }
33 | 
34 | LinkedIn.defaultProps = {
35 |   color: "#000",
36 | };
37 | 


--------------------------------------------------------------------------------
/src/images/Logo.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function Logo({ color }) {
 4 |   return (
 5 |     <svg
 6 |       version="1.1"
 7 |       xmlns="http://www.w3.org/2000/svg"
 8 |       x="0px"
 9 |       y="0px"
10 |       width="258.8px"
11 |       height="164.2px"
12 |       viewBox="0 0 258.8 164.2"
13 |     >
14 |       <path
15 |         fill={color}
16 |         d="M248.4,28.2c-4,7.8-8,15.5-12.1,23.3c-4.1,7.7-8.1,15.5-12.3,23.2c-4.1,7.7-8.2,15.4-12.4,23.1l-12.5,23l-2.9,5.4l-2.8-5.6
17 |       c-2.5-4.9-4.9-9.7-7.3-14.6l-7.2-14.6l-7.2-14.6c-2.4-4.9-4.8-9.8-7.2-14.7l7.6,0.3L156.4,90l-7.9,13.8l-7.9,13.8l-6.1,10.5
18 |       l-2.8-11.8L122,75.9c-1.6-6.7-3.2-13.5-4.7-20.3l-4.7-20.3l9.1,1.1l-12.6,24c-4.2,8-8.5,15.9-12.7,23.9l-12.7,23.9
19 |       c-4.2,8-8.6,15.9-12.9,23.8l-5,9.2l-2.3-10.1l-4.2-18.8c-1.4-6.3-2.8-12.6-4.1-18.8c-2.7-12.6-5.5-25.1-8.1-37.7l4,0.9
20 |       C44.2,64.8,37.3,72.9,30.4,81c-7,8.1-13.9,16.2-21,24.2c6.3-8.6,12.6-17.2,19-25.8c6.3-8.6,12.8-17.1,19.2-25.6l2.7-3.6l1.2,4.5
21 |       C55,67.1,58.2,79.6,61.5,92c1.7,6.2,3.3,12.4,4.9,18.7l4.8,18.7l-7.2-0.9c4-8.1,8-16.2,12.1-24.2l12.3-24.1
22 |       c4.1-8,8.1-16.1,12.3-24.1L113,32l6-11.7l3.1,12.8l4.8,20.2c1.6,6.7,3.2,13.5,4.8,20.2l9.4,40.5l-8.9-1.3l8.1-13.7l8.1-13.7
23 |       l16.3-27.3l4.2-7l3.4,7.4c2.3,4.9,4.6,9.9,6.8,14.8l6.8,14.9l6.8,14.9c2.3,4.9,4.5,9.9,6.7,14.9l-5.7-0.2l13.5-22.5
24 |       c4.5-7.5,9.1-14.9,13.6-22.4c4.5-7.5,9.1-14.9,13.7-22.3C239,43,243.7,35.6,248.4,28.2z"
25 |       />
26 |     </svg>
27 |   );
28 | }
29 | 
30 | Logo.defaultProps = {
31 |   color: "#FFF",
32 | };
33 | 


--------------------------------------------------------------------------------
/src/images/chat.svg:
--------------------------------------------------------------------------------
1 | <svg id="Capa_1" enable-background="new 0 0 512.012 512.012" height="512" viewBox="0 0 512.012 512.012" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m333.201 115.038c-28.905-59.021-89.37-98.042-157.193-98.042-97.047 0-176 78.505-176 175 0 26.224 5.63 51.359 16.742 74.794l-16.451 82.265c-2.094 10.472 7.144 19.728 17.618 17.656l83.279-16.465c11.213 5.319 22.813 9.364 34.732 12.151-26.717-126.541 69.199-245.321 197.273-247.359z"/><path d="m495.266 394.79c2.874-6.061 5.373-12.237 7.511-18.514h-.549c37.448-109.917-41.305-225.441-157.567-231.066-.002-.006-.003-.012-.005-.018-100.036-4.61-183.148 75.486-183.148 174.804 0 96.414 78.361 174.857 174.743 174.997 26.143-.035 51.201-5.663 74.568-16.747 91.207 18.032 84.094 16.75 86.189 16.75 9.479 0 16.56-8.686 14.709-17.941z"/></g></svg>


--------------------------------------------------------------------------------
/src/images/head.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/groev/westhofen20/74a526f5d0e0c0befb8c8ddccf84a10e71d1a823/src/images/head.jpeg


--------------------------------------------------------------------------------
/src/images/head.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/groev/westhofen20/74a526f5d0e0c0befb8c8ddccf84a10e71d1a823/src/images/head.jpg


--------------------------------------------------------------------------------
/src/images/head.svg:
--------------------------------------------------------------------------------
 1 | <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In  -->
 2 | <svg version="1.1"
 3 | 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
 4 | 	 x="0px" y="0px" width="403.9px" height="403.9px" viewBox="0 0 403.9 403.9"
 5 | 	 style="overflow:scroll;enable-background:new 0 0 403.9 403.9;" xml:space="preserve">
 6 | <style type="text/css">
 7 | 	.st0{clip-path:url(#SVGID_2_);}
 8 | 	.st1{fill:none;}
 9 | 	.st2{clip-path:url(#SVGID_4_);}
10 | </style>
11 | <defs>
12 | </defs>
13 | <g>
14 | 	<defs>
15 | 		<circle id="SVGID_1_" cx="201.9" cy="201.9" r="201.9"/>
16 | 	</defs>
17 | 	<clipPath id="SVGID_2_">
18 | 		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
19 | 	</clipPath>
20 | 	<g class="st0">
21 | 		<path d="M179.8,135.9c0,0-1.5-2.8,5.1-5.9c6.6-3.1,22.8-7.8,30.8-5.4c8,2.4,7.7,3.1,8.2,5.2s-22.2-0.7-27.4,1.5
22 | 			c-5.2,2.2-11,2.9-12.7,3.9C182,136.2,180.7,136.4,179.8,135.9z"/>
23 | 		<path d="M250.3,134.9c0,0,7.2-6.1,13.9-5.9c6.7,0.2,13.7-0.7,17.5,1.6c3.8,2.3,2.2-3.9-0.8-5.4c-3-1.5-13.2-5.5-20.7-1.5
24 | 			c-7.5,4-11.7,8.2-10.1,9.3s1.8,0.3,1.8,0.3"/>
25 | 		<g>
26 | 			<path class="st1" d="M208.1,212.4c-1.8,10.5,9.4,23.4,14.3,27.6c0.5,0.4,0.8,0.8,1.2,1c7.4,3.5,12.2,0.5,16.1-1.3
27 | 				c3.9-1.8,2.6-7.8,2.6-7.8s-4.4-3.5-4.4-7.4s17.4-2.2,18.3,0.5c0.8,2.6-2.7,6.1-4.4,6.5s-0.4,7.4,4.4,9.6c4.8,2.2,7.4-0.9,11.7-7
28 | 				c4.4-6.1,4.4-17.4,5.2-25.2c0.2-2-0.2-3.7-1-5.1c-20.1,7.9-61.4,11.2-61.4,11.2S209.5,213.9,208.1,212.4z"/>
29 | 			<path d="M292,193.4c-0.6,0.3-7.3,4-10.8,5c-1.8,2-5,3.8-9.1,5.4c0.8,1.4,1.2,3.1,1,5.1c-0.8,7.8-0.8,19.1-5.2,25.2
30 | 				c-4.4,6.1-7,9.1-11.7,7c-4.8-2.2-6.1-9.1-4.4-9.6s5.2-3.9,4.4-6.5c-0.8-2.6-18.3-4.4-18.3-0.5s4.4,7.4,4.4,7.4s1.3,6.1-2.6,7.8
31 | 				c-3.9,1.8-8.7,4.8-16.1,1.3c-0.4-0.2-0.8-0.6-1.2-1c-4.9-4.2-16.1-17.1-14.3-27.6c-0.5-0.5-1.1-1.1-1.6-1.6
32 | 				c-1.6,0.3-7.9-4.3-12.9-5.9c-5.9-2-15.2-9.1-19.1-10.2c-3.9-1.1-14.8-31.3-15.5-34.1c-0.7-2.8-8.6-3.5-8.3-0.5
33 | 				c0.5,3.9,0.7,5.2,3.3,11.3c2.6,6.1,2,18.3,2.6,31.9s6.1,23,11.3,30.8c5.2,7.8,11.3,8.5,11.3,8.5s43.2,20.4,48.9,22.8
34 | 				s18.3,2.2,18.3,2.2c22.8-0.7,21.7-6.5,24.3-10.4c2.6-3.9,5.4-15.2,7-23.3c1.5-8,8.3-23.7,10.2-26.3
35 | 				C289.8,205.2,292.9,193,292,193.4z"/>
36 | 			<path d="M208.2,219.7c0.1-0.5,0.2-0.9,0.3-1.4c3.5-11.7,5.2-13.5,8.3-13.5c3.1,0,28.2-2.2,38.7-0.8c7.8,1,14.3,2.9,16.8,7.1
37 | 				c4.1-1.6,7.3-3.4,9.1-5.4c-1.3,0.4-2.2,0.4-2-0.4c0.7-2.8-6.3-8.9-8.9-10.4c-2.6-1.5-13.2-1.5-14.5-0.7
38 | 				c-1.3,0.8-11.5-0.2-16.5-0.5c-5-0.2-27.2,4.8-30.4,6.5c-3.3,1.8-2.4,14.3-2,17.1c0.1,0.4-0.1,0.6-0.4,0.7
39 | 				C207.1,218.6,207.7,219.2,208.2,219.7z"/>
40 | 		</g>
41 | 		<path d="M265.7,136.3c-4.3-1.8-6.9,0.1-7.8,2.3c-0.8,2.2,2.2,4,2.2,4c2.7,0.4,6.7,0.8,6.9-0.1C267.2,141.4,270.1,138,265.7,136.3z
42 | 			 M260.4,139.2c-0.5,0-0.8-0.5-0.8-1.2c0-0.7,0.4-1.2,0.8-1.2s0.8,0.5,0.8,1.2C261.3,138.7,260.9,139.2,260.4,139.2z"/>
43 | 		<path d="M230.3,178.6c0,0,11.1-2.5,13.9,2.3c0,0-2-0.8-5.2-1.2C235.7,179.4,236.6,180.4,230.3,178.6z"/>
44 | 		<path d="M254.4,180.1c0,0,3.5-3.6,3.9-2.6c0.5,1-3.5,5.2-4.4,4.2"/>
45 | 		<path d="M244.6,142.6c5.1,10.6,10.2,21.1,15.2,31.8"/>
46 | 		<path d="M245.7,141.7c0,0,13.6,32.6,14.1,33.4C260.2,176,258.1,163.4,245.7,141.7z"/>
47 | 		<g>
48 | 			<path d="M212.5,138.4c-6.1-3-10,0.7-10.6,2.1c-0.5,1.4,1.6,5.7,1.6,5.7c3.9,1,4.6,0,8.3-0.7C215.5,145,212.5,138.4,212.5,138.4z
49 | 				 M204.5,142.6c-0.5,0-1-0.7-1-1.7c0-1,0.5-1.7,1-1.7c0.5,0,1,0.7,1,1.7C205.5,141.8,205.1,142.6,204.5,142.6z"/>
50 | 			<path d="M203.7,147.2c-3.9,0-8.6-0.2-14.1-0.9l-1.3-0.2l1-0.8c0.8-0.5,18.7-13.3,26-7.2c6,5,5.7,5.8,5.5,6.3
51 | 				c-0.1,0.3-0.4,0.4-0.6,0.5C219.6,145.3,214.7,147.2,203.7,147.2z M191.1,145.5c19.8,2.2,28.1-1.1,28.9-1.5
52 | 				c-0.2-0.4-1.1-1.7-5.1-5.1C209,134.2,195.1,142.8,191.1,145.5z M220.2,143.9L220.2,143.9C220.2,143.9,220.2,143.9,220.2,143.9z"
53 | 				/>
54 | 		</g>
55 | 		<path d="M258,143.5c-2.7,0-5.6-0.1-8.4-0.4l-0.4,0v-1.5l0.2-0.1c0.3-0.3,7.8-7.4,15.9-6.5c3.9,0.4,7.2,2.6,9.9,6.6l0.4,0.6
56 | 			l-0.8,0.1C274.6,142.2,267,143.5,258,143.5z M250.2,142.1c10.1,1,20.7-0.3,23.6-0.8c-2.4-3.3-5.3-5.2-8.7-5.5
57 | 			c-7-0.8-13.8,5.1-14.9,6.1V142.1z"/>
58 | 		<path d="M133.3,149.7c0,0-5.4-6.7-7.6-4.8c-2.2,2-4.8,14.5,0,21.5s-2.2-11.3,0.5-15.2C128.8,147.4,130.5,149.5,133.3,149.7z"/>
59 | 		<path d="M138.8,159.7c0,0-10,2.2-3.7,12.2c6.3,10-5.9,1.8-5.2-3.8s4.8-12.3,7.4-11.7C139.9,156.9,138.8,159.7,138.8,159.7z"/>
60 | 		<g>
61 | 			<path d="M263.3,213.8c-3.2,0.9-6.4,1.4-9.6,1.8c-1.6,0.2-3.2,0.3-4.8,0.3c-0.8,0-1.6,0-2.5,0c-0.8,0-1.6,0-2.3,0
62 | 				c-1.5,0-2.9,0.1-4.6,0.2c-0.9,0-1.7,0-2.5,0c-0.8,0-1.6,0-2.4-0.1c-1.6-0.1-3.2-0.1-4.8-0.3c-1.6-0.1-3.2-0.4-4.8-0.5
63 | 				c1.5-0.7,3.1-1,4.7-1.5c1.6-0.4,3.2-0.6,4.8-0.9c0.8-0.1,1.6-0.2,2.4-0.3c0.8-0.1,1.6-0.2,2.3-0.3c0.7-0.1,1.5-0.2,2.4-0.3
64 | 				c0.9-0.1,1.7-0.1,2.6-0.1c0.8,0,1.7,0.1,2.5,0.1l2.3,0.1c1.6,0.1,3.2,0.2,4.8,0.3C256.8,212.8,260,213.1,263.3,213.8z"/>
65 | 		</g>
66 | 		<path d="M291,152.2c-2.4-6.1-3.2-10.7-2.5-14.3c0.7-3.5-2-9.1-3.6-12.5c-0.2-0.5-0.4-0.9-0.6-1.2c-0.8-1.8-0.3-5.3-0.1-6.5l0-0.2
67 | 			l0-0.2c-1.6-19.6-2.4-23-2.8-24.6c-0.1-0.6-0.2-0.9-0.2-1.6c-0.2-3.3-11.6-32.4-34.1-43.1c-22.3-10.6-25.3-11.4-47.1-11.2
68 | 			c-22,0.1-47.1,18.9-48.2,19.7c-0.9,0.7-21.5,17.8-23.8,35.1c-2,14.9-0.4,40.1,0,46.6c-1.3,0.3-3.1,1.1-4.8,3.4
69 | 			c-3.1,4.1-2.2,17.1-1.6,19.6c0.4,1.6,1.3,3.5,2.3,5.5c0.9,1.8,1.8,3.6,2.2,5.1c0.4,1.4,0.5,1.9,0.6,2.6c0.1,1,0.3,2,1.2,5.3
70 | 			c1.4,5.1,8.9,9.5,13.9,12.3c1.2,0.7,2.2,1.3,2.7,1.6c1.2,0.9,2.7,6.4,3.8,10.4c1,3.6,2,7.3,3.1,10.2c2.7,6.7,4.7,18.6,4.7,18.7
71 | 			l0.1,0.5l0.4,0.4c0.1,0.1,0.1,0.1,0.2,0.2c0.3-0.8,0.9-1.8,2.1-2.7c-0.6-3.2-2.3-12.3-4.7-18.2c-1.1-2.7-2.1-6.3-3-9.8
72 | 			c-1.8-6.6-2.9-10.7-4.9-12.1c-0.6-0.5-1.7-1-2.9-1.8c-4-2.3-11.4-6.6-12.5-10.6c-0.9-3.1-1-4.1-1.2-5c-0.1-0.7-0.2-1.4-0.7-3
73 | 			c-0.5-1.8-1.5-3.7-2.4-5.6c-0.9-1.8-1.8-3.6-2.1-4.9c-0.7-3-1.1-14.4,1-17.1c2-2.5,3.7-2.4,3.8-2.4l1.9,0.3l-0.2-1.9
74 | 			c0-0.3-2.4-30.9-0.1-47.4c2.2-16.1,22.5-33,22.7-33.1c0.3-0.2,25.4-18.9,46.4-19.1c21.4-0.1,23.9,0.5,45.8,10.9
75 | 			c21,10,32.2,37.6,32.4,40.6c0.1,1,0.2,1.5,0.3,2.1c0.4,1.6,1.1,4.8,2.7,24c-0.2,1.1-0.9,5.3,0.3,8.1c0.2,0.4,0.4,0.8,0.6,1.3
76 | 			c1.2,2.6,3.8,8.1,3.3,10.7c-0.8,4.1,0.1,9.4,2.7,16c2.6,6.5,5.1,20.1,3.4,27.5c-0.9,4-0.7,7-0.4,9.7c0.2,2.6,0.4,4.6-0.6,6.6
77 | 			c-0.3,0.7-0.8,1.7-1.5,3c-4,8.2-12.3,25.2-13.2,32c-1.4,12.2-5.6,27.5-12.9,30c-9.4,3.3-23.6,5.4-32.7,2.3
78 | 			c-9.2-3.2-44.3-20.4-53.3-25.1c-1.3-0.7-2.4-1.2-3.5-1.6l0.8,3.6c0.4,0.2,0.9,0.4,1.3,0.6c9,4.8,44.3,22.1,53.7,25.3
79 | 			c3.4,1.2,7.5,1.7,11.8,1.7c7.9,0,16.5-1.7,22.9-4c10.9-3.8,14.1-25.9,14.9-32.5c0.8-6.3,9.2-23.6,12.9-31.1c0.6-1.3,1.1-2.4,1.5-3
80 | 			c1.3-2.8,1.1-5.4,0.8-8.1c-0.2-2.5-0.4-5.3,0.4-8.8C296.4,173.3,293.7,159,291,152.2z"/>
81 | 		<path d="M390.5,278.2c-4.9-2.3-9.3-4.2-12.3-5.5c-12.4-5.2-24.8-16.3-37.8-20.9c-13-4.6-56.7-22.2-63.2-24.8
82 | 			c-6.5-2.6,2,61.9-9,79.9c-0.8,1.3-1.5,2.4-2.1,3.3c-8.9,14.8-17.4,33.5-24.6,44.1c-4.8,9.5-9,17.6-11.1,20.6
83 | 			c-6.3,9.1-14.5,7.2-28.4,0s-27.8-33.9-47.4-80.2s3.1-62.1,3.1-62.1c-0.2-11.2-19.4,19.7-34.6,32.1c-15.2,12.4-66.3,61.9-84.6,76.9
84 | 			c-10.1,8.3-15.7,36.2-17.7,62.1h369.7V278.2z"/>
85 | 	</g>
86 | </g>
87 | </svg>
88 | 


--------------------------------------------------------------------------------
/src/images/index.js:
--------------------------------------------------------------------------------
1 | import Logo from "./Logo";
2 | import Github from "./Github";
3 | import LinkedIn from "./LinkedIn";
4 | import Head from "./head.jpg";
5 | import Chat from "./chat.svg";
6 | 
7 | export { Logo, Github, LinkedIn, Head, Chat };
8 | 


--------------------------------------------------------------------------------
/src/images/showcase/cpr-how_99715-114.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/groev/westhofen20/74a526f5d0e0c0befb8c8ddccf84a10e71d1a823/src/images/showcase/cpr-how_99715-114.jpg


--------------------------------------------------------------------------------
/src/images/showcase/do386.svg:
--------------------------------------------------------------------------------
  1 | <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In  -->
  2 | <svg version="1.1"
  3 | 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
  4 | 	 x="0px" y="0px" width="250px" height="278px" viewBox="0 0 250 278" style="overflow:scroll;enable-background:new 0 0 250 278;"
  5 | 	 xml:space="preserve">
  6 | <style type="text/css">
  7 | 	.st0{fill:#FBFBFB;}
  8 | </style>
  9 | <defs>
 10 | </defs>
 11 | <g>
 12 | 	<path class="st0" d="M0,129c3.7,0,7.3-0.2,11,0c6.9,0.4,13.7,0.2,20.8,2.2c7.3,2.1,16-0.6,24.1-1c15.2-0.7,30.4-1.3,46.1-1.9
 13 | 		c-3.8,9.7-13.7,16.6-22.6,16.6c-26.5,0-52.9,0-79.4,0C0,139.7,0,134.3,0,129z"/>
 14 | 	<path class="st0" d="M0,16c29.4,0,58.9-0.1,88.3,0.1c2.9,0,6.4,1.7,8.7,3.6c3.2,2.7,5.7,6.3,9.4,10.7c-3.1,0.3-4.7,0.7-6.4,0.7
 15 | 		c-10.6,0-21.3,0.4-31.9-0.1c-6.1-0.3-12-2.4-18.1-3.1c-5.4-0.6-10.9-0.6-16.4-0.7c-1.1,0-2.8,0.2-3.2,0.9c-2.5,3.8-6.3,3-9.9,3
 16 | 		C13.6,31.1,6.8,31,0,31C0,26,0,21,0,16z"/>
 17 | 	<path class="st0" d="M0,3c16.8,0,33.7-0.6,50.4,0.2c9.4,0.4,18.6,2.9,27.9,4.8c2.6,0.5,5,2.2,7.5,3.4c-0.1,0.5-0.2,1-0.3,1.5
 18 | 		C57,13,28.5,13,0,13C0,9.7,0,6.3,0,3z"/>
 19 | 	<path class="st0" d="M196,0c4.5,1,9.1,2,13.5,3.1c6.1,1.6,11.5,4.5,16.4,8.3c-0.1,0.4-0.3,0.8-0.4,1.1c-23.7,0-47.4,0-71.1,0
 20 | 		c4.8-5.5,11-7.9,17.5-9.8c3.7-1.1,7.4-1.9,11.1-2.8C187.3,0,191.7,0,196,0z"/>
 21 | 	<path class="st0" d="M0,148c26.1,0,52.1,0,78.2,0c0.1,0.4,0.2,0.8,0.3,1.2c-2.4,0.9-4.7,2.2-7.1,2.6c-9.3,1.6-18.6,3.6-28,4
 22 | 		C29,156.5,14.5,156,0,156C0,153.3,0,150.7,0,148z"/>
 23 | 	<path class="st0" d="M0,260c8.1,0.7,16.2,1.8,24.4,1.8c5,0,10.1-2,15.2-2.5c8.2-0.8,16.4-1.2,24.6-1.7c-0.3,7-5,11.4-11.1,11.4
 24 | 		c-17.7,0.1-35.3,0-53,0C0,266,0,263,0,260z"/>
 25 | 	<path class="st0" d="M250,69c-8.1,0-16.3-0.2-24.4,0.1c-4.4,0.1-7-0.9-7-5.9c0-3.1-0.7-6.2-1.2-10.2c5.8,0,10.8,0,15.9,0
 26 | 		c1.3,0,2.7,0,4,0c9.9,0,9.9,0,12.7,9C250,64.3,250,66.7,250,69z"/>
 27 | 	<path class="st0" d="M250,95c-0.3,0.8-0.7,1.5-0.8,2.3c-1.5,11.4-1.3,9.5-11.2,9.7c-6.6,0.1-13.2,0-20.5,0
 28 | 		c0.7-5.1,0.9-9.5,1.9-13.5c0.3-1.2,3-2.3,4.7-2.4c8.6-0.2,17.3-0.1,25.9-0.1C250,92.3,250,93.7,250,95z"/>
 29 | 	<path class="st0" d="M250,88c-8.6,0-17.3,0-25.9,0.1c-3.6,0-5.5-1-4.4-5c0.3-1.3,0.3-2.6,0.2-4c-0.5-7.1-0.5-7.1,6.8-7.1
 30 | 		c7.8,0,15.6,0,23.4,0C250,77.3,250,82.7,250,88z"/>
 31 | 	<path class="st0" d="M0,34c8,0,15.9,0.1,23.9,0c3.9-0.1,5.2,1.5,5.3,5.3c0.2,10.7,0.3,10.7-10.2,10.7C12.6,50,6.3,50,0,50
 32 | 		C0,44.7,0,39.3,0,34z"/>
 33 | 	<path class="st0" d="M0,53c8,0,15.9,0.1,23.9,0c3.9-0.1,5.2,1.5,5.3,5.3C29.3,69,29.4,69,18.9,69C12.6,69,6.3,69,0,69
 34 | 		C0,63.7,0,58.3,0,53z"/>
 35 | 	<path class="st0" d="M0,110c8,0,15.9,0.1,23.9-0.1c3.9-0.1,5.2,1.5,5.2,5.3C29.3,126,29.4,126,18.9,126c-6.3,0-12.6,0-18.9,0
 36 | 		C0,120.7,0,115.3,0,110z"/>
 37 | 	<path class="st0" d="M0,91c8,0,15.9,0.1,23.9,0c3.9-0.1,5.2,1.5,5.2,5.3C29.3,107,29.4,107,18.9,107c-6.3,0-12.6,0-18.9,0
 38 | 		C0,101.7,0,96.3,0,91z"/>
 39 | 	<path class="st0" d="M0,72c8,0,15.9,0.1,23.9,0c3.9-0.1,5.2,1.5,5.2,5.3C29.3,88,29.4,88,18.9,88C12.6,88,6.3,88,0,88
 40 | 		C0,82.7,0,77.3,0,72z"/>
 41 | 	<path class="st0" d="M0,271c17.4,0,34.8,0,52.2,0c-5.9,5.1-13.4,4.9-20.2,7c-10.7,0-21.3,0-32,0C0,275.7,0,273.3,0,271z"/>
 42 | 	<path class="st0" d="M109,278c-4.9-1.8-9.7-3.6-14.6-5.4c0.1-0.4,0.2-0.9,0.3-1.3c16.1,0,32.2,0,48.3,0c0.2,0.4,0.3,0.7,0.5,1.1
 43 | 		c-4.8,1.8-9.7,3.7-14.5,5.5C122.3,278,115.7,278,109,278z"/>
 44 | 	<path class="st0" d="M198,278c-4-1.8-7.9-3.5-11.9-5.3c0.1-0.4,0.2-0.8,0.3-1.3c14.2,0,28.5,0,42.7,0c0.2,0.3,0.3,0.6,0.5,0.9
 45 | 		c-4.5,1.9-9.1,3.8-13.6,5.6C210,278,204,278,198,278z"/>
 46 | 	<path class="st0" d="M238.3,129.3c-2.6,10-9.5,15.8-18.4,15.8c-21.5,0-42.9,0-64.4,0c-9.6,0-15.8-5.1-18.6-15.7
 47 | 		c1.9-0.1,3.6-0.4,5.3-0.4c6.5,0,13-0.4,19.5,0.1c5.9,0.4,11.8,1.2,17.5,2.6c7.4,1.8,14.5,1.8,21.5-1.3c0.9-0.4,1.8-1.1,2.8-1.1
 48 | 		C214.9,129.2,226.4,129.3,238.3,129.3z"/>
 49 | 	<path class="st0" d="M240.5,30.7c-2.3,0.2-4,0.4-5.8,0.4c-7.2,0-14.3,0.4-21.5-0.1c-5-0.3-10-1.5-15-2.7c-7.3-1.8-14.4-2-21.5,0.8
 50 | 		c-2.9,1.1-6,1.9-9.1,2c-9.8,0.2-19.5,0.1-29.4,0.1c1.8-9.2,8.8-15.1,17.3-15.1c22.1,0,44.3,0,66.4,0
 51 | 		C232.1,16,236.7,19.5,240.5,30.7z"/>
 52 | 	<path class="st0" d="M241.4,231.2c-8.3,0-16.3,0.9-24-0.3c-6-1-11.6-1.2-17.7-0.4c-8.4,1.1-16.9,1.1-25.3,1.3
 53 | 		c-4,0.1-3.4-3.3-3.5-5.9c-0.1-2.8,0.6-5,4.1-4.9c5.8,0,11.7,0,17.5,0c12.2,0,24.3,0,36.5,0C236.7,221,238.8,222.6,241.4,231.2z"/>
 54 | 	<path class="st0" d="M85.7,258.3c7.7,0.3,15.3-2.1,22.7,1.9c7.7,4.1,15.5,4.1,23.3-0.2c6.8-3.7,14.2-1.4,21.3-1.6
 55 | 		c-0.2,6.7-3.9,10.6-9.7,10.6c-15.8,0.1-31.6,0-47.4,0C89.1,269,86.5,266.5,85.7,258.3z"/>
 56 | 	<path class="st0" d="M240.6,258.1c-2.5,8.4-5.7,10.9-12.8,10.9c-13.3,0-26.6,0-39.9,0c-7.6,0-9.9-1.8-12.3-10.8
 57 | 		c8,0.2,15.9-2,23.4,1.5c6,2.8,11.8,3.1,17.7,0.2C224.3,256.2,232.2,258.7,240.6,258.1z"/>
 58 | 	<path class="st0" d="M221.9,148.5c-16.2,14.2-53,14.2-69.8,0C175.5,148.5,198.4,148.5,221.9,148.5z"/>
 59 | 	<path class="st0" d="M71.3,34.4c3.3-0.1,5.9-0.3,8.4-0.4c7.3,0,14.7,0.2,22-0.1c4.6-0.2,7.3,1.5,8.6,5.8c0.1,0.5,0.4,0.9,0.5,1.4
 60 | 		c3.2,8.4,2.8,8.9-6.1,8.9c-6.3,0-12.7-0.1-19,0c-3.2,0.1-5.2-1-6.8-3.9C77,42.4,74.4,39,71.3,34.4z"/>
 61 | 	<path class="st0" d="M68.7,125.6c3.6-4.7,7-9.3,10.5-13.8c0.6-0.7,1.6-1.5,2.4-1.5c9.7-0.1,19.4-0.1,30.6-0.1
 62 | 		c-2.6,5.4-4.5,9.9-6.9,14.1c-0.5,1-2.6,1.5-3.9,1.6c-10.5,0.1-20.9,0.1-31.4,0C69.6,126,69,125.6,68.7,125.6z"/>
 63 | 	<path class="st0" d="M168.1,125.9c-10.8,0-20.9,0.2-31-0.2c-1.6-0.1-3.7-2.6-4.4-4.4c-4.3-11-4-11.3,7.6-11.3
 64 | 		c5.5,0,11-0.1,16.5,0.1c1.6,0.1,3.8,0.9,4.6,2.1C163.7,116.3,165.6,120.7,168.1,125.9z"/>
 65 | 	<path class="st0" d="M209.3,34.2c10.9,0,20.8-0.1,30.7,0.1c1.2,0,3,1.2,3.5,2.3c1.6,3.9,2.8,8,4.4,12.9c-2.8,0.2-4.7,0.4-6.6,0.5
 66 | 		c-6.8,0-13.6,0.2-20.4-0.1c-1.7-0.1-4.2-0.9-5-2.2C213.4,43.8,211.7,39.5,209.3,34.2z"/>
 67 | 	<path class="st0" d="M87.7,193.9c1.8-8.4,3.5-9.9,10.3-9.9c15.3,0,30.6,0.1,45.9-0.1c4.7-0.1,7.1,2,8.3,6.2c0.7,2.6-0.1,4-2.8,3.9
 68 | 		c-6.8-0.4-13.5,1.1-20.2-3.2c-5.6-3.6-13.4-3.6-19.1,0.2C102.8,195.8,95.6,193.3,87.7,193.9z"/>
 69 | 	<path class="st0" d="M82.5,53.2c10.2,0,19.5-0.1,28.7,0.1c1.2,0,3,1.7,3.3,3c0.8,3.2,1.1,6.6,1.1,9.9c0,1-2.1,2.7-3.2,2.7
 70 | 		c-8.2,0.2-16.3,0.2-24.5,0c-1.3,0-3.3-1.4-3.6-2.5C83.5,62.4,83.1,58.2,82.5,53.2z"/>
 71 | 	<path class="st0" d="M129.5,49.9c2.1-5.4,3.5-9.4,5.3-13.3c0.5-1,1.9-2.2,3-2.2c9.7-0.2,19.4-0.1,30.1-0.1
 72 | 		c-2.6,5.4-4.8,9.9-7.1,14.4c-0.3,0.6-1.4,1.2-2.1,1.2C149.5,49.9,140.3,49.9,129.5,49.9z"/>
 73 | 	<path class="st0" d="M209.1,125.1c2.3-4.6,4.6-9.2,7-13.6c0.4-0.8,2-1.4,3-1.4c8.8-0.1,17.6-0.1,26.9-0.1c0,5.7-1.9,10.2-4.5,14.3
 74 | 		c-0.6,0.9-2.3,1.5-3.5,1.5c-9.2,0.1-18.3,0-27.5,0C210.1,125.9,209.7,125.4,209.1,125.1z"/>
 75 | 	<path class="st0" d="M81.4,106.9c1-5,1.5-9,2.8-12.7c0.5-1.4,2.8-3,4.3-3.1c7.5-0.3,15-0.1,22.5-0.2c3,0,4.3,1.6,4,4.4
 76 | 		c-0.4,3-0.8,6-1.7,8.8c-0.4,1.1-2,2.6-3.1,2.6C100.8,107,91.5,106.9,81.4,106.9z"/>
 77 | 	<path class="st0" d="M144.1,107c-3.8,0-7.7,0-11.5,0c-2.8,0-4.1-1.3-4.6-4.1C125.9,91,125.8,91,138,91c5.2,0,10.3,0.1,15.5,0
 78 | 		c2.8,0,4.4,0.9,4.6,4c0.2,2.6,0.6,5.3,1.2,7.9c0.7,3.3-0.8,4.2-3.7,4.2C151.8,107,147.9,107,144.1,107
 79 | 		C144.1,107,144.1,107,144.1,107z"/>
 80 | 	<path class="st0" d="M150.1,209.1c-3,7.8-5.8,9.9-12.8,9.9c-12.7,0-25.3,0-38,0c-6.3,0-9-2.4-10.7-10c8.7,0.9,17.4-2.6,25.6,2.8
 81 | 		c7.2,4.7,7.3,4.5,14-0.5c1.2-0.9,2.5-2,3.9-2C137.9,209,143.7,209.1,150.1,209.1z"/>
 82 | 	<path class="st0" d="M100,88c-2.7,0-5.3,0-8,0C85,88,85,88,85,80.7c0-1.2,0.1-2.3,0-3.5c-0.3-3.9,1.5-5.3,5.3-5.2
 83 | 		c6.8,0.2,13.6,0.1,20.4,0c3.7-0.1,5.4,1.2,5.5,5.1C116.4,88,116.5,88,105.5,88C103.7,88,101.9,88,100,88z"/>
 84 | 	<path class="st0" d="M142.3,69c-3.5,0-7,0.1-10.5,0c-1.3,0-3.6-0.6-3.6-0.9c0-3.9-0.1-7.8,0.7-11.6c0.3-1.4,2.6-3.2,4-3.3
 85 | 		c7.7-0.3,15.3-0.2,23-0.1c2.5,0,3.7,1.2,3.3,3.8c-0.4,2.8-0.9,5.6-1.1,8.4c-0.2,2.7-1.7,3.8-4.2,3.8C150,69,146.1,69,142.3,69
 86 | 		C142.3,69,142.3,69,142.3,69z"/>
 87 | 	<path class="st0" d="M142.2,72.1c3.8,0,7.6,0,11.5,0c2.7,0,4,1.1,3.6,4c-0.2,1.5-0.2,3-0.1,4.5c0.5,7.5,0.6,7.5-7.1,7.5
 88 | 		c-6.1,0-12.3-0.1-18.4,0c-3.1,0-4.4-1.2-4.6-4.4c-0.8-11.6-0.8-11.7,10.8-11.7C139.3,72,140.8,72,142.2,72.1
 89 | 		C142.2,72,142.2,72,142.2,72.1z"/>
 90 | 	<path class="st0" d="M63.3,231.4c-2.8,0.3-4.4,0.5-6,0.5c-12.8,0-25.6-0.1-38.4,0.1c-4.1,0-6.1-1-6.1-5.6c0-4.6,2.1-5.6,6.1-5.5
 91 | 		c7,0.2,14,0.5,20.9-0.1c8-0.7,13.8,3.7,20.1,7C60.9,228.3,61.5,229.4,63.3,231.4z"/>
 92 | 	<path class="st0" d="M146.5,231.5c-16.8,0-33.5,0-51.7,0c2.8-2.4,4.5-4,6.6-5.7c-1.1-1.4-2-2.6-3.3-4.4c1.7-0.2,3.1-0.4,4.5-0.4
 93 | 		c10.1,0,20.3,0,30.4,0c2.5,0,4.4,0.1,6.2,2.8c1.8,2.7,5.2,4.4,7.9,6.5C146.8,230.7,146.7,231.1,146.5,231.5z"/>
 94 | 	<path class="st0" d="M30.7,184c7.6,0,15.3-0.1,22.9,0.1c1.9,0.1,4.4,0.9,5.6,2.3c1.3,1.6,1.5,4.1,2.2,6.3c-1.8,0.5-3.7,1.3-5.5,1.3
 95 | 		c-7.4,0.1-14.6,0.1-21.9-2.8c-8.1-3.2-16.7-0.5-25,1.3c-1.7,0.4-4.9,0.6-5.3-0.1c-0.8-1.8-1-4.4-0.2-6.2c0.6-1.2,3.1-2.1,4.8-2.2
 96 | 		C15.8,183.8,23.3,184,30.7,184z"/>
 97 | 	<path class="st0" d="M180.2,194.1c4-6.6,7.9-10.3,14.7-10.2c11.8,0.2,23.6,0.1,35.4,0.1c3,0,5.8-0.1,5.7,4.2
 98 | 		c-0.1,4-2.9,3.7-5.6,3.9c-14.6,0.7-29.1,1.4-43.7,2C184.9,194.1,183.2,194.1,180.2,194.1z"/>
 99 | 	<path class="st0" d="M191.7,209.1c0.9,7.8,0.8,7.6,8.3,5.8c10.4-2.5,20.6-2.1,31.7,3.5c-2.4,0.4-3.4,0.6-4.4,0.6
100 | 		c-17,0-34,0.1-50.9-0.1c-1.5,0-4.1-1.5-4.2-2.4c-0.2-2.8-0.5-6.8,3.4-7.2C180.9,208.7,186.4,209.1,191.7,209.1z"/>
101 | 	<path class="st0" d="M53.4,182c-8.9,0-17.9,0-26.8,0c-6.6,0-13.3,0.1-19.9-0.1c-1.1,0-2.2-1.1-3.2-1.6c0.9-1,1.6-2.6,2.7-3
102 | 		c14-4.1,28-5.4,42,0c2,0.8,3.9,2.1,5.8,3.2C53.8,181,53.6,181.5,53.4,182z"/>
103 | 	<path class="st0" d="M145,181.6c-16.4,0-32.4,0-48.4,0C101.9,171.7,136.8,171.1,145,181.6z"/>
104 | 	<path class="st0" d="M14.4,217c3.4,0,6.8,0,10.2,0c6-0.1,11.5-1.5,16-5.9c1.2-1.1,3.2-1.9,4.9-2c4.8-0.3,9.6-0.1,14.3-0.1
105 | 		c0,5-2.8,9.6-6.6,9.7c-12.9,0.3-25.8,0.1-38.8,0.1C14.4,218.2,14.4,217.6,14.4,217z"/>
106 | 	<path class="st0" d="M154.1,243.2c-11.8,2.9-20.9,0.5-32.7-9.3c4,0,6.8,0,9.6,0c4.6,0,9.3,0,13.9,0
107 | 		C151.3,234,153.3,236,154.1,243.2z"/>
108 | 	<path class="st0" d="M200.4,196c-2.5,3.7-4.2,6.3-6,8.9c-0.5,0.8-1.5,1.7-2.3,1.8c-5.7,0.1-11.4,0.1-17.2,0.1
109 | 		c0.5-8.6,2.7-10.7,10.2-10.7C190,196,194.7,196,200.4,196z"/>
110 | 	<path class="st0" d="M43.1,196.2c5.8,0,11.6-0.3,17.3,0.3c1,0.1,2.2,3.4,2.6,5.4c0.4,2.4-0.4,4.9-3.5,5c-4.3,0.2-8.7,0.3-13-0.1
111 | 		c-1.2-0.1-2.8-2-3.2-3.4C42.6,201.4,43.1,199.1,43.1,196.2z"/>
112 | 	<path class="st0" d="M40.8,234.1c8.1,0,15.4-0.3,22.6,0.1c3.8,0.2,4.3,4,4.2,6.9c-0.1,1.1-2.8,2.3-4.5,2.9c-1.5,0.5-3.3,0-4.9,0.1
113 | 		c-5.4,0.3-10.7,0.5-13-6.1C44.6,236.7,42.8,235.8,40.8,234.1z"/>
114 | 	<path class="st0" d="M113.7,233.9c-6.4,11.9-16.4,11-26.6,9.6c0.7-7.1,3.2-9.5,9.6-9.6C102.2,233.9,107.8,233.9,113.7,233.9z"/>
115 | 	<path class="st0" d="M106.2,206.9c-5.7,0-11,0.2-16.2-0.1c-3.9-0.2-3.7-3.6-3.9-6.4c-0.1-2.8,1.3-4.3,4.2-4.4c1.7,0,3.3-0.1,5-0.1
116 | 		C106.7,196.1,103.9,195.3,106.2,206.9z"/>
117 | 	<path class="st0" d="M195.6,180.2c6.2-1.4,12.3-3.3,18.6-4c6.1-0.7,12.3-0.3,18.4,0c1.1,0,2.1,1.9,3.2,2.9c-0.9,1-1.9,2.7-2.8,2.8
118 | 		c-12.4,0.2-24.8,0.1-37.1,0.1C195.7,181.3,195.7,180.8,195.6,180.2z"/>
119 | 	<path class="st0" d="M46.1,256C48.2,246,48.2,246,56.9,246c2,0,4,0,6,0c3-0.1,5.3,0.4,5.2,4.3c-0.1,3.4-1.1,5.9-5.1,5.8
120 | 		C57.5,256,52,256,46.1,256z"/>
121 | 	<path class="st0" d="M194.3,255.9c-6.3,0-12.2,0.3-18.1-0.1c-4-0.3-3.8-4.2-3.8-7c0-1,2.6-2.3,4.2-2.7c2.2-0.5,4.6-0.1,6.9-0.1
122 | 		C192.2,246,192.3,246,194.3,255.9z"/>
123 | 	<path class="st0" d="M222.1,234.2c6.3,0,12.6-0.4,18.7,0.3c1.2,0.1,2.5,4.1,2.8,6.4c0.1,0.8-2.4,2.6-4,3c-2.2,0.5-4.6,0.2-6.9,0.2
124 | 		C224.2,244,224.2,244,222.1,234.2z"/>
125 | 	<path class="st0" d="M133.4,207c0.7-3.5,1.2-5.8,1.6-8c0.6-3.3,3.2-3.2,5.4-2.9c4.1,0.7,9.4-2.6,12.3,2.3c2.5,4.3-0.7,8.5-5.8,8.6
126 | 		C142.6,207.1,138.4,207,133.4,207z"/>
127 | 	<path class="st0" d="M222.2,255.6c3.2-10.3,0.3-9.5,11.9-9.6c1.5,0,3-0.1,4.5,0c2.4,0.1,5.6-0.6,5.2,3.3c-0.3,3-0.4,6.6-5,6.7
128 | 		c-4.6,0-9.3,0-13.9,0C224.1,256,223.3,255.8,222.2,255.6z"/>
129 | 	<path class="st0" d="M181.1,244c-1.5,0-3-0.1-4.5,0c-3.5,0.2-5.6-0.8-5.7-4.9c-0.1-4.4,2.1-5.4,5.9-5.2c3.5,0.2,7,0,10.5,0.1
130 | 		c4.8,0.1,3.5,3.8,3.9,6.6c0.4,3.2-1.6,3.5-4,3.4C185,244,183,244,181.1,244z"/>
131 | 	<path class="st0" d="M94.2,256.1c-1.7,0-3.3-0.1-5,0c-3.5,0.2-5.3-1-5.2-4.8c0.1-3.4,1.3-5.4,5-5.3c3.5,0.1,7,0.1,10.5,0
132 | 		c3.1-0.1,4.1,1.1,4.2,4.4c0.2,4.5-1.1,6.2-5.5,5.7C96.9,255.9,95.5,256.1,94.2,256.1z"/>
133 | 	<path class="st0" d="M136.1,256c0-3.6,0-6.3,0-9.9c5.4,0,10.7-0.2,15.9,0.1c3.3,0.2,2.9,3,3,5.3c0,2.4-0.5,4.4-3.4,4.5
134 | 		C146.7,256,141.7,256,136.1,256z"/>
135 | </g>
136 | </svg>
137 | 


--------------------------------------------------------------------------------
/src/images/showcase/do386_logo_q.68383ae1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/groev/westhofen20/74a526f5d0e0c0befb8c8ddccf84a10e71d1a823/src/images/showcase/do386_logo_q.68383ae1.png


--------------------------------------------------------------------------------
/src/images/showcase/first-aid-emergency-flat-icons-set_1284-9666 (1).jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/groev/westhofen20/74a526f5d0e0c0befb8c8ddccf84a10e71d1a823/src/images/showcase/first-aid-emergency-flat-icons-set_1284-9666 (1).jpg


--------------------------------------------------------------------------------
/src/images/showcase/first-aid-emergency-flat-icons-set_1284-9666.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/groev/westhofen20/74a526f5d0e0c0befb8c8ddccf84a10e71d1a823/src/images/showcase/first-aid-emergency-flat-icons-set_1284-9666.jpg


--------------------------------------------------------------------------------
/src/images/showcase/first-aid-techniques-guide-infographic-poster_1284-9667.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/groev/westhofen20/74a526f5d0e0c0befb8c8ddccf84a10e71d1a823/src/images/showcase/first-aid-techniques-guide-infographic-poster_1284-9667.jpg


--------------------------------------------------------------------------------
/src/images/showcase/maxout.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 51.4 35" style="enable-background:new 0 0 51.4 35;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#FFFFFF;}
 7 | </style>
 8 | <g>
 9 | 	<path class="st0" d="M11.1,16.9h-3V7.8l-2.6,5.5L3,7.8v9.1H0V0.8h3l2.6,5.5l2.6-5.5h3V16.9z"/>
10 | 	<path class="st0" d="M20.2,16.9l-0.7-3.6h-3.1l-0.7,3.6h-3l3.2-16.1H20l3.2,16.1H20.2z M18.8,10.3l-1-4.8l-1,4.8H18.8z"/>
11 | 	<path class="st0" d="M34.9,16.9h-3.2l-1.9-4.5l-1.9,4.5h-3.2l3.5-8.3l-3.3-7.8H28l1.7,4l1.7-4h3.2l-3.4,7.8L34.9,16.9z"/>
12 | 	<path class="st0" d="M9.4,33.2l-1.9,1.7H1.9L0,33.2V20.5l1.9-1.7h5.5l1.9,1.7V33.2z M6.4,31.9V21.7H3v10.2H6.4z"/>
13 | 	<path class="st0" d="M20.1,33.2l-1.9,1.7h-5.4l-1.9-1.7V18.8h3v13.1h3.3V18.8h3V33.2z"/>
14 | 	<path class="st0" d="M30.4,21.7h-3v13.1h-3V21.7h-3v-3h8.9V21.7z"/>
15 | </g>
16 | <polygon class="st0" points="30.4,35 41.4,6 35.4,7 36.4,4 45.4,0 51.4,7 50.4,9 45.4,6 33.4,35 "/>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/src/images/showcase/muellkoenig.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 452.6 658" style="enable-background:new 0 0 452.6 658;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#FFFFFF;}
 7 | 	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:7;stroke-linejoin:bevel;stroke-miterlimit:10;}
 8 | 	.st2{fill:#FFFFFF;stroke:#FFFFFF;stroke-miterlimit:10;}
 9 | </style>
10 | <path class="st0" d="M420.4,44.3L405.6,64c-19.2,25.7-49.6,34.3-55.5,35.8l-5.4,1.3l1.7,5.3c1.3,4,2,8.3,2,12.6
11 | 	c0,4.9-0.9,9.6-2.4,13.9c-0.1-0.1-0.2-0.1-0.3-0.2c-17.4-11-37.7-19.6-59.8-25.2c1.6-3.3,3.5-6.4,5.7-9.3c-1.1-0.6-2.3-1.2-3.4-1.9
12 | 	c1.5-2.2,3.3-4.2,5.3-6l6.1-5.5l-7.6-3.1C254.4,66.5,224.9,9.6,224.6,9L220,0l-4.6,9c-0.3,0.6-29.8,57.5-67.4,72.7l-7.6,3.1l6.1,5.5
13 | 	c4.8,4.4,8.4,10.1,10.4,16.5c-23.2,5.6-44.5,14.3-62.6,25.9c-0.1,0.1-0.2,0.1-0.3,0.2c-1.3-3.4-2-7.1-2.3-10.9
14 | 	c0.2-1.2,0.4-2.4,0.6-3.6c-0.2-0.1-0.5-0.1-0.7-0.2c0.1-4,0.8-7.9,2-11.8l1.7-5.3l-5.4-1.3c-6-1.5-36.4-10.2-55.6-35.8L19.5,44.3
15 | 	l38.8,164.1v40.7c12-1.1,24.2-2,36.5-2.8v3.5c2.7-0.9,5.7-1.8,8.9-2.7v-1.4c2.3-0.1,4.5-0.3,6.8-0.4v0.3c0.5-0.1,1.1-0.2,1.6-0.4
16 | 	c27.8-1.5,56.2-2.3,85.1-2.3c61.3,0,120.5,3.5,175.9,10c3.9,1.6,6.9,3.2,9.3,4.7V218c-0.2-0.2-0.5-0.4-0.8-0.7v-8.9l0.5-2.2
17 | 	c0.7,0.4,1.4,0.8,2,1.2l26.3-112.7c-0.8,0.7-1.6,1.4-2.4,2L420.4,44.3z M74.6,192.7C74.6,192.7,74.6,192.7,74.6,192.7
18 | 	C74.6,192.7,74.6,192.7,74.6,192.7L74.6,192.7z"/>
19 | <g>
20 | 	<g>
21 | 		<g>
22 | 			<path class="st1" d="M99.2,357.4h1.6l23.4-60.8l22.1,0.6l0.6,68.8l3,41.3h-21.6l0.8-41.6l-1.8-42.1l-19.2,53l-19.7,1l-17.9-53.9
23 | 				l-1.4,42.1l1.1,41.6H50.4l2.2-38.9l1-68.6l25.4-4L99.2,357.4z"/>
24 | 			<path class="st1" d="M206.1,409.1c-9.6,0-17.7-2.9-24.2-8.8c-6.6-5.9-9.8-13.1-9.8-21.8l-1.6-78.4l23-4l-2.6,70.1
25 | 				c0,7.5,1.7,13.3,5.2,17.4c3.5,4.2,8.8,6.2,16.1,6.2s12.5-2,15.7-6.1s4.8-11,4.8-21l-1.9-62.7l22.4-4l-1.8,70.4
26 | 				c0,12.6-4.2,22.8-12.6,30.7C230.3,405.2,219.4,409.1,206.1,409.1z M188.1,272.8c0-3,1.1-5.7,3.4-8c2.2-2.3,4.9-3.5,7.8-3.5
27 | 				c3,0,5.3,0.8,6.9,2.5c1.6,1.7,2.4,4.1,2.4,7.4s-1.1,6.1-3.4,8.4c-2.2,2.3-4.8,3.5-7.8,3.5c-2.9,0-5.2-1-6.9-2.9
28 | 				C189,278.2,188.1,275.8,188.1,272.8z M214.1,272.8c0-3,1.1-5.7,3.4-8c2.2-2.3,4.9-3.5,8-3.5c6.1,0,9.1,3.1,9.1,9.3
29 | 				c0,3.6-1.1,6.6-3.3,9c-2.2,2.3-4.7,3.5-7.7,3.5c-2.9,0-5.3-1-7-2.9C214.9,278.2,214.1,275.8,214.1,272.8z"/>
30 | 			<path class="st1" d="M276.5,407.3l1.9-38.9l-1.9-68.3l22.7-4l-2.2,69.6l1.1,25.9l32.8-2.6l-1.8,18.2h-52.6V407.3z"/>
31 | 			<path class="st1" d="M344.6,407.3l1.9-38.9l-1.9-68.3l22.7-4l-2.2,69.6l1.1,25.9L399,389l-1.8,18.2h-52.6V407.3z"/>
32 | 			<path class="st1" d="M26.2,436.1l-1.8,52.2l40.8-51.8l16.3,10.9l-36.8,42.7l39,46.2l-20.5,12.8l-39-55.2L24,505.7l1.9,41.6H3.5
33 | 				l1.9-38.9l-1.9-68.3L26.2,436.1z"/>
34 | 			<path class="st1" d="M140.8,435.3c12.6,0,23,4.8,31.1,14.4s12.2,21.8,12.2,36.6c0,18.8-4.9,33.9-14.6,45.4
35 | 				c-9.7,11.5-22.5,17.3-38.2,17.3c-12.3,0-22.6-4.9-30.9-14.8c-8.3-9.9-12.5-22.1-12.5-36.6c0-18.1,5-33.1,14.9-44.8
36 | 				C112.8,441.2,125.4,435.3,140.8,435.3z M162.4,495.3c0-27-8.9-40.5-26.6-40.5c-8.1,0-14.5,3-19.1,9s-7,15-7,27s2.5,21.9,7.4,29.6
37 | 				c5,7.7,11.5,11.6,19.7,11.6s14.5-3.3,18.9-9.8C160.2,515.7,162.4,506.8,162.4,495.3z M112.6,412.8c0-3,1.1-5.7,3.4-8
38 | 				c2.2-2.3,4.9-3.5,7.8-3.5c3,0,5.3,0.8,6.9,2.5c1.6,1.7,2.4,4.1,2.4,7.4s-1.1,6.1-3.4,8.4c-2.2,2.3-4.8,3.5-7.8,3.5
39 | 				c-2.9,0-5.2-1-6.9-2.9C113.4,418.2,112.6,415.8,112.6,412.8z M138.5,412.8c0-3,1.1-5.7,3.4-8c2.2-2.3,4.9-3.5,7.8-3.5
40 | 				c6.2,0,9.3,3.1,9.3,9.3c0,3.6-1.1,6.6-3.3,9c-2.2,2.3-4.7,3.5-7.7,3.5c-2.9,0-5.3-1-7-2.9C139.4,418.2,138.5,415.8,138.5,412.8z"
41 | 				/>
42 | 			<path class="st1" d="M286.4,436.6l-2.1,69.1l1.8,38.1l-18.9,4l-47.7-77.1v35l2.2,41.6h-20l1.9-38.9l-1.9-71l19.2-1l47.5,78.2
43 | 				l-1.6-75.7L286.4,436.6z"/>
44 | 			<path class="st1" d="M334.7,436.1l-2.2,69.6l1.9,41.6H312l1.9-38.9l-1.9-68.3L334.7,436.1z"/>
45 | 			<path class="st1" d="M398.9,549.1c-14,0-25.2-4.7-33.8-14.1c-8.5-9.4-12.8-21.8-12.8-37.3c0-17.6,5.3-32.4,16-44.5
46 | 				s23.8-18.1,39.4-18.1c6.2,0,11.9,0.6,17.2,1.7c5.3,1.1,9,2.3,11.3,3.4l3.2,1.8l-9.3,22.2c-3.2-2.1-7.5-4.1-13-6
47 | 				c-5.4-1.9-10.2-2.8-14.4-2.8c-8.6,0-15.6,3-20.8,9.1c-5.2,6.1-7.8,14.1-7.8,24.2c0,13.5,2.5,24.1,7.4,31.7
48 | 				c5,7.6,11.9,11.4,20.7,11.4c5.8,0,11.2-0.8,16.3-2.4v-24.8h-20.6l1.6-16.2h38.4l-1.4,26.1l1.1,27.7
49 | 				C421.9,546.8,409,549.1,398.9,549.1z"/>
50 | 		</g>
51 | 	</g>
52 | </g>
53 | <g>
54 | 	<g>
55 | 		<path class="st2" d="M297.7,644.5H142.3c-6.6,0-12-5.4-12-12v-10c0-6.6,5.4-12,12-12h155.4c6.6,0,12,5.4,12,12v10
56 | 			C309.7,639.1,304.3,644.5,297.7,644.5z"/>
57 | 		<path class="st1" d="M297.7,644.5H142.3c-6.6,0-12-5.4-12-12v-10c0-6.6,5.4-12,12-12h155.4c6.6,0,12,5.4,12,12v10
58 | 			C309.7,639.1,304.3,644.5,297.7,644.5z"/>
59 | 	</g>
60 | </g>
61 | </svg>
62 | 


--------------------------------------------------------------------------------
/src/images/showcase/p365.svg:
--------------------------------------------------------------------------------
 1 | <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In  -->
 2 | <svg version="1.1"
 3 | 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
 4 | 	 x="0px" y="0px" width="387.2px" height="52.6px" viewBox="0 0 387.2 52.6"
 5 | 	 style="overflow:scroll;enable-background:new 0 0 387.2 52.6;" xml:space="preserve">
 6 | <style type="text/css">
 7 | 	.st0{fill:#FFFFFF;}
 8 | </style>
 9 | <defs>
10 | </defs>
11 | <g>
12 | 	<path class="st0" d="M4,31.1v20.8H0V0.7h14.9c4.5,0,8.1,1.4,10.7,4.1c2.6,2.7,3.9,6.5,3.9,11.2c0,4.9-1.3,8.6-3.8,11.2
13 | 		c-2.5,2.6-6.1,3.9-10.9,3.9H4z M4,27.3h10.9c3.4,0,6-1,7.8-2.9c1.8-2,2.8-4.7,2.8-8.3s-0.9-6.4-2.8-8.5c-1.9-2.1-4.4-3.1-7.8-3.1H4
14 | 		V27.3z"/>
15 | 	<path class="st0" d="M57.2,37.6H38l-4.4,14.3h-4.2L45.8,0.7h3.7l16.3,51.2h-4.2L57.2,37.6z M39.2,33.8h16.9L47.6,6.4L39.2,33.8z"/>
16 | 	<path class="st0" d="M77.5,48.2h21.1v3.7H73.4V0.7h4V48.2z"/>
17 | 	<path class="st0" d="M130.8,37.6h-19.2l-4.4,14.3H103l16.3-51.2h3.7l16.3,51.2h-4.2L130.8,37.6z M112.7,33.8h16.9l-8.4-27.5
18 | 		L112.7,33.8z"/>
19 | 	<path class="st0" d="M147,51.9V0.7H159c5.6,0,9.9,1.8,13.2,5.3s4.9,8.4,5,14.7v10.7c0,6.4-1.6,11.4-4.9,15
20 | 		c-3.3,3.6-7.9,5.4-13.8,5.4H147z M151,4.5v43.7h7.8c4.6,0,8.1-1.4,10.6-4.2c2.5-2.8,3.8-6.9,3.9-12.1V21.1c0-5.3-1.2-9.3-3.7-12.2
21 | 		c-2.4-2.9-6-4.4-10.6-4.4H151z"/>
22 | 	<path class="st0" d="M192.8,51.9h-4V0.7h4V51.9z"/>
23 | 	<path class="st0" d="M237.8,51.9h-4L209.6,8.3v43.6h-4V0.7h4l24.2,43.7V0.7h4V51.9z"/>
24 | 	<path class="st0" d="M274,39.3c0-2.9-0.8-5.1-2.4-6.8c-1.6-1.6-4.7-3.2-9.1-4.7c-4.5-1.5-7.7-3.2-9.8-5c-2.7-2.4-4.1-5.6-4.1-9.6
25 | 		c0-3.9,1.3-7.1,4-9.6C255.3,1.2,258.7,0,263,0c4.4,0,7.9,1.4,10.7,4.3c2.8,2.9,4.1,6.5,4.1,11h-4c0-3.4-1-6.2-2.9-8.3
26 | 		c-1.9-2.1-4.6-3.2-7.9-3.2c-3.2,0-5.8,0.9-7.6,2.6c-1.9,1.7-2.8,4-2.8,6.8c0,2.6,0.9,4.7,2.6,6.3c1.8,1.6,4.6,3.1,8.4,4.4
27 | 		c3.8,1.3,6.8,2.6,8.7,4s3.4,3,4.4,4.8c0.9,1.9,1.4,4,1.4,6.5c0,4-1.4,7.2-4.1,9.7c-2.7,2.4-6.3,3.7-10.7,3.7c-3,0-5.7-0.6-8.2-1.8
28 | 		c-2.5-1.2-4.4-3-5.8-5.3c-1.4-2.3-2.1-5-2.1-8.2h4c0,3.6,1.1,6.4,3.3,8.5c2.2,2.1,5.1,3.1,8.8,3.1c3.2,0,5.8-0.9,7.8-2.6
29 | 		C273,44.5,274,42.2,274,39.3z"/>
30 | 	<path class="st0" d="M293.3,21.8h4.8c1.8,0,3.2-0.6,4-1.9c0.9-1.3,1.3-3,1.3-5.1c0-2-0.4-3.6-1.3-4.8c-0.9-1.1-2.1-1.7-3.5-1.7
31 | 		c-1.4,0-2.5,0.5-3.4,1.6c-0.9,1.1-1.3,2.4-1.3,4.1H284c0-2.7,0.6-5.1,1.8-7.2c1.2-2.1,3-3.8,5.2-5s4.7-1.8,7.4-1.8
32 | 		c4.7,0,8.4,1.3,11.1,3.9s4,6.2,4,10.7c0,2.3-0.6,4.5-1.8,6.5c-1.2,2-2.8,3.5-4.8,4.6c2.4,1,4.2,2.6,5.4,4.6
33 | 		c1.2,2.1,1.8,4.5,1.8,7.3c0,4.5-1.4,8.2-4.3,10.9s-6.7,4.1-11.4,4.1c-4.4,0-7.9-1.4-10.7-4.1s-4.1-6.3-4.1-10.7h9.9
34 | 		c0,1.8,0.5,3.4,1.4,4.6c1,1.2,2.2,1.9,3.7,1.9c1.7,0,3.1-0.6,4.1-1.9s1.5-3,1.5-5.1c0-5-2-7.6-5.9-7.6h-4.9V21.8z"/>
35 | 	<path class="st0" d="M344.6,0.2v8.4h-0.6c-3.7,0-6.7,1.1-8.9,3.4s-3.5,5.3-4,9.3c2.1-2.4,4.8-3.7,8-3.7c3.7,0,6.7,1.6,8.9,4.7
36 | 		s3.3,7.4,3.3,12.7c0,3.4-0.6,6.4-1.9,9.1c-1.3,2.7-3,4.8-5.3,6.3c-2.3,1.5-4.9,2.2-7.8,2.2c-4.6,0-8.4-1.9-11.2-5.6
37 | 		s-4.2-8.7-4.2-15v-3.7c0-5.6,0.9-10.6,2.7-14.8c1.8-4.2,4.3-7.5,7.7-9.8s7.2-3.4,11.7-3.5H344.6z M336.1,25.8
38 | 		c-1.3,0-2.3,0.4-3.2,1.2c-0.9,0.8-1.5,1.8-1.9,3v3.6c0,3.6,0.5,6.3,1.4,8.1c1,1.8,2.2,2.7,3.8,2.7c1.6,0,2.9-0.9,3.8-2.6
39 | 		s1.4-3.9,1.4-6.6c0-2.7-0.5-5-1.5-6.7S337.7,25.8,336.1,25.8z"/>
40 | 	<path class="st0" d="M358.3,26.7l2.5-26h24.8v8.5H369l-0.9,11c1.9-1.3,3.9-1.9,5.9-1.9c4.2,0,7.5,1.5,9.8,4.5
41 | 		c2.3,3,3.4,7.2,3.4,12.7c0,5.1-1.4,9.3-4.1,12.4c-2.7,3.1-6.4,4.7-10.9,4.7c-2.7,0-5.2-0.6-7.5-1.9s-4.1-3.1-5.4-5.3
42 | 		c-1.3-2.3-2-4.9-2-7.7h9.8c0.2,2.1,0.7,3.8,1.6,5c0.9,1.2,2,1.8,3.4,1.8c1.6,0,2.9-0.8,3.8-2.4s1.3-3.9,1.3-7.1
43 | 		c0-3-0.5-5.2-1.6-6.7c-1.1-1.5-2.6-2.3-4.5-2.3c-1.9,0-3.3,0.6-4.4,1.9l-0.6,0.9L358.3,26.7z"/>
44 | </g>
45 | </svg>
46 | 


--------------------------------------------------------------------------------
/src/images/showcase/palabg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/groev/westhofen20/74a526f5d0e0c0befb8c8ddccf84a10e71d1a823/src/images/showcase/palabg.jpg


--------------------------------------------------------------------------------
/src/images/showcase/scan.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 17.333 16">
2 |   <g id="Icon_ionic-md-qr-scanner" data-name="Icon ionic-md-qr-scanner" transform="translate(-3.375 -4.5)">
3 |     <path id="Pfad_3" data-name="Pfad 3" d="M5.375,7.008A.5.5,0,0,1,5.883,6.5H8.708v-2H5.925a2.531,2.531,0,0,0-2.55,2.508V9.833h2Z" fill="#fff"/>
4 |     <path id="Pfad_4" data-name="Pfad 4" d="M26.442,4.5H23.625v2h2.8a.519.519,0,0,1,.533.508V9.833h2V7.008A2.5,2.5,0,0,0,26.442,4.5Z" transform="translate(-8.25)" fill="#fff"/>
5 |     <path id="Pfad_5" data-name="Pfad 5" d="M26.958,25.283a.5.5,0,0,1-.508.508H23.625v2.042H26.45a2.531,2.531,0,0,0,2.508-2.55V22.5h-2Z" transform="translate(-8.25 -7.333)" fill="#fff"/>
6 |     <path id="Pfad_6" data-name="Pfad 6" d="M5.883,25.792a.5.5,0,0,1-.508-.508V22.5h-2v2.783a2.566,2.566,0,0,0,2.55,2.55H8.708V25.792Z" transform="translate(0 -7.333)" fill="#fff"/>
7 |   </g>
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/src/images/showcase/tymelog.svg:
--------------------------------------------------------------------------------
 1 | <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In  -->
 2 | <svg version="1.1"
 3 | 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
 4 | 	 x="0px" y="0px" width="349.1px" height="89.5px" viewBox="0 0 349.1 89.5"
 5 | 	 style="overflow:scroll;enable-background:new 0 0 349.1 89.5;" xml:space="preserve">
 6 | <style type="text/css">
 7 | 	.st0{fill:#FFFFFF;}
 8 | </style>
 9 | <defs>
10 | </defs>
11 | <g>
12 | 	<path class="st0" d="M84.9,28.6l10.7-1.7v11.2h12.9V47H95.6v13.3c0,2.3,0.4,4.1,1.2,5.4c0.8,1.3,2.4,2,4.8,2c1.2,0,2.3-0.1,3.6-0.3
13 | 		c1.2-0.2,2.3-0.5,3.3-0.9l1.5,8.4c-1.3,0.5-2.7,1-4.3,1.4s-3.5,0.6-5.8,0.6c-2.9,0-5.4-0.4-7.3-1.2c-1.9-0.8-3.5-1.9-4.6-3.3
14 | 		c-1.2-1.4-2-3.1-2.4-5.1c-0.5-2-0.7-4.2-0.7-6.7V28.6z"/>
15 | 	<path class="st0" d="M149.1,38.1c-2.2,7.3-4.4,14.1-6.8,20.5c-2.4,6.4-4.9,12.6-7.7,18.6c-1,2.2-2,4-3,5.5c-1,1.5-2.1,2.8-3.3,3.7
16 | 		c-1.2,1-2.6,1.7-4.1,2.2c-1.5,0.5-3.3,0.7-5.3,0.7c-1.7,0-3.2-0.2-4.7-0.5s-2.6-0.7-3.5-1l1.9-8.6c1.1,0.4,2.1,0.6,3,0.8
17 | 		c0.9,0.1,1.8,0.2,2.7,0.2c1.9,0,3.4-0.5,4.4-1.5c1-1,1.9-2.5,2.6-4.3c-2.5-4.8-4.9-10.2-7.3-16.2s-4.8-12.7-6.9-20.1h11.4
18 | 		c0.5,1.9,1,3.9,1.7,6.1c0.7,2.2,1.3,4.4,2.1,6.6c0.7,2.2,1.5,4.4,2.2,6.5c0.7,2.1,1.5,4,2.1,5.8c0.6-1.7,1.3-3.6,2-5.8
19 | 		c0.7-2.1,1.3-4.3,2-6.5s1.3-4.4,1.9-6.6c0.6-2.2,1.1-4.2,1.6-6.1H149.1z"/>
20 | 	<path class="st0" d="M173.8,55.9c0-3.5-0.4-5.9-1.3-7.3c-0.9-1.4-2.4-2.2-4.6-2.2c-0.7,0-1.4,0-2.1,0.1c-0.7,0.1-1.4,0.2-2.1,0.3
21 | 		v29.2H153V39.4c0.9-0.2,2-0.5,3.2-0.8c1.2-0.3,2.5-0.5,3.9-0.7c1.4-0.2,2.8-0.4,4.2-0.5c1.4-0.1,2.9-0.2,4.2-0.2c2.7,0,5,0.3,6.7,1
22 | 		c1.7,0.7,3.1,1.5,4.2,2.5c1.5-1.1,3.3-2,5.3-2.6c2-0.6,3.8-0.9,5.5-0.9c3,0,5.5,0.4,7.5,1.3c1.9,0.8,3.5,2,4.6,3.6
23 | 		c1.2,1.5,1.9,3.4,2.4,5.5c0.4,2.1,0.6,4.5,0.6,7.1v21.4h-10.7V55.9c0-3.5-0.4-5.9-1.3-7.3c-0.9-1.4-2.4-2.2-4.6-2.2
24 | 		c-0.6,0-1.4,0.1-2.4,0.4s-1.9,0.6-2.6,1.1c0.3,1.1,0.6,2.3,0.6,3.5c0.1,1.2,0.1,2.5,0.1,3.9v20.7h-10.7V55.9z"/>
25 | 	<path class="st0" d="M211.5,57.3c0-3.4,0.5-6.3,1.5-8.8c1-2.5,2.4-4.6,4.1-6.3c1.7-1.7,3.6-3,5.8-3.8c2.2-0.9,4.4-1.3,6.7-1.3
26 | 		c5.4,0,9.6,1.6,12.7,4.9c3.1,3.3,4.7,8.1,4.7,14.5c0,0.6,0,1.3-0.1,2.1c0,0.7-0.1,1.4-0.1,2h-24.3c0.2,2.2,1.3,4,3.1,5.3
27 | 		c1.8,1.3,4.3,1.9,7.3,1.9c2,0,3.9-0.2,5.8-0.5c1.9-0.4,3.4-0.8,4.6-1.3l1.4,8.7c-0.6,0.3-1.3,0.6-2.3,0.9c-1,0.3-2,0.5-3.2,0.8
28 | 		c-1.2,0.2-2.4,0.4-3.8,0.5s-2.7,0.2-4,0.2c-3.4,0-6.4-0.5-8.9-1.5s-4.6-2.4-6.3-4.1c-1.7-1.8-2.9-3.8-3.7-6.2
29 | 		C211.9,62.7,211.5,60.1,211.5,57.3z M236.7,53.2c0-0.9-0.2-1.8-0.5-2.7c-0.3-0.9-0.7-1.6-1.2-2.3c-0.6-0.7-1.3-1.2-2.1-1.7
30 | 		c-0.8-0.4-1.9-0.6-3.1-0.6c-1.2,0-2.2,0.2-3.1,0.6c-0.9,0.4-1.6,0.9-2.2,1.6c-0.6,0.7-1,1.5-1.3,2.3c-0.3,0.9-0.5,1.8-0.7,2.7
31 | 		H236.7z"/>
32 | 	<path class="st0" d="M268.6,76.7c-3.1,0-5.7-0.4-7.6-1c-1.9-0.6-3.5-1.5-4.6-2.6c-1.1-1.1-1.9-2.5-2.3-4.1
33 | 		c-0.4-1.6-0.6-3.4-0.6-5.4V21.8l10.7-1.7v41.3c0,1,0.1,1.8,0.2,2.6c0.1,0.8,0.4,1.4,0.8,1.9c0.4,0.5,1,1,1.8,1.3
34 | 		c0.8,0.3,1.8,0.6,3.1,0.6L268.6,76.7z"/>
35 | 	<path class="st0" d="M309.9,56.9c0,3-0.4,5.7-1.3,8.2c-0.9,2.5-2.1,4.6-3.7,6.3c-1.6,1.8-3.6,3.1-5.9,4.1c-2.3,1-4.8,1.4-7.7,1.4
36 | 		c-2.8,0-5.3-0.5-7.6-1.4c-2.3-1-4.2-2.3-5.9-4.1c-1.6-1.8-2.9-3.9-3.8-6.3c-0.9-2.5-1.4-5.2-1.4-8.2c0-3,0.5-5.7,1.4-8.1
37 | 		c0.9-2.4,2.2-4.5,3.9-6.3s3.6-3.1,5.9-4c2.3-1,4.8-1.4,7.5-1.4c2.7,0,5.2,0.5,7.5,1.4c2.3,1,4.2,2.3,5.9,4c1.6,1.7,2.9,3.8,3.8,6.3
38 | 		C309.4,51.3,309.9,54,309.9,56.9z M299,56.9c0-3.3-0.7-5.9-2-7.8c-1.3-1.9-3.2-2.8-5.7-2.8s-4.3,0.9-5.7,2.8c-1.3,1.9-2,4.5-2,7.8
39 | 		s0.7,5.9,2,7.9s3.2,2.9,5.7,2.9s4.3-1,5.7-2.9S299,60.3,299,56.9z"/>
40 | 	<path class="st0" d="M349.1,71.2c0,6.2-1.6,10.8-4.7,13.8c-3.1,3-8,4.5-14.6,4.5c-2.3,0-4.6-0.2-6.9-0.6c-2.3-0.4-4.4-0.9-6.4-1.6
41 | 		l1.9-9c1.7,0.7,3.4,1.2,5.3,1.6c1.8,0.4,3.9,0.6,6.3,0.6c3.1,0,5.2-0.7,6.5-2c1.3-1.3,1.9-3.1,1.9-5.2v-1.4
42 | 		c-1.2,0.5-2.3,0.9-3.6,1.2c-1.2,0.3-2.6,0.4-4,0.4c-5.2,0-9.2-1.5-12-4.6c-2.8-3.1-4.2-7.4-4.2-13c0-2.8,0.4-5.3,1.3-7.6
43 | 		c0.9-2.3,2.1-4.2,3.8-5.9c1.7-1.6,3.7-2.9,6.1-3.8c2.4-0.9,5.1-1.3,8.1-1.3c1.3,0,2.6,0.1,4,0.2c1.4,0.1,2.7,0.3,4.1,0.5
44 | 		c1.3,0.2,2.6,0.4,3.9,0.7c1.2,0.3,2.3,0.5,3.3,0.8V71.2z M325.5,55.8c0,6,2.4,9,7.3,9c1.1,0,2.1-0.1,3.1-0.4c1-0.3,1.8-0.6,2.4-1
45 | 		V46.2c-0.5-0.1-1.2-0.2-1.9-0.3s-1.6-0.1-2.5-0.1c-2.8,0-4.9,0.9-6.3,2.8C326.2,50.5,325.5,52.9,325.5,55.8z"/>
46 | 	<g>
47 | 		<g>
48 | 			<path class="st0" d="M1.4,76.2c0-17.3,0-34.2,0-51C4.9,24,53.1,23.7,59,24.9c0,16.9,0,33.9,0,51.3C39.9,76.2,21,76.2,1.4,76.2z
49 | 				 M52.7,70c0-13.4,0-26.2,0-39.2c-15.1,0-29.9,0-44.7,0c0,13.3,0,26.2,0,39.2C23,70,37.7,70,52.7,70z"/>
50 | 			<path class="st0" d="M60.4,77.7H0V24.1l1-0.3c3.7-1.3,52.2-1.6,58.3-0.3l1.2,0.2V77.7z M2.9,74.8h54.7V26.1
51 | 				c-9-1-47.6-0.6-54.7,0.2V74.8z M54.1,71.5H6.5V29.4h47.6V71.5z M9.4,68.6h41.8V32.3H9.4V68.6z"/>
52 | 		</g>
53 | 		<g>
54 | 			<path class="st0" d="M13.1,1.4c8.3,0,16.2,0,24.5,0c3.1,3.2,6.4,6.7,10,10.5c0,2.6,0,5.8,0,9.4c-1.9,0-3.7,0-5.8,0
55 | 				c-0.2-2.2-0.3-4.4-0.5-6.9c-2.2-1.9-4.5-4-7.5-6.7c-4,0-9.1,0-14.7,0c0,4.6,0,9,0,13.7c-2.2,0-3.9,0-6,0
56 | 				C13.1,15,13.1,8.5,13.1,1.4z"/>
57 | 			<path class="st0" d="M20.5,22.9h-8.8V0h26.6l10.8,11.4v11.5h-8.6l-0.6-7.7l-6.7-5.9H20.5V22.9z M14.5,20.1h3.1V6.3h16.7l8.4,7.4
58 | 				l0.5,6.2h3.1v-7.4L37,2.9H14.5V20.1z"/>
59 | 		</g>
60 | 		<g>
61 | 			<path class="st0" d="M15.7,59.5c4.4-3.6,8.2-6.7,11.5-9.4c0-5.4,0-9.5,0-14.1c2-0.1,3.7-0.2,5.8-0.3c0,5.5,0,10.6,0,16.2
62 | 				c-3.8,3.6-7.9,7.6-12.4,12C19.4,62.9,18.1,61.7,15.7,59.5z"/>
63 | 			<path class="st0" d="M20.6,65.9l-7.1-6.5l12.2-10V34.7l8.7-0.5v18.4L20.6,65.9z M17.9,59.5l2.6,2.4l11-10.6V37.3l-2.9,0.2v13.4
64 | 				L17.9,59.5z"/>
65 | 		</g>
66 | 	</g>
67 | </g>
68 | </svg>
69 | 


--------------------------------------------------------------------------------
/src/images/showcase/wonderquiz.svg:
--------------------------------------------------------------------------------
 1 | 	<svg
 2 | 			xmlns="http://www.w3.org/2000/svg"
 3 | 			width="151.289"
 4 | 			height="29.187"
 5 | 			viewBox="0 0 151.289 29.187"
 6 | 		>
 7 | 			<path
 8 | 				id="LogoPath"
 9 | 				data-name="LogoPath"
10 | 				d="M16.92-.78c2.43-1.74,4.92-5.43,6.96-11.46.57-2.04-4.08-3.6-4.05-3.39.18,1.62-2.07,8.16-5.94,12.33-.03-3.93,2.64-7.35,1.65-9.96a4.219,4.219,0,0,0-4.17-2.37v.09c.21,1.59-1.98,7.71-5.58,11.85.12-3.78,2.61-7.05,1.65-9.57-.42-1.08-2.37-1.86-4.68-1.8C3.51-10.5.87-6.45,1.2-2.91A2.878,2.878,0,0,0,2.19-.69C3.96.75,5.16.39,6.96-.78A13.413,13.413,0,0,0,9.84-3.81c-.03.96.09,2.46.81,3.12C12.27.81,15.51.24,16.92-.78Zm10.5-2.01c-1.65,0-1.35-3.09-.39-5.22.75-1.59,2.64-4.2,4.44-4.23,1.65,0,1.35,2.97.36,5.13C31.11-5.55,29.22-2.82,27.42-2.79ZM26.4.27A11.559,11.559,0,0,0,37.35-7.92c1.14-4.23-1.05-7.53-4.86-7.38A11.49,11.49,0,0,0,21.54-7.14C20.4-2.88,22.41.48,26.4.27ZM48.24-10.71c-1.14,3.48-2.91,5.94-2.94,8.4C45.27.42,47.91.99,50.91-.24c-1.35-3.36,4.53-11.1,3.6-13.98-.39-1.23-2.37-1.47-4.41-.51a22.244,22.244,0,0,0-5.52,3.54,4.813,4.813,0,0,0,.27-2.34c-.24-.99-2.22-1.71-4.68-1.8C40.23-12,36.03-5.43,36-2.31,35.97.39,38.61.96,41.61-.24c-.51-1.26-.21-3.12.6-4.92C44.1-9.27,48.75-12.27,48.24-10.71ZM62.82-3.75a6.2,6.2,0,0,0-.24,1.44C62.55.42,65.19.96,68.19-.24,66.84-3.63,74.16-16.26,73.5-19.2c-.24-.99-2.22-1.71-4.68-1.8.03,1.44-1.11,4.5-2.43,7.8-.63-1.59-1.92-2.1-3.75-2.1-4.47,0-8.49,3.93-9.63,8.16S53.52.45,57.18.3C59.16.24,61.11-1.5,62.82-3.75Zm.39-8.49c1.5,0,2.22.66,1.86,1.8-1.74,3.27-4.08,6.6-5.58,6.6-1.35,0-1.59-1.89-1.08-3.72C59.01-9.6,60.93-12.21,63.21-12.24ZM78.39-3.36c-1.65,0-2.67-.66-3.03-1.8,3.45.15,8.49-1.53,9.9-4.47,1.47-3.06-.69-5.82-4.56-5.67A11.116,11.116,0,0,0,70.05-7.14C68.91-2.88,71.07.54,76.47.27c5.07,0,8.22-4.92,6.81-5.55A7.32,7.32,0,0,1,78.39-3.36Zm1.32-8.88c.84,0,1.35.36,1.35,1.2,0,2.16-3.51,2.88-5.46,3.12C76.23-9.54,77.67-12.21,79.71-12.24ZM93.42-10.8c1.62,0,1.5,2.43,1.5,2.43-.03.48,4.41-1.47,4.29-4.26-.06-1.71-1.32-2.76-3.3-2.67a4.294,4.294,0,0,0-3.42,1.86c-.24-.99-2.25-1.8-4.71-1.89.06,3.33-4.14,9.9-4.17,13.02C83.58.39,86.22.96,89.22-.24,88.5-2.07,90.99-10.74,93.42-10.8ZM103.86,4.35c-.03,2.7,2.61,3.27,5.61,2.07-1.35-3.39,5.85-13.89,5.76-19.86,0-.99-2.37-1.86-4.83-1.95a7.009,7.009,0,0,1-.36,2.1c-.63-1.5-1.89-2.01-3.69-2.01-4.47,0-8.49,3.93-9.63,8.16S97.2.45,100.89.3c2.31-.06,4.59-2.43,6.51-5.28C105.69-.96,103.89,2.67,103.86,4.35Zm3.06-16.59c1.68,0,2.37.81,1.71,2.19-1.65,3.15-3.99,6.21-5.43,6.21-1.35,0-1.59-1.89-1.08-3.72C102.84-10.08,105-12.21,106.92-12.24Zm6.27,9.09c-.03,2.19,1.47,3.48,3.72,3.48,1.92,0,3.78-1.62,5.49-4.05a6.424,6.424,0,0,0-.21,1.41C122.16.39,124.8.96,127.8-.24c-1.35-3.39,3.93-10.35,3.24-13.29-.21-.99-2.22-1.71-4.68-1.8-.42,3.51-3.87,11.13-7.14,11.13-1.62,0,2.61-5.1,2.64-8.49.03-2.73-2.61-3.3-5.61-2.07C117.6-11.4,113.22-6.45,113.19-3.15Zm19.89-12.18c.06,3.33-4.14,9.9-4.17,13.02-.03,2.7,2.61,3.27,5.61,2.07-1.35-3.39,3.9-10.35,3.24-13.29C137.52-14.52,135.54-15.24,133.08-15.33Zm6.06-6.42a3.249,3.249,0,0,0-4.29,1.08c-1.14,1.47-.99,3,.45,3.84a3.261,3.261,0,0,0,4.26-1.11C140.7-19.41,140.55-20.94,139.14-21.75Zm1.62,6.72a3.586,3.586,0,0,0-2.07,5.37,12.217,12.217,0,0,1,6.81-2.31c-2.58,2.37-5.43,6.33-11.13,10.14,0,1.68,2.55,2.43,4.32,1.98,4.98-.75,6.93-.45,11.49.18.36-1.35.3-4.89-2.82-4.95-1.11-.03-2.37.96-3.81,1.59,2.76-2.73,4.86-6.36,8.91-9.48C150.12-15.27,143.13-15.78,140.76-15.03Z"
11 | 				transform="translate(-1.171 22.17)"
12 | 				fill="#FFF"
13 | 			/>
14 | 		</svg>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import App from "./App";
 4 | import * as serviceWorker from "./serviceWorker";
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById("root")
11 | );
12 | 
13 | // If you want your app to work offline and load faster, you can change
14 | // unregister() to register() below. Note this comes with some pitfalls.
15 | // Learn more about service workers: https://bit.ly/CRA-PWA
16 | serviceWorker.unregister();
17 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' },
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister();
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message);
139 |       });
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 | 


--------------------------------------------------------------------------------
/src/styles/globals.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: "Ubuntu", sans-serif;
 5 | }
 6 | 
 7 | * {
 8 |   box-sizing: border-box;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import './globals.scss';
2 | @import './variables.scss';
3 | 


--------------------------------------------------------------------------------
/src/styles/variables.scss:
--------------------------------------------------------------------------------
 1 | $color1: #000;
 2 | $color2: #fff;
 3 | $breakMobile: 800px;
 4 | 
 5 | @mixin ease {
 6 | 	transition: all 0.3s ease;
 7 | }
 8 | 
 9 | @mixin flexCenter {
10 | 	display: flex;
11 | 	align-items: center;
12 | 	justify-content: center;
13 | }
14 | 


--------------------------------------------------------------------------------