├── .eslintrc
├── .gitignore
├── .prettierrc
├── .vscode
    └── settings.json
├── assets
    └── Inter.ttf
├── components
    ├── Blog.js
    ├── Case.js
    ├── Contact.js
    ├── Footer.js
    ├── Layout.js
    ├── Navigation.js
    ├── Portfolio.js
    ├── SocialLink.js
    ├── StravaStats.js
    └── TimelineItem.js
├── hooks
    ├── useIsMounted.js
    └── useWindowSize.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── _document.js
    ├── api
    │   └── og.jsx
    ├── cv.js
    └── index.js
├── postcss.config.js
├── public
    ├── contact.svg
    ├── logoaccent.png
    ├── logoachterderegenboog.png
    ├── logocarglass.png
    ├── logocarlier.png
    ├── logodeckdeckgo.png
    ├── logokaraton.png
    ├── logonalo.png
    ├── logopoa.png
    ├── logorialto.png
    ├── me.jpeg
    ├── myAvatar.ico
    ├── personal.svg
    └── robots.txt
├── styles
    └── index.css
├── tailwind.config.js
└── utils
    └── db
        └── index.js


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # nyc test coverage
18 | .nyc_output
19 | 
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 | 
23 | # node-waf configuration
24 | .lock-wscript
25 | 
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 | 
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 | 
33 | # Optional npm cache directory
34 | .npm
35 | 
36 | # Optional REPL history
37 | .node_repl_history
38 | .next
39 | .now
40 | 
41 | .env.local


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "arrowParens": "avoid",
 3 |   "bracketSpacing": false,
 4 |   "endOfLine": "lf",
 5 |   "htmlWhitespaceSensitivity": "css",
 6 |   "insertPragma": false,
 7 |   "jsxBracketSameLine": false,
 8 |   "jsxSingleQuote": false,
 9 |   "printWidth": 80,
10 |   "proseWrap": "always",
11 |   "quoteProps": "as-needed",
12 |   "requirePragma": false,
13 |   "semi": false,
14 |   "singleQuote": true,
15 |   "tabWidth": 2,
16 |   "trailingComma": "all",
17 |   "useTabs": false
18 | }
19 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.defaultFormatter": "esbenp.prettier-vscode",
 3 |   "editor.formatOnSave": true,
 4 |   "editor.detectIndentation": true,
 5 |   "editor.fontFamily": "'Dank Mono', Menlo, Monaco, 'Courier New', monospace",
 6 |   "editor.fontLigatures": false,
 7 |   "editor.rulers": [80],
 8 |   "editor.snippetSuggestions": "top",
 9 |   "editor.wordBasedSuggestions": false,
10 |   "editor.suggest.localityBonus": true,
11 |   "editor.acceptSuggestionOnCommitCharacter": false,
12 |   "[javascript]": {
13 |     "editor.defaultFormatter": "esbenp.prettier-vscode",
14 |     "editor.suggestSelection": "recentlyUsed",
15 |     "editor.suggest.showKeywords": false
16 |   },
17 |   "editor.renderWhitespace": "boundary",
18 |   "files.exclude": {
19 |     "USE_GITIGNORE": true
20 |   },
21 |   "files.defaultLanguage": "{activeEditorLanguage}",
22 |   "javascript.validate.enable": false,
23 |   "search.exclude": {
24 |     "**/node_modules": true,
25 |     "**/bower_components": true,
26 |     "**/coverage": true,
27 |     "**/dist": true,
28 |     "**/build": true,
29 |     "**/.build": true,
30 |     "**/.gh-pages": true
31 |   },
32 |   "editor.codeActionsOnSave": {
33 |     "source.fixAll.eslint": false
34 |   },
35 |   "eslint.validate": [
36 |     "javascript",
37 |     "javascriptreact",
38 |     "typescript",
39 |     "typescriptreact"
40 |   ],
41 |   "eslint.options": {
42 |     "env": {
43 |       "browser": true,
44 |       "jest/globals": true,
45 |       "es6": true
46 |     },
47 |     "parserOptions": {
48 |       "ecmaVersion": 2019,
49 |       "sourceType": "module",
50 |       "ecmaFeatures": {
51 |         "jsx": true
52 |       }
53 |     },
54 |     "rules": {
55 |       "no-debugger": "off"
56 |     }
57 |   },
58 |   "workbench.colorTheme": "Night Owl",
59 |   "workbench.iconTheme": "material-icon-theme",
60 |   "breadcrumbs.enabled": true,
61 |   "grunt.autoDetect": "off",
62 |   "gulp.autoDetect": "off",
63 |   "npm.runSilent": true,
64 |   "explorer.confirmDragAndDrop": false,
65 |   "editor.formatOnPaste": false,
66 |   "editor.cursorSmoothCaretAnimation": true,
67 |   "editor.smoothScrolling": true,
68 |   "php.suggest.basic": false
69 | }
70 | 


--------------------------------------------------------------------------------
/assets/Inter.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/assets/Inter.ttf


--------------------------------------------------------------------------------
/components/Blog.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {faEye} from '@fortawesome/free-regular-svg-icons'
 3 | import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 4 | 
 5 | const Blog = ({blogs}) => {
 6 |   const blogsToShow = blogs
 7 |     .sort((a, b) => b.page_views_count - a.page_views_count)
 8 |     .slice(0, 5)
 9 | 
10 |   return (
11 |     <>
12 |       {blogsToShow &&
13 |         blogsToShow.map((blog, i) => (
14 |           <a
15 |             target="_blank"
16 |             rel="noopener noreferrer"
17 |             key={blog.id}
18 |             href={blog.url}
19 |             aria-label={blog.title}
20 |             className="transform transition-transform hover:scale-[1.02]"
21 |           >
22 |             <article
23 |               className={`bg-white relative rounded-lg dark:bg-lightgrey text-text p-6 mx-6 sm:mx-0 ${
24 |                 i !== blogsToShow.length - 1 ? 'mb-6' : ''
25 |               }`}
26 |             >
27 |               <>
28 |                 <div className="flex justify-between">
29 |                   <div className="flex justify-between mb-3 items-start w-full">
30 |                     <h3 className="text-xl font-medium dark:text-white pr-4">
31 |                       {blog.title}
32 |                     </h3>
33 |                     <div className="flex flex-col md:flex-row items-center">
34 |                       <FontAwesomeIcon className="md:mr-2" icon={faEye} />
35 |                       <span>{blog.page_views_count}</span>
36 |                     </div>
37 |                   </div>
38 |                 </div>
39 |                 <p className="mb-3">{blog.description}</p>
40 |                 <ul className="flex flex-wrap">
41 |                   {blog.tag_list.map((tag, i) => (
42 |                     <li
43 |                       className={`text-sm my-1 py-1 px-4 mr-2 rounded-md ${tag}`}
44 |                       key={i}
45 |                     >
46 |                       {tag}
47 |                     </li>
48 |                   ))}
49 |                 </ul>
50 |               </>
51 |             </article>
52 |           </a>
53 |         ))}
54 |       <a
55 |         href="https://dev.to/thomasledoux1"
56 |         target="_blank"
57 |         rel="noopener noreferrer"
58 |         className="mt-4 px-4 py-2 text-primary rounded-md border-2 border-primary"
59 |       >
60 |         Read more blogs
61 |       </a>
62 |     </>
63 |   )
64 | }
65 | 
66 | export default Blog
67 | 


--------------------------------------------------------------------------------
/components/Case.js:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image'
 2 | import React from 'react'
 3 | 
 4 | export default function Case({url, logoWidth, logoAlt, img, tags, children}) {
 5 |   return (
 6 |     <div className="p-6 shadow-case rounded-lg hover:shadow-case-hover transition transition-shadow transition-duration-300 ease-in-out dark:bg-darkgrey text-text">
 7 |       <div className="portfolio-case h-full">
 8 |         <a
 9 |           target="_blank"
10 |           rel="noopener noreferrer"
11 |           className="flex flex-col h-full"
12 |           href={url}
13 |         >
14 |           <div className="h-24 max-h-24 text-center mb-4">
15 |             <Image
16 |               placeholder="blur"
17 |               width={logoWidth}
18 |               height={100}
19 |               alt={`Logo ${logoAlt}`}
20 |               src={img}
21 |             />
22 |           </div>
23 |           {children}
24 |           <div className="flex flex-col mt-4 flex-grow justify-end">
25 |             <ul className="flex flex-wrap">
26 |               {tags.map((tag, i) => (
27 |                 <li
28 |                   className="bg-primary text-white text-sm my-1 py-1 px-4 mr-2 rounded-md"
29 |                   key={i}
30 |                 >
31 |                   {tag}
32 |                 </li>
33 |               ))}
34 |             </ul>
35 |           </div>
36 |         </a>
37 |       </div>
38 |     </div>
39 |   )
40 | }
41 | 


--------------------------------------------------------------------------------
/components/Contact.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import Image from 'next/image'
 3 | 
 4 | const Contact = () => {
 5 |   const [formResult, setFormResult] = useState('')
 6 |   const submitForm = ev => {
 7 |     ev.preventDefault()
 8 |     const form = ev.target
 9 |     const data = new FormData(form)
10 |     const xhr = new XMLHttpRequest()
11 |     xhr.open(form.method, form.action)
12 |     xhr.setRequestHeader('Accept', 'application/json')
13 |     xhr.onreadystatechange = () => {
14 |       if (xhr.readyState !== XMLHttpRequest.DONE) return
15 |       if (xhr.status === 200) {
16 |         form.reset()
17 |         setFormResult('ok')
18 |       } else {
19 |         setFormResult('error')
20 |       }
21 |     }
22 |     xhr.send(data)
23 |   }
24 | 
25 |   return (
26 |     <>
27 |       <div className="p-6 flex flex-col justify-center">
28 |         <Image
29 |           alt="Illustration of man sitting on a block"
30 |           src="/contact.svg"
31 |           width={129}
32 |           height={150}
33 |           layout="responsive"
34 |         />
35 |       </div>
36 |       <div className="p-6 flex justify-center flex-col">
37 |         <h2 className="mb-6 text-2xl font-bold">Drop me a message</h2>
38 |         <form
39 |           onSubmit={e => submitForm(e)}
40 |           action="https://formspree.io/xzbgjqdq"
41 |           method="POST"
42 |         >
43 |           <div className="flex flex-col mb-4">
44 |             <label className="mb-3" htmlFor="email">
45 |               Your e-mail
46 |             </label>
47 |             <input
48 |               className="py-2 px-4 bg-white border-primary border-2 rounded-md"
49 |               id="email"
50 |               type="email"
51 |               name="email"
52 |               placeholder="info@example.com"
53 |               required
54 |             />
55 |           </div>
56 |           <div className="flex flex-col">
57 |             <label className="my-2" htmlFor="message">
58 |               Your message
59 |             </label>
60 |             <textarea
61 |               className="py-2 px-4 bg-white border-primary border-2 rounded-md"
62 |               rows="3"
63 |               id="message"
64 |               type="text"
65 |               name="message"
66 |               placeholder="Hey, I would like to get in touch with you"
67 |               required
68 |             />
69 |           </div>
70 | 
71 |           <button
72 |             className="px-8 mt-4 py-4 bg-primary text-white rounded-md"
73 |             type="submit"
74 |           >
75 |             Submit
76 |           </button>
77 |           {formResult === 'error' && (
78 |             <p className="error">Ooops! There was an error. Try again later.</p>
79 |           )}
80 |           {formResult === 'ok' && (
81 |             <p className="success">
82 |               I received your message. I&apos;ll get back to you ASAP.
83 |             </p>
84 |           )}
85 |         </form>
86 |       </div>
87 |     </>
88 |   )
89 | }
90 | 
91 | export default Contact
92 | 


--------------------------------------------------------------------------------
/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import SocialLink from './SocialLink'
 2 | import {faGithub, faLinkedin, faDev} from '@fortawesome/free-brands-svg-icons'
 3 | const Footer = () => (
 4 |   <footer className="bg-secondary">
 5 |     <div className="p-6 flex justify-center items-center">
 6 |       <ul className="flex gap-6">
 7 |         <SocialLink
 8 |           label="linkedin"
 9 |           href="https://www.linkedin.com/in/thomasledoux91"
10 |           fill="text-linkedIn"
11 |           icon={faLinkedin}
12 |         />
13 |         <SocialLink
14 |           label="github"
15 |           href="https://github.com/thomasledoux1"
16 |           icon={faGithub}
17 |         />
18 |         <SocialLink
19 |           label="dev.to"
20 |           href="https://dev.to/thomasledoux1"
21 |           icon={faDev}
22 |           lastItem
23 |         />
24 |       </ul>
25 |     </div>
26 |   </footer>
27 | )
28 | 
29 | export default Footer
30 | 


--------------------------------------------------------------------------------
/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import Navigation from './Navigation'
 2 | import Footer from './Footer'
 3 | const Layout = ({children}) => {
 4 |   return (
 5 |     <>
 6 |       <Navigation />
 7 |       <main className="pt-16">{children}</main>
 8 |       <Footer />
 9 |     </>
10 |   )
11 | }
12 | 
13 | export default Layout
14 | 


--------------------------------------------------------------------------------
/components/Navigation.js:
--------------------------------------------------------------------------------
  1 | import React, {useRef, useState} from 'react'
  2 | import Link from 'next/link'
  3 | import {useRouter} from 'next/router'
  4 | import {useTheme} from 'next-themes'
  5 | import useWindowSize from '../hooks/useWindowSize'
  6 | import useIsMounted from '../hooks/useIsMounted'
  7 | 
  8 | const Navigation = () => {
  9 |   const navigationMobileRef = useRef(null)
 10 |   const mobileIconRef = useRef(null)
 11 |   const [mobileNavOpen, setMobileNavOpen] = useState(false)
 12 |   const isMounted = useIsMounted()
 13 |   const router = useRouter()
 14 |   const {width} = useWindowSize()
 15 |   const {theme, setTheme} = useTheme()
 16 | 
 17 |   const toggleMobileNavigation = () => {
 18 |     navigationMobileRef.current.classList.add('touched')
 19 |     navigationMobileRef.current.classList.toggle('translate-x-full')
 20 |     setMobileNavOpen(!mobileNavOpen)
 21 |   }
 22 | 
 23 |   const linkClicked = event => {
 24 |     if (event.currentTarget.href.indexOf('cv') > -1) {
 25 |       document.querySelectorAll('nav li a').forEach(navEl => {
 26 |         navEl.classList.remove('active')
 27 |       })
 28 |     }
 29 |     if (width <= 768) {
 30 |       toggleMobileNavigation()
 31 |     }
 32 |   }
 33 | 
 34 |   const renderNavigationItems = () => {
 35 |     const linkClasses =
 36 |       'relative before:absolute before:bottom-[-5px] before:h-[5px] before:w-[0] before:mt-[5px] before:bg-primary before:transition-all before:duration-300'
 37 |     return (
 38 |       <>
 39 |         <li>
 40 |           <Link href={{pathname: '/', hash: 'personal'}}>
 41 |             <a className={linkClasses} onClick={linkClicked}>
 42 |               Personal
 43 |             </a>
 44 |           </Link>
 45 |         </li>
 46 |         <li>
 47 |           <Link href={{pathname: '/', hash: 'portfolio'}}>
 48 |             <a className={linkClasses} onClick={linkClicked}>
 49 |               Portfolio
 50 |             </a>
 51 |           </Link>
 52 |         </li>
 53 |         <li>
 54 |           <Link href={{pathname: '/', hash: 'blog'}}>
 55 |             <a className={linkClasses} onClick={linkClicked}>
 56 |               Blog
 57 |             </a>
 58 |           </Link>
 59 |         </li>
 60 |         <li>
 61 |           <Link href={{pathname: '/', hash: 'stats'}}>
 62 |             <a className={linkClasses} onClick={linkClicked}>
 63 |               Stats
 64 |             </a>
 65 |           </Link>
 66 |         </li>
 67 |         <li>
 68 |           <Link href={{pathname: '/', hash: 'contact'}}>
 69 |             <a className={linkClasses} onClick={linkClicked}>
 70 |               Contact
 71 |             </a>
 72 |           </Link>
 73 |         </li>
 74 |         <li>
 75 |           <Link href="/cv">
 76 |             <a
 77 |               onClick={linkClicked}
 78 |               className={`${linkClasses} ${
 79 |                 router.pathname === '/cv' ? 'active' : ''
 80 |               }`}
 81 |             >
 82 |               CV
 83 |             </a>
 84 |           </Link>
 85 |         </li>
 86 |       </>
 87 |     )
 88 |   }
 89 | 
 90 |   const LogoLetter = ({letter}) => (
 91 |     <span className="letter inline-block top-0 relative">{letter}</span>
 92 |   )
 93 | 
 94 |   return (
 95 |     <nav className="fixed bg-purple dark:bg-darkgrey text-text h-16 w-full z-50">
 96 |       <div className="flex h-full container mx-auto justify-between items-center px-6 md:px-0">
 97 |         <Link passHref href={{pathname: '/'}}>
 98 |           <a className="logo flex flex-row text-lg lg:text-2xl">
 99 |             <LogoLetter letter="t" />
100 |             <LogoLetter letter="h" />
101 |             <LogoLetter letter="o" />
102 |             <LogoLetter letter="m" />
103 |             <LogoLetter letter="a" />
104 |             <LogoLetter letter="s" />
105 |             <span>&nbsp;</span>
106 |             <LogoLetter letter="l" />
107 |             <LogoLetter letter="e" />
108 |             <LogoLetter letter="d" />
109 |             <LogoLetter letter="o" />
110 |             <LogoLetter letter="u" />
111 |             <LogoLetter letter="x" />
112 |           </a>
113 |         </Link>
114 |         <ul className="hidden md:flex md:gap-6">{renderNavigationItems()}</ul>
115 |         <ul
116 |           ref={navigationMobileRef}
117 |           className={`md:hidden absolute flex flex-col w-full top-16 left-0 py-3 items-center text-white bg-primary transform translate-x-full gap-2 ${
118 |             isMounted.current ? 'transition-transform' : ''
119 |           }`}
120 |         >
121 |           {renderNavigationItems()}
122 |         </ul>
123 |         <button
124 |           aria-label="Toggle mobile menu"
125 |           type="button"
126 |           ref={mobileIconRef}
127 |           onClick={toggleMobileNavigation}
128 |           className="md:hidden order-3 cursor-pointer relative w-5 h-6"
129 |         >
130 |           <span
131 |             className={`transform transition-transform duration-300 absolute h-1 w-full bg-primary rounded-lg left-0 top-1 ${
132 |               mobileNavOpen ? 'rotate-135 top-3' : 'rotate-0'
133 |             }`}
134 |           ></span>
135 |           <span
136 |             className={`absolute transition-opacity duration-300 h-1 w-full bg-primary rounded-lg left-0 top-3 ${
137 |               mobileNavOpen ? 'opacity-0 -left-40' : 'opacity-100'
138 |             }`}
139 |           ></span>
140 |           <span
141 |             className={`transform transition-transform duration-300 absolute h-1 w-full bg-primary rounded-lg left-0 ${
142 |               mobileNavOpen ? '-rotate-135 top-3' : 'rotate-0 top-5'
143 |             }`}
144 |           ></span>
145 |         </button>
146 |         <button
147 |           aria-label="Toggle Dark Mode"
148 |           type="button"
149 |           className="p-3 h-12 w-12 order-2 md:order-3 absolute left-2/4 transform -translate-x-2/4 lg:transform-none md:relative md:left-0"
150 |           onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
151 |         >
152 |           {isMounted.current && (
153 |             <svg
154 |               xmlns="http://www.w3.org/2000/svg"
155 |               viewBox="0 0 24 24"
156 |               fill="currentColor"
157 |               stroke="currentColor"
158 |               className="h-6 w-6 text-gray-800 dark:text-gray-200"
159 |             >
160 |               {theme === 'dark' ? (
161 |                 <path
162 |                   strokeLinecap="round"
163 |                   strokeLinejoin="round"
164 |                   strokeWidth={2}
165 |                   d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
166 |                 />
167 |               ) : (
168 |                 <path
169 |                   strokeLinecap="round"
170 |                   strokeLinejoin="round"
171 |                   strokeWidth={2}
172 |                   d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
173 |                 />
174 |               )}
175 |             </svg>
176 |           )}
177 |         </button>
178 |       </div>
179 |     </nav>
180 |   )
181 | }
182 | 
183 | export default Navigation
184 | 


--------------------------------------------------------------------------------
/components/Portfolio.js:
--------------------------------------------------------------------------------
  1 | import Case from '../components/Case'
  2 | import logoKaraton from '../public/logokaraton.png'
  3 | import logoRialto from '../public/logorialto.png'
  4 | import logoCarlier from '../public/logocarlier.png'
  5 | import logoCarglass from '../public/logocarglass.png'
  6 | import logoNalo from '../public/logonalo.png'
  7 | import logoAchterderegenboog from '../public/logoachterderegenboog.png'
  8 | import logoDeckdeckgo from '../public/logodeckdeckgo.png'
  9 | import logoAccent from '../public/logoaccent.png'
 10 | import logoPoa from '../public/logopoa.png'
 11 | 
 12 | const Portfolio = () => (
 13 |   <div className="grid mx-6 sm:mx-0 grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
 14 |     <Case
 15 |       url="https://www.karaton.be"
 16 |       logoAlt="Karaton"
 17 |       img={logoKaraton}
 18 |       logoWidth={218}
 19 |       tags={['mongodb', 'expressjs', 'angular', 'nodejs']}
 20 |     >
 21 |       <p className="mb-4">
 22 |         For Happs Development I created and maintained the website for Karaton
 23 |         where speech therapists and parents of dyslexic could follow up on the
 24 |         progress their children/patients are making in the Karaton game.
 25 |       </p>
 26 |       <p className="mb-4">
 27 |         There were a lot of graphs to be shown with Highcharts, a payment
 28 |         integration through Mollie, different roles for
 29 |         admins/therapists/parents.
 30 |       </p>
 31 |       <p>
 32 |         In this team I worked as a Full Stack Developer, giving me a lot of
 33 |         insight in how the backend of a web application works.
 34 |       </p>
 35 |     </Case>
 36 |     <Case
 37 |       url="https://www.getrialto.com"
 38 |       logoAlt="Rialto"
 39 |       img={logoRialto}
 40 |       logoWidth={321}
 41 |       tags={['swift', 'ios']}
 42 |     >
 43 |       <p className="mb-4">
 44 |         At my internship for Rialto I created an iOS app from scratch in Swift
 45 |         where real estate companies could easily manage their listings.
 46 |       </p>
 47 |       <p className="mb-4">
 48 |         I created the screens in storyboards based on the designs provided by
 49 |         our designer.
 50 |       </p>
 51 |       <p>
 52 |         When the screens were finished I used Swift code to implement
 53 |         functionality such as logins through an API, fetching the listings
 54 |         through an API, saving the listings in the SQLite database..
 55 |       </p>
 56 |     </Case>
 57 |     <Case
 58 |       url="https://play.google.com/store/apps/details?id=com.carlierkathleen.rekenen&hl=nl"
 59 |       logoAlt="Carlier Rekenen"
 60 |       img={logoCarlier}
 61 |       logoWidth={100}
 62 |       tags={['react-native', 'reactjs']}
 63 |     >
 64 |       <p className="mb-4">
 65 |         While working at Happs Development I also created a mobile application
 66 |         for a speech therapist to help children with discalculia to learn how to
 67 |         count and do simple math exercises in a fun game form.
 68 |       </p>
 69 |       <p className="mb-4">
 70 |         The app was created from scratch using React Native for fast
 71 |         development, and Expo to get fast previews of the app on real devices.
 72 |       </p>
 73 |       <p>
 74 |         This project taught me a lot about animations, how to handle dynamically
 75 |         generated sound output for the spoken numbers, learn which platform
 76 |         specific APIs to use..
 77 |       </p>
 78 |     </Case>
 79 |     <Case
 80 |       url="https://www.carglass.be"
 81 |       logoAlt="Carglass"
 82 |       img={logoCarglass}
 83 |       logoWidth={374}
 84 |       tags={['sitecore', 'reactjs', 'less']}
 85 |     >
 86 |       <p className="mb-4">
 87 |         At my current job at The Reference I help maintain the website for
 88 |         Carglass, we keep adding new features and maintain the older code in
 89 |         sprints.
 90 |       </p>
 91 |       <p className="mb-4">
 92 |         We have a separate Backend Development team, so my focus is purely on
 93 |         the Frontend Development in ReactJS.
 94 |       </p>
 95 |       <p>
 96 |         In the booking flows we make heavy use of MobX for state management,
 97 |         Local- and Sessionstorage to save intermediary input by the users and
 98 |         integrate with APIs from different parties.
 99 |       </p>
100 |     </Case>
101 |     <Case
102 |       url="https://www.nationale-loterij.be"
103 |       logoAlt="Nationale Loterij"
104 |       img={logoNalo}
105 |       logoWidth={240}
106 |       tags={['sitecore', 'reactjs', 'sass']}
107 |     >
108 |       <p className="mb-4">
109 |         One of the other clients I work for at The Reference is Nationale
110 |         Loterij, for this client we constantly create new features with a modern
111 |         look on a monthly basis.
112 |       </p>
113 |       <p className="mb-4">
114 |         In this project I get to test out even more new technologies, and new
115 |         features in the existing technologies (think React Hooks, CSS3
116 |         animations..).
117 |       </p>
118 |       <p>
119 |         The feature I&apos;m most proud of is the interactive Sponsoring Map of
120 |         Belgium we created with some nice animations and beautiful design.
121 |       </p>
122 |     </Case>
123 |     <Case
124 |       url="https://www.achterderegenboog.be"
125 |       logoAlt="Achter De Regenboog"
126 |       img={logoAchterderegenboog}
127 |       logoWidth={150}
128 |       tags={['wordpress', 'html', 'css']}
129 |     >
130 |       <p className="mb-4">
131 |         In my free time I like to experiment with other frameworks and
132 |         technologies too, this is why I made a website using Wordpress for a
133 |         friend of mine who started a psychologists practice.
134 |       </p>
135 |       <p className="mb-4">
136 |         My friend gave me some high level designs, and I got to work! I selected
137 |         a fitting theme.{' '}
138 |       </p>
139 |       <p>
140 |         I built on the theme with a lot of plugins to optimize the speed of the
141 |         website (Autoptimize), the SEO (Yoast) and anti-spam by Akismet.
142 |       </p>
143 |     </Case>
144 |     <Case
145 |       url="https://www.deckdeckgo.com"
146 |       logoAlt="DeckDeckGo"
147 |       img={logoDeckdeckgo}
148 |       logoWidth={100}
149 |       tags={['open source', 'hacktoberfest', 'stencil', 'typescript']}
150 |     >
151 |       <p className="mb-4">
152 |         In 2020 I participated in Hacktoberfest for the first time ever. I did
153 |         some research on which open source project I would like to contribute
154 |         to, and landed on DeckDeckGo.
155 |       </p>
156 |       <p>
157 |         It was a lot of fun to coloborate with other open source contributors,
158 |         and to work in a new technological stack. I&apos;m definitely going to
159 |         continue contributing to open source in the future!
160 |       </p>
161 |     </Case>
162 |     <Case
163 |       url="https://www.accentjobs.be"
164 |       logoAlt="Accent Jobs"
165 |       img={logoAccent}
166 |       logoWidth={532}
167 |       tags={['gatsby', 'drupal', 'typescript', 'emotion']}
168 |     >
169 |       <p className="mb-4">
170 |         At the end of 2020, I got the opportunity to work on a project within
171 |         The Reference using our new MACH stack.
172 |       </p>
173 |       <p className="mb-4">
174 |         This was the first time I was using Gatsby for a production website, and
175 |         I must say it makes developing a breeze. Connecting everything through
176 |         API&apos;s, no hard dependecies on a CMS.. I love it.
177 |       </p>
178 |     </Case>
179 |     <Case
180 |       url="https://www.portofantwerp.be"
181 |       logoAlt="Port Of Antwerp"
182 |       img={logoPoa}
183 |       logoWidth={199}
184 |       tags={['nextjs', 'drupal', 'typescript', 'tailwind']}
185 |     >
186 |       <p className="mb-4">
187 |         Starting february 2021, we started working on a new website for the Port
188 |         of Antwerp. This website uses the MACH stack as mentioned above, but
189 |         with Next.js instead of Gatsby, and Tailwind for styling!
190 |       </p>
191 |       <p>
192 |         I really like this combo (this website is made with these technologies),
193 |         so I couldn&apos;t be happier to be the lead frontend developer on this
194 |         project. So far I&apos;ve learned a lot about the many features and
195 |         possibilities of Next.js, and I&apos;m hoping to create the most
196 |         performant website for this high profile client.
197 |       </p>
198 |     </Case>
199 |   </div>
200 | )
201 | export default Portfolio
202 | 


--------------------------------------------------------------------------------
/components/SocialLink.js:
--------------------------------------------------------------------------------
 1 | import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 2 | const SocialLink = ({label, href, icon, lastItem, fill = 'fill-current'}) => (
 3 |   <li>
 4 |     <a target="_blank" rel="noopener noreferrer" aria-label={label} href={href}>
 5 |       <FontAwesomeIcon size="2x" icon={icon} className={fill} />
 6 |     </a>
 7 |   </li>
 8 | )
 9 | 
10 | export default SocialLink
11 | 


--------------------------------------------------------------------------------
/components/StravaStats.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import {
  3 |   faBiking,
  4 |   faRunning,
  5 |   faRoad,
  6 |   faClock,
  7 |   faTachometerAlt,
  8 |   faMountain,
  9 | } from '@fortawesome/free-solid-svg-icons'
 10 | import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 11 | 
 12 | const StravaStats = ({
 13 |   stravaStats,
 14 |   stravaMostRecentRun,
 15 |   stravaMostRecentRide,
 16 | }) => {
 17 |   const [showRunning, setShowRunning] = React.useState(false)
 18 |   const btnClass =
 19 |     'px-6 lg:px-12 py-2 lg:py-4 border-2 flex justify-center cursor-pointer  w-1/2 text-center'
 20 |   const btnActiveClass = 'bg-primary text-white border-primary'
 21 |   return (
 22 |     <div className="flex flex-col w-full lg:mx-auto relative lg:w-1/2 text-center md:text-left">
 23 |       <div className="flex rounded-full self-center mb-4">
 24 |         <button
 25 |           aria-label="Toggle bike mode"
 26 |           type="button"
 27 |           className={`${btnClass} rounded-tl-full rounded-bl-full ${
 28 |             !showRunning ? btnActiveClass : ''
 29 |           }`}
 30 |           onClick={() => setShowRunning(false)}
 31 |         >
 32 |           <FontAwesomeIcon size="2x" icon={faBiking} />
 33 |         </button>
 34 |         <button
 35 |           aria-label="Toggle run mode"
 36 |           type="button"
 37 |           className={`${btnClass} rounded-tr-full rounded-br-full ${
 38 |             showRunning ? btnActiveClass : ''
 39 |           }`}
 40 |           onClick={() => setShowRunning(true)}
 41 |         >
 42 |           <FontAwesomeIcon size="2x" icon={faRunning} />
 43 |         </button>
 44 |       </div>
 45 |       <div className="border-2 rounded-md mx-6 flex flex-col md:flex-row">
 46 |         <div className="px-8 py-4 flex flex-col md:w-1/2 order-2 md:order-1">
 47 |           <h3 className="font-bold text-xl mb-4">All time</h3>
 48 |           <p className="mb-3">
 49 |             <FontAwesomeIcon icon={faRoad} className="mr-2" />
 50 |             {Math.floor(
 51 |               (showRunning
 52 |                 ? stravaStats.all_run_totals.distance
 53 |                 : stravaStats.all_ride_totals.distance) / 1000,
 54 |             )}
 55 |             km
 56 |           </p>
 57 |           <p className="mb-3">
 58 |             <FontAwesomeIcon icon={faMountain} className="mr-2" />
 59 |             {showRunning
 60 |               ? stravaStats.all_run_totals.elevation_gain
 61 |               : stravaStats.all_ride_totals.elevation_gain}
 62 |             m
 63 |           </p>
 64 |           <p className="mb-3">
 65 |             <FontAwesomeIcon icon={faClock} className="mr-2" />
 66 |             {Math.floor(
 67 |               (showRunning
 68 |                 ? stravaStats.all_run_totals.moving_time
 69 |                 : stravaStats.all_ride_totals.moving_time) / 3600,
 70 |             )}
 71 |             h
 72 |           </p>
 73 |           <p className="mb-3">
 74 |             <FontAwesomeIcon icon={faTachometerAlt} className="mr-2" />
 75 |             {(
 76 |               (showRunning
 77 |                 ? stravaStats.all_run_totals.distance
 78 |                 : stravaStats.all_ride_totals.distance) /
 79 |               1000 /
 80 |               ((showRunning
 81 |                 ? stravaStats.all_run_totals.moving_time
 82 |                 : stravaStats.all_ride_totals.moving_time) /
 83 |                 3600)
 84 |             ).toFixed(2)}{' '}
 85 |             km/h
 86 |           </p>
 87 |           <div className="flex flex-col items-center md:items-start">
 88 |             {showRunning ? 'Running' : 'Biking'} towards{' '}
 89 |             {showRunning ? '1000' : '5000'}km goal
 90 |             <progress
 91 |               className="mt-2"
 92 |               value={
 93 |                 (showRunning
 94 |                   ? stravaStats.all_run_totals.distance
 95 |                   : stravaStats.all_ride_totals.distance) /
 96 |                 (showRunning ? 10000 : 50000)
 97 |               }
 98 |               max={100}
 99 |             ></progress>
100 |           </div>
101 |         </div>
102 |         <div className="px-8 py-4 flex flex-col md:w-1/2 md:order-2">
103 |           <h3 className="font-bold text-xl mb-4">
104 |             Most recent {showRunning ? 'run' : 'ride'}
105 |           </h3>
106 |           <p className="mb-3">
107 |             <FontAwesomeIcon icon={faRoad} className="mr-2" />
108 |             {Math.floor(
109 |               (showRunning
110 |                 ? stravaMostRecentRun.distance
111 |                 : stravaMostRecentRide.distance) / 1000,
112 |             )}
113 |             km
114 |           </p>
115 |           <p className="mb-3">
116 |             <FontAwesomeIcon icon={faMountain} className="mr-2" />
117 |             {showRunning
118 |               ? stravaMostRecentRun.total_elevation_gain
119 |               : stravaMostRecentRide.total_elevation_gain}
120 |             m
121 |           </p>
122 |           <p className="mb-3">
123 |             <FontAwesomeIcon icon={faClock} className="mr-2" />
124 |             {Math.floor(
125 |               (showRunning
126 |                 ? stravaMostRecentRun.moving_time
127 |                 : stravaMostRecentRide.moving_time) / 3600,
128 |             )}
129 |             h{' '}
130 |             {Math.floor(
131 |               ((showRunning
132 |                 ? stravaMostRecentRun.moving_time
133 |                 : stravaMostRecentRide.moving_time) %
134 |                 3600) /
135 |                 60,
136 |             )}
137 |             m
138 |           </p>
139 |           <p className="mb-3">
140 |             <FontAwesomeIcon icon={faTachometerAlt} className="mr-2" />
141 |             {(
142 |               (showRunning
143 |                 ? stravaMostRecentRun.distance
144 |                 : stravaMostRecentRide.distance) /
145 |               1000 /
146 |               ((showRunning
147 |                 ? stravaMostRecentRun.moving_time
148 |                 : stravaMostRecentRide.moving_time) /
149 |                 3600)
150 |             ).toFixed(2)}{' '}
151 |             km/h
152 |           </p>
153 |         </div>
154 |       </div>
155 |     </div>
156 |   )
157 | }
158 | export default StravaStats
159 | 


--------------------------------------------------------------------------------
/components/TimelineItem.js:
--------------------------------------------------------------------------------
 1 | export default function TimelineItem({index, url, children}) {
 2 |   return (
 3 |     <div
 4 |       className="flex w-1/2 odd:justify-end even:self-end even:pl-6 odd:pr-6 odd:text-right after:bg-white timeline-item dark:after:bg-darkgrey even:after:right-auto even:after:left-4 after:absolute after:right-4 after:transform after:rotate-45 after:w-4 after:h-4 z-10"
 5 |       data-aos={`fade-${index % 2 === 0 ? 'left' : 'right'}`}
 6 |     >
 7 |       <div className="rounded sm:max-w-[80%] shadow dark:bg-darkgrey p-4 relative">
 8 |         {children}
 9 |         <span
10 |           className={`bg-purple border-solid border-4 border-primary rounded-full absolute w-4 h-4 top-timelineCircle ${
11 |             index % 2 === 0 ? '-right-8' : '-left-8'
12 |           }`}
13 |         />
14 |       </div>
15 |     </div>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/hooks/useIsMounted.js:
--------------------------------------------------------------------------------
 1 | import {useRef, useEffect} from 'react'
 2 | 
 3 | const useIsMounted = () => {
 4 |   const isMounted = useRef(false)
 5 |   useEffect(() => {
 6 |     isMounted.current = true
 7 |     return () => (isMounted.current = false)
 8 |   }, [])
 9 |   return isMounted
10 | }
11 | 
12 | export default useIsMounted
13 | 


--------------------------------------------------------------------------------
/hooks/useWindowSize.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | function useWindowSize() {
 3 |   // Initialize state with undefined width/height so server and client renders match
 4 |   // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
 5 |   const [windowSize, setWindowSize] = React.useState({
 6 |     width: undefined,
 7 |     height: undefined,
 8 |   })
 9 | 
10 |   React.useEffect(() => {
11 |     // only execute all the code below in client side
12 |     if (typeof window !== 'undefined') {
13 |       // Handler to call on window resize
14 |       function handleResize() {
15 |         // Set window width/height to state
16 |         setWindowSize({
17 |           width: window.innerWidth,
18 |           height: window.innerHeight,
19 |         })
20 |       }
21 | 
22 |       // Add event listener
23 |       window.addEventListener('resize', handleResize)
24 | 
25 |       // Call handler right away so state gets updated with initial window size
26 |       handleResize()
27 | 
28 |       // Remove event listener on cleanup
29 |       return () => window.removeEventListener('resize', handleResize)
30 |     }
31 |   }, []) // Empty array ensures that effect is only run on mount
32 |   return windowSize
33 | }
34 | 
35 | export default useWindowSize
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "website-thomas",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "next -p 8080",
 8 |     "build": "next build",
 9 |     "start": "next start -p 8080"
10 |   },
11 |   "keywords": [],
12 |   "author": "",
13 |   "license": "ISC",
14 |   "dependencies": {
15 |     "@fortawesome/fontawesome-svg-core": "^1.2.36",
16 |     "@fortawesome/free-brands-svg-icons": "^5.15.4",
17 |     "@fortawesome/free-regular-svg-icons": "^5.15.4",
18 |     "@fortawesome/free-solid-svg-icons": "^5.15.4",
19 |     "@fortawesome/react-fontawesome": "^0.1.15",
20 |     "@vercel/og": "^0.0.19",
21 |     "aos": "^2.3.4",
22 |     "firebase-admin": "^9.12.0",
23 |     "next": "^12.3.1",
24 |     "next-themes": "^0.0.12",
25 |     "react": "^17.0.2",
26 |     "react-dom": "^17.0.2",
27 |     "sharp": "^0.31.1",
28 |     "smoothscroll-polyfill": "^0.4.4"
29 |   },
30 |   "devDependencies": {
31 |     "autoprefixer": "^10.3.7",
32 |     "critters": "0.0.10",
33 |     "eslint": "^7.32.0",
34 |     "eslint-config-next": "^12.0.0",
35 |     "postcss-preset-env": "^6.7.0",
36 |     "tailwindcss": "^2.2.17"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import '../styles/index.css'
 2 | import 'aos/dist/aos.css'
 3 | import {ThemeProvider} from 'next-themes'
 4 | import Script from 'next/script'
 5 | import * as React from 'react'
 6 | import Layout from '../components/Layout'
 7 | 
 8 | // This default export is required in a new `pages/_app.js` file.
 9 | export default function MyApp({Component, pageProps}) {
10 |   return (
11 |     <>
12 |       <ThemeProvider attribute="class">
13 |         <Layout>
14 |           <Component {...pageProps} />
15 |         </Layout>
16 |       </ThemeProvider>
17 |     </>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, {Html, Head, Main, NextScript} from 'next/document'
 2 | import * as React from 'react'
 3 | 
 4 | class MyDocument extends Document {
 5 |   static async getInitialProps(ctx) {
 6 |     const initialProps = await Document.getInitialProps(ctx)
 7 |     return {...initialProps}
 8 |   }
 9 | 
10 |   render() {
11 |     return (
12 |       <Html lang="en">
13 |         <Head>
14 |           <link rel="shortcut icon" type="image/x-icon" href="/myAvatar.ico" />
15 |           <meta
16 |             name="description"
17 |             content="You can find projects Thomas Ledoux worked on and contact details on this site."
18 |           ></meta>
19 |           <meta
20 |             property="og:description"
21 |             content="You can find projects Thomas Ledoux worked on and contact details on this site."
22 |           />
23 |           <meta
24 |             property="og:title"
25 |             content="Thomas Ledoux, Frontend Developer from Ghent"
26 |           />
27 |           <meta property="og:image" content="/me.jpeg" />
28 |           <meta
29 |             name="keywords"
30 |             content="HTML, CSS, JavaScript, Frontend, Ghent, Thomas, Ledoux"
31 |           ></meta>
32 |         </Head>
33 |         <body>
34 |           <Main />
35 |           <NextScript />
36 |         </body>
37 |       </Html>
38 |     )
39 |   }
40 | }
41 | 
42 | export default MyDocument
43 | 


--------------------------------------------------------------------------------
/pages/api/og.jsx:
--------------------------------------------------------------------------------
 1 | import {ImageResponse} from '@vercel/og'
 2 | 
 3 | export const config = {
 4 |   runtime: 'experimental-edge',
 5 | }
 6 | 
 7 | const font = fetch(new URL('../../assets/Inter.ttf', import.meta.url)).then(
 8 |   res => res.arrayBuffer(),
 9 | )
10 | 
11 | export default async function handler(req) {
12 |   const fontData = await font
13 | 
14 |   try {
15 |     const {searchParams} = new URL(req.url)
16 | 
17 |     // ?title=<title>
18 |     const hasTitle = searchParams.has('title')
19 |     const title = hasTitle
20 |       ? searchParams.get('title')?.slice(0, 200)
21 |       : 'My default title'
22 | 
23 |     return new ImageResponse(
24 |       (
25 |         <div
26 |           style={{
27 |             background: 'white',
28 |             width: '100%',
29 |             height: '100%',
30 |             display: 'flex',
31 |             alignItems: 'center',
32 |             justifyContent: 'center',
33 |             fontFamily: 'Inter',
34 |             paddingLeft: '32px',
35 |             paddingRight: '32px',
36 |             backgroundImage:
37 |               'radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)',
38 |             backgroundSize: '100px 100px',
39 |           }}
40 |         >
41 |           <div
42 |             style={{
43 |               width: '35%',
44 |               display: 'flex',
45 |               flexDirection: 'column',
46 |               alignItems: 'center',
47 |               marginRight: '5%',
48 |             }}
49 |           >
50 |             <img
51 |               alt="avatar"
52 |               width="100%"
53 |               src="https://res.cloudinary.com/dzrea5zhv/image/upload/v1583171588/me_qvrwky.jpg"
54 |               style={{
55 |                 borderRadius: '100%',
56 |               }}
57 |             />
58 |           </div>
59 |           <div
60 |             style={{
61 |               width: '60%',
62 |               display: 'flex',
63 |               flexDirection: 'column',
64 |             }}
65 |           >
66 |             <p style={{fontSize: 32}}>Thomas Ledoux&apos;s blog</p>
67 |             <p style={{fontSize: 64}}>{title}</p>
68 |           </div>
69 |         </div>
70 |       ),
71 |       {
72 |         width: 1200,
73 |         height: 600,
74 |         fonts: [
75 |           {
76 |             name: 'Inter',
77 |             data: fontData,
78 |             style: 'normal',
79 |           },
80 |         ],
81 |       },
82 |     )
83 |   } catch (e) {
84 |     console.log(`${e.message}`)
85 |     return new Response(`Failed to generate the image`, {
86 |       status: 500,
87 |     })
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/pages/cv.js:
--------------------------------------------------------------------------------
  1 | import React, {useEffect} from 'react'
  2 | import AOS from 'aos'
  3 | import Head from 'next/head'
  4 | import Image from 'next/image'
  5 | import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
  6 | import {faStar as faStarEmpty} from '@fortawesome/free-regular-svg-icons'
  7 | import {faStar as faStarFull} from '@fortawesome/free-solid-svg-icons'
  8 | import TimelineItem from '../components/TimelineItem'
  9 | import me from '../public/me.jpeg'
 10 | 
 11 | const CV = () => {
 12 |   const age = Math.floor(
 13 |     (new Date() - new Date('1991-07-11').getTime()) / 3.15576e10,
 14 |   )
 15 |   const technologies = [
 16 |     {name: 'React', numberOfStars: 4},
 17 |     {name: 'Vue.js', numberOfStars: 2},
 18 |     {name: 'Angular', numberOfStars: 2},
 19 |     {name: 'Gatsby.js', numberOfStars: 3},
 20 |     {name: 'Next.js', numberOfStars: 4},
 21 |     {name: 'React Native', numberOfStars: 3},
 22 |     {name: 'Swift', numberOfStars: 2},
 23 |     {name: 'Wordpress', numberOfStars: 3},
 24 |     {name: 'ES6', numberOfStars: 4},
 25 |     {name: 'HTML', numberOfStars: 5},
 26 |     {name: 'CSS', numberOfStars: 4},
 27 |   ]
 28 |   const renderStars = amount =>
 29 |     Array.apply(null, {length: 5}).map((_, i) => (
 30 |       <span className="star" key={i}>
 31 |         <FontAwesomeIcon
 32 |           className={`fill-current text-primary ${i < amount ? 'full' : ''}`}
 33 |           icon={i < amount ? faStarFull : faStarEmpty}
 34 |         />
 35 |       </span>
 36 |     ))
 37 |   useEffect(() => {
 38 |     AOS.init({
 39 |       duration: 1000,
 40 |     })
 41 |   }, [])
 42 | 
 43 |   return (
 44 |     <>
 45 |       <Head>
 46 |         <title>Thomas Ledoux&apos; Portfolio - CV</title>
 47 |       </Head>
 48 |       <section id="cv" className="dark:bg-lightgrey text-text">
 49 |         <div className="container py-12 mx-auto grid grid-cols-1 sm:grid-cols-3 sm:gap-16">
 50 |           <div className="col-span-1 mx-6 sm:mx-0">
 51 |             <div className="text-center">
 52 |               <Image
 53 |                 className="rounded-full"
 54 |                 priority
 55 |                 alt="Profile picture"
 56 |                 src={me}
 57 |                 placeholder="blur"
 58 |               />
 59 |               <p>Hello, is it me you&apos;re looking for?</p>
 60 |             </div>
 61 |           </div>
 62 |           <div className="col-span-1 mx-6 mt-6 sm:mt-0 sm:mx-0 sm:col-span-2 flex flex-col justify-center">
 63 |             <h1 className="text-2xl md:text-4xl mb-4 font-bold">
 64 |               A bit about me
 65 |             </h1>
 66 |             <div>
 67 |               <p>
 68 |                 Hi, I&apos;m Thomas. I&apos;m {age} years old, living in Ghent.
 69 |                 I&apos;m a professional Frontend Developer, currently working at{' '}
 70 |                 <a
 71 |                   target="_blank"
 72 |                   rel="noopener noreferrer"
 73 |                   className="cursor-pointer shadow-link hover:shadow-link-hover dark:shadow-link-dark dark:hover:shadow-link-dark-hover transition-shadow"
 74 |                   href="https://www.the-reference.be"
 75 |                 >
 76 |                   The Reference
 77 |                 </a>
 78 |                 .
 79 |               </p>
 80 |               <p>
 81 |                 What I like most about Frontend development is the ever-changing
 82 |                 technology. New frameworks being released daily (one better than
 83 |                 the other...), constant improvements to existing frameworks,
 84 |                 yearly new features in ECMAScript..
 85 |               </p>
 86 |               <p>
 87 |                 I&apos;m always eager to discover the latest updates, apps,
 88 |                 technologies..!
 89 |               </p>
 90 |             </div>
 91 |           </div>
 92 |           <div className="col-span-1 mx-6 mt-6 sm:mt-0 sm:mx-0">
 93 |             <h2 className="text-xl lg:text-2xl mb-4 font-bold">Technologies</h2>
 94 |             {technologies.map((technology, i) => (
 95 |               <div key={i} className="flex justify-between mb-4">
 96 |                 <div>{technology.name}</div>
 97 |                 <div>{renderStars(technology.numberOfStars)}</div>
 98 |               </div>
 99 |             ))}
100 |           </div>
101 |           <div className="col-span-1 mx-6 mt-6 sm:mt-0 sm:mx-0 sm:col-span-2">
102 |             <h2 className="text-xl lg:text-2xl mb-4 font-bold">My timeline</h2>
103 |             <div className="flex w-full flex-col timeline-container relative after:bg-lightpurple dark:after:bg-darkgrey after:absolute after:w-1 after:h-full">
104 |               <TimelineItem index={0} url="https://reference.be">
105 |                 <time className="text-xs text-grey">October 2018 - now</time>
106 |                 <p>
107 |                   Frontend Developer at{' '}
108 |                   <a
109 |                     target="_blank"
110 |                     rel="noopener noreferrer"
111 |                     className="cursor-pointer shadow-link hover:shadow-link-hover dark:shadow-link-dark dark:hover:shadow-link-dark-hover transition-shadow"
112 |                     href="https://reference.be"
113 |                   >
114 |                     The Reference
115 |                   </a>
116 |                   , Ghent
117 |                 </p>
118 |               </TimelineItem>
119 |               <TimelineItem index={1} url="https://happsdevelopment.com">
120 |                 <time className="text-xs text-grey">
121 |                   September 2017 - October 2018
122 |                 </time>
123 |                 <p>
124 |                   Full Stack Developer at{' '}
125 |                   <a
126 |                     target="_blank"
127 |                     rel="noopener noreferrer"
128 |                     className="cursor-pointer shadow-link hover:shadow-link-hover dark:shadow-link-dark dark:hover:shadow-link-dark-hover transition-shadow"
129 |                     href="https://happsdevelopment.com"
130 |                   >
131 |                     Happs Development
132 |                   </a>
133 |                   , Ghent
134 |                 </p>
135 |               </TimelineItem>
136 |               <TimelineItem index={2} url="https://getrialto.com">
137 |                 <time className="text-xs text-grey">
138 |                   February 2017 - June 2017
139 |                 </time>
140 |                 <p>
141 |                   Internship as Swift Developer at{' '}
142 |                   <a
143 |                     target="_blank"
144 |                     rel="noopener noreferrer"
145 |                     className="cursor-pointer shadow-link hover:shadow-link-hover dark:shadow-link-dark dark:hover:shadow-link-dark-hover transition-shadow"
146 |                     href="https://getrialto.com"
147 |                   >
148 |                     Rialto
149 |                   </a>
150 |                   , Ghent
151 |                 </p>
152 |               </TimelineItem>
153 |               <TimelineItem index={3} url="https://hogent.be">
154 |                 <time className="text-xs text-grey">
155 |                   September 2014 - June 2017
156 |                 </time>
157 |                 <p>
158 |                   Bachelor Applied Computer Sciences at{' '}
159 |                   <a
160 |                     target="_blank"
161 |                     rel="noopener noreferrer"
162 |                     className="cursor-pointer shadow-link hover:shadow-link-hover dark:shadow-link-dark dark:hover:shadow-link-dark-hover transition-shadow"
163 |                     href="https://hogent.be"
164 |                   >
165 |                     Hogeschool Gent
166 |                   </a>
167 |                 </p>
168 |               </TimelineItem>
169 |               <TimelineItem index={4} url="https://telenet.be">
170 |                 <time className="text-xs text-grey">
171 |                   May 2012 - August 2014
172 |                 </time>
173 |                 <p>
174 |                   Support Engineer at{' '}
175 |                   <a
176 |                     target="_blank"
177 |                     rel="noopener noreferrer"
178 |                     className="cursor-pointer shadow-link hover:shadow-link-hover dark:shadow-link-dark dark:hover:shadow-link-dark-hover transition-shadow"
179 |                     href="https://telenet.be"
180 |                   >
181 |                     Telenet
182 |                   </a>
183 |                   , Lochristi
184 |                 </p>
185 |               </TimelineItem>
186 |             </div>
187 |           </div>
188 |         </div>
189 |       </section>
190 |     </>
191 |   )
192 | }
193 | 
194 | export default CV
195 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import React, {useEffect, useRef, useState} from 'react'
  2 | import Head from 'next/head'
  3 | import Image from 'next/image'
  4 | import smoothscroll from 'smoothscroll-polyfill'
  5 | import db from '../utils/db'
  6 | import Portfolio from '../components/Portfolio'
  7 | import StravaStats from '../components/StravaStats'
  8 | import Blog from '../components/Blog'
  9 | import Contact from '../components/Contact'
 10 | import me from '../public/me.jpeg'
 11 | 
 12 | const Home = ({
 13 |   blogs,
 14 |   stravaMostRecentRide,
 15 |   stravaMostRecentRun,
 16 |   stravaStats,
 17 | }) => {
 18 |   const personalRef = useRef(null)
 19 |   const portfolioRef = useRef(null)
 20 |   const statsRef = useRef(null)
 21 |   const contactRef = useRef(null)
 22 |   const blogRef = useRef(null)
 23 |   const age = Math.floor(
 24 |     (new Date() - new Date('1991-07-11').getTime()) / 3.15576e10,
 25 |   )
 26 | 
 27 |   useEffect(() => {
 28 |     smoothscroll.polyfill()
 29 |   }, [])
 30 | 
 31 |   useEffect(() => {
 32 |     let observer
 33 |     if (
 34 |       personalRef.current &&
 35 |       portfolioRef.current &&
 36 |       contactRef.current &&
 37 |       blogRef.current &&
 38 |       statsRef.current
 39 |     ) {
 40 |       const options = {
 41 |         threshold: 0.2,
 42 |       }
 43 |       observer = new IntersectionObserver((entries, observer) => {
 44 |         entries.forEach(entry => {
 45 |           const navElement = document.querySelector(
 46 |             `a[href="/#${entry.target.id}"]`,
 47 |           )
 48 |           if (
 49 |             entry.isIntersecting &&
 50 |             !navElement.classList.contains('active')
 51 |           ) {
 52 |             navElement.classList.add('active')
 53 |           } else if (
 54 |             !entry.isIntersecting &&
 55 |             navElement.classList.contains('active')
 56 |           ) {
 57 |             navElement.classList.remove('active')
 58 |           }
 59 |         })
 60 |       }, options)
 61 |       observer.observe(personalRef.current)
 62 |       observer.observe(portfolioRef.current)
 63 |       observer.observe(contactRef.current)
 64 |       observer.observe(blogRef.current)
 65 |       observer.observe(statsRef.current)
 66 |     }
 67 |     return () => observer.disconnect()
 68 |   }, [personalRef, portfolioRef, contactRef, blogRef, statsRef])
 69 | 
 70 |   return (
 71 |     <>
 72 |       <Head>
 73 |         <title>Thomas Ledoux&apos; Portfolio - Home</title>
 74 |       </Head>
 75 |       <section
 76 |         id="hero"
 77 |         className="relative min-h-screen-without-nav items-center content-center flex pb-16 dark:bg-lightgrey text-text"
 78 |       >
 79 |         <div className="container gap-8 md:gap-0 mx-6 sm:mx-auto grid md:grid-cols-2 items-center content-center justify-items-center">
 80 |           <h1 className="text-4xl font-bold md:text-6xl flex flex-col items-center md:items-start">
 81 |             <span>Thomas is a</span>
 82 |             <span className="animate-title-part1" href="#portfolio">
 83 |               developer
 84 |             </span>
 85 |             <span className="animate-title-part2" href="#stats">
 86 |               cyclist
 87 |             </span>
 88 |             <span className="animate-title-part3" href="#personal">
 89 |               travel lover
 90 |             </span>
 91 |           </h1>
 92 |           <div className="w-3/4">
 93 |             <Image
 94 |               className="rounded-full"
 95 |               priority
 96 |               alt="Profile picture"
 97 |               src={me}
 98 |               placeholder="blur"
 99 |             />
100 |           </div>
101 |         </div>
102 |         <svg
103 |           className="absolute bottom-0 left-0 sm:-bottom-20 text-purple dark:text-darkgrey fill-current"
104 |           xmlns="http://www.w3.org/2000/svg"
105 |           viewBox="0 0 1440 320"
106 |         >
107 |           <path d="M0,32L20,58.7C40,85,80,139,120,170.7C160,203,200,213,240,213.3C280,213,320,203,360,197.3C400,192,440,192,480,186.7C520,181,560,171,600,144C640,117,680,75,720,74.7C760,75,800,117,840,149.3C880,181,920,203,960,181.3C1000,160,1040,96,1080,96C1120,96,1160,160,1200,165.3C1240,171,1280,117,1320,122.7C1360,128,1400,192,1420,224L1440,256L1440,320L1420,320C1400,320,1360,320,1320,320C1280,320,1240,320,1200,320C1160,320,1120,320,1080,320C1040,320,1000,320,960,320C920,320,880,320,840,320C800,320,760,320,720,320C680,320,640,320,600,320C560,320,520,320,480,320C440,320,400,320,360,320C320,320,280,320,240,320C200,320,160,320,120,320C80,320,40,320,20,320L0,320Z"></path>
108 |         </svg>
109 |       </section>
110 |       <section
111 |         id="personal"
112 |         className="bg-purple dark:bg-darkgrey py-6"
113 |         ref={personalRef}
114 |       >
115 |         <div className="container mx-auto grid md:grid-cols-2 min-h-screen-without-nav items-center content-center">
116 |           <Image
117 |             height={150}
118 |             width={194}
119 |             layout="responsive"
120 |             alt="Illustration of me working on laptop"
121 |             src="/personal.svg"
122 |           />
123 |           <div className="bg-white rounded-lg dark:bg-lightgrey text-text p-6 mt-12 sm:mt-0 mx-6 sm:mx-0">
124 |             <div>
125 |               <h2 className="mb-6 text-2xl font-bold">Personal Information</h2>
126 |               <p className="mb-4">
127 |                 Hi, I&apos;m Thomas. I&apos;m {age} years old, living in Ghent.
128 |                 <br></br>
129 |                 I&apos;m a professional Frontend Developer, currently working at
130 |                 The Reference.
131 |               </p>
132 |               <p className="mb-4">
133 |                 In general I really love to travel. My favourite kind of holiday
134 |                 is a roadtrip with a campervan, doing lots of hikes in nature
135 |                 and going for a swim in the sea at the end of the day!<br></br>
136 |                 When I&apos;m not traveling I like to sport a lot. I play
137 |                 badminton, cycle a lot, and I go for the occasional run.
138 |               </p>
139 |               <p className="mb-4">
140 |                 I studied Applied Computer Sciences at Hogeschool Gent. I chose
141 |                 the Mobile Development track, and went on Erasmus to Barcelona
142 |                 to learn more about Swift and Java. <br></br>After graduating I
143 |                 worked for the startup Happs as a full-stack developer, where I
144 |                 created and maintained the website. <br></br>I also created an
145 |                 app for a client in React Native during this period.
146 |               </p>
147 |               <p>
148 |                 You can read more about my work in the{' '}
149 |                 <a
150 |                   className="shadow-link hover:shadow-link-hover dark:shadow-link-dark dark:hover:shadow-link-dark-hover transition-shadow"
151 |                   href="#portfolio"
152 |                 >
153 |                   section below
154 |                 </a>
155 |                 .
156 |               </p>
157 |             </div>
158 |           </div>
159 |         </div>
160 |       </section>
161 |       <section
162 |         id="portfolio"
163 |         ref={portfolioRef}
164 |         className="dark:bg-lightgrey text-text"
165 |       >
166 |         <div className="container mx-auto min-h-screen-without-nav items-center content-center py-12">
167 |           <h2 className="text-center text-2xl mb-6 md:mb-12 font-bold">
168 |             Some of my work
169 |           </h2>
170 |           <Portfolio />
171 |         </div>
172 |       </section>
173 |       <section
174 |         id="blog"
175 |         ref={blogRef}
176 |         className="bg-purple dark:bg-darkgrey text-text"
177 |       >
178 |         <div className="container mx-auto min-h-screen-without-nav flex flex-col items-center justify-center py-12">
179 |           <h2 className="text-center text-2xl mb-6 md:mb-12 font-bold">
180 |             Personal blog - most read
181 |           </h2>
182 |           <Blog blogs={blogs} />
183 |         </div>
184 |       </section>
185 |       <section
186 |         ref={statsRef}
187 |         id="stats"
188 |         className="dark:bg-lightgrey text-text"
189 |       >
190 |         <div className="container mx-auto min-h-screen-without-nav flex flex-col items-center justify-center py-12 w-full">
191 |           <h2 className="text-center text-2xl mb-6 md:mb-12 font-bold">
192 |             My Strava stats
193 |           </h2>
194 |           <StravaStats
195 |             stravaStats={stravaStats}
196 |             stravaMostRecentRun={stravaMostRecentRun}
197 |             stravaMostRecentRide={stravaMostRecentRide}
198 |           />
199 |         </div>
200 |       </section>
201 |       <section
202 |         id="contact"
203 |         ref={contactRef}
204 |         className="bg-purple dark:bg-darkgrey text-text"
205 |       >
206 |         <div className="container grid md:grid-cols-2 gap-6 min-h-screen-without-nav content-center align-items">
207 |           <Contact />
208 |         </div>
209 |       </section>
210 |     </>
211 |   )
212 | }
213 | 
214 | export async function getStaticProps(context) {
215 |   const entries = await db.collection('access_tokens').get()
216 |   let [{access_token, refresh_token}] = entries.docs.map(entry => entry.data())
217 |   const resToken = await fetch(
218 |     `https://www.strava.com/api/v3/oauth/token?client_id=${process.env.CLIENT_ID_STRAVA}&client_secret=${process.env.CLIENT_SECRET_STRAVA}&grant_type=refresh_token&refresh_token=${refresh_token}`,
219 |     {
220 |       method: 'POST',
221 |     },
222 |   )
223 |   const {
224 |     access_token: newToken,
225 |     refresh_token: newRefreshToken,
226 |   } = await resToken.json()
227 |   const resStats = await fetch(
228 |     'https://www.strava.com/api/v3/athletes/40229513/stats',
229 |     {
230 |       headers: {
231 |         Authorization: `Bearer ${newToken}`,
232 |       },
233 |     },
234 |   )
235 |   const resActivities = await fetch(
236 |     'https://www.strava.com/api/v3/athlete/activities?per_page=100',
237 |     {
238 |       headers: {
239 |         Authorization: `Bearer ${newToken}`,
240 |       },
241 |     },
242 |   )
243 |   db.collection('access_tokens')
244 |     .doc('CSXyda8OfK75Aw0vtbtZ')
245 |     .update({
246 |       access_token: newToken,
247 |       refresh_token: newRefreshToken,
248 |     })
249 | 
250 |   const stravaStats = await resStats.json()
251 |   const stravaActivies = await resActivities.json()
252 |   const res = await fetch(`https://dev.to/api/articles/me/published`, {
253 |     headers: {
254 |       'api-key': process.env.DEV_KEY,
255 |     },
256 |   })
257 |   const blogs = await res.json()
258 |   return {
259 |     props: {
260 |       stravaStats,
261 |       stravaMostRecentRide: stravaActivies.filter(
262 |         activity => activity.type === 'Ride',
263 |       )[0],
264 |       stravaMostRecentRun:
265 |         stravaActivies.filter(activity => activity.type === 'Run')?.[0] ?? null,
266 |       blogs,
267 |     },
268 |     revalidate: 86400,
269 |   }
270 | }
271 | 
272 | export default Home
273 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/contact.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 561.8 654.5">
 2 |   <path
 3 |     d="M96.1 393.8h254.5v221H96.1z"
 4 |   />
 5 |   <path
 6 |     fill="#FFB8B8"
 7 |     d="M260.5 160s2.8 10.8-3.4 18.4c-6.2 7.6 26.6 34.8 26.6 34.8l17.3-3s-3.8-33.1 1.3-41.4-41.8-8.8-41.8-8.8z"
 8 |   />
 9 |   <path
10 |     opacity=".1"
11 |     d="M260.5 160s2.8 10.8-3.4 18.4c-6.2 7.6 26.6 34.8 26.6 34.8l17.3-3s-3.8-33.1 1.3-41.4-41.8-8.8-41.8-8.8z"
12 |   />
13 |   <path
14 |     fill="#FFB8B8"
15 |     d="M375.4 474.6l-38.1 50.6 26 15.1 35.8-58.6z"
16 |   />
17 |   <path
18 |     fill="#2F2E41"
19 |     d="M348.7 526s-14-16.3-13.4-12.7c.6 3.6-10 34.5-.1 37.5s94.6 10.9 95.8 1.3-25.3-16.3-25.3-16.3-15.7-15.1-19.2-13.6-37.8 3.8-37.8 3.8z"
20 |   />
21 |   <path
22 |     fill="#FFB8B8"
23 |     d="M366.9 522.9l30.4 51.9 23-13.3-30.7-42.5z"
24 |   />
25 |   <path
26 |     fill="#2F2E41"
27 |     d="M415 399.4l-9 12.8s-43.1 59.9-38.5 64.7 23.6 23.1 33.3 19.6 44.1-64.7 44.1-64.7l-9-35.9-20.9 3.5z"
28 |   />
29 |   <path
30 |     fill="#2F2E41"
31 |     d="M229.3 387.3s9.7 18 34.1 24.1 50 18.6 50.9 18.4 3.5-1.5 4.1 2.1 7.3 10 7.3 10 27 91.8 37.3 91.9 31.5-7.3 32-10.2-31.6-96.7-31.9-98.5l-3.8-21.8s42.4 6.8 46.3 8 39.1 20.4 39.1 20.4 35.8-25.8 2.3-51.9-91.1-45.2-91.1-45.2l-20.7-5.8-18-1.1-2.7-10.2-42.7 2.5-44.5 18.9 2 48.4z"
32 |   />
33 |   <circle fill="#FFB8B8" cx="285.6" cy="148.1" r="33.2" />
34 |   <path
35 |     fill="#D0CDE1"
36 |     d="M255.5 179.8l4-.7s7.2 27.8 29.6 32.4c0 0 11-13.2 10.5-15.4s8.7-14.1 13.6-7.5-1.2 123.8 2.9 125.9 12.9 4.3 5.8 12.1-35.3 18.2-41.5 14.6-19-34.2-24.5-44.5c-5.5-10.3-14.3-45.3-14.3-45.3s-11.3-38.3-4.3-47 18.2-24.6 18.2-24.6z"
37 |   />
38 |   <path
39 |     fill="#2F2E41"
40 |     d="M287.3 319.1c-.7 8.2-2 16.3-3.8 24.3-1.6 6.5-3.5 10.4-5.7 10.3-5.5-.4-8 7.7-9.3 17-1.4 9.9-1.4 21.2-2.1 25.2-1 5.3-7.4 9.3-20.3 8.1-7.7-.9-15.2-2.7-22.3-5.5-17.3-6.3-16.8-57.5-13.9-95.4 1.8-23.3 4.4-41.6 4.4-41.6s-5.3-15.7-7-26.5c-.3-2-.5-4-.5-5.9.3-9.4 17.4-34.8 27.8-50.7 10.4-15.8 24.6-4.2 24.6-4.2l-4.9 14.9s7.6 11.8 7.7 23 18.3 19.3 24.9 24.8c4 3.4 3.9 49 .4 82.2zm14.5-139.6s1.2 1.4 6.7.7c6.6-.8 15.6 1.4 17.7 7.7 3.9 11.5 14.7 58.4 14.7 58.4s4.5 53.5 6.6 65.4 1 22.3 3 28.5-19.8-11.6-27.8-9.3-13.2-27.7-12.2-38.2 1.9-21.9-.9-32.6c-2.8-10.8 2.2-39.2 2-45.8s-17.8-22.9-9.8-34.8z"
41 |   />
42 |   <path
43 |     fill="#FFB8B8"
44 |     d="M325.3 346s35.2 19.2 38.6 46.5-47.1-26.5-47.1-26.5l8.5-20zm20.1-19.4s10.8 54.3 27.6 51.5-9.4-54.6-9.4-54.6l-18.2 3.1z"
45 |   />
46 |   <path
47 |     fill="#2F2E41"
48 |     d="M402.9 563.5s-8.6 9.9-10.7 8.4-7 19-2.6 22.9 21.5 10.4 21.6 16.9 45.9 5.2 47.5-1.6-5.7-22.4-10.9-25.3-24.3-29.2-24.3-29.2-15 2.3-20.6 7.9z"
49 |   />
50 |   <path
51 |     opacity=".1"
52 |     d="M319.7 379.2c-8.2-5.8-30.9-7.2-51.2-8.5-8.9-.6-17.3-1.1-23.7-2-6.2-.9-11.8-6.5-16.7-15-7.5-12.8-13.6-32-18.3-50.5 1.8-23.3 4.4-41.6 4.4-41.6s-5.3-15.7-7-26.5c1.2-1.7 2.7-3 4.5-4 21.5-9.2 41.9 81.4 44.5 95.6 0 .2.1.5.1.6 1.3 7.3 14.9 13.6 27.1 16.1 7.5 1.5 14.5 1.6 17.7-.4 8.5-5.2 34.5 15.6 36.5 16.2 2.2.6-6.2 28.3-17.9 20z"
53 |   />
54 |   <path
55 |     fill="#2F2E41"
56 |     d="M211.8 225.5s-15.6 7.4-8.7 41.8 20.7 92.9 41.8 95.9 63.1 2.3 74.9 10.5 20.1-19.4 18.1-20-28-21.4-36.5-16.2-42.8-3.9-44.8-15.7c-2.2-11.9-23-105.7-44.8-96.3zM324.2 209l17.1 39.8s1.7-.9 3.7 5.4c2 6.2 2.9 11.7 6.5 15.8s19.1 62.3 19.6 65-21.6 12.1-26.5 4.6S324.2 209 324.2 209z"
57 |   />
58 |   <path
59 |     fill="#4D3324"
60 |     d="M266.7 147.7c1.3-.3 1.5-2 1.5-3.3.2-7.1 4.5-14.3 11.2-16.3 2.6-.7 5.3-.9 8-.4 3.8.5 7.4 1.7 10.8 3.6 1.8 1 3.5 2.2 5.5 2.5 1.3.2 7 1.9 8.3 2.1 2.9.5 5.6 3.1 8.3 2.1 2.6-.9 3.2-4.3 3.3-7.2.1-6.4-4.7-15.2-9-20-3.2-3.6-8.1-5.3-12.9-6.1-5.6-.9-11.2-1.2-16.9-1-7.6.1-15.5.7-22.4 4-6.9 3.3-12.7 9.9-13 17.5-.1 1.6.1 3.2 0 4.8-.3 3.9-2.4 7.4-3.3 11.1-1.4 5.6-.4 11.5 2.8 16.3 2.6 3.8 6.6 7.2 6.4 11.7l5.5-5.7c1.7-1.3 2.3-3.6 1.4-5.6l-2-7.6c-.5-1.4-.6-2.9-.2-4.3 2.3-5.4 4.6 2.3 6.7 1.8z"
61 |   />
62 | </svg>


--------------------------------------------------------------------------------
/public/logoaccent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/public/logoaccent.png


--------------------------------------------------------------------------------
/public/logoachterderegenboog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/public/logoachterderegenboog.png


--------------------------------------------------------------------------------
/public/logocarglass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/public/logocarglass.png


--------------------------------------------------------------------------------
/public/logocarlier.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/public/logocarlier.png


--------------------------------------------------------------------------------
/public/logodeckdeckgo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/public/logodeckdeckgo.png


--------------------------------------------------------------------------------
/public/logokaraton.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/public/logokaraton.png


--------------------------------------------------------------------------------
/public/logonalo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/public/logonalo.png


--------------------------------------------------------------------------------
/public/logopoa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/public/logopoa.png


--------------------------------------------------------------------------------
/public/logorialto.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/public/logorialto.png


--------------------------------------------------------------------------------
/public/me.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/public/me.jpeg


--------------------------------------------------------------------------------
/public/myAvatar.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thomasledoux1/website-thomas/958ba6b44cccd170c50cf3d830a338c7d68a3b96/public/myAvatar.ico


--------------------------------------------------------------------------------
/public/personal.svg:
--------------------------------------------------------------------------------
 1 | <svg viewBox="0 0 893 690" xmlns="http://www.w3.org/2000/svg">
 2 |   <g transform="translate(0 1)" fill="none">
 3 |     <circle fill="#FFB8B8" cx="435.922" cy="137.405" r="73.536" />
 4 |     <path
 5 |       d="M381.036 174.173s13.854 104.443-7.46 116.166c-21.315 11.723 126.823 12.789 126.823 12.789S467.36 212.54 482.28 184.83l-101.245-10.658z"
 6 |       fill="#FFB8B8"
 7 |     />
 8 |     <path
 9 |       d="M608.57 303.656l-12.32 56.1-26.05 118.69-.78 6.5-8.99 75.25-5.98 49.99-4.01 33.58c-24.38 12.53-42.05 21.18-42.05 21.18s-1.52-7.62-3.97-17.37c-17.11 5.13-48.77 13.64-75.6 15.34 9.77 10.89 14.26 21.12 8.17 28.67-18.38 22.76-94.26-24.92-120.8-42.7a71.84 71.84 0 00-.7 12.86l-20.31-15.62 2.01-35.94 3.39-60.81 4.26-76.26a80.064 80.064 0 01-3.37-10.03c-6.22-22.12-13.77-66.29-19.56-103.33-4.66-29.81-8.16-55-8.9-60.36l-.15-1.06 112.43-49.68c7.99 18.53 45.3 24.1 45.3 24.1 30.91-2.13 55.14-18.43 55.14-18.43l122.84 49.33z"
10 |       fill="#D0CDE1"
11 |     />
12 |     <path
13 |       d="M516.92 643.636s-4.76 1.63-12.5 3.94c-17.11 5.13-48.77 13.64-75.6 15.34-23.1 1.48-42.62-2.08-46.19-17.15-1.53-6.48.64-11.81 5.37-16.19 14.12-13.09 51-17.78 80.25-19.39 8.26-.45 15.9-.66 22.26-.74 10.8-.14 17.88.08 17.88.08l.17.66 8.36 33.45z"
14 |       fill="#A0616A"
15 |     />
16 |     <path
17 |       d="M374.746 67.847l-13.75-5.505s28.75-31.65 68.748-28.898l-11.25-12.385s27.5-11.01 52.498 17.89c13.142 15.19 28.347 33.047 37.825 53.162h14.725l-6.146 13.532 21.51 13.532-22.077-2.43a75.617 75.617 0 01.599 22.444 29.04 29.04 0 01-10.635 18.998s-17.052-35.296-17.052-40.8v13.761s-13.75-12.385-13.75-20.642l-7.499 9.633-3.75-15.137-46.248 15.137 7.5-12.385-28.749 4.129 11.25-15.138s-32.498 17.89-33.749 33.027c-1.25 15.137-10.762 29.48-10.762 29.48s-25.486-70.764 10.762-91.405z"
18 |       fill="#4D3324"
19 |     />
20 |     <path
21 |       d="M688.5 561.566c-7.49 8.12-26.05 20.35-48.55 33.59-8.37 4.92-17.28 9.99-26.37 15.03-21.69 12.03-44.4 23.95-63.14 33.58-24.38 12.53-42.05 21.18-42.05 21.18s-1.52-7.62-3.97-17.37c-3.28-13.05-8.22-29.92-13.37-37.39-.18-.26-.36-.5-.54-.74-1.5-1.97-3.01-3.12-4.5-3.12l74.42-46.13 32.16-19.94-23.17-55.31-29.06-69.38 17.54-55.81 17.63-56.1h33.04s10.94 23.88 24.93 57.18c2.09 4.98 4.25 10.17 6.45 15.53 28.78 70 64.66 167.75 48.55 185.2z"
22 |       fill="#D0CDE1"
23 |     />
24 |     <path
25 |       d="M436.99 691.586c-18.38 22.76-94.26-24.92-120.8-42.7-5.78-3.87-9.22-6.32-9.22-6.32l24.28-32.38 7.69-10.25s6.88 3.65 17.05 9.59c.37.22.74.44 1.12.66 8.77 5.15 19.78 11.88 30.89 19.39 15.33 10.37 30.83 22.2 40.82 33.34 9.77 10.89 14.26 21.12 8.17 28.67z"
26 |       fill="#A0616A"
27 |     />
28 |     <path
29 |       d="M355.99 609.526c-2.714-.01-5.423.21-8.1.66-22.99 3.95-29.77 24.76-31.7 38.7a71.84 71.84 0 00-.7 12.86l-20.31-15.62-7.4-5.69c-17.81-6.21-33.68-17.24-47.44-30.25a238.482 238.482 0 01-31.95-37.89 334.15 334.15 0 01-24.72-42.4 31.184 31.184 0 01-.43-26.45l25.15-56.05 36.76-81.92c.27-1.95.567-3.857.89-5.72 7.29-41.8 26.82-60.36 26.82-60.36h14.92l9.98 60.36 12.4 74.99-8.69 28.34-20.08 65.45 19.19 20.84 55.41 60.15z"
30 |       fill="#D0CDE1"
31 |     />
32 |     <path d="M372.877 434.806l12.754 14.88a366.668 366.668 0 0014.785-3.157l-3.664-11.723 8.958 10.45c53.997-13.28 120.927-39.101 120.927-39.101s-72.257 5.298-126.209-6.489c-23.87-5.215-48.43 6.618-58.226 29.003-5.693 13.01-4.8 24.282 15.394 24.282a133.375 133.375 0 0020.353-1.914l-5.072-16.231z" />
33 |     <path
34 |       d="M663.65 679.386v6.07c0 1.666-.305 3.318-.91 4.87-.268.692-.593 1.36-.97 2a13.437 13.437 0 01-11.55 6.56H203.67a13.437 13.437 0 01-11.55-6.56 13.682 13.682 0 01-.97-2 13.412 13.412 0 01-.91-4.87v-6.07a13.43 13.43 0 0113.43-13.43h25.74v-2.83a.56.56 0 01.56-.56h13.43a.56.56 0 01.56.56v2.83h8.39v-2.83a.56.56 0 01.56-.56h13.43a.56.56 0 01.56.56v2.83h8.4v-2.83a.56.56 0 01.56-.56h13.43a.56.56 0 01.56.56v2.83h8.39v-2.83a.56.56 0 01.56-.56h13.43a.56.56 0 01.56.56v2.83h8.39v-2.83a.56.56 0 01.56-.56h13.43a.56.56 0 01.56.56v2.83h8.4v-2.83a.56.56 0 01.56-.56h13.43a.56.56 0 01.56.56v2.83h8.39v-2.83a.56.56 0 01.56-.56h105.2a.56.56 0 01.56.56v2.83h8.4v-2.83a.56.56 0 01.56-.56h13.43a.566.566 0 01.56.56v2.83h8.39v-2.83a.56.56 0 01.56-.56h13.43a.56.56 0 01.56.56v2.83h8.39v-2.83a.56.56 0 01.56-.56h13.43a.56.56 0 01.56.56v2.83h8.4v-2.83a.56.56 0 01.56-.56h13.43a.557.557 0 01.55.56v2.83h8.4v-2.83a.56.56 0 01.56-.56h13.43a.56.56 0 01.56.56v2.83h8.39v-2.83a.56.56 0 01.56-.56h13.43a.56.56 0 01.56.56v2.83h39.17a13.426 13.426 0 0113.43 13.43z"
35 |       fill="#3F3D56"
36 |     />
37 |     <path
38 |       fill="#3F3D56"
39 |       d="M60.5 690.326h733v2h-733zM627.694 423.757H461.252v-3.43H385.78v3.43H218.65c-6.217 0-11.258 5.04-11.258 11.258v227.912c0 6.218 5.041 11.258 11.259 11.258h409.043c6.218 0 11.26-5.04 11.26-11.258V435.015a11.259 11.259 0 00-11.26-11.258z"
40 |     />
41 |     <circle stroke="#D0CDE1" cx="423.5" cy="503.326" r="25" />
42 |     <circle fill="#D0CDE1" cx="415.5" cy="512.326" r="25" />
43 |     <path fill="#D0CDE1" d="M80.446 680.223h28v28h-28z" />
44 |     <path
45 |       d="M91.45 658.223v34h34v-34h-34zm32.52 32.52H92.92v-31.04h31.05v31.04z"
46 |       fill="#3F3D56"
47 |     />
48 |     <path fill="#D0CDE1" d="M728.446 680.223h28v28h-28z" />
49 |     <path
50 |       d="M739.45 658.223v34h34v-34h-34zm32.52 32.52h-31.05v-31.04h31.05v31.04z"
51 |       fill="#3F3D56"
52 |     />
53 |     <path
54 |       d="M150.594 618.754c.933 31.95-17.735 43.659-41.164 44.343a72.17 72.17 0 01-1.625.03 65.435 65.435 0 01-3.228-.055c-21.188-.88-37.96-12.127-38.827-41.84-.898-30.75 37.269-70.703 40.132-73.658l.005-.003.165-.17s43.609 39.406 44.542 71.353z"
55 |       fill="#D0CDE1"
56 |     />
57 |     <path
58 |       d="M107.744 658.255l14.882-22.131-14.852 24.512.031 2.49a65.435 65.435 0 01-3.228-.054l.739-32.012-.02-.247.027-.047.07-3.025-16.298-23.663 16.279 21.399.058.639.557-24.186-14.077-24.533 14.117 20.284-.147-50.107v-.167l.005.164.935 39.491 12.83-16.041-12.788 19.443.28 21.634 11.805-21.114-11.762 24.295.156 12.03 17.169-29.412-17.117 33.608.349 26.75z"
59 |       fill="#3F3D56"
60 |     />
61 |     <path
62 |       d="M798.594 618.754c.933 31.95-17.735 43.659-41.164 44.343a72.17 72.17 0 01-1.625.03 65.435 65.435 0 01-3.228-.055c-21.188-.88-37.96-12.127-38.827-41.84-.898-30.75 37.269-70.703 40.132-73.658l.005-.003.165-.17s43.609 39.406 44.542 71.353z"
63 |       fill="#D0CDE1"
64 |     />
65 |     <path
66 |       d="M755.744 658.255l14.882-22.131-14.852 24.512.031 2.49a65.435 65.435 0 01-3.228-.054l.739-32.012-.02-.247.027-.047.07-3.025-16.298-23.663 16.279 21.399.058.639.557-24.186-14.077-24.533 14.117 20.284-.147-50.107v-.167l.005.164.935 39.491 12.83-16.041-12.788 19.443.28 21.634 11.805-21.114-11.762 24.295.156 12.03 17.169-29.412-17.117 33.608.349 26.75z"
67 |       fill="#3F3D56"
68 |     />
69 |   </g>
70 | </svg>


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 | 


--------------------------------------------------------------------------------
/styles/index.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | html {
  6 |   --purple: #f5ebff;
  7 |   --primary: #5851f9;
  8 |   --text: #000;
  9 |   --yellow: #f7df1e;
 10 |   --blue: #2965f1;
 11 |   --darkgray: #222831;
 12 |   --beige: #eee;
 13 |   --secondary: #f5ebff;
 14 |   --lightpurple: #f0efff;
 15 | }
 16 | 
 17 | html.dark {
 18 |   --primary: #b55400;
 19 |   --text: var(--beige);
 20 |   --secondary: var(--darkgray);
 21 | }
 22 | 
 23 | html {
 24 |   scroll-behavior: smooth;
 25 | }
 26 | 
 27 | html.dark progress[value]::-webkit-progress-value {
 28 |   background-color: var(--primary);
 29 | }
 30 | 
 31 | .logo:hover .letter {
 32 |   animation: bounce 0.3s ease alternate;
 33 | }
 34 | 
 35 | .logo:hover .letter:nth-child(1) {
 36 |   animation-delay: 0.1s;
 37 | }
 38 | 
 39 | .logo:hover .letter:nth-child(2) {
 40 |   animation-delay: 0.2s;
 41 | }
 42 | 
 43 | .logo:hover .letter:nth-child(3) {
 44 |   animation-delay: 0.3s;
 45 | }
 46 | 
 47 | .logo:hover .letter:nth-child(4) {
 48 |   animation-delay: 0.4s;
 49 | }
 50 | 
 51 | .logo:hover .letter:nth-child(5) {
 52 |   animation-delay: 0.5s;
 53 | }
 54 | 
 55 | .logo:hover .letter:nth-child(6) {
 56 |   animation-delay: 0.6s;
 57 | }
 58 | 
 59 | .logo:hover .letter:nth-child(7) {
 60 |   animation-delay: 0.7s;
 61 | }
 62 | 
 63 | .logo:hover .letter:nth-child(8) {
 64 |   animation-delay: 0.8s;
 65 | }
 66 | 
 67 | .logo:hover .letter:nth-child(9) {
 68 |   animation-delay: 0.9s;
 69 | }
 70 | 
 71 | .logo:hover .letter:nth-child(10) {
 72 |   animation-delay: 1s;
 73 | }
 74 | 
 75 | .logo:hover .letter:nth-child(11) {
 76 |   animation-delay: 1.1s;
 77 | }
 78 | 
 79 | .logo:hover .letter:nth-child(12) {
 80 |   animation-delay: 1.2s;
 81 | }
 82 | 
 83 | .logo:hover .letter:nth-child(13) {
 84 |   animation-delay: 1.3s;
 85 | }
 86 | 
 87 | .timeline-container::after {
 88 |   left: calc(50% - 2px);
 89 | }
 90 | 
 91 | .timeline-item:after {
 92 |   box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1);
 93 |   top: calc(50% - 0.5rem);
 94 | }
 95 | 
 96 | .timeline-item:nth-child(even)::after {
 97 |   box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
 98 | }
 99 | 
100 | nav ul li a.active:before,
101 | nav ul li a.active:after,
102 | nav ul li:hover a:before,
103 | nav ul li:hover a:after {
104 |   width: 100%;
105 | }
106 | 
107 | @keyframes bounce {
108 |   50% {
109 |     top: -5px;
110 |   }
111 | 
112 |   100% {
113 |     top: 0;
114 |   }
115 | }
116 | 
117 | .star svg.full {
118 |   animation: pop 0.3s linear 1;
119 | }
120 | 
121 | .star:nth-child(1) svg.full {
122 |   animation-delay: 0.6s;
123 | }
124 | 
125 | .star:nth-child(2) svg.full {
126 |   animation-delay: 0.7s;
127 | }
128 | 
129 | .star:nth-child(3) svg.full {
130 |   animation-delay: 0.8s;
131 | }
132 | 
133 | .star:nth-child(4) svg.full {
134 |   animation-delay: 0.9s;
135 | }
136 | 
137 | .star:nth-child(5) svg.full {
138 |   animation-delay: 1s;
139 | }
140 | 
141 | section {
142 |   scroll-margin-top: 4rem;
143 | }
144 | 
145 | li.css {
146 |   background-color: var(--blue);
147 |   color: #fff;
148 | }
149 | 
150 | li.nextjs,
151 | li.discuss {
152 |   background-color: #000;
153 |   color: #fff;
154 | }
155 | 
156 | li.react {
157 |   background-color: #222222;
158 |   color: #61daf6;
159 | }
160 | 
161 | li.javascript {
162 |   background-color: var(--yellow);
163 |   color: #000;
164 | }
165 | 
166 | li.html {
167 |   background-color: #f53900;
168 |   color: white;
169 | }
170 | 
171 | li.performance {
172 |   background-color: #ffa364;
173 |   color: #000;
174 | }
175 | 
176 | li.showdev {
177 |   background-color: #091b47;
178 |   color: #b2ffe1;
179 | }
180 | 
181 | li.gatsby {
182 |   background-color: #663399;
183 |   color: #fff;
184 | }
185 | 
186 | progress[value]::-webkit-progress-bar {
187 |   background-color: var(--beige);
188 |   border-radius: 2px;
189 |   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
190 | }
191 | 
192 | progress[value]::-webkit-progress-value {
193 |   background-color: var(--primary);
194 | }
195 | 
196 | @keyframes pop {
197 |   50% {
198 |     transform: scale(1.2);
199 |   }
200 | }
201 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | module.exports = {
 3 |   mode: 'jit',
 4 |   purge: ['./pages/*.js', './components/*.js'],
 5 |   darkMode: 'class',
 6 |   theme: {
 7 |     extend: {
 8 |       colors: {
 9 |         purple: '#F5EBFF',
10 |         primary: 'var(--primary)',
11 |         lightgrey: '#393e46',
12 |         linkedIn: '#0076b5',
13 |         darkgrey: 'var(--darkgray)',
14 |         text: 'var(--text)',
15 |         orange: '#b55400',
16 |         yellow: 'var(--yellow)',
17 |         blue: 'var(--blue)',
18 |         secondary: 'var(--secondary)',
19 |         lightpurple: 'var(--lightpurple)',
20 |       },
21 |       inset: {
22 |         timelineCircle: 'calc(50% - 0.5em)',
23 |       },
24 |       boxShadow: {
25 |         case: '0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24)',
26 |         'case-hover': '0 10px 28px rgba(0,0,0,.25), 0 8px 10px rgba(0,0,0,.22)',
27 |         link: 'inset 0 -4px 0 #6c63ff',
28 |         'link-hover': 'inset 0 -18px 0 #6c63ff',
29 |         'link-dark': 'inset 0 -4px 0 #b55400',
30 |         'link-dark-hover': 'inset 0 -18px 0 #b55400',
31 |       },
32 |       minHeight: {
33 |         'screen-without-nav': 'calc(100vh - 4rem)',
34 |       },
35 |       keyframes: {
36 |         'title-part1': {
37 |           '0%, 100%': {color: 'var(--text)'},
38 |           '50%': {color: 'var(--primary)'},
39 |         },
40 |         'title-part2': {
41 |           '0%, 100%': {color: 'var(--text)'},
42 |           '50%': {color: 'var(--yellow)'},
43 |         },
44 |         'title-part3': {
45 |           '0%, 100%': {color: 'var(--text)'},
46 |           '50%': {color: 'var(--blue)'},
47 |         },
48 |       },
49 |       animation: {
50 |         'title-part1': 'title-part1 3s ease-in-out infinite',
51 |         'title-part2': 'title-part2 3s ease-in-out 1s infinite',
52 |         'title-part3': 'title-part3 3s ease-in-out 2s infinite',
53 |       },
54 |       rotate: {
55 |         '135': '135deg',
56 |         '-135': '-135deg',
57 |       },
58 |     },
59 |   },
60 | }
61 | 


--------------------------------------------------------------------------------
/utils/db/index.js:
--------------------------------------------------------------------------------
 1 | import admin from 'firebase-admin'
 2 | 
 3 | if (!admin.apps.length) {
 4 |   try {
 5 |     admin.initializeApp({
 6 |       credential: admin.credential.cert({
 7 |         type: 'service_account',
 8 |         auth_uri: 'https://accounts.google.com/o/oauth2/auth',
 9 |         token_uri: 'https://oauth2.googleapis.com/token',
10 |         auth_provider_x509_cert_url:
11 |           'https://www.googleapis.com/oauth2/v1/certs',
12 |         client_x509_cert_url:
13 |           'https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-j3bwb%40personal-website-e4e38.iam.gserviceaccount.com',
14 |         project_id: process.env.PROJECT_ID,
15 |         private_key_id: process.env.PRIVATE_KEY_ID,
16 |         private_key: process.env.PRIVATE_KEY,
17 |         client_id: process.env.CLIENT_EMAIL,
18 |         client_email: process.env.CLIENT_EMAIL,
19 |       }),
20 |     })
21 |   } catch (error) {
22 |     console.log('Firebase admin initialization error', error.stack)
23 |   }
24 | }
25 | export default admin.firestore()
26 | 


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