├── public
    ├── _redirects
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── meta-book.png
    ├── meta-image.png
    ├── robots.txt
    ├── social-book.png
    ├── social-image.png
    ├── your-website-sucks-sample.pdf
    ├── sitemap.xml
    ├── manifest.json
    └── index.html
├── src
    ├── assets
    │   ├── book.png
    │   ├── twan.JPG
    │   ├── thatsanegg.png
    │   ├── twan_transparent.png
    │   ├── clients
    │   │   ├── volkswagen.svg
    │   │   ├── accenture.svg
    │   │   ├── mastercard.svg
    │   │   ├── framer.svg
    │   │   └── porsche.svg
    │   └── ButtonAccent.js
    ├── components
    │   ├── Intro.js
    │   ├── ScrollToTop.js
    │   ├── Book.js
    │   ├── Timeline
    │   │   ├── 1996
    │   │   │   └── index.js
    │   │   ├── 2016
    │   │   │   └── index.js
    │   │   ├── 2019
    │   │   │   └── index.js
    │   │   ├── 2020
    │   │   │   └── index.js
    │   │   ├── 2021
    │   │   │   └── index.js
    │   │   ├── 2024
    │   │   │   └── index.js
    │   │   ├── BlogPost.js
    │   │   ├── Entry.js
    │   │   └── Timeline.js
    │   ├── About.js
    │   ├── Book.css
    │   ├── Contact.js
    │   ├── Clients.js
    │   ├── Footer.js
    │   ├── Hero.js
    │   └── CurrentlyListening.js
    ├── App.test.js
    ├── setupTests.js
    ├── App.js
    ├── reportWebVitals.js
    ├── index.js
    ├── pages
    │   ├── Home.js
    │   └── WebsiteSucks.js
    └── index.css
├── README.md
├── craco.config.js
├── .prettierrc
├── .gitignore
├── tailwind.config.js
└── package.json


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/meta-book.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/public/meta-book.png


--------------------------------------------------------------------------------
/public/meta-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/public/meta-image.png


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


--------------------------------------------------------------------------------
/src/assets/book.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/src/assets/book.png


--------------------------------------------------------------------------------
/src/assets/twan.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/src/assets/twan.JPG


--------------------------------------------------------------------------------
/public/social-book.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/public/social-book.png


--------------------------------------------------------------------------------
/public/social-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/public/social-image.png


--------------------------------------------------------------------------------
/src/assets/thatsanegg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/src/assets/thatsanegg.png


--------------------------------------------------------------------------------
/src/assets/twan_transparent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/src/assets/twan_transparent.png


--------------------------------------------------------------------------------
/public/your-website-sucks-sample.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twanmulder/portfolio/HEAD/public/your-website-sucks-sample.pdf


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # My personal portfolio website 😄
2 | 
3 | Check it out over at:
4 | 
5 | [www.twanmulder.com](https://www.twanmulder.com)
6 | 


--------------------------------------------------------------------------------
/craco.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   style: {
3 |     postcss: {
4 |       plugins: [require("tailwindcss"), require("autoprefixer")],
5 |     },
6 |   },
7 | }
8 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "printWidth": 500,
4 |   "semi": false,
5 |   "singleQuote": false,
6 |   "tabWidth": 2,
7 |   "trailingComma": "es5"
8 | }
9 | 


--------------------------------------------------------------------------------
/src/components/Intro.js:
--------------------------------------------------------------------------------
1 | export default function Intro() {
2 |   return (
3 |     <section className="container">
4 |       <p>TEST</p>
5 |     </section>
6 |   )
7 | }
8 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render } from "@testing-library/react"
2 | import App from "./App"
3 | 
4 | test("renders learn react link", () => {
5 |   render(<App />)
6 | })
7 | 


--------------------------------------------------------------------------------
/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"
6 | 


--------------------------------------------------------------------------------
/src/components/ScrollToTop.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react"
 2 | import { useLocation } from "react-router-dom"
 3 | 
 4 | export default function ScrollToTop() {
 5 |   const { pathname } = useLocation()
 6 | 
 7 |   useEffect(() => {
 8 |     window.scrollTo(0, 0)
 9 |   }, [pathname])
10 | 
11 |   return null
12 | }
13 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { Fragment } from "react"
 2 | 
 3 | import Hero from "./components/Hero"
 4 | import Main from "./components/Main"
 5 | import Footer from "./components/Footer"
 6 | 
 7 | function App() {
 8 |   return (
 9 |     <Fragment>
10 |       <Hero />
11 |       <Main />
12 |       <Footer />
13 |     </Fragment>
14 |   )
15 | }
16 | 
17 | export default App
18 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = (onPerfEntry) => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry)
 5 |       getFID(onPerfEntry)
 6 |       getFCP(onPerfEntry)
 7 |       getLCP(onPerfEntry)
 8 |       getTTFB(onPerfEntry)
 9 |     })
10 |   }
11 | }
12 | 
13 | export default reportWebVitals
14 | 


--------------------------------------------------------------------------------
/.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 | .eslintcache
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 


--------------------------------------------------------------------------------
/src/components/Book.js:
--------------------------------------------------------------------------------
 1 | import "./Book.css"
 2 | import bookcover from "../assets/book.png"
 3 | 
 4 | export default function Book() {
 5 |   return (
 6 |     <a href="https://flurly.com/p/your-website-sucks" className="hidden md:inline">
 7 |       <div className="flex items-center justify-center book-container">
 8 |         <div className="book">
 9 |           <img alt="" src={bookcover} />
10 |         </div>
11 |       </div>
12 |     </a>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/public/sitemap.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
3 | <url> <loc>https://www.twanmulder.com/</loc> <changefreq>weekly</changefreq> <priority>1</priority> </url>
4 | </urlset>


--------------------------------------------------------------------------------
/src/components/Timeline/2016/index.js:
--------------------------------------------------------------------------------
 1 | import { Book } from "react-feather"
 2 | import { DateEntry, Notes, TimelineEntry } from "../Entry"
 3 | 
 4 | export function Year2016() {
 5 |   return (
 6 |     <>
 7 |       <DateEntry title="2016" />
 8 |       <TimelineEntry title="Started University" timestamp="September 1, 2016" Icon={Book} tint="blue">
 9 |         <Notes>
10 |           <p>Started studying Communication & Multi-media Design at the Hanze University of Applied Sciences.</p>
11 |         </Notes>
12 |       </TimelineEntry>
13 |     </>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Portfolio Twan Mulder",
 3 |   "name": "Portfolio Twan Mulder",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.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 | 


--------------------------------------------------------------------------------
/src/components/Timeline/1996/index.js:
--------------------------------------------------------------------------------
 1 | import { Gift } from "react-feather"
 2 | import { DateEntry, Notes, TimelineEntry } from "../Entry"
 3 | 
 4 | export function Year1996() {
 5 |   const dob = new Date("12/07/1996")
 6 |   const monthDiff = Date.now() - dob.getTime()
 7 |   const ageDate = new Date(monthDiff)
 8 |   const year = ageDate.getUTCFullYear()
 9 |   const ageInYears = Math.abs(year - 1970)
10 | 
11 |   return (
12 |     <>
13 |       <DateEntry title="1996" />
14 |       <TimelineEntry title="Birthday!" timestamp="December 7, 1996" Icon={Gift} tint="yellow">
15 |         <Notes>
16 |           <p>I was born the 7th of December 1996, which makes me {ageInYears} years old! </p>
17 |         </Notes>
18 |       </TimelineEntry>
19 |     </>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/About.js:
--------------------------------------------------------------------------------
 1 | import twan from "../assets/twan_transparent.png"
 2 | 
 3 | export default function About() {
 4 |   return (
 5 |     <section className="sticky self-start hidden top-20 md:block" style={{ maxWidth: "180px", marginTop: "75px" }}>
 6 |       <div className="mb-8 overflow-hidden rounded-sm" style={{ background: "linear-gradient(45deg, #0037ff, #0088ff)" }}>
 7 |         <img src={twan} width="180px" height="180px" alt="headshot of Twan Mulder" />
 8 |       </div>
 9 |       <p className="mb-1 text-sm tracking-wide text-gray-500 uppercase">About</p>
10 |       <h2 className="mb-1 font-bold">Twan Mulder</h2>
11 |       <p className="text-sm text-gray-500">Front-end Developer who loves writing and creating enticing experiences</p>
12 |     </section>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/Timeline/BlogPost.js:
--------------------------------------------------------------------------------
 1 | import { TimelineEntry } from "./Entry"
 2 | import { Edit2 } from "react-feather"
 3 | 
 4 | export function BlogPost({ timelinetitle = "Published new post", slug, title, description, timestamp, divider = true }) {
 5 |   return (
 6 |     <TimelineEntry title={timelinetitle} tint="green" Icon={Edit2} timestamp={timestamp} divider={divider}>
 7 |       <a href={slug} target="_blank" rel="noreferrer" className="px-4 py-3 transition-shadow bg-white rounded-md shadow  hover:shadow-lg">
 8 |         <div className="flex flex-col space-y-4">
 9 |           <div className="flex flex-col space-y-1">
10 |             <p className="font-semibold">{title}</p>
11 |             <p className="font-normal text-gray-600">{description}</p>
12 |           </div>
13 |         </div>
14 |       </a>
15 |     </TimelineEntry>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import ReactDOM from "react-dom"
 3 | import { BrowserRouter, Switch, Route } from "react-router-dom"
 4 | 
 5 | import "./index.css"
 6 | import "typeface-poppins"
 7 | 
 8 | import Home from "./pages/Home"
 9 | import WebsiteSucks from "./pages/WebsiteSucks"
10 | import ScrollToTop from "./components/ScrollToTop"
11 | import reportWebVitals from "./reportWebVitals"
12 | 
13 | ReactDOM.render(
14 |   <React.StrictMode>
15 |     <BrowserRouter>
16 |       <ScrollToTop />
17 |       <Switch>
18 |         <Route exact path="/">
19 |           <Home />
20 |         </Route>
21 |         <Route path="/book">
22 |           <WebsiteSucks />
23 |         </Route>
24 |       </Switch>
25 |     </BrowserRouter>
26 |   </React.StrictMode>,
27 |   document.getElementById("root")
28 | )
29 | 
30 | // If you want to start measuring performance in your app, pass a function
31 | // to log results (for example: reportWebVitals(console.log))
32 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
33 | reportWebVitals()
34 | 


--------------------------------------------------------------------------------
/src/components/Timeline/2024/index.js:
--------------------------------------------------------------------------------
 1 | import { Briefcase } from "react-feather"
 2 | import { ButtonSet, DateEntry, Notes, TimelineEntry } from "../Entry"
 3 | 
 4 | export function Year2024() {
 5 |   return (
 6 |     <>
 7 |       <DateEntry title="2024" />
 8 |       <TimelineEntry title="Started as Frontend Developer at DHL!" timestamp="May 1st, 2024" Icon={Briefcase} tint="indigo">
 9 |         <Notes>
10 |           <p>As Frontend Developer at DHL eCommerce, I'm part of multiple teams that work on a broad range of both internal and external facing tools and websites.</p>
11 |           <p>This work spans from creating an entirely new user interface from the ground up for the Customs team, to migrating the API implementation from custom functions to React Query for the Location team, and many more tasks ranging a broad spectrum of technical capabilities.</p>
12 |         </Notes>
13 |         <ButtonSet>
14 |           <a className="w-full md:w-auto btn" href="https://www.dhl.com/nl-nl/home/ecommerce.html" target="_blank" rel="noopener noreferrer">
15 |             <span>view website</span>
16 |           </a>
17 |         </ButtonSet>
18 |       </TimelineEntry>
19 |     </>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
 3 |   darkMode: false, // or 'media' or 'class'
 4 |   theme: {
 5 |     fontFamily: {
 6 |       sans: ["Poppins", "Oswald", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
 7 |     },
 8 |     extend: {
 9 |       colors: {
10 |         blue: {
11 |           550: "#08f",
12 |         },
13 |       },
14 |       height: {
15 |         "9/10-screen": "90vh",
16 |       },
17 |       zIndex: {
18 |         "-1": "-1",
19 |       },
20 |       margin: {
21 |         screen: "100vh",
22 |       },
23 |       keyframes: {
24 |         "fade-in": {
25 |           "100%": { opacity: "1" },
26 |         },
27 |       },
28 |       animation: {
29 |         "fade-in": "fade-in 1s ease-out 1.8s forwards",
30 |       },
31 |       typography: {
32 |         DEFAULT: {
33 |           css: {
34 |             blockquote: {
35 |               fontWeight: "700",
36 |             },
37 |           },
38 |         },
39 |       },
40 |     },
41 |   },
42 |   variants: {
43 |     extend: {},
44 |   },
45 |   plugins: [require("@tailwindcss/typography")],
46 | }
47 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- META INFORMATION -->
 5 |     <meta charset="utf-8" />
 6 |     <meta http-equiv="x-ua-compatible" content="ie=edge" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |     <title>Twan Mulder</title>
 9 |     <meta name="description" content="Developer, CRO Specialist, UI/UX enthousiast, occasionally writes." />
10 |     <meta name="keywords" content="developer, portfolio, javascript, react, blog" />
11 |     <meta name="theme-color" content="#111827" />
12 | 
13 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
14 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
15 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |     <link rel="sitemap" href="%PUBLIC_URL%/sitemap.xml" type="application/xml" />
17 | 
18 |     <!-- Splitbee Analytics -->
19 |     <script async src="https://cdn.splitbee.io/sb.js"></script>
20 | 
21 |     <!-- Flurly Embed Script -->
22 |     <script src="https://js.stripe.com/v3/"></script>
23 |     <script src="https://flurly.com/flurly-checkout.js"></script>
24 | 
25 |     <!-- Testimonial iFrame resize script -->
26 |     <script type="text/javascript" src="https://testimonial.to/js/iframeResizer.min.js"></script>
27 |   </head>
28 |   <body style="background-color: #fff">
29 |     <noscript>You need to enable JavaScript to run this app.</noscript>
30 |     <div id="root"></div>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "twan-mulder-portfolio",
 3 |   "description": "Twan's Portfolio",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@craco/craco": "^6.0.0",
 8 |     "@tailwindcss/postcss7-compat": "^2.0.2",
 9 |     "@tailwindcss/typography": "^0.3.1",
10 |     "@testing-library/jest-dom": "^5.11.6",
11 |     "@testing-library/react": "^11.2.2",
12 |     "@testing-library/user-event": "^12.6.0",
13 |     "autoprefixer": "^9.8.6",
14 |     "fast-average-color": "^6.3.0",
15 |     "postcss": "^7.0.36",
16 |     "react": "^17.0.1",
17 |     "react-dom": "^17.0.1",
18 |     "react-feather": "^2.0.9",
19 |     "react-helmet": "^6.1.0",
20 |     "react-router-dom": "^5.2.0",
21 |     "react-scripts": "4.0.1",
22 |     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
23 |     "typeface-poppins": "^1.1.13",
24 |     "use-last-fm": "^0.4.0",
25 |     "web-vitals": "^0.2.4"
26 |   },
27 |   "scripts": {
28 |     "start": "craco start",
29 |     "build": "craco build",
30 |     "test": "craco test",
31 |     "eject": "react-scripts eject"
32 |   },
33 |   "eslintConfig": {
34 |     "extends": [
35 |       "react-app",
36 |       "react-app/jest"
37 |     ]
38 |   },
39 |   "browserslist": {
40 |     "production": [
41 |       ">0.2%",
42 |       "not dead",
43 |       "not op_mini all"
44 |     ],
45 |     "development": [
46 |       "last 1 chrome version",
47 |       "last 1 firefox version",
48 |       "last 1 safari version"
49 |     ]
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/components/Book.css:
--------------------------------------------------------------------------------
 1 | .book-container {
 2 |   perspective: 600px;
 3 | }
 4 | 
 5 | .book {
 6 |   width: 200px;
 7 |   height: 283px;
 8 |   position: relative;
 9 |   transform-style: preserve-3d;
10 |   transform: rotateY(-30deg);
11 |   transition: transform 1s ease;
12 |   animation: 1s ease 0s 1 initAnimation;
13 | }
14 | 
15 | .book:hover {
16 |   transform: rotateY(0deg);
17 | }
18 | 
19 | .book::before {
20 |   position: absolute;
21 |   content: " ";
22 |   left: 0;
23 |   top: 3px;
24 |   width: 48px;
25 |   height: 277px;
26 |   transform: translateX(172px) rotateY(90deg);
27 |   background: linear-gradient(90deg, #fff 0%, #f9f9f9 5%, #fff 10%, #f9f9f9 15%, #fff 20%, #f9f9f9 25%, #fff 30%, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 65%, #fff 70%, #f9f9f9 75%, #fff 80%, #f9f9f9 85%, #fff 90%, #f9f9f9 95%, #fff 100%);
28 | }
29 | 
30 | .book::after {
31 |   position: absolute;
32 |   top: 0;
33 |   left: 0;
34 |   content: " ";
35 |   width: 200px;
36 |   height: 283px;
37 |   transform: translateZ(-25px);
38 |   background-color: #202833;
39 |   border-radius: 0 2px 2px 0;
40 |   box-shadow: -10px 0 50px 10px #20283380;
41 | }
42 | 
43 | .book img {
44 |   margin: 0;
45 |   position: absolute;
46 |   top: 0;
47 |   left: 0;
48 |   width: 200px;
49 |   height: 283px;
50 |   transform: translateZ(25px);
51 |   border-radius: 0 2px 2px 0;
52 |   box-shadow: 5px 5px 20px #20283380;
53 |   background-color: #202833;
54 | }
55 | 
56 | @keyframes initAnimation {
57 |   0% {
58 |     transform: rotateY(0deg);
59 |   }
60 |   100% {
61 |     transform: rotateY(-30deg);
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/Contact.js:
--------------------------------------------------------------------------------
 1 | import Twan from "../assets/twan_transparent.png"
 2 | import { Linkedin } from "react-feather"
 3 | 
 4 | export default function Contact() {
 5 |   return (
 6 |     <section className="mt-16 container" id="contact">
 7 |       <img className="max-w-xs mx-auto md:max-w-xs" src={Twan} alt="" />
 8 |       <article style={{ background: "linear-gradient(45deg, #0037ff, #0088ff)" }} className="flex flex-col justify-between p-8 mx-auto text-white shadow-2xl md:items-center md:p-12 rounded-3xl bg-blue-550 md:flex-row">
 9 |         <div className="max-w-lg">
10 |           <p className="mb-8 text-5xl font-bold">
11 |             I'm looking for
12 |             <br /> a new role!
13 |           </p>
14 |           <p>I'm looking to apply my skills with modern web development technologies (such as React, TypeScript, and SASS) in a new role.</p>
15 |           <p className="mt-2">Interested or want to get to know me a bit better?</p>
16 |         </div>
17 |         <div className="mt-8 md:mt-0">
18 |           <a href="https://www.linkedin.com/in/twanmulder/" className="inline-flex items-center justify-center w-full px-6 py-3 mb-4 text-xl font-bold text-center text-black transition bg-white rounded-lg md:justify-start md:w-auto hover:opacity-90 transform-gpu hover:-translate-y-1" target="_blank" rel="noreferrer noopener">
19 |             <Linkedin size={20} />
20 |             <span className="ml-2">Get in Touch</span>
21 |           </a>
22 |           <p>
23 |             Prefer email?
24 |             <br />
25 |             You can reach out to me
26 |             <br />
27 |             at twan.mulder@gmail.com
28 |           </p>
29 |         </div>
30 |       </article>
31 |     </section>
32 |   )
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/Timeline/2019/index.js:
--------------------------------------------------------------------------------
 1 | import { Briefcase } from "react-feather"
 2 | import { BlogPost } from "../BlogPost"
 3 | import { ButtonSet, DateEntry, Notes, TimelineEntry } from "../Entry"
 4 | 
 5 | export function Year2019() {
 6 |   return (
 7 |     <>
 8 |       <DateEntry title="2019" />
 9 |       {/* <TimelineEntry title="Acquired by Accenture Interactive" timestamp="October 1, 2019" Icon={Briefcase} tint="indigo">
10 |         <Notes>
11 |           <p>Storm Digital is officially acquired by Accenture Interactive on the 1st of October.</p>
12 |         </Notes>
13 |       </TimelineEntry> */}
14 |       <BlogPost timelinetitle="Wrote my first article for Prototypr.io" timestamp="August 23, 2019" slug="https://blog.prototypr.io/animating-text-like-sketch-does-using-only-css-bed0e4c0cf95" title="Animating text like Sketch does using only CSS" description="Using CSS to create a beautiful staggering text animation." />
15 |       <TimelineEntry title="First job as Frontend Developer!" timestamp="April 1, 2019" Icon={Briefcase} tint="indigo">
16 |         <Notes>
17 |           <p>Started my first job as a Frontend Developer at a digital marketing agency called Storm Digital.</p>
18 |           <p>Responsible for creating dynamic, interactive, and animated display creatives using modern technologies such as HTML, CSS, JavaScript, Vue, React, and GSAP. Communicated between stakeholders, designers, and clients to create a fitting end result.</p>
19 |         </Notes>
20 |         <ButtonSet>
21 |           <a className="w-full md:w-auto btn" href="https://www.stormdigital.nl/" target="_blank" rel="noopener noreferrer">
22 |             <span>view website</span>
23 |           </a>
24 |         </ButtonSet>
25 |       </TimelineEntry>
26 |     </>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/Clients.js:
--------------------------------------------------------------------------------
 1 | import framer from "../assets/clients/framer.svg"
 2 | import porsche from "../assets/clients/porsche.svg"
 3 | import accenture from "../assets/clients/accenture.svg"
 4 | import mastercard from "../assets/clients/mastercard.svg"
 5 | import volkswagen from "../assets/clients/volkswagen.svg"
 6 | import virginmedia from "../assets/clients/virginmedia.svg"
 7 | 
 8 | export default function Clients() {
 9 |   return (
10 |     <section className="container pt-40 mx-auto">
11 |       <div className="flex flex-col w-full text-left lg:text-center">
12 |         <h1 className="text-2xl font-semibold text-blue-550 title-font">
13 |           Some cool companies&nbsp;
14 |           <br className="md:hidden" />
15 |           I've worked with.
16 |         </h1>
17 |       </div>
18 |       <div className="grid grid-cols-2 gap-16 my-16 text-center sm:md:grid-cols-3 md:grid-cols-3">
19 |         <div className="flex items-center justify-center ">
20 |           <img src={framer} alt="logo" className="block object-contain h-12" />
21 |         </div>
22 |         <div className="flex items-center justify-center ">
23 |           <img src={accenture} alt="logo" className="block object-contain h-12" />
24 |         </div>
25 |         <div className="flex items-center justify-center ">
26 |           <img src={porsche} alt="logo" className="block object-contain h-12" />
27 |         </div>
28 |         <div className="flex items-center justify-center ">
29 |           <img src={virginmedia} alt="Todoist Logo" className="block object-contain h-16" />
30 |         </div>
31 |         <div className="flex items-center justify-center ">
32 |           <img src={mastercard} alt="logo" className="block object-contain h-16" />
33 |         </div>
34 |         <div className="flex items-center justify-center ">
35 |           <img src={volkswagen} alt="logo" className="block object-contain h-16" />
36 |         </div>
37 |       </div>
38 |     </section>
39 |   )
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom"
 2 | import { GitHub, Twitter, Linkedin } from "react-feather"
 3 | 
 4 | export default function Footer() {
 5 |   return (
 6 |     <footer className="text-gray-700 bg-white" id="socials">
 7 |       <div className="container flex flex-col items-center px-5 py-8 mx-auto sm:flex-row">
 8 |         <Link to="/" className="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start hover:text-blue-550">
 9 |           <span className="ml-3 text-xl font-bold">Twan Mulder</span>
10 |         </Link>
11 |         <p className="mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l sm:border-gray-200 sm:py-2 sm:mt-0">
12 |           © {new Date().getFullYear()} —
13 |           <a className="ml-1 text-gray-600 transition-colors hover:text-blue-550" href="https://twitter.com/toktoktwan" rel="noopener noreferrer" target="_blank">
14 |             @toktoktwan
15 |           </a>
16 |         </p>
17 |         <span className="inline-flex justify-center mt-4 sm:ml-auto sm:mt-0 sm:justify-start">
18 |           <a className="ml-3 text-gray-500 transition-colors hover:text-blue-550" href="https://github.com/twanmulder" rel="noopener noreferrer" target="_blank">
19 |             <GitHub size={16} />
20 |             <span className="sr-only">Go to GitHub profile</span>
21 |           </a>
22 |           <a className="ml-3 text-gray-500 transition-colors hover:text-blue-550" href="https://twitter.com/toktoktwan" rel="noopener noreferrer" target="_blank">
23 |             <Twitter size={16} />
24 |             <span className="sr-only">Go to Twitter profile</span>
25 |           </a>
26 |           <a className="ml-3 text-gray-500 transition-colors hover:text-blue-550" href="https://www.linkedin.com/in/twanmulder/" rel="noopener noreferrer" target="_blank">
27 |             <Linkedin size={16} />
28 |             <span className="sr-only">Go to LinkedIn profile</span>
29 |           </a>
30 |         </span>
31 |       </div>
32 |     </footer>
33 |   )
34 | }
35 | 


--------------------------------------------------------------------------------
/src/assets/clients/volkswagen.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M16.0061 29.9998C23.7367 29.9998 30 23.7365 30 16.0061C30 8.26328 23.7367 2 16.0061 2C8.27561 2 2 8.26328 2 16.0061C2 23.7365 8.27561 29.9998 16.0061 29.9998Z" fill="url(#paint0_linear)"/>
 3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M8.52221 23.3914C9.40431 24.2732 10.4299 24.9985 11.5552 25.5365L8.52221 18.5829L5.99471 12.7882C5.66182 13.7992 5.48921 14.8842 5.48921 16.0061C5.48921 18.8788 6.64816 21.4927 8.52221 23.3914ZM23.4898 26.0791C26.5598 23.7982 28.5571 20.1363 28.5571 16.0061C28.5571 11.8758 26.5598 8.214 23.4898 5.92075C21.3938 4.36726 18.8048 3.44257 16.0061 3.44257C13.2073 3.44257 10.6182 4.36726 8.52221 5.92075C5.45222 8.214 3.45487 11.8758 3.45487 16.0061C3.45487 20.1363 5.45222 23.7982 8.52221 26.0791C10.6182 27.6325 13.2073 28.5573 16.0061 28.5573C18.8048 28.5573 21.3938 27.6326 23.4898 26.0791ZM23.4898 8.62087C23.8635 8.99491 24.2058 9.39903 24.5133 9.82914L23.4898 12.1964L19.6309 21.0611L17.6336 16.5116H14.3786L12.3813 21.0611L8.52221 12.1964L7.49888 9.82914C7.80626 9.39899 8.14853 8.99487 8.52221 8.62087C9.16248 7.96716 9.88828 7.40312 10.6798 6.94409L14.3293 15.439H17.6827L21.3322 6.94409C22.1237 7.40312 22.8495 7.96716 23.4898 8.62087ZM23.4898 18.5829L26.0173 12.7882C26.3504 13.7992 26.523 14.8842 26.523 16.0061C26.523 18.8787 25.364 21.4927 23.4898 23.3914C22.6078 24.2732 21.5822 24.9985 20.457 25.5365L23.4898 18.5829ZM16.0061 19.3967L18.9406 26.0915C17.9874 26.3704 16.9993 26.5115 16.0061 26.5107C15.013 26.5115 14.0249 26.3703 13.0717 26.0915L16.0061 19.3967ZM16.0061 12.8128L19.0269 5.93308C18.0774 5.63718 17.0541 5.48923 16.0061 5.48923C14.9581 5.48923 13.9471 5.63718 12.9854 5.93308L16.0061 12.8128Z" fill="white"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear" x1="2.00431" y1="2.0043" x2="29.9955" y2="29.9955" gradientUnits="userSpaceOnUse">
 6 | <stop stop-color="#2088FA"/>
 7 | <stop offset="1" stop-color="#032B5C"/>
 8 | </linearGradient>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/src/assets/clients/accenture.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 163.2 43" style="enable-background:new 0 0 163.2 43;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#A100FF;}
 7 | </style>
 8 | <g>
 9 | 	<polygon class="st0" points="95.1,12 104.5,8.5 95.1,4.9 95.1,0 111.2,6.5 111.2,10.5 95.1,17 	"/>
10 | 	<path d="M6.2,43C2.8,43,0,41.3,0,37.5v-0.2c0-4.6,4-6.2,8.9-6.2h2.3v-0.9c0-1.9-0.8-3-2.8-3c-1.8,0-2.7,1-2.8,2.4h-5
11 | 		c0.4-4.2,3.7-6.2,8.1-6.2c4.5,0,7.8,1.9,7.8,6.6v12.6h-5.1v-2.2C10.4,41.8,8.7,43,6.2,43z M11.2,36.4v-1.8H9.1
12 | 		c-2.6,0-3.9,0.7-3.9,2.4v0.2c0,1.3,0.8,2.2,2.6,2.2C9.6,39.3,11.2,38.3,11.2,36.4z M28.4,43c-5.2,0-9-3.2-9-9.6v-0.3
13 | 		c0-6.4,4-9.8,9-9.8c4.3,0,7.8,2.2,8.2,7.1h-5c-0.3-1.8-1.3-3-3.1-3c-2.2,0-3.8,1.8-3.8,5.5v0.6c0,3.8,1.4,5.5,3.8,5.5
14 | 		c1.8,0,3.1-1.3,3.4-3.4h4.8C36.4,40,33.5,43,28.4,43z M48,43c-5.2,0-9-3.2-9-9.6v-0.3c0-6.4,4-9.8,9-9.8c4.3,0,7.8,2.2,8.2,7.1h-5
15 | 		c-0.3-1.8-1.3-3-3.1-3c-2.2,0-3.8,1.8-3.8,5.5v0.6c0,3.8,1.4,5.5,3.8,5.5c1.8,0,3.1-1.3,3.4-3.4h4.8C56,40,53.1,43,48,43z M67.7,43
16 | 		c-5.4,0-9.1-3.2-9.1-9.5v-0.4c0-6.3,3.9-9.8,9-9.8c4.7,0,8.6,2.6,8.6,8.9v2.3H63.9c0.2,3.4,1.7,4.7,3.9,4.7c2,0,3.1-1.1,3.5-2.4
17 | 		h4.9C75.6,40.3,72.6,43,67.7,43z M64,31H71c-0.1-2.8-1.4-4-3.5-4C65.9,27.1,64.4,28,64,31z M79.4,23.8h5.3v2.8
18 | 		c0.9-1.8,2.8-3.2,5.7-3.2c3.4,0,5.7,2.1,5.7,6.6v12.6h-5.3V30.8c0-2.2-0.9-3.2-2.8-3.2c-1.8,0-3.3,1.1-3.3,3.5v11.5h-5.3V23.8z
19 | 		 M105.8,18.1v5.7h3.6v3.9h-3.6v8.9c0,1.4,0.6,2.1,1.9,2.1c0.8,0,1.3-0.1,1.8-0.3v4.1c-0.6,0.2-1.7,0.4-3,0.4c-4.1,0-6-1.9-6-5.7
20 | 		v-9.5h-2.2v-3.9h2.2v-3.5L105.8,18.1z M129.2,42.6H124v-2.8c-0.9,1.8-2.7,3.2-5.5,3.2c-3.4,0-5.9-2.1-5.9-6.5V23.8h5.3v12
21 | 		c0,2.2,0.9,3.2,2.7,3.2c1.8,0,3.3-1.2,3.3-3.5V23.8h5.3V42.6z M133.1,23.8h5.3v3.5c1.1-2.5,2.9-3.7,5.7-3.7v5.2
22 | 		c-3.6,0-5.7,1.1-5.7,4.2v9.7h-5.3V23.8z M154.8,43c-5.4,0-9.1-3.2-9.1-9.5v-0.4c0-6.3,3.9-9.8,9-9.8c4.7,0,8.6,2.6,8.6,8.9v2.3
23 | 		h-12.2c0.2,3.4,1.7,4.7,3.9,4.7c2,0,3.1-1.1,3.5-2.4h4.9C162.6,40.3,159.7,43,154.8,43z M151,31h7.1c-0.1-2.8-1.4-4-3.5-4
24 | 		C153,27.1,151.5,28,151,31z"/>
25 | </g>
26 | </svg>
27 | 


--------------------------------------------------------------------------------
/src/components/Timeline/Entry.js:
--------------------------------------------------------------------------------
 1 | function getTint(color) {
 2 |   switch (color) {
 3 |     case "red":
 4 |       return "text-red-800 bg-red-500 bg-opacity-20"
 5 |     case "blue":
 6 |       return "text-blue-800 bg-blue-500 bg-opacity-20"
 7 |     case "green":
 8 |       return "text-green-800 bg-green-500 bg-opacity-20"
 9 |     case "purple":
10 |       return "text-purple-800 bg-purple-500 bg-opacity-20"
11 |     case "indigo":
12 |       return "text-indigo-800 bg-indigo-500 bg-opacity-20"
13 |     case "pink":
14 |       return "text-pink-800 bg-pink-500 bg-opacity-20"
15 |     case "yellow":
16 |       return "text-yellow-800 bg-yellow-500 bg-opacity-20"
17 |     case "gray":
18 |     default:
19 |       return "text-primary bg-gray-200"
20 |   }
21 | }
22 | 
23 | export function Notes({ children }) {
24 |   return <div className="-mt-2 prose timeline-inset prose-md">{children}</div>
25 | }
26 | 
27 | export function ButtonSet({ children }) {
28 |   return <div className="flex flex-wrap space-y-3 md:space-y-0 md:space-x-3 timeline-inset ">{children}</div>
29 | }
30 | 
31 | export function TimelineEntry({ children = null, title, timestamp, Icon, tint = "gray", divider = true }) {
32 |   return (
33 |     <div className="flex mb-20 timeline-item">
34 |       {/* Icon and dividing line */}
35 |       <div className="flex flex-col items-center">
36 |         <div className={`flex justify-center p-3 rounded-full align-center border-4 border-white ${getTint(tint)}`}>
37 |           <Icon size={16} />
38 |         </div>
39 |         {divider && <div className="flex-1 w-px -mb-12 bg-gray-200 md:-mb-20 timeline-stroke" />}
40 |       </div>
41 | 
42 |       <div className="flex flex-col flex-1 ml-4 space-y-4">
43 |         <div className="flex flex-col pt-1 contents-center">
44 |           <h3 className="font-bold text-lg">{title}</h3>
45 |           {timestamp && <span className="text-sm text-gray-600">{timestamp}</span>}
46 |         </div>
47 |         <div className="flex flex-col space-y-4 timeline-full-width">{children}</div>
48 |       </div>
49 |     </div>
50 |   )
51 | }
52 | 
53 | export function DateEntry({ title }) {
54 |   return (
55 |     <div className="flex items-center mb-8 timeline-item">
56 |       <div className="w-12 mr-4 bg-gray-200 flex-0 timeline-stroke" />
57 |       <h2 className="text-4xl font-bold">{title}</h2>
58 |       <div className="flex-1 h-px ml-4 bg-gray-200 timeline-stroke" />
59 |     </div>
60 |   )
61 | }
62 | 


--------------------------------------------------------------------------------
/src/components/Timeline/Timeline.js:
--------------------------------------------------------------------------------
 1 | import { Year1996 } from "./1996"
 2 | import { Year2016 } from "./2016"
 3 | import { Year2019 } from "./2019"
 4 | import { Year2020 } from "./2020"
 5 | import { Year2021 } from "./2021"
 6 | import { Year2024 } from "./2024"
 7 | 
 8 | export default function Timeline() {
 9 |   return (
10 |     <section className="relative flex flex-col w-full max-w-xl mx-auto timeline pt-4 md:pt-0">
11 |       <Year2024 />
12 |       <Year2021 />
13 |       <Year2020 />
14 |       <Year2019 />
15 |       <Year2016 />
16 |       <Year1996 />
17 |       <div className="absolute left-0 right-0 h-full pointer-events-none">
18 |         <svg className="sticky top-0" preserveAspectRatio="none" viewBox="0 0 10 30" width="100%" height="75">
19 |           <defs>
20 |             <linearGradient id="eased-gradient-gradient-standard-layout" x1="0%" y1="0%" x2="0%" y2="100%">
21 |               <stop offset="0%" style={{ stopColor: "white", stopOpacity: 1 }}></stop>
22 |               <stop offset="8.1%" style={{ stopColor: "white", stopOpacity: 0.987 }}></stop>
23 |               <stop offset="15.5%" style={{ stopColor: "white", stopOpacity: 0.951 }}></stop>
24 |               <stop offset="22.5%" style={{ stopColor: "white", stopOpacity: 0.896 }}></stop>
25 |               <stop offset="29%" style={{ stopColor: "white", stopOpacity: 0.825 }}></stop>
26 |               <stop offset="35.3%" style={{ stopColor: "white", stopOpacity: 0.741 }}></stop>
27 |               <stop offset="47.1%" style={{ stopColor: "white", stopOpacity: 0.55 }}></stop>
28 |               <stop offset="52.9%" style={{ stopColor: "white", stopOpacity: 0.45 }}></stop>
29 |               <stop offset="58.8%" style={{ stopColor: "white", stopOpacity: 0.352 }}></stop>
30 |               <stop offset="64.7%" style={{ stopColor: "white", stopOpacity: 0.259 }}></stop>
31 |               <stop offset="71%" style={{ stopColor: "white", stopOpacity: 0.175 }}></stop>
32 |               <stop offset="77.5%" style={{ stopColor: "white", stopOpacity: 0.104 }}></stop>
33 |               <stop offset="84.5%" style={{ stopColor: "white", stopOpacity: 0.05 }}></stop>
34 |               <stop offset="91.9%" style={{ stopColor: "white", stopOpacity: 0.013 }}></stop>
35 |               <stop offset="100%" style={{ stopColor: "white", stopOpacity: 0 }}></stop>
36 |             </linearGradient>
37 |           </defs>
38 |           <mask id="eased-gradient-mask-standard-layout">
39 |             <rect x="0" y="0" width="100%" height="100%" fill="url(#eased-gradient-gradient-standard-layout)"></rect>
40 |           </mask>
41 |           <rect x="0" y="0" width="100%" height="100%" mask="url(#eased-gradient-mask-standard-layout)" fill="#fff" style={{ transition: "fill 350ms ease 0s" }}></rect>
42 |         </svg>
43 |       </div>
44 |     </section>
45 |   )
46 | }
47 | 


--------------------------------------------------------------------------------
/src/components/Timeline/2021/index.js:
--------------------------------------------------------------------------------
 1 | import { Zap, Briefcase } from "react-feather"
 2 | import { ButtonSet, DateEntry, Notes, TimelineEntry } from "../Entry"
 3 | 
 4 | export function Year2021() {
 5 |   return (
 6 |     <>
 7 |       <DateEntry title="2021" />
 8 |       <TimelineEntry title="Started as Frontend Developer at De Bijenkorf!" timestamp="December 1st, 2021" Icon={Briefcase} tint="indigo">
 9 |         <Notes>
10 |           <p>As part of Central Group & Signa, De Bijenkorf is one of the largest luxury e-commerce platforms in the Netherlands.</p>
11 |           <p>As as Frontend Developer in one of the most crucial teams of the company - Checkout, I am responsible for making sure that the customer payment journey is smooth, intuitive, and flawless. Serving more than a million unique visitors each month, a frictionless checkout flow is essential. Some of the technologies we use are: React, TypeScript, Redux, Jest, Playwright, React Testing Library, SCSS.</p>
12 |         </Notes>
13 |         <ButtonSet>
14 |           <a className="w-full md:w-auto btn" href="https://www.debijenkorf.nl/" target="_blank" rel="noopener noreferrer">
15 |             <span>view website</span>
16 |           </a>
17 |         </ButtonSet>
18 |       </TimelineEntry>
19 |       <TimelineEntry title="Started as Technical Product Specialist at Framer!" timestamp="April 5, 2021" Icon={Briefcase} tint="indigo">
20 |         <Notes>
21 |           <p>Framer is a digital design tool that allows user to publish their design as a website with a single button push.</p>
22 |           <p>As part of the Customer Success team, I worked as a Technical Product Specialist to integrate this tool into enterprise customer's existing workflow. I lead workshops, did technical demo's, helped users out 1-on-1, and created custom code solutions for them to make their integration and workflow as smooth, useful, and joyful as possible.</p>
23 |         </Notes>
24 |         <ButtonSet>
25 |           <a className="w-full md:w-auto btn" href="https://www.framer.com/" target="_blank" rel="noopener noreferrer">
26 |             <span>view website</span>
27 |           </a>
28 |         </ButtonSet>
29 |       </TimelineEntry>
30 |       <TimelineEntry title='Released "GitHub README Templates"' timestamp="Jan 6, 2021" Icon={Zap} tint="blue">
31 |         <Notes>
32 |           <p>Adding an amazing README to your GitHub project is a great way of introducing new people to the codebase. That's why I've gathered some of the best to get you started in just a few seconds.</p>
33 |         </Notes>
34 |         <ButtonSet>
35 |           <a href="https://www.readme-templates.com/" target="_blank" rel="noopener noreferrer" className="w-full md:w-auto btn">
36 |             <span>view project</span>
37 |           </a>
38 |         </ButtonSet>
39 |       </TimelineEntry>
40 |     </>
41 |   )
42 | }
43 | 


--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
 1 | import { Helmet } from "react-helmet"
 2 | 
 3 | import Hero from "../components/Hero"
 4 | import About from "../components/About"
 5 | import Timeline from "../components/Timeline/Timeline.js"
 6 | import Clients from "../components/Clients"
 7 | import CurrentlyListening from "../components/CurrentlyListening"
 8 | import Footer from "../components/Footer"
 9 | import { useEffect, useState } from "react"
10 | import Contact from "../components/Contact"
11 | 
12 | function Home() {
13 |   const [borderRadius, setBorderRadius] = useState(178)
14 |   const [margin, setMargin] = useState(8)
15 | 
16 |   const windowHeight = window.innerHeight
17 | 
18 |   const listener = () => {
19 |     const scrollFromTop = document.body.getBoundingClientRect().top
20 | 
21 |     if (scrollFromTop > 0) {
22 |       const percentage = (1 / (windowHeight * 0.6)) * (scrollFromTop - 0.4 * windowHeight)
23 | 
24 |       setBorderRadius(percentage * 200)
25 | 
26 |       if (percentage < 0) {
27 |         setMargin(0)
28 |       } else {
29 |         setMargin(percentage * 8)
30 |       }
31 |     } else {
32 |       setBorderRadius(0)
33 |       setMargin(0)
34 |     }
35 |   }
36 | 
37 |   useEffect(() => {
38 |     window.addEventListener("scroll", listener)
39 |     return () => {
40 |       window.removeEventListener("scroll", listener)
41 |     }
42 |   })
43 | 
44 |   return (
45 |     <>
46 |       <Helmet>
47 |         <meta property="og:title" content="Twan Mulder" />
48 |         <meta property="og:description" content="Developer, Product Specialist Specialist, UI/UX enthousiast, occasionally writes." />
49 |         <meta property="og:type" content="website" />
50 |         <meta property="og:image" content="https://www.twanmulder.com/meta-image.png" />
51 |         <meta property="og:image:width" content="1200" />
52 |         <meta property="og:image:height" content="628" />
53 | 
54 |         <meta name="twitter:card" content="summary_large_image" />
55 |         <meta name="twitter:site" content="@toktoktwan" />
56 |         <meta name="twitter:creator" content="Twan Mulder" />
57 |         <meta name="twitter:title" content="Twan Mulder" />
58 |         <meta name="twitter:description" content="Developer, Product Specialist, UI/UX enthousiast, occasionally writes." />
59 |         <meta name="twitter:image" content="https://www.twanmulder.com/social-image.png" />
60 |       </Helmet>
61 |       <Hero />
62 |       <main style={{ "--border-radius": `${borderRadius}px`, "--margin": `${margin}rem` }} className="pb-20 bg-white main opacity-0 slide-up-main">
63 |         <div className="container flex">
64 |           <About />
65 |           <Timeline />
66 |         </div>
67 |         <Clients />
68 |         <Contact />
69 |         <CurrentlyListening />
70 |       </main>
71 |       <Footer />
72 |     </>
73 |   )
74 | }
75 | 
76 | export default Home
77 | 


--------------------------------------------------------------------------------
/src/components/Hero.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react"
 2 | import { GitHub, Twitter } from "react-feather"
 3 | 
 4 | export default function Hero() {
 5 |   const [textOpacity, setTextOpacity] = useState(1)
 6 |   const [textTransform, setTextTransform] = useState(0)
 7 | 
 8 |   const windowHeight = window.innerHeight
 9 | 
10 |   const listener = () => {
11 |     const scrollFromTop = document.body.getBoundingClientRect().top
12 |     if (scrollFromTop > 0) {
13 |       const percentage = (1 / (windowHeight * 0.6)) * (scrollFromTop - 0.4 * windowHeight)
14 |       const transform = (windowHeight / 6 - (windowHeight / 6) * percentage).toFixed(3)
15 | 
16 |       setTextOpacity(percentage)
17 |       setTextTransform(transform)
18 |     } else {
19 |       if (textOpacity !== 0) {
20 |         setTextOpacity(0)
21 |       }
22 |       if (textTransform !== windowHeight) {
23 |         setTextTransform(windowHeight)
24 |       }
25 |     }
26 |   }
27 | 
28 |   useEffect(() => {
29 |     window.addEventListener("scroll", listener)
30 |     return () => {
31 |       window.removeEventListener("scroll", listener)
32 |     }
33 |   })
34 | 
35 |   return (
36 |     <header className="text-white border-white fixed top-0 left-0 right-0 h-screen pt-8 pb-24 -z-1 md:pb-32 bg-gradient-to-tl from-gray-700 via-gray-900 to-black">
37 |       <div className="flex flex-col h-full container" style={{ opacity: textOpacity, transform: `translate3d(0, -${textTransform}px, 0)`, willChange: "opacity, transform" }}>
38 |         <article className="flex flex-col items-start justify-center h-full ">
39 |           <h1 className="transform-gpu translate-y-full opacity-0 fade-up-partial mb-4 tracking-wider uppercase text-md md:text-xl lg:text-2xl">Hey, my name is Twan!</h1>
40 |           <h2 className="transform-gpu translate-y-20 opacity-0 fade-up font-bold mb-4 md:mb-8 text-2xl md:text-3xl lg:text-6xl">
41 |             Front-end Developer focused on React <span className="opacity-30">who loves writing and creating enticing experiences</span>
42 |           </h2>
43 | 
44 |           <div className="transform-gpu translate-y-full opacity-0 fade-up-2 flex items-center gap-4">
45 |             <a className="transition-opacity hover:opacity-50" href="https://github.com/twanmulder" rel="noopener noreferrer" target="_blank">
46 |               <GitHub size={32} />
47 |               <span className="sr-only">Go to GitHub profile</span>
48 |             </a>
49 |             <a className="transition-opacity hover:opacity-50" href="https://twitter.com/toktoktwan" rel="noopener noreferrer" target="_blank">
50 |               <Twitter size={32} />
51 |               <span className="sr-only">Go to Twitter profile</span>
52 |             </a>
53 |             <p>twan.mulder[at]gmail.com</p>
54 |           </div>
55 |         </article>
56 |         <span className="text-sm opacity-0 animate-fade-in">
57 |           <span className="inline-block animate-bounce">↓</span> scroll
58 |         </span>
59 |       </div>
60 |     </header>
61 |   )
62 | }
63 | 


--------------------------------------------------------------------------------
/src/assets/clients/mastercard.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 4 |    xmlns:cc="http://creativecommons.org/ns#"
 5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 6 |    xmlns:svg="http://www.w3.org/2000/svg"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 |    version="1.1"
11 |    id="svg3409"
12 |    viewBox="0 0 1000.008 618.03103"
13 |    height="618.03101"
14 |    width="1000.008"
15 |    inkscape:version="0.92.2 5c3e80d, 2017-08-06"
16 |    sodipodi:docname="MasterCard.svg">
17 |   <sodipodi:namedview
18 |      pagecolor="#ffffff"
19 |      bordercolor="#666666"
20 |      borderopacity="1"
21 |      objecttolerance="10"
22 |      gridtolerance="10"
23 |      guidetolerance="10"
24 |      inkscape:pageopacity="0"
25 |      inkscape:pageshadow="2"
26 |      inkscape:window-width="1680"
27 |      inkscape:window-height="931"
28 |      id="namedview4178"
29 |      showgrid="false"
30 |      inkscape:zoom="0.35355339"
31 |      inkscape:cx="-105.47882"
32 |      inkscape:cy="270.06961"
33 |      inkscape:window-x="0"
34 |      inkscape:window-y="1"
35 |      inkscape:window-maximized="1"
36 |      inkscape:current-layer="g13" />
37 |   <defs
38 |      id="defs3411" />
39 |   <metadata
40 |      id="metadata3414">
41 |     <rdf:RDF>
42 |       <cc:Work
43 |          rdf:about="">
44 |         <dc:format>image/svg+xml</dc:format>
45 |         <dc:type
46 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
47 |         <dc:title></dc:title>
48 |       </cc:Work>
49 |     </rdf:RDF>
50 |   </metadata>
51 |   <g
52 |      transform="matrix(3.3557321,0,0,3.3557321,-1551.7864,-2007.0469)"
53 |      id="layer1">
54 |     <g
55 |        transform="matrix(2.5579399,0,0,2.5579399,884.90115,-11.427398)"
56 |        id="g13">
57 |       <g
58 |          transform="translate(-502.86126,-22.613497)"
59 |          id="XMLID_328_">
60 |         <rect
61 |            style="fill:#ff5f00"
62 |            id="rect19"
63 |            height="56.599998"
64 |            width="31.5"
65 |            class="st1"
66 |            y="268.60001"
67 |            x="380.20001" />
68 |         <path
69 |            style="fill:#eb001b"
70 |            d="m 382.2,296.9 c 0,-11.5 5.4,-21.7 13.7,-28.3 -6.1,-4.8 -13.8,-7.7 -22.2,-7.7 -19.9,0 -36,16.1 -36,36 0,19.9 16.1,36 36,36 8.4,0 16.1,-2.9 22.2,-7.7 -8.3,-6.5 -13.7,-16.8 -13.7,-28.3 z"
71 |            class="st2"
72 |            id="XMLID_330_"
73 |            inkscape:connector-curvature="0" />
74 |         <path
75 |            style="fill:#f79e1b"
76 |            id="path22"
77 |            d="m 454.2,296.9 c 0,19.9 -16.1,36 -36,36 -8.4,0 -16.1,-2.9 -22.2,-7.7 8.4,-6.6 13.7,-16.8 13.7,-28.3 0,-11.5 -5.4,-21.7 -13.7,-28.3 6.1,-4.8 13.8,-7.7 22.2,-7.7 19.9,0 36,16.2 36,36 z"
78 |            class="st3"
79 |            inkscape:connector-curvature="0" />
80 |       </g>
81 |     </g>
82 |   </g>
83 | </svg>
84 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer utilities {
  6 |   .container {
  7 |     padding-left: 1.5rem;
  8 |     padding-right: 1.5rem;
  9 |     margin-left: auto;
 10 |     margin-right: auto;
 11 |     max-width: 1024px;
 12 |   }
 13 | 
 14 |   @media (min-width: 640px) {
 15 |     .container {
 16 |       padding-left: 2rem;
 17 |       padding-right: 2rem;
 18 |     }
 19 |   }
 20 | }
 21 | 
 22 | .btn {
 23 |   @apply px-8 py-2 text-sm text-center transition-colors duration-200 bg-white border rounded-md text-blue-550 border-blue-550 hover:text-white hover:bg-blue-550;
 24 | }
 25 | 
 26 | .timeline > div:first-child {
 27 |   margin-top: 75px;
 28 | }
 29 | 
 30 | .main {
 31 |   margin-top: 100vh;
 32 |   margin-left: calc(0.1 * var(--margin));
 33 |   margin-right: calc(0.1 * var(--margin));
 34 |   border-radius: calc(0.25 * var(--border-radius));
 35 | }
 36 | 
 37 | @media (min-width: 1200px) {
 38 |   .main {
 39 |     margin-top: calc(100vh - 4rem);
 40 |     margin-left: var(--margin);
 41 |     margin-right: var(--margin);
 42 |     border-radius: var(--border-radius);
 43 |   }
 44 | }
 45 | 
 46 | .gradient-mesh {
 47 |   /* background: #e099ff;
 48 |   background-image: radial-gradient(at 41% 10%, hsla(254, 79%, 60%, 1) 0, transparent 42%), radial-gradient(at 91% 33%, hsla(286, 69%, 68%, 1) 0, transparent 46%), radial-gradient(at 5% 92%, hsla(240, 63%, 65%, 1) 0, transparent 56%), radial-gradient(at 10% 65%, hsla(265, 72%, 67%, 1) 0, transparent 59%), radial-gradient(at 21% 49%, hsla(165, 61%, 76%, 1) 0, transparent 54%); */
 49 | }
 50 | 
 51 | @keyframes slide-up {
 52 |   100% {
 53 |     transform: translate3d(0, 0, 0);
 54 |   }
 55 | }
 56 | 
 57 | @keyframes fade-up {
 58 |   100% {
 59 |     transform: translate3d(0, 0, 0);
 60 |     opacity: 1;
 61 |   }
 62 | }
 63 | 
 64 | @keyframes fade-up-partial {
 65 |   100% {
 66 |     transform: translate3d(0, 0, 0);
 67 |     opacity: 0.8;
 68 |   }
 69 | }
 70 | 
 71 | /* .hero-subtitle {
 72 |   font-size: 1rem;
 73 | } */
 74 | /* 
 75 | @media (min-width: 800px) {
 76 |   .hero-subtitle {
 77 |     font-size: 1vmin;
 78 |   }
 79 | }
 80 | 
 81 | @media (min-width: 1200px) {
 82 |   .hero-subtitle {
 83 |     font-size: 2vmin;
 84 |   }
 85 | } */
 86 | 
 87 | .fade-up-partial {
 88 |   animation: fade-up-partial 1.25s cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s forwards;
 89 | }
 90 | 
 91 | .fade-up {
 92 |   animation: fade-up 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) 1s forwards;
 93 | }
 94 | 
 95 | .fade-up-2 {
 96 |   animation: fade-up 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s forwards;
 97 | }
 98 | 
 99 | .slide-up-1 {
100 |   animation: slide-up 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s forwards;
101 | }
102 | 
103 | .slide-up-2 {
104 |   animation: slide-up 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) 1s forwards;
105 | }
106 | 
107 | @keyframes slide-up-main {
108 |   0% {
109 |     opacity: 0;
110 |     transform: translateY(20rem);
111 |   }
112 |   30% {
113 |     opacity: 0;
114 |   }
115 |   100% {
116 |     opacity: 1;
117 |     transform: translateY(0);
118 |   }
119 | }
120 | 
121 | .slide-up-main {
122 |   animation: slide-up-main 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) 1.55s forwards;
123 | }
124 | 


--------------------------------------------------------------------------------
/src/components/CurrentlyListening.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react"
 2 | import { useLastFM } from "use-last-fm"
 3 | import { Music } from "react-feather"
 4 | import FastAverageColor from "fast-average-color"
 5 | 
 6 | export default function CurrentlyListening() {
 7 |   const lastFM = useLastFM("jengelstengel", "b311316612b05f87eb336f4b8b4065ee")
 8 | 
 9 |   useEffect(() => {
10 |     const fac = new FastAverageColor()
11 |     const setBoxShadow = (img) => {
12 |       const size = 80
13 |       const height = img.naturalHeight
14 |       const colorBottom = fac.getColor(img, { top: height - size, height: size })
15 | 
16 |       img.style.boxShadow = `0px 6px 15px -4px ${colorBottom.hex}80`
17 |     }
18 | 
19 |     const img = document.querySelector(".song-art")
20 | 
21 |     // Make sure image is finished loading
22 |     if (lastFM.status === "playing" && img && img.complete) {
23 |       setBoxShadow(img)
24 |     } else if (lastFM.status === "playing" && img && !img.complete) {
25 |       img.addEventListener("load", function () {
26 |         setBoxShadow(img)
27 |       })
28 |     }
29 |   }, [lastFM])
30 | 
31 |   return (
32 |     <div className="container pt-40">
33 |       <div className="px-8 pb-8 border-2 border-blue-550 rounded-3xl">
34 |         <p className="inline-flex items-center px-4 text-lg font-bold -translate-y-4 bg-white text-blue-550 transform-gpu">
35 |           <Music size={24} className="mr-2" />
36 |           Now listening to
37 |         </p>
38 |         {lastFM.status === "connecting" && (
39 |           <div className="flex items-center">
40 |             <div className="flex items-center justify-center w-20 h-20 text-gray-200 bg-gray-100 rounded song-art">
41 |               <Music size={40} />
42 |             </div>
43 |             <div className="ml-4">
44 |               <p className="h-6 mb-2 text-lg bg-gray-100 w-60 animate-pulse"></p>
45 |               <p className="w-40 h-6 bg-gray-100 animate-pulse"></p>
46 |             </div>
47 |           </div>
48 |         )}
49 |         {lastFM.status === "playing" && (
50 |           <div className="flex items-center">
51 |             <img className="h-20 rounded song-art" src={lastFM.song.art} alt={`Album cover of ${lastFM.song.art} by ${lastFM.song.artist}`} crossOrigin="anonymous" />
52 |             <div className="ml-4">
53 |               <p className="text-lg">{lastFM.song.name}</p>
54 |               <p className="text-gray-500">{lastFM.song.artist}</p>
55 |             </div>
56 |           </div>
57 |         )}
58 |         {lastFM.status === "idle" && (
59 |           <div className="flex flex-col items-center justify-center">
60 |             <h2 className="text-xl font-bold">Nothing...</h2>
61 |             <p>Do you know a good song I should listen to?</p>
62 |             <a className="px-8 py-2 mt-4 text-sm text-center text-white transition-colors border rounded-full bg-blue-550 border-blue-550 hover:border-blue-700 hover:bg-blue-700" href="https://twitter.com/messages/compose?recipient_id=843572134110740480&text=Hey Twan, you should listen to:" data-screen-name="@toktoktwan" target="_blank" rel="noreferrer noopener">
63 |               let me know!
64 |             </a>
65 |           </div>
66 |         )}
67 |       </div>
68 |     </div>
69 |   )
70 | }
71 | 


--------------------------------------------------------------------------------
/src/components/Timeline/2020/index.js:
--------------------------------------------------------------------------------
 1 | import { Award } from "react-feather"
 2 | import { BlogPost } from "../BlogPost"
 3 | import { ButtonSet, DateEntry, Notes, TimelineEntry } from "../Entry"
 4 | 
 5 | export function Year2020() {
 6 |   return (
 7 |     <>
 8 |       <DateEntry title="2020" />
 9 |       <TimelineEntry title="Reached 100k unique reads on Medium" timestamp="Dec 24, 2020" Icon={Award} tint="yellow">
10 |         <Notes>
11 |           <p>After publishing articles for multiple publications, they have been able to gain over 100k unique reads on Medium.</p>
12 |         </Notes>
13 |         <ButtonSet>
14 |           <a href="https://medium.com/@toktoktwan" target="_blank" rel="noopener noreferrer" className="w-full md:w-auto btn">
15 |             <span>view profile</span>
16 |           </a>
17 |         </ButtonSet>
18 |       </TimelineEntry>
19 |       <BlogPost timelinetitle="Wrote my first article for Daily.JS" timestamp="November 18, 2020" slug="https://medium.com/dailyjs/whats-the-difference-between-event-handlers-addeventlistener-in-js-963431f05c34" title="What’s the difference between Event Handlers & addEventListener in JS?" description="The difference is subtle but essential to know." />
20 |       {/* <TimelineEntry title='Released the "Your Website Sucks" project' timestamp="Nov 15, 2020" Icon={Zap} tint="blue">
21 |         <Notes>
22 |           <p>A personal project where people send me their website/online product and I tell them why it sucks.</p>
23 |         </Notes>
24 |         <ButtonSet>
25 |           <a href="https://www.thatsanegg.com/your-website-sucks?href=twanmulder.com" target="_blank" rel="noopener noreferrer" className="w-full md:w-auto btn">
26 |             <span>view project</span>
27 |           </a>
28 |         </ButtonSet>
29 |       </TimelineEntry> */}
30 |       {/* <TimelineEntry title={`Reached my first 1000 unique pageviews on "That's an Egg"`} timestamp="May 11, 2020" Icon={Award} tint="yellow">
31 |         <Notes>
32 |           <p>Almost a month after releasing my blog and publishing the first 5 articles, I've been able to gain my first 1000 unique pageviews on "That's an Egg".</p>
33 |         </Notes>
34 |       </TimelineEntry> */}
35 |       {/* <TimelineEntry title={`Published "That's an Egg"`} timestamp="April 18, 2020" Icon={Zap} tint="blue">
36 |         <a target="_blank" rel="noopener noreferrer" href="https://www.thatsanegg.com/?href=twanmulder.com">
37 |           <div className="flex flex-col overflow-hidden transition-shadow bg-white rounded-md shadow md:flex-row hover:shadow-lg">
38 |             <div className="flex flex-col justify-start px-3 py-3 space-y-2 md:w-1/2">
39 |               <h4 className="px-2 pt-2 text-lg font-bold">That's an Egg</h4>
40 |               <p className="flex-1 px-2">Released my very own, personal blog called "That's an Egg". Here, I write about web-development focussed on beginner friendly content.</p>
41 |               <span />
42 |               <div className="btn">view blog</div>
43 |             </div>
44 |             <div className="hidden w-full md:w-1/2 md:inline-block">
45 |               <img src={thatsanegg} alt={`yellow background with the logo of "That's an Egg"`} width="256px" height="341px" />
46 |             </div>
47 |           </div>
48 |         </a>
49 |       </TimelineEntry> */}
50 |       {/* <TimelineEntry title="Expanded to CRO Specialist" timestamp="Jan 1, 2020" Icon={Briefcase} tint="indigo">
51 |         <Notes>
52 |           <p>Expanded my work-role to Developer & CRO Specialist.</p>
53 |         </Notes>
54 |       </TimelineEntry> */}
55 |     </>
56 |   )
57 | }
58 | 


--------------------------------------------------------------------------------
/src/assets/clients/framer.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="202" height="66"><path d="M 0 0 L 43.714 0 L 43.714 21.857 L 21.857 21.857 Z M 0 21.857 L 21.857 21.857 L 43.714 43.714 L 0 43.714 Z M 0 43.714 L 21.857 43.714 L 21.857 65.571 Z" fill="hsl(0, 0%, 0%)"/><path d="M 68.379 17.243 L 86.049 17.243 L 86.049 22.858 L 75.067 22.858 L 75.067 30.661 L 86.049 30.661 L 86.049 36.152 L 75.067 36.152 L 75.067 46.143 L 68.379 46.143 Z M 89.682 26.243 L 95.999 26.243 L 95.999 30.413 C 96.329 28.98 97.004 27.88 98.022 27.11 C 99.066 26.311 100.225 25.913 101.49 25.913 C 102.151 25.913 102.702 25.969 103.141 26.078 L 103.141 31.941 C 102.511 31.865 101.877 31.824 101.242 31.817 C 99.508 31.817 98.202 32.38 97.32 33.509 C 96.441 34.61 95.999 36.261 95.999 38.464 L 95.999 46.143 L 89.685 46.143 L 89.685 26.243 Z M 113.113 46.68 C 111.187 46.68 109.507 46.225 108.076 45.317 C 106.672 44.409 105.556 43.12 104.856 41.601 C 104.113 40.006 103.739 38.201 103.739 36.193 C 103.739 34.211 104.127 32.421 104.897 30.826 C 105.619 29.285 106.765 27.982 108.2 27.069 C 109.657 26.161 111.323 25.706 113.196 25.706 C 114.599 25.706 115.853 26.01 116.953 26.615 C 118.053 27.222 118.879 28.048 119.43 29.092 L 119.43 26.243 L 125.705 26.243 L 125.705 46.143 L 119.43 46.143 L 119.43 43.335 C 118.879 44.326 118.026 45.137 116.87 45.771 C 115.714 46.384 114.422 46.696 113.113 46.68 Z M 114.93 41.436 C 116.443 41.436 117.613 40.941 118.439 39.95 C 119.265 38.959 119.678 37.706 119.678 36.193 C 119.678 34.707 119.265 33.468 118.439 32.477 C 117.613 31.486 116.443 30.991 114.93 30.991 C 113.497 30.991 112.343 31.472 111.462 32.436 C 110.609 33.4 110.182 34.651 110.182 36.193 C 110.182 37.735 110.609 39 111.462 39.991 C 112.343 40.955 113.499 41.436 114.93 41.436 Z M 130.123 26.243 L 136.44 26.243 L 136.44 29.133 C 136.882 28.113 137.596 27.287 138.586 26.656 C 139.606 26.025 140.789 25.706 142.137 25.706 C 145.275 25.706 147.354 26.93 148.371 29.381 C 148.931 28.27 149.807 27.351 150.89 26.739 C 152.048 26.042 153.378 25.685 154.729 25.706 C 159.436 25.706 161.789 28.402 161.789 33.798 L 161.789 46.143 L 155.431 46.143 L 155.431 34.954 C 155.431 33.607 155.183 32.616 154.688 31.982 C 154.192 31.35 153.449 31.032 152.458 31.032 C 151.385 31.032 150.559 31.404 149.981 32.147 C 149.403 32.863 149.114 34.114 149.114 35.904 L 149.114 46.143 L 142.756 46.143 L 142.756 34.913 C 142.756 33.565 142.509 32.587 142.013 31.982 C 141.547 31.35 140.816 31.032 139.827 31.032 C 138.725 31.032 137.885 31.404 137.307 32.147 C 136.729 32.863 136.44 34.114 136.44 35.904 L 136.44 46.143 L 130.125 46.143 L 130.125 26.243 Z M 185.519 35.161 C 185.519 36.013 185.463 36.936 185.351 37.927 L 170.656 37.927 C 170.712 39.221 171.151 40.21 171.977 40.9 C 172.803 41.587 173.92 41.932 175.321 41.932 C 177.276 41.932 178.515 41.339 179.037 40.156 L 185.23 40.156 C 184.926 42.111 183.853 43.692 182.009 44.904 C 180.193 46.087 177.963 46.68 175.321 46.68 C 171.909 46.68 169.225 45.757 167.27 43.913 C 165.344 42.068 164.38 39.496 164.38 36.193 C 164.38 34.046 164.82 32.188 165.701 30.619 C 166.552 29.052 167.864 27.784 169.458 26.986 C 171.083 26.134 172.968 25.706 175.117 25.706 C 177.152 25.706 178.954 26.105 180.523 26.904 C 182.119 27.703 183.345 28.817 184.197 30.248 C 185.079 31.681 185.519 33.318 185.519 35.161 Z M 179.282 34.005 C 179.255 32.684 178.884 31.678 178.167 30.991 C 177.453 30.304 176.419 29.959 175.071 29.959 C 173.723 29.959 172.65 30.33 171.851 31.074 C 171.081 31.79 170.682 32.766 170.653 34.005 Z M 188.304 26.243 L 194.621 26.243 L 194.621 30.413 C 194.951 28.98 195.626 27.88 196.644 27.11 C 197.632 26.332 198.854 25.91 200.112 25.913 C 200.772 25.913 201.324 25.969 201.763 26.078 L 201.763 31.941 C 201.133 31.865 200.499 31.824 199.864 31.817 C 198.13 31.817 196.824 32.38 195.942 33.509 C 195.06 34.61 194.621 36.261 194.621 38.464 L 194.621 46.143 L 188.304 46.143 Z" fill="hsl(0, 0%, 0%)"/></svg>


--------------------------------------------------------------------------------
/src/assets/clients/porsche.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 3 | <svg
 4 |    xmlns:svg="http://www.w3.org/2000/svg"
 5 |    xmlns="http://www.w3.org/2000/svg"
 6 |    version="1.0"
 7 |    width="210"
 8 |    height="25"
 9 |    id="svg2641">
10 |   <defs
11 |      id="defs2643" />
12 |   <g
13 |      id="layer1">
14 |     <path
15 |        d="M 36.026,19.19 L 58.11,19.19 C 59.11,19.19 59.92,18.382 59.92,17.393 L 59.92,7.608 C 59.92,6.62 59.11,5.811 58.11,5.811 L 36.026,5.811 C 35.026,5.811 34.216,6.62 34.216,7.608 L 34.216,17.393 C 34.217,18.382 35.026,19.19 36.026,19.19 L 36.026,19.19 z M 37.43,8.407 L 56.807,8.407 C 57.139,8.407 57.41,8.677 57.41,9.006 L 57.41,15.996 C 57.41,16.325 57.139,16.595 56.807,16.595 L 37.43,16.595 C 37.098,16.595 36.827,16.325 36.827,15.996 L 36.827,9.006 C 36.827,8.676 37.098,8.407 37.43,8.407 L 37.43,8.407 z"
16 |        id="O"
17 |        style="fill-rule:evenodd" />
18 |     <path
19 |        d="M 5,19.19 L 7.61,19.19 L 7.61,15.996 L 28.795,15.996 C 29.844,15.996 30.703,15.142 30.703,14.099 L 30.703,7.708 C 30.703,6.665 29.844,5.811 28.795,5.811 L 7.61,5.811 L 6.907,5.811 L 5,5.811 L 5,7.708 L 5,14.099 L 5,19.19 L 5,19.19 z M 7.61,13.399 L 7.61,8.407 L 8.312,8.407 L 25.38,8.407 L 27.288,8.407 C 27.729,8.407 28.091,8.766 28.091,9.206 L 28.091,12.601 C 28.091,13.04 27.73,13.4 27.288,13.4 L 25.38,13.4 L 8.313,13.4 L 7.61,13.4 L 7.61,13.399 z"
20 |        id="P"
21 |        style="fill-rule:evenodd" />
22 |     <path
23 |        d="M 63.333,19.19 L 65.944,19.19 L 65.944,15.996 L 84.762,15.996 L 86.411,19.19 L 89.233,19.19 L 87.558,15.947 C 88.402,15.752 89.035,14.995 89.035,14.098 L 89.035,7.707 C 89.035,6.664 88.177,5.81 87.128,5.81 L 65.944,5.81 L 65.241,5.81 L 63.333,5.81 L 63.333,7.707 L 63.333,14.098 L 63.333,19.19 L 63.333,19.19 z M 65.944,13.399 L 65.944,8.407 L 66.646,8.407 L 83.714,8.407 L 85.621,8.407 C 86.063,8.407 86.425,8.766 86.425,9.206 L 86.425,12.601 C 86.425,13.04 86.064,13.4 85.621,13.4 L 83.714,13.4 L 66.646,13.4 L 65.944,13.4 L 65.944,13.399 z"
24 |        id="R"
25 |        style="fill-rule:evenodd" />
26 |     <polygon
27 |        points="150.683,106.251 153.294,106.251 153.294,100.859 172.47,100.859 172.47,106.251 175.081,106.251 175.081,92.871 172.47,92.871 172.47,98.264 153.294,98.264 153.294,92.871 150.683,92.871 150.683,106.251 "
28 |        transform="translate(0,-87.061)"
29 |        id="H"
30 |        style="fill-rule:evenodd" />
31 |     <path
32 |        d="M 124.38,19.19 L 146.768,19.19 L 146.768,16.56 C 146.705,16.582 146.637,16.594 146.567,16.594 L 125.784,16.594 C 125.454,16.594 125.181,16.324 125.181,15.995 L 125.181,9.005 C 125.181,8.676 125.453,8.406 125.784,8.406 L 146.567,8.406 C 146.637,8.406 146.705,8.419 146.768,8.441 L 146.768,5.81 L 124.38,5.81 C 123.381,5.81 122.571,6.619 122.571,7.607 L 122.571,17.392 C 122.571,18.382 123.381,19.19 124.38,19.19 L 124.38,19.19 z"
33 |        id="C"
34 |        style="fill-rule:evenodd" />
35 |     <polygon
36 |        points="179.097,106.251 180.604,106.251 181.708,106.251 205,106.251 205,103.655 181.708,103.655 181.708,100.859 205,100.859 205,98.264 181.708,98.264 181.708,95.468 205,95.468 205,92.871 181.708,92.871 180.604,92.871 179.097,92.871 179.097,106.251 "
37 |        transform="translate(0,-87.061)"
38 |        id="E"
39 |        style="fill-rule:evenodd" />
40 |     <path
41 |        d="M 96.266,9.605 L 96.266,9.005 C 96.266,8.676 96.537,8.406 96.868,8.406 L 117.652,8.406 C 117.722,8.406 117.79,8.419 117.852,8.441 L 117.852,5.81 L 95.464,5.81 C 94.464,5.81 93.654,6.619 93.654,7.607 L 93.654,8.406 L 93.654,9.604 L 93.654,12 C 93.654,12.988 94.464,13.797 95.464,13.797 L 97.37,13.797 L 97.37,13.831 C 97.433,13.81 97.5,13.797 97.57,13.797 L 114.638,13.797 C 114.97,13.797 115.241,14.067 115.241,14.397 L 115.241,15.395 L 115.241,15.995 C 115.241,16.324 114.97,16.594 114.638,16.594 L 93.855,16.594 C 93.785,16.594 93.717,16.582 93.654,16.56 L 93.654,19.19 L 116.042,19.19 C 117.042,19.19 117.852,18.381 117.852,17.393 L 117.852,16.594 L 117.852,15.396 L 117.852,13 C 117.852,12.011 117.042,11.202 116.042,11.202 L 114.138,11.202 L 114.138,11.168 C 114.074,11.19 114.007,11.202 113.936,11.202 L 96.867,11.202 C 96.536,11.202 96.265,10.932 96.265,10.602 L 96.265,9.605 L 96.266,9.605 z"
42 |        id="S"
43 |        style="fill-rule:evenodd" />
44 |   </g>
45 | </svg>
46 | 


--------------------------------------------------------------------------------
/src/assets/ButtonAccent.js:
--------------------------------------------------------------------------------
 1 | export default function ButtonAccent() {
 2 |   return (
 3 |     <svg xmlns="http://www.w3.org/2000/svg" width="49" height="49" viewBox="0 0 49 49" fill="none" className="absolute -right-8 -bottom-8">
 4 |       <path
 5 |         d="M7.74541 24.3853L7.32436 23.9642L6.72354 24.0914L6.70598 23.7713L5.96259 23.5629L5.55474 23.8611L5.44726 23.473L4.57888 23.7756L4.69729 24.0168L4.42318 24.291C4.63151 24.7142 4.59642 25.2273 5.04815 25.4905C4.97079 25.5993 4.93183 25.7307 4.93738 25.8641C4.94294 25.9975 4.99274 26.1253 5.07889 26.2273C5.33765 26.6352 5.35517 27.179 5.66218 27.4992C6.02839 27.8654 6.08758 28.3632 6.32441 28.7623C6.59853 29.2557 6.88141 29.7579 7.10728 30.2908C7.33315 30.8236 7.53711 31.3784 7.97569 31.7907C8.25638 32.8521 8.98881 33.681 9.49318 34.6239C9.84387 35.3972 10.2808 36.1285 10.7958 36.8037C10.9997 37.0383 10.9734 37.4506 11.5172 37.3497C11.3834 37.8037 11.4098 38.1545 11.7365 38.4462C11.9597 38.6716 12.1429 38.9333 12.2781 39.2203C12.6858 39.9336 13.1346 40.6226 13.6224 41.2838C14.0369 41.9131 14.5369 42.4877 14.936 43.1104C15.471 43.9525 16.2583 44.5249 16.8942 45.2486C17.0446 45.3498 17.2039 45.4372 17.3701 45.5095C17.5258 45.6257 17.6354 45.8713 17.7955 45.8998C17.9556 45.9283 18.0148 46.1191 18.1354 46.1827C18.3108 46.3012 18.4994 46.402 18.7187 46.5336C18.8963 46.4832 19.1573 46.6564 19.381 46.4327C19.4298 46.4052 19.485 46.3907 19.5411 46.3907C19.5971 46.3907 19.6523 46.4052 19.7011 46.4327C20.0783 46.8582 20.5016 46.6191 20.9445 46.5051C21.5542 46.0314 21.6704 45.3889 21.3941 44.6477C21.3592 44.544 21.3097 44.4458 21.2471 44.3561C20.979 44.0553 20.7417 43.7283 20.5388 43.3802C20.349 43.0197 20.0974 42.6953 19.7954 42.4219C19.5191 42.1456 19.1222 41.8934 19.0301 41.5601C18.938 41.2268 18.4183 41.1061 18.517 40.6698C18.1332 40.6807 18.2451 40.2005 17.96 40.1127C17.9315 39.7421 17.6003 39.5953 17.4315 39.3255C17.2626 39.0558 17.0916 38.8409 16.9469 38.5953C16.4682 37.7938 15.9333 37.0272 15.3461 36.3015C15.3088 35.7686 14.6838 35.6129 14.5961 35.0866C14.5215 34.6349 14.1356 34.3191 13.8987 33.9507C13.6312 33.5296 13.3242 33.1086 13.0281 32.6942C12.7321 32.2797 12.515 31.8916 12.2453 31.4947C11.8461 30.9114 11.5896 30.2293 11.1181 29.6833C11.151 29.2118 10.6028 29.0978 10.5304 28.657C10.425 28.2775 10.2328 27.9277 9.96904 27.6351C9.43617 26.9005 9.18398 26.0299 8.70373 25.2778L8.34629 24.7142L7.84192 25.087L7.74541 24.3853Z"
 6 |         fill="#ffffff"
 7 |       />
 8 |       <path
 9 |         d="M24.5322 27.5715L24.5322 27.7513L25.1704 27.6176L24.984 28.0057C25.1813 28.1592 25.3787 28.4355 25.6024 28.4618C25.9664 28.5013 25.8655 28.8653 26.109 28.9684C26.3524 29.0715 26.4795 29.3741 26.6856 29.4004C27.0212 29.4421 27.1264 29.714 27.3523 29.8478C27.5884 29.9714 27.8316 30.0812 28.0804 30.1767L28.3347 30.6635L28.9553 30.4815L28.7009 30.964C29.5649 31.1964 30.043 32.0341 30.8675 32.306L31.1877 32.1043L31.021 32.4858L31.5758 32.8082L31.9355 32.5187L31.975 32.7687L32.3434 32.8915L32.2052 33.249L32.9311 33.3739L33.2337 33.1327L33.4354 33.773C33.9573 33.6897 34.5121 33.9726 35.0604 33.6919L35.0735 33.4113C35.3016 33.4113 35.3235 33.4945 35.1876 33.8761C35.2235 33.9175 35.2624 33.9564 35.3038 33.9923C35.3491 34.0071 35.3965 34.0145 35.4441 34.0143L35.6042 33.6042L36.113 33.3805L35.6261 33.1437L36.1744 32.8148L35.4661 32.545L35.4419 32.7841L34.9376 32.6218L35.341 32.2183L35.1569 31.6525L33.92 31.135C33.6577 30.8092 33.3197 30.5525 32.9354 30.3872L32.9223 30.1109L32.3389 29.9048L32.3214 30.1416C32.2726 30.1464 32.2234 30.138 32.1789 30.1175C32.0298 29.828 31.9859 29.4333 31.5013 29.4136C31.4114 29.4114 31.3302 29.1724 31.2469 29.0364C31.0809 28.743 30.8473 28.4934 30.5654 28.3084C30.2836 28.1234 29.9616 28.0083 29.6264 27.9728C29.5702 27.8396 29.4956 27.7148 29.4049 27.6022C29.2864 27.4838 28.9882 27.4049 28.9948 27.3281C29.0342 26.929 28.6768 27.1023 28.5408 26.9707C28.4128 26.8325 28.2555 26.7245 28.0804 26.6549C27.7423 26.5 27.429 26.296 27.1506 26.0496C26.1675 25.2851 25.118 24.6099 24.0147 24.0322C23.1752 23.553 22.3107 23.1189 21.4249 22.7318C20.8339 22.4487 20.2019 22.2607 19.5522 22.1748C18.982 22.1441 18.3855 22.0257 17.7671 22.1792L17.6991 22.484L17.4776 22.4994L17.4952 23.359C17.6227 23.4442 17.7693 23.4967 17.9219 23.5116C18.0746 23.5265 18.2286 23.5034 18.3702 23.4445L18.0478 23.8809L18.2189 24.0519L18.5215 23.916L18.596 24.2493L18.9075 24.2931L18.9272 24.8479C19.2056 24.801 19.487 24.7746 19.7692 24.769C20.0192 24.7822 20.1771 25.1769 20.5456 24.9313L20.6135 24.6089L21.0324 24.9883L20.6157 25.0102C20.7239 25.1445 20.8553 25.2582 21.0038 25.3457C21.3011 25.4479 21.5852 25.5848 21.8503 25.7536C22.1021 25.905 22.3412 26.0766 22.5652 26.2668C22.7691 26.4312 23.0191 26.5409 23.2252 26.7032C23.4314 26.8654 23.6112 27.1154 23.8393 27.2689C24.0594 27.393 24.2916 27.4945 24.5322 27.5715Z"
10 |         fill="#ffffff"
11 |       />
12 |       <path
13 |         d="M43.1785 16.4206L43.6806 15.9185C43.6934 15.7098 43.6533 15.5012 43.564 15.3122C43.4747 15.1232 43.339 14.9599 43.1697 14.8374L42.7245 14.9492C42.5732 14.3111 41.8934 14.6882 41.6675 14.2957C40.9329 14.1532 40.183 14.2233 39.4681 14.0259C39.3562 14.0094 39.2426 14.0079 39.1304 14.0216C38.3415 14.0165 37.5547 13.9402 36.7796 13.7935C36.2386 13.7139 35.6926 13.6736 35.1458 13.6729C34.5516 13.6702 33.9602 13.5891 33.3871 13.4317C33.2753 13.4153 33.1617 13.4138 33.0494 13.4273C32.6013 13.454 32.1518 13.4444 31.7052 13.3988C31.3598 13.3642 31.0128 13.3495 30.6657 13.3549C30.0661 13.3446 29.4663 13.3702 28.8698 13.4317C28.2667 13.469 27.6614 13.4865 27.065 13.5611C26.8086 13.6228 26.5606 13.7148 26.326 13.8352L26.394 14.8724C26.4663 15.1377 26.8676 14.9075 27.1439 15.0303L27.1812 15.322L28.1198 15.9403C29.3171 16.0588 30.6636 16.2561 32.0232 16.3351C32.6883 16.3704 33.348 16.4733 33.9924 16.6421C34.4772 16.7221 34.968 16.7609 35.4594 16.7583C36.759 16.9024 38.0681 16.9398 39.3737 16.8702C40.5996 16.7671 41.8386 16.8921 43.1785 16.4206Z"
14 |         fill="#ffffff"
15 |       />
16 |     </svg>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/src/pages/WebsiteSucks.js:
--------------------------------------------------------------------------------
  1 | import { useEffect } from "react"
  2 | import { Helmet } from "react-helmet"
  3 | 
  4 | import Book from "../components/Book"
  5 | import Footer from "../components/Footer"
  6 | 
  7 | import Twan from "../assets/twan_transparent.png"
  8 | import ButtonAccent from "../assets/ButtonAccent"
  9 | 
 10 | import { Star, Twitter } from "react-feather"
 11 | 
 12 | const waitForIFrameResize = () => {
 13 |   if (!window.iFrameResize) {
 14 |     return setTimeout(waitForIFrameResize, 50)
 15 |   }
 16 | 
 17 |   window.iFrameResize({ log: false, checkOrigin: false }, "#testimonialto-your-website-sucks-light")
 18 | }
 19 | 
 20 | export default function WebsiteSucks() {
 21 |   useEffect(() => {
 22 |     waitForIFrameResize()
 23 |   }, [])
 24 | 
 25 |   return (
 26 |     <>
 27 |       <Helmet>
 28 |         <meta property="og:title" content="Your Website Sucks" />
 29 |         <meta property="og:description" content="Learn the 5 pillars of creating a website that gets you from visitors, to conversions." />
 30 |         <meta property="og:type" content="website" />
 31 |         <meta property="og:image" content="https://www.twanmulder.com/meta-book.png" />
 32 |         <meta property="og:image:width" content="1200" />
 33 |         <meta property="og:image:height" content="628" />
 34 | 
 35 |         <meta name="twitter:card" content="summary_large_image" />
 36 |         <meta name="twitter:site" content="@toktoktwan" />
 37 |         <meta name="twitter:creator" content="Twan Mulder" />
 38 |         <meta name="twitter:title" content="Your Website Sucks" />
 39 |         <meta name="twitter:description" content="Learn the 5 pillars of creating a website that gets you from visitors, to conversions." />
 40 |         <meta name="twitter:image" content="https://www.twanmulder.com/social-book.png" />
 41 |       </Helmet>
 42 |       <header style={{ background: "linear-gradient(45deg, #FF7B00, #FFC300)" }} className="pt-40 pb-16">
 43 |         <nav></nav>
 44 |         <section className="flex items-center justify-between max-w-4xl px-12 mx-auto">
 45 |           <div>
 46 |             <h1 className="text-5xl font-black text-white md:text-7xl">
 47 |               Your
 48 |               <br />
 49 |               Website
 50 |               <br />
 51 |               Sucks
 52 |             </h1>
 53 |             <h2 className="mt-2 text-xl tracking-widest text-white uppercase opacity-75 md:text-3xl">And I'll help you fix it</h2>
 54 |             <div className="mt-8">
 55 |               <div className="relative block mr-6 md:inline-block">
 56 |                 <a className="inline-block w-full px-6 py-3 text-xl font-bold text-center transition bg-white rounded-lg md:w-auto hover:opacity-90 transform-gpu hover:-translate-y-1" href="https://flurly.com/p/your-website-sucks">
 57 |                   Buy the Book
 58 |                 </a>
 59 |                 <ButtonAccent />
 60 |               </div>
 61 |               <a className="inline-block mt-4 text-sm text-white transition hover:opacity-75 md:mt-0 md:text-base" href="./your-website-sucks-sample.pdf" download>
 62 |                 or get a chapter for free
 63 |               </a>
 64 |             </div>
 65 |           </div>
 66 |           <Book />
 67 |         </section>
 68 |         <section className="grid max-w-4xl grid-rows-3 gap-4 px-12 pt-32 mx-auto md:gap-0 md:grid-cols-3">
 69 |           <article className="flex flex-col items-center text-center text-white">
 70 |             <div className="flex gap-1">
 71 |               <Star fill="#fff" size={16} />
 72 |               <Star fill="#fff" size={16} />
 73 |               <Star fill="#fff" size={16} />
 74 |               <Star fill="#fff" size={16} />
 75 |               <Star fill="#fff" size={16} />
 76 |             </div>
 77 |             <p className="mt-1 text-sm opacity-75">"Great & straight-to-the-point!"</p>
 78 |           </article>
 79 |           <article className="flex flex-col items-center text-center text-white">
 80 |             <div className="flex gap-1">
 81 |               <Star fill="#fff" size={16} />
 82 |               <Star fill="#fff" size={16} />
 83 |               <Star fill="#fff" size={16} />
 84 |               <Star fill="#fff" size={16} />
 85 |               <Star fill="#fff" size={16} />
 86 |             </div>
 87 |             <p className="mt-1 text-sm opacity-75">"100% recommendation!"</p>
 88 |           </article>
 89 |           <article className="flex flex-col items-center text-center text-white">
 90 |             <div className="flex gap-1">
 91 |               <Star fill="#fff" size={16} />
 92 |               <Star fill="#fff" size={16} />
 93 |               <Star fill="#fff" size={16} />
 94 |               <Star fill="#fff" size={16} />
 95 |               <Star fill="#fff" size={16} />
 96 |             </div>
 97 |             <p className="mt-1 text-sm opacity-75">"Concise with great examples!"</p>
 98 |           </article>
 99 |         </section>
100 |       </header>
101 |       <main className="pb-32">
102 |         <section className="z-10 max-w-4xl p-8 mx-auto -mt-6 bg-white shadow-2xl md:-mt-16 md:p-12 rounded-3xl">
103 |           <div className="prose max-w-none">
104 |             <p className="text-center">
105 |               <strong>Learn the 5 pillars of creating a website that gets you from visitors, to conversions.</strong>
106 |             </p>
107 |             <h2>Hey, your website sucks!</h2>
108 |             <p>A pretty bold statement. One I firmly believe in and stand by.</p>
109 |             <p>At the time of writing, there are over 2 billion websites on the internet. 400 million of those are active. </p>
110 |             <p>
111 |               And I'm sure that{" "}
112 |               <strong>
113 |                 <em>all of them suck</em>
114 |               </strong>
115 |               .
116 |             </p>
117 |             <p>Working as a Developer and CRO Specialist for companies like Accenture and marketing agencies, I have a lot of experience creating and/or reviewing websites for clients like Audi, Virgin Media, and Porsche.</p>
118 |             <p>Even though there's an amazing amount of great working, good looking websites out there, not one of them is perfect.</p>
119 |             <p>That's why I'd love to help you improve yours!</p>
120 |             <p>In this e-book, we'll go through 5 different pillars of creating a website that gets you the results you want.</p>
121 |             <p>
122 |               There are still a{" "}
123 |               <strong>
124 |                 <em>ton</em>
125 |               </strong>{" "}
126 |               of different things you can work on to improve your website, but these 5 ones are the ones I've found had the most long-term impact.
127 |             </p>
128 |             <h2>Chapters</h2>
129 |             <ol>
130 |               <li>
131 |                 <strong>Target Audience</strong>
132 |               </li>
133 |               <li>
134 |                 <strong>Value Proposition</strong>
135 |               </li>
136 |               <li>
137 |                 <strong>SEO</strong>
138 |               </li>
139 |               <li>
140 |                 <strong>Design &amp; Layout</strong>
141 |               </li>
142 |               <li>
143 |                 <strong>Page Speed</strong>
144 |               </li>
145 |             </ol>
146 |             <h2>Who is this book for?</h2>
147 |             <p>If you're currently not getting the results you want from your own website and want to understand the core reasons of why that is, this book is for you! </p>
148 |             <p>It doesn't matter if you're a Designer, Developer, SaaS Founder, or anything else. As long as you want to make a positive change on the impact your website has, it'll be a great match!</p>
149 |             <h2>Refund Policy</h2>
150 |             <p>If you're not 100% satisfied with the purchase, or it's not what you were expecting, just reply to the download email within 30 days, and you'll get a full refund. No questions asked.</p>
151 |             <iframe title="Testimonials" id="testimonialto-your-website-sucks-light" src="https://embed.testimonial.to/w/your-website-sucks?theme=light&card=base" frameBorder="0" scrolling="no" width="100%"></iframe>
152 |             <p>
153 |               Not convinced just yet?&nbsp;
154 |               <a className="font-bold transition hover:opacity-75" href="./your-website-sucks-sample.pdf" download>
155 |                 Read a sample chapter before committing
156 |               </a>
157 |             </p>
158 |           </div>
159 |           <a style={{ background: "linear-gradient(45deg, #FF7B00, #FFC300)" }} className="block w-full px-6 py-3 mt-8 text-xl font-bold text-center text-white no-underline transition rounded-lg shadow-lg md:inline-block bg-blue-550 md:w-auto hover:opacity-90 transform-gpu hover:-translate-y-1" href="https://flurly.com/p/your-website-sucks">
160 |             Buy the Book
161 |           </a>
162 |         </section>
163 |         <section className="mt-16">
164 |           <img className="max-w-xs mx-auto md:max-w-sm" src={Twan} alt="" />
165 |           <article style={{ background: "linear-gradient(45deg, #FF7B00, #FFC300)" }} className="flex flex-col justify-between max-w-4xl p-8 mx-auto text-white shadow-2xl md:items-center md:p-12 rounded-3xl bg-blue-550 md:flex-row">
166 |             <div className="max-w-lg">
167 |               <p className="mb-8 text-5xl font-bold">
168 |                 Turn Visitors,
169 |                 <br /> Into Customers
170 |               </p>
171 |               <p>Get a personalized 20min. breakdown of your website.</p>
172 |               <p>Learn where your users get stuck and increase your MMR without spending thousands of dollars.</p>
173 |             </div>
174 |             <div className="mt-8 md:mt-0">
175 |               <a className="inline-flex items-center justify-center w-full px-6 py-3 mb-4 text-xl font-bold text-center text-black transition bg-white rounded-lg md:justify-start md:w-auto hover:opacity-90 transform-gpu hover:-translate-y-1" href="https://twitter.com/messages/compose?recipient_id=843572134110740480&text=Hey%20Twan,%20tell%20me%20more%20about%20the%20personalised%20breakdown%20you%20offer" target="_blank" rel="noreferrer noopener">
176 |                 <Twitter size={20} />
177 |                 <span className="ml-2">Get in Touch</span>
178 |               </a>
179 |               <p>
180 |                 Prefer email?
181 |                 <br />
182 |                 You can reach out to me
183 |                 <br />
184 |                 at twan.mulder@gmail.com
185 |               </p>
186 |             </div>
187 |           </article>
188 |         </section>
189 |       </main>
190 |       <Footer />
191 |     </>
192 |   )
193 | }
194 | 


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