Feature/5 implement the link page

package.json

@@ -2,8 +2,12 @@
   "name": "portfolio",
   "version": "0.1.0",
   "private": true,
-  "homepage": "http://daveomri.github.io/portfolio",
+  "homepage": "https://portfolio.davq.net",
   "dependencies": {
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.58",
+    "@material-ui/styles": "^4.11.4",
     "@material-ui/system": "^4.11.3",
     "@material-ui/utils": "^4.11.2",
     "@testing-library/jest-dom": "^5.14.1",
@@ -12,23 +16,19 @@
     "clsx": "^1.1.1",
     "deploy": "^1.0.3",
     "prettier-eslint": "^13.0.0",
-    "prettier-eslint-cli": "^5.0.1",
-    "react-scripts": "^1.1.5",
-    "react-scroll": "^1.8.4",
-    "styled-components": "^5.3.1",
-    "web-vitals": "^1.1.2",
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.58",
-    "@material-ui/styles": "^4.11.4",
+    "prettier-eslint-cli": "^7.1.0",
     "prop-types": "^15.7.2",
     "qrcode.react": "^1.0.1",
     "react": "^17",
     "react-cookie": "^4.0.3",
     "react-dom": "^17",
     "react-router-dom": "^5.2.0",
+    "react-scripts": "^5.0.1",
+    "react-scroll": "^1.8.4",
     "react-social-login-buttons": "^3.5.0",
-    "url-join": "^4.0.1"
+    "styled-components": "^5.3.1",
+    "url-join": "^4.0.1",
+    "web-vitals": "^1.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -61,6 +61,7 @@
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/plugin-proposal-private-property-in-object": "",
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.13.13",
     "@material-ui/icons": "^4.11.2",

src/App.jsx

@@ -10,14 +10,20 @@ import Portfolio from './Portfolio';
 import Links from './Links';
 import Footer from './components/footer/Footer';
 
-const useStyles = makeStyles((theme) => ({
-  content: {},
+import ScrollToTop from './ScrollToTop';
+
+const useStyles = makeStyles(() => ({
+  content: {
+    //paddingTop: '4em',
+  },
   paper: {
     minHeight: '100vh',
+    marginTop: '0em',
     //paddingTop: '64px',
-    [theme.breakpoints.down('xs')]: {
-      paddingTop: '56px',
-    },
+    // [theme.breakpoints.down('xs')]: {
+    //   //paddingTop: '56px',
+    //   marginTop: '57px',
+    // },
     backgroundColor: '#FBF7F0',
   },
 }));
@@ -27,12 +33,15 @@ const App = () => {
 
   return (
     <HashRouter>
+      <ScrollToTop />
       <Header classes={classes.header} />
       <Paper className={classes.paper}>
         <Switch>
           <Route exact path="/links" component={Links} />
           <Route exact path="/" component={Portfolio} />
-          <Route render={() => <Redirect to={{ pathname: '/' }} />} />
+          <Route path="*">
+            <Redirect to="/" />
+          </Route>
         </Switch>
       </Paper>
       <Footer classes={classes.footer} />

src/Links.jsx

@@ -4,26 +4,31 @@ import clsx from 'clsx';
 import { Box, Grid, Button } from '@material-ui/core';
 
 import links from './links';
-import profile from './resource/images/profile.png';
+import profile from './resource/images/profile1.JPEG';
 
 const useStyles = makeStyles((theme) => ({
   content: {
     minHeight: '100vh',
-    paddingTop: '10vh',
+    marginTop: '4em',
     paddingBottom: '10vh',
     color: '#0e1111',
     //backgroundImage: 'url(' + require('./resource/images/strahov.jpg') + ')',
     backgroundColor: '#FBF7F0',
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',
+    [theme.breakpoints.down('xs')]: {
+      //paddingTop: '56px',
+      marginTop: '3em',
+    },
+    paddingTop: '2em',
   },
   profilePic: {
     minWidth: '150px',
     width: '10vw',
     borderRadius: '100vw',
     height: 'auto',
-    border: '1px solid black',
+    border: '0px solid black',
   },
   link: {
     marginTop: theme.spacing(1),

src/Portfolio.jsx

@@ -3,6 +3,8 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Box } from '@material-ui/core';
 
 import Greetings from './components/cards/Greetings';
+import Skills from './components/cards/Skills';
+import Projects from './components/cards/Projects';
 
 const useStyles = makeStyles(() => ({}));
 
@@ -12,6 +14,8 @@ const Portfolio = () => {
   return (
     <Box className={classes.content}>
       <Greetings id="about_me" />
+      <Skills id="skills" />
+      <Projects id="projects" />
     </Box>
   );
 };

src/ScrollToTop.jsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+  }, [pathname]);
+
+  return null;
+}

src/components/cards/Card.jsx

@@ -2,12 +2,11 @@ import styled from 'styled-components';
 
 const Card = styled.section`
   minheight: 100vh;
-  max-height: 1000px;
   display: grid;
-  padding-top: 2em;
-  padding-bottom: 2em;
-  padding-left: 5vw;
-  padding-right: 5vw;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  margin-left: 5vw;
+  margin-right: 5vw;
 `;
 
 Card.displayName = 'Card';

src/components/cards/Greetings.jsx

@@ -1,13 +1,14 @@
+/* eslint-disable quotes */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import { Grid, Typography } from '@material-ui/core';
 
-import profile from '../../resource/images/profile.png';
+import profile from '../../resource/images/profile1.JPEG';
 
 import Card from './Card';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     minHeight: '100vh',
   },
@@ -16,7 +17,14 @@ const useStyles = makeStyles(() => ({
     width: '20vw',
     borderRadius: '100vw',
     height: 'auto',
-    border: '1px solid black',
+    border: '0px solid black',
+  },
+  greetingsText: {
+    marginTop: '3em',
+    textAlign: 'left',
+    [theme.breakpoints.down('sm')]: {
+      textAlign: 'center',
+    },
   },
 }));
 
@@ -46,30 +54,12 @@ const Greetings = (props) => {
             <Grid item xs={11} sm={9} md={7}>
               <Grid container alignItems="center" spacing={2}>
                 <Grid item>
-                  <Typography variant="body1" className={classes.typeWriter}>
-                    Hey and welcome on my portfolio.
-                  </Typography>
-                </Grid>
-                <Grid item>
-                  <Typography variant="body1" className={classes.typeWriter}>
-                    My name is <b>Dave Omrai</b> and I am fresh graguatee of
-                    <b> bachelor</b> degree program data science at
-                    <b>{` Faculty of
-                    Information of Information Technology CTU`}</b>
-                    .
-                  </Typography>
-                </Grid>
-                <Grid item>
-                  <Typography variant="body1" className={classes.typeWriter}>
-                    Among my dearest hobbies is working with <b>big data</b>,
-                    understanding problems, searching for the best solutions and
-                    <b> building websites</b>.
-                  </Typography>
-                </Grid>
-                <Grid item>
-                  <Typography variant="body1" className={classes.typeWriter}>
-                    In my free time I like to travel, listen to <b>music</b> and
-                    enjoy <b>art</b> in any form.
+                  <Typography variant="body1" className={classes.greetingsText}>
+                    Hey and welcome to my portfolio.
+                    <br />
+                    My name is <b>Dave Omrai</b> and I graduated with a master
+                    {`'`}s <b>degree in AI/data science</b> program at the{' '}
+                    <b>Faculty of Information Technology (CTU)</b>.
                   </Typography>
                 </Grid>
               </Grid>

src/components/cards/Projects.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Typography } from '@material-ui/core';
+import srlogo from '../../resource/images/SR.png';
+
+import Card from './Card';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    minHeight: '100vh',
+    borderTop: '1px dashed #bbcfc2',
+  },
+  srPic: {
+    minWidth: '200px',
+    width: '20vw',
+    borderRadius: '100vw',
+    height: 'auto',
+    border: '0px solid black',
+  },
+  projText: {
+    textAlign: 'center',
+  },
+}));
+
+const Projects = (props) => {
+  const classes = useStyles();
+  const { id } = props;
+  return (
+    <Card id={id}>
+      <Grid
+        container
+        justifyContent="center"
+        alignItems="center"
+        className={classes.root}
+      >
+        <Grid item xs={12}>
+          <Grid
+            container
+            spacing={3}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Grid item xs={12} sm={12} md={12}>
+              <Grid container justifyContent="center" alignItems="center">
+                <img
+                  src={srlogo}
+                  alt="Sudety Raport logo"
+                  className={classes.srPic}
+                />
+              </Grid>
+            </Grid>
+            <Grid item xs={11} sm={9} md={12}>
+              <Grid container alignItems="center" spacing={2}>
+                <Grid item>
+                  <Typography variant="body1" className={classes.projText}>
+                    I am also an <b>admin and web developer</b> of{' '}
+                    <b>
+                      <a
+                        href="//www.sudetyraport.com"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        SudetyRaport
+                      </a>
+                    </b>
+                    , rap plug. With our team, we provide a platform to
+                    <b> over 2,000 readers</b> for insightful articles on{' '}
+                    <i>
+                      for insightful articles on socio-cultural issues and
+                      art-related themes within the rap music industry.
+                    </i>
+                    Apart from this project, I also administrate a few other
+                    React/Python/WordPress projects.
+                  </Typography>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Card>
+  );
+};
+
+Projects.displayName = 'Projects';
+
+Projects.propTypes = {
+  id: PropTypes.string.isRequired,
+};
+
+Projects.defaultProps = {};
+
+export default Projects;