diff --git a/public/index.html b/public/index.html index aa069f2..5be40d0 100644 --- a/public/index.html +++ b/public/index.html @@ -1,35 +1,40 @@ - - - - - - - - - - - React App - - - -
- + Jan Rychly + + + + +
+ - - + + + \ No newline at end of file diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.tsx b/src/App.tsx index 67bd090..338749d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,41 @@ -import { Box } from '@mui/material' -import './App.css' +import { Box, CssBaseline, ThemeProvider } from '@mui/material' +import { RouterProvider, createHashRouter } from 'react-router-dom' + +import theme from './theme' +import { LandingPage } from './pages/LandingPage' +import { Layout } from './layouts/Layout' + +const router = createHashRouter([ + { + path: '/', + element: , + children: [ + { + path: '/full-stack', + element: , + }, + { + path: '/front-end', + element: , + }, + { + path: '/back-end', + element: , + }, + ] + }, +]) + + export const App = () => { return ( - - how u like dis app - + + + + + + ) } diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.tsx b/src/index.tsx index 0c448bb..4e1d4df 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import './index.css' + import App from './App' const root = ReactDOM.createRoot( diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx new file mode 100644 index 0000000..3bfb37c --- /dev/null +++ b/src/layouts/Layout.tsx @@ -0,0 +1,15 @@ +import { Navigation } from './Navigation' +import { Box, Container } from '@mui/material' +import { Outlet } from 'react-router-dom' + + +export const Layout = () => ( + <> + + {/* a box spacer of the size of the toolbar so that nothing is hidden underneath */} + (theme.mixins.toolbar)} /> + + + + +) diff --git a/src/layouts/Navigation.tsx b/src/layouts/Navigation.tsx new file mode 100644 index 0000000..636e068 --- /dev/null +++ b/src/layouts/Navigation.tsx @@ -0,0 +1,26 @@ +/* eslint-disable react/jsx-no-comment-textnodes */ +// The title is supposed to imitate a code source file header +import { AppBar, Box, Container, Tab, Tabs, Toolbar, Typography } from '@mui/material' + +const a11yProps = (index: number) => ({ + 'id': `simple-tab-${index}`, + 'aria-controls': `simple-tabpanel-${index}`, + +}) + +export const Navigation = () => { + return( + + + + /* @author: Jan Rychly */ + J. R. + + + + + + + + + )} diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx new file mode 100644 index 0000000..949f0f5 --- /dev/null +++ b/src/pages/LandingPage/LandingPage.tsx @@ -0,0 +1,21 @@ +import { Box, Grid, Stack, Typography } from '@mui/material' + +export const LandingPage = () => ( + + + + Jan
Rychly + Software Engineer + I am amazing and you should hire me. + + + + + 
H i g h l i g h t s   G a l l e r y   H e r e
 + + + + List of useful skills that I have + + +) diff --git a/src/pages/LandingPage/index.tsx b/src/pages/LandingPage/index.tsx new file mode 100644 index 0000000..ee110fd --- /dev/null +++ b/src/pages/LandingPage/index.tsx @@ -0,0 +1,3 @@ +import { LandingPage } from './LandingPage' + +export { LandingPage } diff --git a/src/theme.ts b/src/theme.ts index 6973bd5..e9f6b39 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,6 +1,6 @@ -import { ThemeOptions } from '@mui/material/styles' +import { createTheme } from '@mui/material/styles' -export const themeOptions: ThemeOptions = { +const theme = createTheme({ palette: { mode: 'dark', primary: { @@ -24,47 +24,52 @@ export const themeOptions: ThemeOptions = { }, typography: { h1: { - fontFamily: 'Victor Mono', + fontFamily: 'Roboto Mono', }, h2: { - fontFamily: 'Victor Mono', + fontFamily: 'Roboto Mono', }, h3: { - fontFamily: 'Victor Mono', + fontFamily: 'Roboto Mono', }, h4: { - fontFamily: 'Victor Mono', + fontFamily: 'Roboto Mono', }, body1: { - fontFamily: 'Open Sans', + fontFamily: 'Roboto', }, body2: { - fontFamily: 'Open Sans', + fontFamily: 'Roboto', }, button: { - fontFamily: 'Victor Mono', + fontFamily: 'Roboto Mono', }, caption: { - fontFamily: 'Open Sans', + fontFamily: 'Roboto', }, overline: { - fontFamily: 'Open Sans', + fontFamily: 'Roboto', }, subtitle2: { - fontFamily: 'Open Sans', + fontFamily: 'Roboto', }, subtitle1: { - fontFamily: 'Open Sans', + fontFamily: 'Roboto', }, h6: { - fontFamily: 'Victor Mono', + fontFamily: 'Roboto Mono', }, h5: { - fontFamily: 'Victor Mono', + fontFamily: 'Roboto Mono', }, - fontFamily: 'Open Sans', + fontFamily: 'Roboto', }, components: { + MuiContainer: { + defaultProps: { + maxWidth: 'xl' + } + }, MuiButtonBase: { defaultProps: { disableRipple: true, @@ -85,4 +90,6 @@ export const themeOptions: ThemeOptions = { borderRadius: 2, }, spacing: 4, -} \ No newline at end of file +}) + +export default theme