Add App component and update styles

mirkan1 · Feb 13, 2024 · ced98b5 · ced98b5
1 parent 962d424
commit ced98b5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 30 deletions.
diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { HashRouter as Router, Route } from 'react-router-dom';
 import { Jumbotron as Jumbo, Container } from 'react-bootstrap';
-import { CSSTransition } from 'react-transition-group';
+import { TransitionGroup } from 'react-transition-group';
 import { Navbar } from './components/Navbar';
 import Footer from './components/Footer';
 import Privacy from './pages/Privacy';
@@ -20,46 +20,25 @@ class App extends Component {
         <Jumbo className="jumbo">
           <Container style={{ minHeight: "50vh"}}>
             <Route exact path="/resume" component={Resume} >
-              {({ match }) => (
-                <CSSTransition
-                  in={match != null}
-                  timeout={300}
-                  classNames="page"
-                  unmountOnExit
-                >
+                <TransitionGroup>
                   <div className="page">
                     <Resume />
                   </div>
-                </CSSTransition>
-              )}
+                </TransitionGroup>
             </Route>
             <Route exact path="/work" component={Work}>
-              {({ match }) => (
-                <CSSTransition
-                  in={match != null}
-                  timeout={300}
-                  classNames="page"
-                  unmountOnExit
-                >
+                <TransitionGroup>
                   <div className="page">
                     <Work />
                   </div>
-                </CSSTransition>
-              )}
+                </TransitionGroup>
             </Route>
             <Route exact path="/" component={About} >
-              {({ match }) => (
-                <CSSTransition
-                  in={match != null}
-                  timeout={300}
-                  classNames="page"
-                  unmountOnExit
-                >
+                <TransitionGroup>
                   <div className="page page-about">
                     <About />
                   </div>
-                </CSSTransition>
-              )}
+                </TransitionGroup>
             </Route>
             <Route path="/privacy" component={Privacy} />
           </Container>

diff --git a/src/css/resume.css b/src/css/resume.css
@@ -18,4 +18,14 @@ a:hover {
     justify-content: center!important;
     align-items: center!important;
     height: 100%!important;
+}
+
+.mail-div-p {
+    color: rgb(255, 255, 255)!important;
+    font-size: 1.5rem!important;
+    text-decoration: none!important;    
+}
+.mail-div-a {
+    font-size: 1.5rem!important;
+    text-decoration: none!important;
 }
diff --git a/src/css/work.css b/src/css/work.css
@@ -1,6 +1,10 @@
 .page-inner {
     display: block!important;
     max-width: 50rem!important;
+    height: 60vh!important;
+    overflow-y: scroll;
+    border: 2px solid silver;
+    padding: 10px;
 }
 
 .jumbo {

diff --git a/src/pages/Resume.jsx b/src/pages/Resume.jsx
@@ -28,8 +28,8 @@ export default class Resume extends Component {
     render() {
         return (
           <div className="mail-div">
-              <p>send an email for my resume</p>
-              <a href="mailto:[email protected]&subject=Resume Request">Request Resume</a>
+              <p className="mail-div-p" >Send me an email for my resume by clicking button</p>
+              <a className="mail-div-a"  href="mailto:[email protected]&subject=Resume Request">Request Resume</a>
           </div>
             )
         }