landing page structure

This commit is contained in:
2021-01-11 10:13:57 +01:00
parent ac2b4bd4e3
commit 10d993608f
25 changed files with 752 additions and 91 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
+30 -1
View File
@@ -1572,6 +1572,8 @@
},
"@material-ui/core": {
"version": "4.11.2",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.2.tgz",
"integrity": "sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/styles": "^4.11.2",
@@ -1596,6 +1598,8 @@
},
"@material-ui/icons": {
"version": "4.11.2",
"resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
"integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
"requires": {
"@babel/runtime": "^7.4.4"
}
@@ -1896,6 +1900,8 @@
},
"@testing-library/jest-dom": {
"version": "5.11.6",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.6.tgz",
"integrity": "sha512-cVZyUNRWwUKI0++yepYpYX7uhrP398I+tGz4zOlLVlUYnZS+Svuxv4fwLeCIy7TnBYKXUaOlQr3vopxL8ZfEnA==",
"requires": {
"@babel/runtime": "^7.9.2",
"@types/testing-library__jest-dom": "^5.9.1",
@@ -1920,6 +1926,8 @@
},
"@testing-library/react": {
"version": "11.2.2",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.2.tgz",
"integrity": "sha512-jaxm0hwUjv+hzC+UFEywic7buDC9JQ1q3cDsrWVSDAPmLotfA6E6kUHlYm/zOeGCac6g48DR36tFHxl7Zb+N5A==",
"requires": {
"@babel/runtime": "^7.12.5",
"@testing-library/dom": "^7.28.1"
@@ -1927,6 +1935,8 @@
},
"@testing-library/user-event": {
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.6.0.tgz",
"integrity": "sha512-FNEH/HLmOk5GO70I52tKjs7WvGYckeE/SrnLX/ip7z2IGbffyd5zOUM1tZ10vsTphqm+VbDFI0oaXu0wcfQsAQ==",
"requires": {
"@babel/runtime": "^7.12.5"
}
@@ -11495,6 +11505,8 @@
},
"react": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
"integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
@@ -11633,6 +11645,8 @@
},
"react-dom": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
"integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
@@ -11673,6 +11687,8 @@
},
"react-router-dom": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
@@ -11685,6 +11701,8 @@
},
"react-scripts": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.1.tgz",
"integrity": "sha512-NnniMSC/wjwhcJAyPJCWtxx6CWONqgvGgV9+QXj1bwoW/JI++YF1eEf3Upf/mQ9KmP57IBdjzWs1XvnPq7qMTQ==",
"requires": {
"@babel/core": "7.12.3",
"@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
@@ -11747,6 +11765,15 @@
"workbox-webpack-plugin": "5.1.4"
}
},
"react-spring": {
"version": "8.0.27",
"resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
"integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
"requires": {
"@babel/runtime": "^7.3.1",
"prop-types": "^15.5.8"
}
},
"react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -14660,7 +14687,9 @@
}
},
"web-vitals": {
"version": "0.2.4"
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-0.2.4.tgz",
"integrity": "sha512-6BjspCO9VriYy12z356nL6JBS0GYeEcA457YyRzD+dD6XYCQ75NKhcOHUMHentOE7OcVCIXXDvOm0jKFfQG2Gg=="
},
"webidl-conversions": {
"version": "6.1.0",
+1
View File
@@ -13,6 +13,7 @@
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-spring": "^8.0.27",
"web-vitals": "^0.2.4"
},
"scripts": {
+19 -17
View File
@@ -19,17 +19,15 @@
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="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<!-- <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap"
href="https://fonts.googleapis.com/css2?family=Chilanka&family=Lato&family=Nanum+Gothic&family=Roboto:wght@300;400;500;700&family=Yeon+Sung&display=swap"
rel="stylesheet"
/>
<!--
@@ -42,18 +40,22 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>DAD</title>
<!-- Hotjar Tracking Code for https://diaid83.github.io/me/ -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:2183013,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
<!-- Hotjar Tracking Code for https://diaid83.github.io/me/ -->
<script>
(function (h, o, t, j, a, r) {
h.hj =
h.hj ||
function () {
(h.hj.q = h.hj.q || []).push(arguments);
};
h._hjSettings = { hjid: 2183013, hjsv: 6 };
a = o.getElementsByTagName('head')[0];
r = o.createElement('script');
r.async = 1;
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
a.appendChild(r);
})(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
+14 -7
View File
@@ -9,6 +9,7 @@ const useStyles = makeStyles((theme) => ({
minHeight: 'calc(100vh-128px)',
paddingTop: '2rem',
paddingBottom: '2rem',
// flex: 1,
fallbacks: [
{ minHeight: '-moz-calc(100% - 128px)' },
{ minHeight: '-webkit-calc(100% - 128px)' },
@@ -22,13 +23,19 @@ const Main = (props) => {
const classes = useStyles();
return (
<div
style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}
>
<Header />
<Container className={classes.container} maxWidth='xl'>{children}</Container>
<Footer />
</div>
<>
<div
style={{
minHeight: '100vh',
display: 'flex',
flexDirection: 'column',
}}
>
<Header />
<Container className={classes.container}>{children}</Container>
<Footer />
</div>
</>
);
};
+17 -1
View File
@@ -1,7 +1,23 @@
import React from 'react';
import { AppBar, Toolbar, Grid, Typography } from '@material-ui/core';
const Footer = () => {
return <div style={{ marginTop: 'auto' }}>Footer</div>;
return (
<Grid
container
style={{
marginTop: 'auto',
zIndex: 1300,
}}
justify="center"
>
<Grid item>
<Typography inline="true" variant="body1">
Dan Dobos &copy; 2021 Build with passion
</Typography>
</Grid>
</Grid>
);
};
export default Footer;
@@ -7,7 +7,7 @@ import Navigation from './navigation';
const useStyles = makeStyles((theme) => ({
appBar: {
// position: 'relative',
position: 'relative',
zIndex: 1301,
},
}));
@@ -1,4 +1,4 @@
import React, { useState, useEffect, createRef } from 'react';
import React, { useState, useEffect, createRef, useMemo, useRef } from 'react';
import { Link } from 'react-router-dom';
import {
Container,
@@ -8,6 +8,9 @@ import {
useMediaQuery,
IconButton,
SwipeableDrawer,
ListItem,
ListItemText,
List,
} from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import MenuOpenIcon from '@material-ui/icons/MenuOpen';
@@ -24,16 +27,32 @@ const useStyles = makeStyles((theme) => ({
drawerIcon: {
height: '40px',
width: '40px',
color: 'white',
color: theme.palette.secondary.main,
},
drawer: { minWidth: '50vw' },
tab: {
drawer: {
minWidth: '60vw',
backgroundColor: theme.palette.secondary.main,
},
listitems: {
padding: '1.5rem 2rem ',
color: theme.palette.primary.main,
width: '100%',
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.secondary.main,
},
},
listText: {
alignItems: 'flex-start',
fontSize: '2rem',
fontSize: '1.5rem',
textTransform: 'capitalize',
},
right: {},
selected: {
'&.Mui-selected': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.secondary.main,
},
},
}));
const Navigation = (props) => {
@@ -42,12 +61,14 @@ const Navigation = (props) => {
const matches = useMediaQuery(theme.breakpoints.down('sm'));
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
const [value, setValue] = useState(0);
const [value, setValue] = useState(1);
const [openDrawer, setOpenDrawer] = useState(false);
const tabsActions = useRef(null);
const handleTabsChange = (e, newValue) => {
setValue(newValue);
setOpenDrawer(false);
};
const open = () => {
@@ -58,6 +79,56 @@ const Navigation = (props) => {
};
const wrapper = createRef();
const routes = useMemo(
() => [
{
name: 'Home',
link: '/',
activeIndex: 0,
},
{
name: 'Projects',
link: '/projects',
activeIndex: 1,
},
{
name: 'Games',
link: '/games',
activeIndex: 2,
},
{
name: 'Snippets',
link: '/snippets',
activeIndex: 3,
},
{
name: 'About',
link: '/about',
activeIndex: 4,
},
],
[]
);
useEffect(() => {
routes.forEach((route) => {
switch (window.location.pathname) {
case `${route.link}`:
if (value !== route.activeIndex) {
setValue(route.activeIndex);
}
break;
default:
return false;
}
});
}, [value, routes]);
useEffect(() => {
setTimeout(() => {
tabsActions.current?.updateIndicator();
}, 100);
});
return (
<Container ref={wrapper}>
<Hidden mdUp>
@@ -84,52 +155,46 @@ const Navigation = (props) => {
classes={{ paper: classes.drawer }}
>
<div className={classes.toolbar} />
<Tabs
value={value}
onChange={handleTabsChange}
orientation="vertical"
indicatorColor="primary"
>
<Tab
label="Home"
component={Link}
to="/"
classes={{ wrapper: classes.tab }}
/>
<Tab
label="Projects"
component={Link}
to="/projects"
classes={{ wrapper: classes.tab }}
/>
<Tab
label="Games"
component={Link}
to="/games"
classes={{ wrapper: classes.tab }}
/>
<Tab
label="Snippets"
component={Link}
to="/snippets"
classes={{ wrapper: classes.tab }}
/>
<Tab
label="About"
component={Link}
to="/about"
classes={{ wrapper: classes.tab }}
/>
</Tabs>
<List disablePadding>
{routes.map((route) => (
<ListItem
className={classes.listitems}
key={`${route}${route.activeIndex}`}
button
component={Link}
to={route.link}
value={route.activeIndex}
selected={value === route.activeIndex}
classes={{ selected: classes.selected }}
onClick={() => {
setValue(route.activeIndex);
setOpenDrawer(false);
}}
>
<ListItemText disableTypography className={classes.listText}>
{route.name}
</ListItemText>
</ListItem>
))}
</List>
</SwipeableDrawer>
) : (
<Hidden smDown>
<Tabs value={value} onChange={handleTabsChange} centered>
<Tab label="Home" component={Link} to="/" />
<Tab label="Projects" component={Link} to="/projects" />
<Tab label="Games" component={Link} to="/games" />
<Tab label="Snippets" component={Link} to="/snippets" />
<Tab label="About" component={Link} to="/about" />
<Tabs
action={tabsActions}
value={value}
onChange={handleTabsChange}
centered
>
{routes.map((route) => (
<Tab
key={`${route.activeIndex}`}
label={route.name}
component={Link}
to={route.link}
/>
))}
</Tabs>
</Hidden>
)}
+52
View File
@@ -0,0 +1,52 @@
import React from 'react';
import { Container } from '@material-ui/core';
import {
ThemeProvider,
createMuiTheme,
makeStyles,
responsiveFontSizes,
} from '@material-ui/core/styles';
import Footer from './components/footer';
import Header from './components/header';
const useStyles = makeStyles((theme) => ({
container: {
minHeight: '100vh',
paddingTop: '2rem',
paddingBottom: '2rem',
fallbacks: [
{ minHeight: '-moz-calc(100% - 128px)' },
{ minHeight: '-webkit-calc(100% - 128px)' },
{ minHeight: '-o-calc(100% - 128px)' },
],
},
}));
let theme = createMuiTheme({
typography: {
fontFamily: 'Yeon Sung',
transform: 'matrix(1, 0, 0, 1, 0, 0)',
// h1: {
// // marginLeft: '-.5rem',
// paddingLeft: 0,
// },
},
});
theme = responsiveFontSizes(theme);
const White = (props) => {
const { children } = props;
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<div id="back-to-top-anchor" />
<Header />
<Container className={classes.container}>{children}</Container>
<Footer />
</ThemeProvider>
);
};
export default White;
@@ -0,0 +1,58 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import useScrollTrigger from '@material-ui/core/useScrollTrigger';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import { Grid, Zoom } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
icon: {
width: '5rem',
height: '5rem',
},
}));
function ScrollTop(props) {
const { children, window } = props;
const trigger = useScrollTrigger({
target: document.querySelector('#footer') ? window : undefined,
});
const handleClick = (event) => {
const anchor = (event.target.ownerDocument || document).querySelector(
'#back-to-top-anchor'
);
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
};
return (
<Zoom in={trigger}>
<div onClick={handleClick} role="presentation">
{children}
</div>
</Zoom>
);
}
const Footer = (props) => {
const classes = useStyles();
return (
<Grid container justify="center" alignItems="center" id="footer">
<ScrollTop {...props}>
<KeyboardArrowUpIcon
className={classes.icon}
style={{
width: '5rem',
height: '5rem',
}}
/>
</ScrollTop>
{/* <div style={{ height: '30rem' }} /> */}
</Grid>
);
};
export default Footer;
@@ -0,0 +1 @@
export { default } from './Footer';
@@ -0,0 +1,74 @@
import React from 'react';
import {Link} from 'react-router-dom'
import {
AppBar,
Toolbar,
CssBaseline,
Typography,
Breadcrumbs,
Link as MaterialLink,
Grid,
} from '@material-ui/core';
import CachedOutlinedIcon from '@material-ui/icons/CachedOutlined';
import { makeStyles } from '@material-ui/styles';
const useStyles = makeStyles((theme) => ({
appBar: {
position: 'fixed',
zIndex: 1301,
backgroundColor: '#FAFAFA',
},
name: {
textTransform: 'uppercase',
letterSpacing: '.5rem',
},
}));
function handleClick(event) {
event.preventDefault();
const anchor = (event.target.ownerDocument || document).querySelector(
'#footer'
);
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
const Header = () => {
const classes = useStyles();
return (
<>
<CssBaseline />
<AppBar className={classes.appBar} position="fixed" elevation={0}>
<Toolbar>
<Grid container justify="space-between">
<Grid item>
<Breadcrumbs aria-label="breadcrumb">
<Typography
color="textPrimary"
variant="h5"
className={classes.name}
>
Dan Dobos
</Typography>
<MaterialLink color="textPrimary" to="#about" onClick={handleClick}>
About
</MaterialLink>
</Breadcrumbs>
</Grid>
<Grid item>
<Link color="textPrimary" to="/projects">
<CachedOutlinedIcon/>
</Link>
</Grid>
</Grid>
</Toolbar>
</AppBar>
<Toolbar />
</>
);
};
export default Header;
@@ -0,0 +1,15 @@
import React from 'react';
import { useScrollTrigger, Slide } from '@material-ui/core';
const HideOnScroll = (props) => {
const { children, window } = props;
const trigger = useScrollTrigger({ target: window ? window() : undefined });
return (
<Slide appear={false} direction="down" in={!trigger}>
{children}
</Slide>
);
};
export default HideOnScroll;
@@ -0,0 +1 @@
export { default } from './HideOnScroll.jsx';
@@ -0,0 +1 @@
export { default } from './Header';
@@ -0,0 +1,139 @@
import React, { useState, useEffect, createRef } from 'react';
import { Link } from 'react-router-dom';
import {
Container,
Hidden,
Tabs,
Tab,
useMediaQuery,
IconButton,
SwipeableDrawer,
} from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import MenuOpenIcon from '@material-ui/icons/MenuOpen';
import { makeStyles, useTheme } from '@material-ui/styles';
const useStyles = makeStyles((theme) => ({
toolbar: theme.mixins.toolbar,
drawerIconContainer: {
alignSelf: 'center',
'&:hover': { backgroundColor: 'transparent' },
[theme.breakpoints.down('md')]: { padding: 0 },
},
drawerIcon: {
height: '40px',
width: '40px',
color: 'white',
},
drawer: { minWidth: '50vw' },
tab: {
alignItems: 'flex-start',
fontSize: '2rem',
textTransform: 'capitalize',
},
right: {},
}));
const Navigation = (props) => {
const classes = useStyles();
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down('sm'));
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
const [value, setValue] = useState(0);
const [openDrawer, setOpenDrawer] = useState(false);
const handleTabsChange = (e, newValue) => {
setValue(newValue);
setOpenDrawer(false);
};
const open = () => {
setOpenDrawer(true);
};
const close = () => {
setOpenDrawer(false);
};
const wrapper = createRef();
return (
<Container ref={wrapper}>
<Hidden mdUp>
<IconButton
onClick={() => setOpenDrawer(!openDrawer)}
disableRipple
className={classes.drawerIconContainer}
>
{openDrawer ? (
<MenuOpenIcon className={classes.drawerIcon} />
) : (
<MenuIcon className={classes.drawerIcon} />
)}
</IconButton>
</Hidden>
{matches ? (
<SwipeableDrawer
disableBackdropTransition={!iOS}
disableDiscovery={iOS}
open={openDrawer}
onOpen={open}
onClose={close}
classes={{ paper: classes.drawer }}
>
<div className={classes.toolbar} />
<Tabs
value={value}
onChange={handleTabsChange}
orientation="vertical"
indicatorColor="primary"
>
<Tab
label="Home"
component={Link}
to="/"
classes={{ wrapper: classes.tab }}
/>
<Tab
label="Projects"
component={Link}
to="/projects"
classes={{ wrapper: classes.tab }}
/>
<Tab
label="Games"
component={Link}
to="/games"
classes={{ wrapper: classes.tab }}
/>
<Tab
label="Snippets"
component={Link}
to="/snippets"
classes={{ wrapper: classes.tab }}
/>
<Tab
label="About"
component={Link}
to="/about"
classes={{ wrapper: classes.tab }}
/>
</Tabs>
</SwipeableDrawer>
) : (
<Hidden smDown>
<Tabs value={value} onChange={handleTabsChange} centered>
<Tab label="Home" component={Link} to="/" />
<Tab label="Projects" component={Link} to="/projects" />
<Tab label="Games" component={Link} to="/games" />
<Tab label="Snippets" component={Link} to="/snippets" />
<Tab label="About" component={Link} to="/about" />
</Tabs>
</Hidden>
)}
</Container>
);
};
export default Navigation;
@@ -0,0 +1 @@
export { default } from './Navigation';
+1
View File
@@ -0,0 +1 @@
export {default} from './White.jsx'
+97 -1
View File
@@ -1,7 +1,103 @@
import React from 'react';
import { Container, Grid, Typography, Link } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
// root: {
// display: 'flex',
// flexDirection: 'column',
// justifyContent: 'flex-end',
// height: 'auto',
// },
container: {
marginTop: 'auto',
// height:'100vh'
display: 'flex',
// position: 'absolute',
},
name: {
textTransform: 'uppercase',
letterSpacing: '2rem',
},
}));
const About = () => {
return <div>About ...in progress</div>;
const classes = useStyles();
return (
<Container id="about">
<Grid container direction="row" alignItems="stretch" justify="flex-end">
<div
style={{
height: '70vh',
display: 'flex',
alignItems: 'flex-end',
}}
>
<Grid
className={classes.container}
container
direction="column"
alignItems="flex-end"
justify="flex-end"
spacing={3}
>
<Grid item>
<Typography variant="h4" align="right" inline="true">
Software Developer
</Typography>
</Grid>
<Grid item>
<Typography
variant="h1"
gutterBottom
align="right"
inline="true"
className={classes.name}
>
Dan Dobos
</Typography>
</Grid>
<Grid item>
<Link
variant="h6"
href="https://skilltransfers.com/"
target="_blank"
rel="noopener noreferrer"
color="inherit"
gutterBottom
>
https://skilltransfers.com/
</Link>
</Grid>
<Grid item>
<Typography align="right" inline="true" variant="h6">
A passionate software developer with afinity for React and AWS.
<br />
Characterized by the desire of understanding and implementing
technological inovations.
</Typography>
</Grid>
{/* <Grid item>Contact</Grid> */}
<Grid item>
<Typography align="right" inline="true">
Contact
</Typography>
<Link
variant="h6"
href="mailto:danandreidobos@gmail.com"
target="_blank"
color="inherit"
>
danandreidobos@gmail.com
</Link>
</Grid>
</Grid>
</div>
</Grid>
</Container>
);
};
export default About;
+3 -1
View File
@@ -1,7 +1,9 @@
import React from 'react';
const Games = () => {
return <div>Games ...in progress</div>;
return (
<div style={{ minHeight: 'calc(100vh-128px)' }}>Games ...in progress</div>
);
};
export default Games;
+21 -1
View File
@@ -1,7 +1,27 @@
import React from 'react';
import { Container, Grid, Typography, Link } from '@material-ui/core';
import About from '../about';
import Games from '../games';
import Snippets from '../snippets';
import Projects from '../projects';
const Home = () => {
return <div>Home ...in progress</div>;
return (
<Grid container direction="row" alignItems="stretch">
<Grid item container>
<Projects />
</Grid>
<Grid item container>
<Games />
</Grid>
<Grid item container>
<Snippets />
</Grid>
<Grid item container>
<About />
</Grid>
</Grid>
);
};
export default Home;
+1 -1
View File
@@ -2,7 +2,7 @@ import React from 'react'
const Projects = () => {
return (
<div>
<div style={{ minHeight: 'calc(100vh-128px)' }}>
Projects ...in progress
</div>
)
+5 -1
View File
@@ -1,7 +1,11 @@
import React from 'react';
const Snippets = () => {
return <div>Snippets ...in progress</div>;
return (
<div style={{ minHeight: 'calc(100vh-128px)' }}>
Snippets ...in progress
</div>
);
};
export default Snippets;
+2 -1
View File
@@ -4,6 +4,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
import ErrorBoundary from './components/errorBoundary';
import CustomRoute from './components/customRoute';
import Main from '../layouts/main';
import White from '../layouts/white';
// const Main = lazy(() => import('layouts/main'));
@@ -19,7 +20,7 @@ const CustomRoutes = () => {
<Suspense fallback={<CircularProgress color="secondary" />}>
<ErrorBoundary>
<Switch>
<CustomRoute exact path="/" component={Home} layout={Main} />
<CustomRoute exact path="/" component={Home} layout={White} />
<CustomRoute exact path="/about" component={About} layout={Main} />
<CustomRoute
exact
+80 -5
View File
@@ -2513,7 +2513,7 @@ async-limiter@~1.0.0:
resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
async@^2.6.2:
async@^2.6.1, async@^2.6.2:
version "2.6.3"
resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
@@ -3399,7 +3399,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
dependencies:
delayed-stream "~1.0.0"
commander@^2.20.0:
commander@^2.18.0, commander@^2.20.0:
version "2.20.3"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -4328,6 +4328,11 @@ elliptic@^6.5.3:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.0"
email-addresses@^3.0.1:
version "3.1.0"
resolved "https://registry.yarnpkg.com/email-addresses/-/email-addresses-3.1.0.tgz#cabf7e085cbdb63008a70319a74e6136188812fb"
integrity sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==
emittery@^0.7.1:
version "0.7.2"
resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
@@ -4502,7 +4507,7 @@ escape-string-regexp@2.0.0, escape-string-regexp@^2.0.0:
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
escape-string-regexp@^1.0.5:
escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -5022,6 +5027,28 @@ file-uri-to-path@1.0.0:
resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
filename-reserved-regex@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz#e61cf805f0de1c984567d0386dc5df50ee5af7e4"
integrity sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=
filenamify-url@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/filenamify-url/-/filenamify-url-1.0.0.tgz#b32bd81319ef5863b73078bed50f46a4f7975f50"
integrity sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=
dependencies:
filenamify "^1.0.0"
humanize-url "^1.0.0"
filenamify@^1.0.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-1.2.1.tgz#a9f2ffd11c503bed300015029272378f1f1365a5"
integrity sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=
dependencies:
filename-reserved-regex "^1.0.0"
strip-outer "^1.0.0"
trim-repeated "^1.0.0"
filesize@6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/filesize/-/filesize-6.1.0.tgz#e81bdaa780e2451d714d71c0d7a4f3238d37ad00"
@@ -5319,6 +5346,19 @@ getpass@^0.1.1:
dependencies:
assert-plus "^1.0.0"
gh-pages@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-3.1.0.tgz#ec3ed0f6a6e3fc3d888758fa018f08191c96bd55"
integrity sha512-3b1rly9kuf3/dXsT8+ZxP0UhNLOo1CItj+3e31yUVcaph/yDsJ9RzD7JOw5o5zpBTJVQLlJAASNkUfepi9fe2w==
dependencies:
async "^2.6.1"
commander "^2.18.0"
email-addresses "^3.0.1"
filenamify-url "^1.0.0"
find-cache-dir "^3.3.1"
fs-extra "^8.1.0"
globby "^6.1.0"
glob-parent@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -5718,6 +5758,14 @@ human-signals@^1.1.1:
resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
humanize-url@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/humanize-url/-/humanize-url-1.0.1.tgz#f4ab99e0d288174ca4e1e50407c55fbae464efff"
integrity sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=
dependencies:
normalize-url "^1.0.0"
strip-url-auth "^1.0.0"
hyphenate-style-name@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
@@ -7660,7 +7708,7 @@ normalize-range@^0.1.2:
resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
normalize-url@1.9.1:
normalize-url@1.9.1, normalize-url@^1.0.0:
version "1.9.1"
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
@@ -8981,7 +9029,7 @@ prompts@2.4.0, prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9301,6 +9349,14 @@ react-scripts@4.0.1:
optionalDependencies:
fsevents "^2.1.3"
react-spring@^8.0.27:
version "8.0.27"
resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
dependencies:
"@babel/runtime" "^7.3.1"
prop-types "^15.5.8"
react-transition-group@^4.4.0:
version "4.4.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
@@ -10492,6 +10548,18 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
strip-outer@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631"
integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==
dependencies:
escape-string-regexp "^1.0.2"
strip-url-auth@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/strip-url-auth/-/strip-url-auth-1.0.1.tgz#22b0fa3a41385b33be3f331551bbb837fa0cd7ae"
integrity sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=
style-loader@1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e"
@@ -10799,6 +10867,13 @@ tr46@^2.0.2:
dependencies:
punycode "^2.1.1"
trim-repeated@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21"
integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE=
dependencies:
escape-string-regexp "^1.0.2"
tryer@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"