'yet to make projects page ready'

public/index.html

@@ -39,5 +39,12 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <!-- emailjs -->
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
+    <script type="text/javascript">
+        ;(function () {
+            emailjs.init('qj0zEXm6GCMaoGYdh');
+        })();
+    </script>
   </body>
 </html>

src/components/About/index.scss

@@ -6,7 +6,7 @@
     margin-left: 0;
     position: absolute;
     right: 2%;
-    overflow: auto;
+    overflow: hidden;
 }
 
 .cubespinner{
@@ -36,16 +36,16 @@
         transform: translateZ(100px);
     }
     .face2{
-        transform: rotateY(90deg) translateZ(100px);
+        transform: rotateY(89.9deg) translateZ(100px);
     }
     .face3{
-        transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
+        transform: rotateY(89.9deg) rotateX(90deg) translateZ(100px);
     }
     .face4{
-        transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
+        transform: rotateY(179.9deg) rotateZ(90deg) translateZ(100px);
     }
     .face5{
-        transform:rotateY(-90deg) rotateZ(90deg) translateZ(100px);
+        transform:rotateY(-89.9deg) rotateZ(90deg) translateZ(100px);
     }
     .face6{
         transform: rotateX(-90deg) translateZ(100px);
@@ -60,19 +60,19 @@
 
     }
     17% {
-        transform: rotateY(-90deg);
+        transform: rotateY(-89.9deg);
     }
     34% {
-        transform: rotateY(-90deg) rotateZ(90deg);
+        transform: rotateY(-89.9deg) rotateZ(90deg);
 
     }
 
     50%{
-        transform: rotateY(-180deg) rotateZ(90deg);
+        transform: rotateY(-179.9deg) rotateZ(90deg);
 
     }
     67%{
-        transform: rotateY(-270deg) rotateZ(90deg);
+        transform: rotateY(-269.9deg) rotateZ(90deg);
 
     }
     84%{

src/components/Contact/index.js

@@ -1,6 +1,30 @@
+import { useRef } from 'react'
 import './index.scss'
+import emailjs from '@emailjs/browser'
 
 const Contact = () => {
+    const refForm = useRef()
+    const sendEmail = (e) => {
+        e.preventDefault()
+
+        emailjs
+            .sendForm(
+                'service_4w8dwpl',
+                'template_lfizibm',
+                refForm.current,
+                'qj0zEXm6GCMaoGYdh'
+            )
+
+            .then(
+                () => {
+                    alert('Message has been sent! Isaac will get bact to you soon')
+                    window.location.reload(false)
+                },
+                () => {
+                    alert('Failed to send message, kindly try again.')
+                }
+            )
+    }
     return(
         <div className='container contact-page'>
             <div className='text-zone'>
@@ -11,7 +35,7 @@ const Contact = () => {
                     below. I look forward to hearing from you.
                 </p>
                 <div className='contact-form'>
-                    <form>
+                    <form ref={refForm} onSubmit={sendEmail}>
                         <ul>
                             <li className='half'>
                                 <input type='text' name='name' placeholder='FirstName LastName' required />
@@ -40,6 +64,66 @@ const Contact = () => {
                 </div>
             </div>
 
+            <div className='quote-cube'>
+                <div className='cubespin'>
+                    <div className='face1 face'>
+                        <p>
+                            'We will have eternity to celebrate the victories but only few hours before sunset to win them'
+                            <br/>
+                            <br/>
+                            <span className='quoter'>~ Amy Carmichael</span>
+                        </p>
+                    </div>
+
+                    <div className='face2 face'>
+                        <p>
+                            'Self-education is, I believe, the only kind of education there is.'
+                            <br/>
+                            <br/>
+                            <span className='quoter'>~ Isaac Asimov</span>
+                        </p>
+                    </div>
+
+                    <div className='face3 face'>
+                        <p>
+                            'Life takes a bit of time and a lot of relationship'
+                            <br/>
+                            <br/>
+                            <span className='quoter'>~ William Paul Young</span>
+                        </p>
+                    </div>
+
+                    <div className='face4 face'>
+                        <p>
+                            'It\'s probably my job to tell you life isn\'t fair, but
+                             I figure you already know that. So instead, I\'ll tell you 
+                             that hope is precious, and you\'re right not to give up'
+                            <br/>
+                            <br/>
+                            <span className='quoter'>~ C.J. Redwine</span>
+                        </p>
+                    </div>
+
+                    <div className='face5 face'>
+                        <p >
+                            'For the things we have to learn before we can do them, we learn by doing them.'
+                            <br/>
+                            <br/>
+                            <span className='quoter'>~ Aristotle</span>
+                        </p>
+                    </div>
+
+                    <div className='face6 face'>
+                        <p>
+                            'Let every man be swift to hear, slow to speak, slow to wrath.'
+                            <br/>
+                            <br/>
+                            <span className='quoter'>~ James of the Bible</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+
         </div>
     )
 }

src/components/Contact/index.scss

@@ -39,6 +39,7 @@
     input[type='text'],
     input[type='email']{
         width:100%;
+        height:50px;
         border:0;
         background-color: #d8d4c7;
         color: #1a0000;
@@ -73,4 +74,95 @@
 
     }
 
+}
+
+.quote-cube{
+    width: 42%;
+    height: 70%;
+    top: 0;
+    padding-top: 15%;
+    margin-left: 0;
+    position: absolute;
+    right: 2%;
+    overflow: hidden;
+}
+
+.cubespin{
+    animation-name: spinner;
+    animation-timing-function: ease-in-out;
+    animation-duration: 70s;
+    animation-iteration-count: infinite;
+    transform-style: preserve-3d;
+    transform-origin: 150px 150px 0;
+    margin-left: calc(42% - 150px);
+
+    div {
+        position: absolute;
+        width: 300px;
+        height: 300px;
+        border: 1px solid #1a0000;
+        background: rgba(255,255,255,0.4);
+        text-align: center;
+        font-size: 15px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        p{
+            .quoter{
+                float:right;
+                margin-right: 20px;
+            }
+        }
+
+    }
+    .face{
+        background-color:#d8d4c7;
+    }
+    .face1{
+        transform: translateZ(150px);
+    }
+    .face2{
+        transform: rotateY(89.9deg) translateZ(150px);
+    }
+    .face3{
+        transform: rotateY(89.9deg) rotateX(90deg) translateZ(150px);
+    }
+    .face4{
+        transform: rotateY(179.9deg) rotateZ(90deg) translateZ(150px);
+    }
+    .face5{
+        transform:rotateY(-89.9deg) rotateZ(90deg) translateZ(150px);
+    }
+    .face6{
+        transform: rotateX(-90deg) translateZ(150px);
+    }
+}
+
+
+@keyframes spinner {
+    from,
+    to{
+        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+
+    }
+    17% {
+        transform: rotateY(-89.9deg);
+    }
+    34% {
+        transform: rotateY(-89.9deg) rotateZ(90deg);
+
+    }
+
+    50%{
+        transform: rotateY(-179.9deg) rotateZ(90deg);
+
+    }
+    67%{
+        transform: rotateY(-269.9deg) rotateZ(90deg);
+
+    }
+    84%{
+        transform: rotateX(90deg);
+    }
 }

src/components/Layout/index.scss

@@ -13,7 +13,7 @@
     animation-delay: 1s;
 }
 
-.about-page, .contact-page{
+.about-page, .contact-page {
 
     .text-zone{
         position:absolute;

src/components/Projects/index.js

@@ -1,10 +1,12 @@
+import { faWarning } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import './index.scss'
 
 const Projects = () => {
     return(
-        <div>
-
-
+        <div className='project-page'>
+            <FontAwesomeIcon icon={faWarning} color='#ffd700' />
+            <p> Page Under Construction</p>
         </div>
     )
 }

src/components/Projects/index.scss

@@ -0,0 +1,17 @@
+.project-page{
+    position: absolute;
+    left:27%;
+    top:10%;
+
+    svg{
+        font-size:200px;
+        margin:50px;
+        margin-left:170px;
+    }
+
+    p{
+        font-size:50px;
+
+    }
+
+}