{"version":3,"sources":["App.js","serviceWorker.js","index.js"],"names":["HeroContainer","styled","div","ColumnTitles","h1","ColumnText","span","ColumnTextSmall","opacity","ColumnLinkText","a","hoverColor","LineContainer","LinesContainer","TextFlexContainer","direction","Title","LineBackground","LineForeground","width","TextContainer","LineAndTextContainer","LineTitleContainer","Subtitle","MyStuff","Footer","lineWidth","svg","App","useEffect","script","document","createElement","src","body","appendChild","links","projects","workedForCompanies","experience","name","skill","leftText","rightText","experiences","id","Row","noGutters","Col","xs","sm","md","style","color","map","x","i","key","target","href","marginBottom","length","marginTop","flexDirection","textAlign","justifyContent","Boolean","window","location","hostname","match","ReactDOM","render","StrictMode","getElementById","navigator","serviceWorker","ready","then","registration","unregister","catch","error","console","message"],"mappings":"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","file":"static/js/main.8cd1b307.chunk.js","sourcesContent":["import React, {useEffect} from 'react';\nimport styled from \"styled-components\";\nimport {Col, Row} from \"react-bootstrap\";\n\nconst HeroContainer = styled.div`\n display: flex;\n min-height: 100vh;\n`;\n\nconst ColumnTitles = styled.h1`\n font-size: 2.3rem;\n font-family: \"Hack\";\n font-weight: bold;\n color: white;\n \n @media (min-width: 576px) {\n font-size: 2.3rem;\n }\n @media (min-width: 992px) {\n font-size: 4.3rem;\n }\n @media (min-width: 1200px) {\n font-size: 4.45rem;\n }\n`;\n\nconst ColumnText = styled.span`\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n font-size: 1rem;\n font-family: \"Hack\";\n font-weight: bold;\n color: white;\n flex: .6;\n \n @media (min-width: 576px) {\n font-size: 1.25rem;\n }\n @media (min-width: 992px) {\n font-size: 1.5rem;\n }\n @media (min-width: 1200px) {\n font-size: 1.6rem;\n }\n`;\n\n\n\nconst ColumnTextSmall = styled.span`\n display: flex;\n align-content: center;\n font-size: 1rem;\n font-family: \"Hack\";\n font-weight: bold;\n color: white;\n opacity: ${({opacity}) => opacity ?? \"0.4\"};\n \n @media (min-width: 576px) {\n font-size: 1rem;\n }\n @media (min-width: 992px) {\n font-size: 1.25rem;\n }\n @media (min-width: 1200px) {\n font-size: 1.5rem;\n }\n`;\n\nconst ColumnTextSmallMail = styled(ColumnTextSmall)`\n font-weight: bold;\n`;\n\nconst ColumnLinkText = styled.a`\n font-size: 1rem;\n font-family: \"Hack\";\n font-weight: bold;\n color: white;\n \n &:hover {\n text-decoration: underline;\n color: ${({hoverColor}) => hoverColor ?? \"blue\"}; \n }\n \n \n @media (min-width: 576px) {\n font-size: 1rem;\n }\n @media (min-width: 992px) {\n font-size: 1.25rem;\n }\n @media (min-width: 1200px) {\n font-size: 1.5rem;\n }\n`;\n\n\nconst LineContainer = styled.div`\n display: flex;\n align-content: center;\n justify-content: center;\n width: 100%;\n margin: .5rem 0;\n`;\n\nconst LinesContainer = styled.div`\n align-self: center;\n position: relative;\n width: 100%;\n margin-bottom: .5rem;\n`;\n\nconst TextFlexContainer = styled.div`\n display: flex;\n flex-direction: ${({direction}) => direction ?? \"row\"};\n width: 100%;\n`;\n\n\nconst Title = styled.div`\n font: bolder 9.5vw \"Hack\";\n color: white;\n z-index:1;\n \n @media (min-width: 576px) { font-size: 9.5vw; }\n @media (min-width: 992px) { font-size: 7.5vw; }\n @media (min-width: 1200px) { font-size: 7vw; }\n`;\n\nconst LineBackground = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n height: 4px;\n background-color: #514571;\n border-radius: 2px;\n z-index: 2;\n width: 100%;\n align-self: center;\n flex: 1;\n`;\n\nconst LineForeground = styled(LineBackground)`\n position: relative;\n width: ${({width}) => width ?? \"100%\"};\n z-index: 3;\n background-color: #E94057;\n opacity: 1;\n`;\n\nconst TextContainer = styled.div`\n position: absolute;\n padding: 0 .5rem;\n align-self: center;\n @media (min-width: 576px) { padding: 0 1rem; }\n @media (min-width: 992px) { padding: 0 2rem; }\n @media (min-width: 1200px) { padding: 0 2.5rem; }\n`;\n\nconst LineAndTextContainer = styled.div`\n flex: 1;\n display: flex;\n justify-content: center;\n align-content: center;\n margin: .5rem 1rem;\n flex-direction: column;\n`;\n\nconst LineTitleContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-content: center;\n`;\n\nconst Subtitle = styled(Title)`\n font: bold 4vw \"Hack\";\n mix-blend-mode: soft-light; \n text-transform: uppercase;\n text-shadow: none; \n \n @media (min-width: 576px) { font-size: 4.5vw; }\n @media (min-width: 992px) { font-size: 3.25vw; }\n @media (min-width: 1200px) { font-size: 2.75vw; }\n`;\n\nconst MyStuff = styled.div`\n padding: 1rem .5rem;\n \n @media (min-width: 576px) { padding: 1rem 1rem; }\n @media (min-width: 992px) { padding: 1rem 2rem; }\n @media (min-width: 1200px) { padding: 1rem 2.5rem; }\n @media (min-width: 1200px) { padding: 1rem 2.5rem; max-width: 1200px; margin: auto; }\n`;\n\nconst ExperienceContainer = styled.div`\n display: flex;\n`;\n\nconst ExperienceLine = styled.div`\n position: relative;\n`;\n\nconst ExperienceLineContainer = styled.div`\n border-left: ${({lineWidth}) => `${lineWidth}px` ?? \"5px\"} solid rgba(216,27,96, 0.40);\n width: ${({lineWidth}) => `${lineWidth}px` ?? \"5px\"};\n height: 100%;\n`;\n\nconst ExperienceTextContainer = styled.div`\n padding: .5rem;\n \n`;\n\nconst Footer = styled.div`\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n width: 100%;\n padding: 1rem 0;\n margin: 2rem 0 0 0;\n \n border-top: 3px solid #514571;\n \n @media (min-width: 576px) { padding: 1rem 1rem; margin: 2rem 0 0 0; }\n @media (min-width: 992px) { padding: 2rem 1rem; margin: 2rem 0 0 0; }\n @media (min-width: 1200px) { padding: 2.5rem 1rem; margin: 4rem 0 0 0 }\n`;\n\n\nconst Dot = styled.svg`\n position: absolute;\n top: ${({lineWidth}) => `${lineWidth / 2}px`};\n left: ${({lineWidth}) => `-${lineWidth / 2}px`};\n`;\n\nfunction App() {\n useEffect(() => {\n const script = document.createElement(\"script\");\n script.src = \"index.js\";\n document.body.appendChild(script);\n });\n\n const links = [\n [\"https://drive.google.com/file/d/1HVq7RilavxQPcDgmYR_3yRpLljLH3FZF/view?usp=sharing\", \"Résumé\"],\n [\"https://github.com/Thomas-X\", \"Github\"],\n [\"https://gitlab.com/Thomas-X\", \"Gitlab\"],\n [\"https://www.linkedin.com/in/thomas-zwarts-170753158\", \"Linkedin\"],\n ];\n\n const projects = [\n [\"https://github.com/Thomas-X/sendai\", \"Sendai\"],\n [\"https://github.com/Thomas-X/channelbot-3\", \"Channelbot 3\"],\n [\"https://github.com/Thomas-X/csharp-cellular-automaton\", \"Cellular Automaton\"],\n [\"https://github.com/Thomas-X/Qui\", \"Qui\"],\n [\"https://github.com/Thomas-X/sandwhich-maker\", \"Sandwich maker (gRPC & Go)\"],\n [\"https://github.com/Thomas-X/channelbot-2\", \"Channelbot 2 (deprecated)\"],\n ];\n\n const workedForCompanies = [\n [\"https://www.elements.nl/\", \"Elements\"],\n [\"https://www.albelli.nl/\", \"Albelli\"],\n [\"https://www.oberon.nl/\", \"Oberon\"],\n ];\n\n const experience = (name, skill, leftText, rightText) => ({name, skill, leftText, rightText});\n const experiences = [\n experience(\"\", true, \"junior\", \"medior\"),\n experience(\"React\", \"75%\", \"\", \"\"),\n experience(\"Typescript\", \"75%\", \"\", \"\"),\n experience(\"Terraform with AWS\", \"60%\", \"\", \"\"),\n experience(\"C# 7\", \"55%\", \"\", \"\"),\n experience(\"PHP Laravel\", \"25%\", \"\", \"\"),\n\n experience(\"\", true, \"novice\", \"junior\"),\n experience(\"Rust\", \"80%\", \"\", \"\"),\n experience(\"Go\", \"35%\", \"\", \"\"),\n experience(\"Elm\", \"15%\", \"\", \"\"),\n experience(\"Kotlin\", \"10%\", \"\", \"\"),\n ];\n\n const lineWidth = 12;\n\n return (\n
\n \n \n \n Thomas Zwarts\n \n \n developer | frontend | backend\n \n \n \n \n \n \n \n \n \n \n Links.\n \n \n {\n links.map((x, i) => \n {x[1]}\n )\n\n }\n \n \n \n \n \n \n Skills.\n \n \n {\n experiences.map((x, i) =>\n \n \n {x.name}\n \n \n {x.skill !== true && \n \n \n }\n \n \n {x.leftText}\n \n \n {x.rightText}\n \n \n \n \n )\n }\n \n \n \n \n \n \n Projects.\n \n \n \n I worked on projects for these companies.\n \n {\n workedForCompanies.map((x, i) => \n {x[1]}\n )\n }\n \n\n \n \n Hobby projects.\n \n {\n projects.map((x, i) => \n {x[1]}\n )\n }\n \n \n \n \n \n \n
\n );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}