contact form reset

.gitignore

@@ -31,5 +31,4 @@ build/
 
 .env
 
-notes.txt
-TODO.md
+ignore/

README.md

@@ -4,6 +4,9 @@
 
 ## Framework: React
 
+## TODO
+- [ ] Add SSR using Next or Gatsby
+
 ## Styles
 * Fonts: Poppins, IBM Plex Serif
 * Color theme: pink, blue, dark grey

src/App.js

@@ -13,7 +13,6 @@ function App() {
       <Helmet>
         <title>Erlisa Kulla | Website</title>
         <meta name="description" content="Software Developer and Artist with a great passion for learning and creative exploration."/>
-        <base target="_blank" href="https://www.erlisakulla.com"/>
       </Helmet>
 
       <Navbar/>

src/main/Home/HomePage.css

@@ -431,3 +431,7 @@ h3 {
   transform: translateY(15px);
   border-radius: 4px;
 }
+
+#bmw-paper {
+  cursor: pointer;
+}

src/main/sections/CanDo.js

@@ -245,8 +245,8 @@ export const CanDoList = () => {
                   </Grid>
                   <Grid item xs={10}>
                     Python
-                    <Tooltip title="6/10" placement="right" arrow>
-                      <Progress percent={60} showInfo={false} strokeColor="grey" trailColor="#dbdbdb"/>
+                    <Tooltip title="5/10" placement="right" arrow>
+                      <Progress percent={50} showInfo={false} strokeColor="grey" trailColor="#dbdbdb"/>
                     </Tooltip>
                   </Grid>
 

src/main/sections/ContactMe.js

@@ -9,17 +9,25 @@ class ContactMe extends React.Component {
     super(props);
 
     this.sendEmail = this.sendEmail.bind(this);
+    this.onChangeInput = this.onChangeInput.bind(this);
+
+    this.state = {
+      first_name: '',
+      last_name: '',
+      email: '',
+      subject: '',
+      message: '',
+    }
   };
 
   sendEmail(e) {
     e.preventDefault();
     emailjs.sendForm('gmail', process.env.REACT_APP_TEMPLATE_ID, e.target, process.env.REACT_APP_USER_ID)
       .then((result) => {
-        console.log(result.text);
         notification.open({
           message: 'Your email was sent successfully!',
           description:
-            'Thank you for your email. I will get back to you as soon as possible :)'
+            'I will get back to you as soon as possible :)'
         });
       }, (error) => {
         notification.open({
@@ -28,13 +36,26 @@ class ContactMe extends React.Component {
         console.log(error.data);
       }
     );
-    e.target.reset();
+
+    this.setState({
+      first_name: '',
+      last_name: '',
+      email: '',
+      subject: '',
+      message: '',
+    });
+  }
+
+  onChangeInput(e) {
+    const cred = this.state;
+    cred[e.target.name] = e.target.value;
+    this.setState(cred);
   }
 
   render() {
     return (
       <div id="contact-form-cont">
-        <form name="complex-form" action="#" method="post" onSubmit={this.sendEmail}>
+        <form name="complex-form" method="post" onSubmit={this.sendEmail}>
           <Grid container spacing={3}>
             <Grid item xs={12} md={6}>
               <Form.Item style={{ marginBottom: 0 }}>
@@ -48,6 +69,8 @@ class ContactMe extends React.Component {
                         name="first_name" 
                         id="fname" 
                         placeholder="First Name"
+                        value={this.state.first_name}
+                        onChange={this.onChangeInput}
                       />
                     </Form.Item>
                   </Grid>
@@ -61,6 +84,8 @@ class ContactMe extends React.Component {
                         name="last_name" 
                         id="lname" 
                         placeholder="Last Name"
+                        value={this.state.last_name}
+                        onChange={this.onChangeInput}
                       />
                     </Form.Item>
                   </Grid>
@@ -78,6 +103,8 @@ class ContactMe extends React.Component {
                     name="email" 
                     placeholder="Email" 
                     type="email"
+                    value={this.state.email}
+                    onChange={this.onChangeInput}
                   />
                 </Form.Item>
               </Form.Item>
@@ -91,6 +118,8 @@ class ContactMe extends React.Component {
                     id="subject" 
                     name="subject" 
                     placeholder="Subject" 
+                    value={this.state.subject}
+                    onChange={this.onChangeInput}
                   />
                 </Form.Item>
               </Form.Item>
@@ -102,11 +131,13 @@ class ContactMe extends React.Component {
                   noStyle
                   rules={[{ required: true }]}
                 >
-                  <Input.TextArea
+                  <textarea className="ant-input"
                     required
                     name="message" 
                     id="message" 
                     placeholder="If you simply want to say hi, you want to collaborate, or you want to ask me something, don't hesitate to message me..."
+                    value={this.state.message}
+                    onChange={this.onChangeInput}
                   />
                 </Form.Item>
               </Form.Item>

src/main/sections/Experience.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Timeline from '@material-ui/lab/Timeline';
 import TimelineItem from '@material-ui/lab/TimelineItem';
@@ -7,11 +7,12 @@ import TimelineConnector from '@material-ui/lab/TimelineConnector';
 import TimelineContent from '@material-ui/lab/TimelineContent';
 import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
 import TimelineDot from '@material-ui/lab/TimelineDot';
-import { Paper, Grid } from '@material-ui/core';
+import { Paper, Grid, Collapse } from '@material-ui/core';
 import bmw from '../../img/bmw-logo.png';
 import jsc from '../../img/jsc-logo.jpg';
 import idmc from '../../img/idmc-logo.jpg';
 import { FiGlobe } from 'react-icons/fi';
+import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -25,6 +26,22 @@ const useStyles = makeStyles((theme) => ({
 export default function CustomizedTimeline() {
   const classes = useStyles();
 
+  const [expandBMW, setBMWExpand] = useState(false);
+  const [expandJSC, setJSCExpand] = useState(false);
+  const [expandIDMC, setIDMCxpand] = useState(false);
+
+  const handleExpandClick1 = () => {
+    setBMWExpand(!expandBMW);
+  };
+
+  const handleExpandClick2 = () => {
+    setJSCExpand(!expandJSC);
+  };
+
+  const handleExpandClick3 = () => {
+    setIDMCxpand(!expandIDMC);
+  };
+
   return (
     <Timeline align="alternate">
       <div className="time">June - July 2021</div>
@@ -37,7 +54,7 @@ export default function CustomizedTimeline() {
           <TimelineConnector/>
         </TimelineSeparator>
         <TimelineContent>
-          <Paper elevation={3} className={classes.paper} id="bmw-paper">
+          <Paper elevation={3} className={classes.paper} id="bmw-paper" onClick={handleExpandClick1}>
             <Grid container spacing={3}>
               <Grid item xs={3}>
                 <img id="bmw-logo" src={bmw} alt="bmw-logo"/>
@@ -50,6 +67,10 @@ export default function CustomizedTimeline() {
                 </p>
               </Grid>
             </Grid>
+
+            {/* <Collapse in={expandBMW} timeout="auto" unmountOnExit  id="ui-ux-skills">
+              Hello
+            </Collapse> */}
           </Paper>
           <br/>
         </TimelineContent>
@@ -58,7 +79,7 @@ export default function CustomizedTimeline() {
       <div className="time">April 2020 - March 2021</div>
       <TimelineItem>
         <TimelineOppositeContent>
-          <Paper elevation={3} className={classes.paper} id="bmw-paper">
+          <Paper elevation={3} className={classes.paper} id="bmw-paper"  onClick={handleExpandClick2}>
             <Grid container spacing={3}>
               <Grid item xs={9}>
                 <h5>Head of Marketing and Design</h5>
@@ -72,6 +93,28 @@ export default function CustomizedTimeline() {
                 <img id="jsc-logo" src={jsc} alt="jsc-logo"/>
               </Grid>
             </Grid>
+
+            <Collapse in={expandJSC} timeout="auto" unmountOnExit id="ui-ux-skills">
+              <ul style={{listStyle:'circle', fontSize:'13px', lineHeight:'1.5', paddingTop:'10px', paddingRight:'10px', paddingBottom:'15px'}}>
+                <li>
+                  Recruiting and leading the Marketing Team for JSC 2021
+                </li>
+                <li>
+                  Creating visual content: logo design, social media posts, brochures, posters, flyers, videos, recruitment material etc.
+                </li>
+                <li>
+                  Designing and managing the JSC website
+                </li>
+              </ul>
+            </Collapse>
+
+            <div style={{textAlign:'center', color:'none'}}>
+              {
+                (expandJSC === false) ?
+                <FiChevronDown size={25} id="backend-expand-arrow"/> :
+                <FiChevronUp size={25} id="backend-expand-arrow"/>
+              }
+            </div>
           </Paper>
           <br/>
         </TimelineOppositeContent>
@@ -93,7 +136,7 @@ export default function CustomizedTimeline() {
           <TimelineDot color="secondary" id="disappear"/>
         </TimelineSeparator>
         <TimelineContent>
-          <Paper elevation={3} className={classes.paper} id="bmw-paper">
+          <Paper elevation={3} className={classes.paper} id="bmw-paper" onClick={handleExpandClick3}>
             <Grid container spacing={3}>
               <Grid item xs={3}>
                 <img id="idmc-logo" src={idmc} alt="idmc-logo"/>
@@ -106,6 +149,25 @@ export default function CustomizedTimeline() {
                 </p>
               </Grid>
             </Grid>
+
+            <Collapse in={expandIDMC} timeout="auto" unmountOnExit  id="ui-ux-skills">
+              <ul style={{listStyle:'circle', fontSize:'13px', lineHeight:'1.5', paddingTop:'10px', paddingRight:'10px', paddingBottom:'15px'}}>
+                <li>
+                  Created several videos for their project called “Communist Terminologue”
+                </li>
+                <li>
+                  Animated a 4-minute-long video titled “The Train of Dictatorship” and won 1st place at their national contest
+                </li>
+              </ul>
+            </Collapse>
+
+            <div style={{textAlign:'center', color:'none'}}>
+              {
+                (expandIDMC === false) ?
+                <FiChevronDown size={25} id="backend-expand-arrow"/> :
+                <FiChevronUp size={25} id="backend-expand-arrow"/>
+              }
+            </div>
           </Paper>
         </TimelineContent>
       </TimelineItem>