\r\n );\r\n}\r\n\r\nexport default MainApp;\r\n","import { createGlobalStyle } from 'styled-components';\r\n\r\nconst GlobalStyles = createGlobalStyle`\r\n body {\r\n background: ${({ theme }) => theme.background};\r\n color: ${({ theme }) => theme.color};\r\n transition: all 0.50s linear; \r\n }\r\n`;\r\n\r\nexport default GlobalStyles;\r\n","export const lightTheme = {\r\n background: '#fff',\r\n color: '#121212',\r\n accentColor: '#05857c',\r\n chronoTheme: {\r\n cardBgColor: 'white',\r\n cardForeColor: 'black',\r\n titleColor: 'black',\r\n },\r\n timelineLineColor: '#ccc',\r\n cardBackground: '#fff',\r\n cardFooterBackground: '#f7f7f7',\r\n cardBorderColor: '#00000020',\r\n navbarTheme: {\r\n linkColor: '#dedede',\r\n linkHoverColor: '#fefefe',\r\n linkActiveColor: '#fefefe',\r\n },\r\n bsPrimaryVariant: 'light',\r\n bsSecondaryVariant: 'dark',\r\n socialIconBgColor: '#121212',\r\n};\r\n\r\n\r\n\r\nexport const darkTheme = {\r\n background: '#121212',\r\n color: '#eee',\r\n accentColor: '#47c9ba',\r\n chronoTheme: {\r\n cardBgColor: '#1B1B1B',\r\n cardForeColor: '#eee',\r\n titleColor: 'white',\r\n },\r\n timelineLineColor: '#444',\r\n cardBackground: '#060606',\r\n cardFooterBackground: '#181818',\r\n cardBorderColor: '#ffffff20',\r\n navbarTheme: {\r\n linkColor: '#dedede',\r\n linkHoverColor: '#fefefe',\r\n linkActiveColor: '#fefefe',\r\n },\r\n bsPrimaryVariant: 'dark',\r\n bsSecondaryVariant: 'light',\r\n socialIconBgColor: '#fefefe',\r\n};\r\n","import React from 'react';\r\nimport './App.css';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport { ThemeProvider } from 'styled-components';\r\nimport useDarkMode from 'use-dark-mode';\r\nimport AppContext from './AppContext';\r\nimport MainApp from './MainApp';\r\nimport GlobalStyles from './theme/GlobalStyles';\r\nimport { lightTheme, darkTheme } from './theme/themes';\r\n\r\nlet color = null;\r\n\r\nfunction App() {\r\n window.matchMedia = null;\r\n\r\n /** Default theme is dark mode */\r\n const darkMode = useDarkMode(true);\r\n\r\n /** Sets body's class depending on the theme in order to change the background pictures */\r\n color = darkMode.value ? 'body-dark' : 'body-light';\r\n\r\n if (color === 'body-dark') {\r\n document.body.classList.remove('body-light');\r\n } else {\r\n document.body.classList.remove('body-dark');\r\n }\r\n\r\n document.body.classList.add(color);\r\n\r\n /** Returns the basic structure of the app and provides the context for the theme */\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n\r\n}\r\n\r\nexport default App;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport App from './App';\r\n\r\n\r\n/** Renders elements in the root of the document */\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById('root'),\r\n);\r\n\r\n\r\n\r\n","/** Endpoints of different json files */\r\nconst endpoints = {\r\n navbar: 'profile/navbar.json',\r\n routes: 'profile/routes.json',\r\n home: 'profile/home.json',\r\n social: 'profile/social.json',\r\n about: 'profile/about.json',\r\n skills: 'profile/skills.json',\r\n education: 'profile/education.json',\r\n experiences: 'profile/experiences.json',\r\n projects: 'profile/projects.json',\r\n resume: 'profile/resume.json',\r\n};\r\n\r\nexport default endpoints;\r\n","import React from 'react';\r\nimport { Spinner } from 'react-bootstrap';\r\n\r\n/** Fallback Spinner is used for when a page is loading */\r\n\r\n/** Styles for the Fallback Spinner */\r\nconst styles = {\r\n spinnerContainerStyle: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n height: '100%',\r\n },\r\n};\r\n\r\n/** Returns HTML for the Fallback Spinner with its CSS Styles */\r\nfunction FallbackSpinner() {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default FallbackSpinner;\r\n","import { Navbar, Nav, Container } from 'react-bootstrap';\r\nimport React, { useEffect, useState, useContext } from 'react';\r\nimport { withRouter } from 'react-router';\r\nimport { NavLink } from 'react-router-dom';\r\nimport styled, { ThemeContext } from 'styled-components';\r\nimport endpoints from '../constants/endpoints';\r\nimport ThemeToggler from './ThemeToggler';\r\n\r\n\r\n/** CSS Styles for the Navbar */\r\nconst styles = {\r\n logoStyle: {\r\n width: 50,\r\n height: 40,\r\n },\r\n};\r\n\r\nconst ExternalNavLink = styled.a`\r\n color: ${(props) => props.theme.navbarTheme.linkColor};\r\n &:hover {\r\n color: ${(props) => props.theme.navbarTheme.linkHoverColor};\r\n }\r\n &::after {\r\n background-color: ${(props) => props.theme.accentColor};\r\n }\r\n`;\r\n\r\nconst InternalNavLink = styled(NavLink)`\r\n color: ${(props) => props.theme.navbarTheme.linkColor};\r\n &:hover {\r\n color: ${(props) => props.theme.navbarTheme.linkHoverColor};\r\n }\r\n &::after {\r\n background-color: ${(props) => props.theme.accentColor};\r\n }\r\n &.navbar__link--active {\r\n color: ${(props) => props.theme.navbarTheme.linkActiveColor};\r\n }\r\n`;\r\n\r\n\r\n\r\nconst NavBar = () => {\r\n\r\n /** Grabs theme and sets initial values for the states */\r\n const theme = useContext(ThemeContext);\r\n const [data, setData] = useState(null);\r\n const [expanded, setExpanded] = useState(false);\r\n\r\n\r\n /** Grabs data from the json file for the Navbar when it loads */\r\n useEffect(() => {\r\n fetch(endpoints.navbar, {\r\n method: 'GET',\r\n })\r\n .then((res) => res.json())\r\n .then((res) => setData(res))\r\n .catch((err) => err);\r\n }, []);\r\n\r\n\r\n /** Returns HTML with info about the Navbar and its CSS Styles */\r\n return (\r\n \r\n \r\n {data?.logo && (\r\n \r\n \r\n \r\n )}\r\n setExpanded(!expanded)}\r\n />\r\n \r\n \r\n \r\n setExpanded(false)}\r\n />\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst NavBarWithRouter = withRouter(NavBar);\r\nexport default NavBarWithRouter;\r\n","import React from 'react';\r\nimport DarkModeToggle from 'react-dark-mode-toggle';\r\nimport PropTypes from 'prop-types';\r\nimport AppContext from '../AppContext';\r\n\r\nfunction ThemeToggler(props) {\r\n const { onClick } = props;\r\n const handleOnChange = (darkMode) => {\r\n darkMode.toggle();\r\n onClick();\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {(values) => (\r\n
\r\n )}\r\n \r\n \r\n );\r\n}\r\n\r\nThemeToggler.propTypes = {\r\n onClick: PropTypes.func,\r\n};\r\nThemeToggler.defaultProps = {\r\n onClick: () => { },\r\n};\r\n\r\nexport default ThemeToggler;\r\n","import React, { useState, useEffect, useContext } from 'react';\r\nimport Typewriter from 'typewriter-effect';\r\nimport Fade from 'react-reveal';\r\nimport endpoints from '../constants/endpoints';\r\nimport Social from './Social';\r\nimport FallbackSpinner from './FallbackSpinner';\r\nimport { ThemeContext } from 'styled-components';\r\n\r\nlet color = null;\r\n\r\n/** Styles for the Home Page */\r\nconst styles = {\r\n nameStyle: {\r\n fontSize: '5em',\r\n },\r\n inlineChild: {\r\n display: 'inline-block',\r\n fontSize: '2em',\r\n fontWeight: 'bold',\r\n\r\n },\r\n mainContainer: {\r\n height: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n position: 'relative'\r\n },\r\n\r\n};\r\n\r\nfunction Home() {\r\n\r\n /** Grabs theme and sets initial value for the state for data */\r\n const [data, setData] = useState(null);\r\n const theme = useContext(ThemeContext);\r\n\r\n\r\n /** Sets the div background color based on the theme */\r\n color = theme.color === '#eee' ? 'rgba(1, 1, 1, 0.3)' : 'rgba(211, 211, 211, 0.3)';\r\n\r\n\r\n /** Grabs data from the json file for the Home Page when it loads */\r\n useEffect(() => {\r\n fetch(endpoints.home, {\r\n method: 'GET',\r\n })\r\n .then((res) => res.json())\r\n .then((res) => setData(res))\r\n .catch((err) => err);\r\n }, []);\r\n\r\n\r\n /** Returns HTML with info about the Home Page and its CSS Styles */\r\n return data ? (\r\n \r\n
\r\n
{data?.name}
\r\n
\r\n
I'm
\r\n \r\n
\r\n \r\n
\r\n \r\n ) : ;\r\n}\r\n\r\nexport default Home;\r\n","import React, { useEffect, useState, useContext } from 'react';\r\nimport { SocialIcon } from 'react-social-icons';\r\nimport { ThemeContext } from 'styled-components';\r\nimport endpoints from '../constants/endpoints';\r\n\r\n\r\n/** CSS Styles for the Socials Page */\r\nconst styles = {\r\n iconStyle: {\r\n marginLeft: 10,\r\n marginRight: 10,\r\n marginBottom: 10,\r\n },\r\n};\r\n\r\n\r\nfunction Social() {\r\n\r\n /** Grabs theme and initializes state 'data' */\r\n const theme = useContext(ThemeContext);\r\n const [data, setData] = useState(null);\r\n\r\n\r\n /** Grabs data from the json file for the Socials Page when it loads */\r\n useEffect(() => {\r\n fetch(endpoints.social, {\r\n method: 'GET',\r\n })\r\n .then((res) => res.json())\r\n .then((res) => setData(res))\r\n .catch((err) => err);\r\n }, []);\r\n\r\n\r\n /** Returns HTML with info about the Socials Page and its CSS Styles */\r\n return (\r\n