'yet to put functionality to the contact component'

package.json

@@ -11,10 +11,12 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "animate.css": "^4.1.1",
+    "fa-icon-element": "^1.0.1",
     "gsap-trial": "^3.11.4",
     "loaders.css": "^0.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
     "react-leaflet": "^4.2.0",
     "react-loaders": "^3.0.1",
     "react-router-dom": "^6.6.1",

src/App.js

@@ -4,6 +4,8 @@ import {Routes,Route} from 'react-router-dom'
 import Layout from './components/Layout'
 import Home from './components/Home'
 import About from './components/About';
+import Contact from './components/Contact';
+import Projects from './components/Projects';
 
 
 function App() {
@@ -13,6 +15,8 @@ function App() {
       <Route path='/' element={< Layout/>}>
         <Route index element={< Home />}></Route>
         <Route path='/about' element={<About/>}></Route>
+        <Route path='/contact' element={<Contact/>}></Route>
+        <Route path='/projects' element={<Projects/>}></Route>
       </Route>
 
     </Routes>

src/components/About/index.js

@@ -1,3 +1,7 @@
+import { faJsSquare, faPython } from '@fortawesome/free-brands-svg-icons'
+import { faCloud, faDashboard, faDatabase, faFileExcel, faRocket, faToolbox, faTools } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAnalytics } from 'react-icons/fa';
 import './index.scss'
 
 const About = () => {
@@ -38,6 +42,34 @@ const About = () => {
                     to make positive global impact.
                 </p>
             </div>
+
+            <div className='stage-cube-cont'>
+                <div className='cubespinner'>
+                    <div className='face1'>
+                        <FontAwesomeIcon icon={faPython} color='#2b3a55'/>
+                    </div>
+
+                    <div className='face2'>
+                        <FontAwesomeIcon icon={faFileExcel} color='#ec4d28'/>
+                    </div>
+
+                    <div className='face3'>
+                        < FontAwesomeIcon icon={faJsSquare} color='#dd0031'/>
+                    </div>
+
+                    <div className='face4'>
+                        <FontAwesomeIcon icon={faDatabase} color='#58287f'/>
+                    </div>
+
+                    <div className='face5'>
+                        <FontAwesomeIcon icon={faRocket} color='#4d4d4e'/>
+                    </div>
+
+                    <div className='face6'>
+                        <FontAwesomeIcon icon={faCloud} color='#f06529'/>
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }

src/components/About/index.scss

@@ -0,0 +1,81 @@
+.stage-cube-cont{
+    width: 42%;
+    height: 70%;
+    top: 0;
+    padding-top: 15%;
+    margin-left: 0;
+    position: absolute;
+    right: 2%;
+    overflow: auto;
+}
+
+.cubespinner{
+    animation-name: spinner;
+    animation-timing-function: ease-in-out;
+    animation-duration: 12s;
+    animation-iteration-count: infinite;
+    transform-style: preserve-3d;
+    transform-origin: 100px 100px 0;
+    margin-left: calc(42% - 100px);
+
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        border: 1px solid #ccc;
+        background: rgba(255,255,255,0.4);
+        text-align: center;
+        font-size: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+    }
+
+    .face1{
+        transform: translateZ(100px);
+    }
+    .face2{
+        transform: rotateY(90deg) translateZ(100px);
+    }
+    .face3{
+        transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
+    }
+    .face4{
+        transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
+    }
+    .face5{
+        transform:rotateY(-90deg) rotateZ(90deg) translateZ(100px);
+    }
+    .face6{
+        transform: rotateX(-90deg) translateZ(100px);
+    }
+}
+
+
+@keyframes spinner {
+    from,
+    to{
+        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+
+    }
+    17% {
+        transform: rotateY(-90deg);
+    }
+    34% {
+        transform: rotateY(-90deg) rotateZ(90deg);
+
+    }
+
+    50%{
+        transform: rotateY(-180deg) rotateZ(90deg);
+
+    }
+    67%{
+        transform: rotateY(-270deg) rotateZ(90deg);
+
+    }
+    84%{
+        transform: rotateX(90deg);
+    }
+}

src/components/Contact/index.js

@@ -0,0 +1,47 @@
+import './index.scss'
+
+const Contact = () => {
+    return(
+        <div className='container contact-page'>
+            <div className='text-zone'>
+              <h1>Contact Me</h1>  
+                <p>
+                    I am open to freelance opportunities and projects in data science
+                    and software engineering. Feel free to reach out to me via the form 
+                    below. I look forward to hearing from you.
+                </p>
+                <div className='contact-form'>
+                    <form>
+                        <ul>
+                            <li className='half'>
+                                <input type='text' name='name' placeholder='FirstName LastName' required />
+
+                            </li>
+                            <li className='half'>
+                                <input type='email' name='email' placeholder='[email protected]' required />
+
+                            </li>
+
+                            <li>
+                                <input type='text' placeholder='Subject' name='subject' required />
+                            </li>
+
+                            <li>
+                                <textarea placeholder='Message'  name='message' required>
+
+                                </textarea>
+                            </li>
+                            <li>
+                                <input type='submit' className='flat-button' value='SEND' />
+                            </li>
+
+                        </ul>
+                    </form>
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default Contact

src/components/Contact/index.scss

@@ -0,0 +1,76 @@
+.contact-form{
+    width: 100%;
+    margin-top: 20px;
+
+
+    ul{
+        padding: 0;
+        margin: 0;
+
+        li{
+            padding: 0;
+            margin: 0;
+            list-style: none;
+            margin-bottom: 10px;
+            overflow:hidden;
+            display:block;
+            position: relative;
+            opacity: 0;
+            animation: fadeInUp 2s 2s;
+            animation-fill-mode: forwards;
+            clear: both;
+
+
+        }
+
+        li.half {
+            width: 49%;
+            margin-left: 2%;
+            float: left;
+            clear: none;
+
+            &:first-child{
+                margin-left: 0;
+            }
+
+        }
+    }
+
+    input[type='text'],
+    input[type='email']{
+        width:100%;
+        border:0;
+        background-color: #d8d4c7;
+        color: #1a0000;
+        padding: 0 20px;
+        box-sizing: border-box;
+
+    }
+
+    textarea{
+        width: 100%;
+        border:0;
+        background-color: #d8d4c7;
+        height:50px;
+        font-size: 16px;
+        color:#1a0000;
+        padding:20px;
+        min-height: 150px;
+        box-sizing: border-box;
+
+    }
+
+    .flat-button{
+        color: #2b3a55;
+        background: 0 0;
+        font: 11px;
+        letter-spacing: 3px;
+        text-decoration: none;
+        padding: 8px 10px;
+        border: 1px solid #2b3a55;
+        float: right;
+        border-radius: 4px;
+
+    }
+
+}

src/components/Layout/index.scss

@@ -13,10 +13,11 @@
     animation-delay: 1s;
 }
 
-.about-page{
+.about-page, .contact-page{
+
     .text-zone{
         position:absolute;
-        left: 10%;
+        left: 8%;
         display: table-cell;
         top:50%;
         transform: translateY(-50%);
@@ -36,4 +37,11 @@
         margin-bottom: 20px;
         left:10%;
     }
+
+    p{
+        font-family: sans-serif;
+        font-weight: 300;
+        min-width: fit-content;
+
+    }
 }

src/components/Projects/index.js

@@ -0,0 +1,12 @@
+import './index.scss'
+
+const Projects = () => {
+    return(
+        <div>
+
+
+        </div>
+    )
+}
+
+export default Projects