Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blog #11

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Blog #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8389dd2
Restructure and add blog
May 2, 2021
b6b4320
Create blog
May 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"printWidth": 70
}
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"dependencies": {
"@babel/core": "7.9.0",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.56",
"@material-ui/styles": "^4.10.0",
"@svgr/webpack": "4.3.3",
Expand Down
Binary file added src/assets/images/efra_avatar.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
154 changes: 92 additions & 62 deletions src/components/Common/Links/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,106 @@
import React from 'react';
import { Link } from 'react-scroll';
import { Link as Anchor } from 'react-scroll';
import { Link, useLocation } from 'react-router-dom';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';

import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';

import useStyles from './styles';

const Links = (props) => {
const classes = useStyles();
const Links = ({ behaviourHandler, opened, width }) => {
const classes = useStyles();

const menuBehaviour = props.opened ? 'open' : '';
const menuBehaviour = opened ? 'open' : '';

const linksData = [
{
props: {
containerId: 'homeAboutSection',
},
title: 'About',
},
{
props: {
containerId: 'homeWorkedSection',
},
title: 'Experience',
},
{
props: {
containerId: 'homeProjectsSection',
},
title: 'Projects',
},
{
props: {
containerId: 'homeContactSection',
},
title: 'Contact',
},
];
const linksData = [
{
props: {
link: '/blog',
},
title: 'Blog',
},
{
props: {
containerId: 'homeAboutSection',
},
title: 'About',
},
{
props: {
containerId: 'homeWorkedSection',
},
title: 'Experience',
},
{
props: {
containerId: 'homeProjectsSection',
},
title: 'Projects',
},
{
props: {
containerId: 'homeContactSection',
},
title: 'Contact',
},
];

return (
<React.Fragment>
<nav className={[classes.root, menuBehaviour].join(' ')}>
<ul>
{isWidthDown('xs', props.width) ? (
<li>
<IconButton
aria-label='Menu Close Button'
onClick={() => props.behaviourHandler(false)}
>
<CloseIcon />
</IconButton>
</li>
) : null}
{linksData.map((link, index) => (
<li key={`header-links-${index}`}>
<Link
activeClass='active'
duration={500}
onClick={() => props.behaviourHandler(false)}
smooth={true}
spy={true}
to={link.props.containerId}
>
{link.title}
</Link>
</li>
))}
</ul>
</nav>
</React.Fragment>
);
return (
<>
<nav className={[classes.root, menuBehaviour].join(' ')}>
<ul>
{isWidthDown('xs', width) ? (
<li>
<IconButton
aria-label="Menu Close Button"
onClick={() => behaviourHandler(false)}
>
<CloseIcon />
</IconButton>
</li>
) : null}
{linksData.map((link, index) => (
<li key={`header-links-${index}`}>
{AppLink(link, behaviourHandler)}
</li>
))}
</ul>
</nav>
</>
);
};

const AppLink = (link, behaviourHandler) => {
const { pathname } = useLocation();

return pathname !== '/' ? (
link.props.containerId ? (
<Link
to={{
pathname: '/',
hash: link.props.containerId,
}}
>
{link.title}
</Link>
) : (
<Link to={link.props.link}>{link.title}</Link>
)
) : !link.props.containerId ? (
<Link to={link.props.link}>{link.title}</Link>
) : (
<Anchor
activeClass="active"
duration={500}
onClick={() => behaviourHandler(false)}
smooth={true}
spy={true}
to={link.props.containerId}
>
{link.title}
</Anchor>
);
};

export default withWidth()(Links);
37 changes: 15 additions & 22 deletions src/components/Layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,30 @@
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { BrowserRouter, Switch } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core/styles';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import CssBaseline from '@material-ui/core/CssBaseline';

import Grid from '@material-ui/core/Grid';

// import Routes from '../Routes';
import Home from '../Pages/Home';
import Routes from '../Routes';
import Header from '../Common/Header';
import Footer from '../Common/Footer';
import SocialMedia from '../Common/SocialMedia';

import { darkTheme } from './styles';

const Layout = (props) => {
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<BrowserRouter>
<Header />
<main>
<Grid container justify='center'>
<Grid item sm={10} xs={11}>
<Home />
</Grid>
</Grid>
</main>
<Footer />
{!isWidthDown('xs', props.width) ? <SocialMedia /> : null}
</BrowserRouter>
</ThemeProvider>
);
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<BrowserRouter>
<Header />
<main>
<Routes />
</main>
<Footer />
{!isWidthDown('xs', props.width) ? <SocialMedia /> : null}
</BrowserRouter>
</ThemeProvider>
);
};

export default withWidth()(Layout);
70 changes: 0 additions & 70 deletions src/components/Pages/About/index.jsx
View file
Open in desktop

This file was deleted.

63 changes: 63 additions & 0 deletions src/components/Pages/Blog/EntriesSkelleton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React from 'react';
import { NavLink } from 'react-router-dom';

import Grid from '@material-ui/core/Grid';
import Skeleton from '@material-ui/lab/Skeleton';

import useStyles from './styles';

const EntriesTemplate = ({ blogEntries, isLoading }) => {
const classes = useStyles();

const entries = blogEntries;
let cont = 0;

const getColSpace = () => {
let colSpace = 12;

if (cont === 0) {
colSpace = 12;
} else if (cont < 2 || cont > 5) {
colSpace = 6;
} else {
colSpace = 3;
}

if (cont === 7) {
cont = 1;
}

cont += 1;

return colSpace;
};

return entries.map((entry, index) => {
return (
<Grid key={`blog-entries-key-${index}`} item xs={getColSpace()}>
{isLoading ? (
<Skeleton
animation="wave"
variant="rect"
width="100%"
height={280}
/>
) : (
<NavLink
className={classes.entry}
exact
to={`/blog/${entry.slug}`}
style={{
backgroundImage: `url(${entry.image})`,
}}
>
<h2>{entry.title}</h2>
<h3>{entry.author.name}</h3>
</NavLink>
)}
</Grid>
);
});
};

export default EntriesTemplate;
3 changes: 3 additions & 0 deletions src/components/Pages/Blog/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Efra programming BLOG**

This is my blog, the design was inspired by this theme https://partio.golem.io/ on [Ghost Blog](https://ghost.org/themes/?tag=Blog)
Loading