Create landing page skeleton

- setup MUI theme and fonts - setup a hash router - change website title - create a basic layout and navigation
honzaflash · Oct 3, 2023 · 42f2a3a · 42f2a3a
1 parent 33e6d44
commit 42f2a3a
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 97 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,35 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
+    manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
-
+      
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap"
+    rel="stylesheet">
+  <!-- importing Roboto and Robot Mono through Google Web Fonts CDN -->
+  <title>Jan Rychly</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +44,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.css b/src/App.css
diff --git 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: <Layout />,
+    children: [
+      {
+        path: '/full-stack',
+        element: <LandingPage />,
+      },
+      {
+        path: '/front-end',
+        element: <LandingPage />,
+      },
+      {
+        path: '/back-end',
+        element: <LandingPage />,
+      },
+    ]
+  },
+])
+
+
 
 export const App = () => {
   return (
-    <Box className="App">
-      how u like dis app
-    </Box>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Box className="App">
+        <RouterProvider router={router} />
+      </Box>
+    </ThemeProvider>
   )
 }
 

diff --git a/src/index.css b/src/index.css
diff --git 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
@@ -0,0 +1,15 @@
+import { Navigation } from './Navigation'
+import { Box, Container } from '@mui/material'
+import { Outlet } from 'react-router-dom'
+
+
+export const Layout = () => (
+  <>
+    <Navigation />
+    {/* a box spacer of the size of the toolbar so that nothing is hidden underneath <Navigation /> */}
+    <Box sx={(theme) => (theme.mixins.toolbar)} />
+    <Container>
+      <Outlet />
+    </Container>
+  </>
+)
diff --git a/src/layouts/Navigation.tsx 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(
+    <AppBar>
+      <Container>
+        <Toolbar>
+          <Typography variant='h4' sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }}>/* @author: Jan Rychly */</Typography>
+          <Typography variant='h6'sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }}>J. R.</Typography>
+          <Box>
+            <Tabs value={0} >
+              <Tab label="Dev" {...a11yProps(0)}/>
+            </Tabs>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  )}
diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
@@ -0,0 +1,21 @@
+import { Box, Grid, Stack, Typography } from '@mui/material'
+
+export const LandingPage = () => (
+  <Grid container>
+    <Grid item xs={12} md={6}>
+      <Stack>
+        <Typography variant='h1' color='primary' sx={{fontWeight: 700, fontSize: '900%'}}>Jan<br/>Rychly</Typography>
+        <Typography variant='h3'>Software Engineer</Typography>
+        <Typography variant='body1'>I am amazing and you should hire me.</Typography>
+      </Stack>
+    </Grid>
+    <Grid item xs={12} md={6}>
+      <Box sx={{height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+        <Typography><pre>H i g h l i g h t s   G a l l e r y   H e r e</pre></Typography>
+      </Box>
+    </Grid>
+    <Grid xs={12}>
+      <Typography>List of useful skills that I have</Typography>
+    </Grid>
+  </Grid>
+)
diff --git a/src/pages/LandingPage/index.tsx 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
@@ -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,
-}
+})
+
+export default  theme
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { LandingPage } from './LandingPage'

		export { LandingPage }