├── public
    ├── favicon.ico
    ├── katherine.jpg
    └── vercel.svg
├── postcss.config.js
├── README.md
├── .prettierrc
├── pages
    ├── api
    │   └── hello.js
    ├── projects.js
    ├── _app.js
    ├── index.js
    └── about.js
├── .gitignore
├── tailwind.config.js
├── package.json
├── hooks
    └── useLocalStorage.js
└── components
    └── layout.js


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/octokatherine/personal-website/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/katherine.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/octokatherine/personal-website/HEAD/public/katherine.jpg


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | My personal website, built with Next.js.
2 | 
3 | You can visit the deployed site [here](https://katherineoelsner.com)
4 | 


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


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default (req, res) => {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/projects.js:
--------------------------------------------------------------------------------
 1 | import Layout from '../components/layout'
 2 | 
 3 | export default function Projects() {
 4 |   return (
 5 |     <Layout>
 6 |       <div>projects</div>
 7 |     </Layout>
 8 |   )
 9 | }
10 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import 'tailwindcss/tailwind.css'
 2 | import { AnimateSharedLayout } from 'framer-motion'
 3 | 
 4 | function MyApp({ Component, pageProps }) {
 5 |   return (
 6 |     <AnimateSharedLayout>
 7 |       <Component {...pageProps} />
 8 |     </AnimateSharedLayout>
 9 |   )
10 | }
11 | 
12 | export default MyApp
13 | 


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


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const colors = require('tailwindcss/colors')
 2 | 
 3 | module.exports = {
 4 |   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
 5 |   darkMode: 'class', // or 'media' or 'class'
 6 |   theme: {
 7 |     extend: {},
 8 |     colors: {
 9 |       lightBlue: colors.lightBlue,
10 |       blue: colors.blue,
11 |       gray: colors.gray,
12 |       blueGray: colors.blueGray,
13 |       white: colors.white,
14 |       pink: colors.pink,
15 |     },
16 |   },
17 |   variants: {
18 |     extend: {},
19 |   },
20 |   plugins: [],
21 | }
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "personal-website",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@fortawesome/fontawesome-free": "^5.15.2",
12 |     "@fortawesome/fontawesome-svg-core": "^1.2.34",
13 |     "@fortawesome/free-brands-svg-icons": "^5.15.2",
14 |     "@fortawesome/free-solid-svg-icons": "^5.15.2",
15 |     "@fortawesome/react-fontawesome": "^0.1.14",
16 |     "dark-mode-toggle-animation": "^1.0.0",
17 |     "framer-motion": "^3.6.2",
18 |     "next": "11.1.3",
19 |     "react": "17.0.1",
20 |     "react-dom": "17.0.1"
21 |   },
22 |   "devDependencies": {
23 |     "autoprefixer": "^10.2.4",
24 |     "postcss": "^8.2.6",
25 |     "tailwindcss": "^2.0.3"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Layout from '../components/layout'
 2 | import { motion } from 'framer-motion'
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <Layout>
 7 |       <motion.div
 8 |         key="home"
 9 |         initial={{ opacity: 0 }}
10 |         animate={{ opacity: 1 }}
11 |         transition={{ duration: 0.5, delay: 0.2 }}
12 |         className="flex flex-col items-center justify-center"
13 |       >
14 |         <div className="flex flex-col items-center justify-center">
15 |           <img className="w-32 h-32 mb-8 rounded-full" src="/katherine.jpg" alt="Katherine" />
16 |           <h1 className="mx-auto text-2xl font-semibold tracking-widest text-center sm:text-3xl">
17 |             KATHERINE OELSNER
18 |           </h1>
19 |           <hr className="w-16 my-8 border-gray-300" />
20 |           <h2 className="text-lg tracking-widest text-center">SENIOR SOFTWARE ENGINEER</h2>
21 |         </div>
22 |       </motion.div>
23 |     </Layout>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/pages/about.js:
--------------------------------------------------------------------------------
 1 | import Layout from '../components/layout'
 2 | import { motion } from 'framer-motion'
 3 | 
 4 | export default function About() {
 5 |   return (
 6 |     <Layout>
 7 |       <motion.div
 8 |         key="about"
 9 |         initial={{ opacity: 0 }}
10 |         animate={{ opacity: 1 }}
11 |         transition={{ duration: 0.5, delay: 0.2 }}
12 |         className="px-4"
13 |       >
14 |         <div className="mb-6 text-center text-gray-800 dark:text-white">
15 |           Hi, I'm Katherine! I am a Senior Software Engineer at GitHub with a passion for developing web and mobile
16 |           applications that make a positive impact on peoples lives.
17 |         </div>
18 |         <div className="text-center text-gray-800 dark:text-white">
19 |           In addition to coding and learning new tech, I enjoy rock climbing, drinking coffee,
20 |           playing guitar, reading, and hanging with my dog. If any of these things interest you too,
21 |           I'd love to chat!
22 |         </div>
23 |       </motion.div>
24 |     </Layout>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/hooks/useLocalStorage.js:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | 
 3 | export function useLocalStorage(key, initialValue) {
 4 |   // State to store our value
 5 |   // Pass initial state function to useState so logic is only executed once
 6 |   const [storedValue, setStoredValue] = useState(() => {
 7 |     try {
 8 |       // Get from local storage by key
 9 |       const item = window.localStorage.getItem(key)
10 | 
11 |       return item ? item : initialValue
12 |     } catch (error) {
13 |       // If error also return initialValue
14 |       console.log(error)
15 |       return initialValue
16 |     }
17 |   })
18 | 
19 |   // Return a wrapped version of useState's setter function that ...
20 |   // ... persists the new value to localStorage.
21 |   const setValue = (value) => {
22 |     try {
23 |       // Allow value to be a function so we have same API as useState
24 |       const valueToStore = value instanceof Function ? value(storedValue) : value
25 |       // Save state
26 |       setStoredValue(valueToStore)
27 |       // Save to local storage
28 |       window.localStorage.setItem(key, JSON.stringify(valueToStore))
29 |     } catch (error) {
30 |       // A more advanced implementation would handle the error case
31 |       console.log(error)
32 |     }
33 |   }
34 | 
35 |   return [storedValue, setValue]
36 | }
37 | 


--------------------------------------------------------------------------------
/components/layout.js:
--------------------------------------------------------------------------------
  1 | import { AnimatePresence, motion } from 'framer-motion'
  2 | import { faDev, faGithub, faLinkedinIn, faTwitter } from '@fortawesome/free-brands-svg-icons'
  3 | 
  4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  5 | import Head from 'next/head'
  6 | import Link from 'next/link'
  7 | import dynamic from 'next/dynamic'
  8 | import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'
  9 | import { useEffect } from 'react'
 10 | import { useLocalStorage } from '../hooks/useLocalStorage'
 11 | 
 12 | const DarkModeToggle = dynamic(() => import('dark-mode-toggle-animation'), { ssr: false })
 13 | 
 14 | export default function Layout({ children }) {
 15 |   const [theme, setTheme] = useLocalStorage('theme', 'light')
 16 | 
 17 |   useEffect(() => {
 18 |     if (
 19 |       localStorage.theme === 'dark' ||
 20 |       (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
 21 |     ) {
 22 |       document.getElementsByTagName('html')[0].classList.add('dark')
 23 |     } else {
 24 |       document.getElementsByTagName('html')[0].classList.remove('dark')
 25 |     }
 26 |   }, [])
 27 | 
 28 |   useEffect(() => {
 29 |     if (theme == 'dark') {
 30 |       document.getElementsByTagName('html')[0].classList.add('dark')
 31 |       localStorage.theme = 'dark'
 32 |     } else {
 33 |       document.getElementsByTagName('html')[0].classList.remove('dark')
 34 |       localStorage.theme = 'light'
 35 |     }
 36 |   }, [theme])
 37 | 
 38 |   const toggleDarkMode = () => {
 39 |     if (theme == 'dark') {
 40 |       setTheme('light')
 41 |     } else {
 42 |       setTheme('dark')
 43 |     }
 44 |   }
 45 | 
 46 |   return (
 47 |     <div className="flex flex-col items-center justify-center w-screen h-screen text-gray-800 transition duration-1000 ease-in-out dark:text-white dark:bg-blueGray-700">
 48 |       <Head>
 49 |         <title>Katherine Oelsner</title>
 50 |         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
 51 |         <script defer data-domain="katherineoelsner.com" src="https://plausible.io/js/plausible.js"></script>
 52 |       </Head>
 53 |       <div
 54 |         style={{ minWidth: '24rem', maxWidth: '37rem' }}
 55 |         className="flex flex-col items-center justify-center w-2/3"
 56 |       >
 57 |         <div className="fixed cursor-pointer top-3 right-3">
 58 |           <DarkModeToggle
 59 |             mode={theme == 'dark' ? 'sun' : 'moon'}
 60 |             onClick={toggleDarkMode}
 61 |             width="3rem"
 62 |             moonColor="#334155"
 63 |             sunColor="white"
 64 |             animationDuration={1}
 65 |           />
 66 |         </div>
 67 |         <motion.div layoutId="nav" className="flex flex-wrap justify-center leading-6">
 68 |           <Link href="/">
 69 |             <button className="w-24 py-1 text-xs leading-6 tracking-widest border border-gray-300 rounded-full dark:hover:border-pink-500 dark:border-white focus:outline-none hover:text-lightBlue-600 hover:border-lightBlue-600 dark:hover:text-pink-500">
 70 |               HOME
 71 |             </button>
 72 |           </Link>
 73 |           <Link href="/about">
 74 |             <button className="w-24 py-1 mx-2 text-xs leading-6 tracking-widest border border-gray-300 rounded-full dark:hover:border-pink-500 dark:border-white focus:outline-none hover:text-lightBlue-600 hover:border-lightBlue-600 dark:hover:text-pink-500">
 75 |               ABOUT
 76 |             </button>
 77 |           </Link>
 78 |         </motion.div>
 79 |         <motion.div
 80 |           layoutId="border-div"
 81 |           className="flex flex-col items-center justify-center w-full py-8 my-6 border-t border-b border-gray-300 dark:border-white"
 82 |         >
 83 |           <AnimatePresence exitBeforeEnter>{children}</AnimatePresence>
 84 |         </motion.div>
 85 |         <motion.div layoutId="social-icons" className="flex items-center justify-center">
 86 |           <a
 87 |             className="text-gray-400 dark:text-white hover:text-lightBlue-600 dark:hover:text-pink-500"
 88 |             href="https://github.com/octokatherine"
 89 |             target="_blank"
 90 |           >
 91 |             <FontAwesomeIcon className="mr-6 text-2xl " icon={faGithub} />
 92 |           </a>
 93 |           <a
 94 |             className="text-gray-400 dark:text-white hover:text-lightBlue-600 dark:hover:text-pink-500"
 95 |             href="https://twitter.com/katherinecodes"
 96 |             target="_blank"
 97 |           >
 98 |             <FontAwesomeIcon className="mr-6 text-2xl" icon={faTwitter} />
 99 |           </a>
100 |           <a
101 |             className="text-gray-400 dark:text-white hover:text-lightBlue-600 dark:hover:text-pink-500"
102 |             href="https://www.linkedin.com/in/katherineoelsner/"
103 |             target="_blank"
104 |           >
105 |             <FontAwesomeIcon className="mr-6 text-2xl" icon={faLinkedinIn} />
106 |           </a>
107 |         </motion.div>
108 |       </div>
109 |     </div>
110 |   )
111 | }
112 | 


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