feature: skills and footer added

ata-turhan · Apr 30, 2024 · ea02411 · ea02411
1 parent 187fe6f
commit ea02411
Show file tree

Hide file tree

Showing 4 changed files with 210 additions and 3 deletions.
diff --git a/src/App.css b/src/App.css
@@ -492,4 +492,132 @@ a, a:active, a:hover {
     border-radius: 8%;
     color: rgba(30, 39, 46, 0.7);
   }
-}
+}
+
+/* Skills section */
+.skills {
+  background-color: white;
+  height: 50vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  font-size: 4rem;
+  color: black;
+  margin: 3rem 0;
+  text-align: center;
+  margin-top: 5%;
+  letter-spacing: 0.3rem;
+}
+
+.skill-cards {
+  background-color: gray;
+  padding: 1.2rem 1rem 1rem 1rem;
+  margin: 1.2rem;
+    width: 10rem;
+  border-radius: 8px;
+  color: #ffffff;
+}
+
+.skill-icon {
+  color: white;
+  font-size: 40px;
+}
+
+.skill-holder {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  justify-content: space-evenly;
+  align-items: center;
+  margin: 2em 0;
+}
+
+.skill {
+  font-size: 1.3rem;
+  font-weight: bolder;
+  text-align: center;
+  text-shadow: 2px 3px 4px #000000;
+  text-transform: uppercase;
+}
+
+.skill-cards:hover {
+  box-shadow: 0px 2px 10px #000000;
+}
+
+@media (max-width: 500px) { 
+  .title {
+    font-size: 4rem;
+    color: black;
+    margin: 3rem 0;
+    text-align: center;
+    margin-top: 8%;
+    letter-spacing: 0.3rem;
+  }
+
+  .skill-cards {
+    background-color: gray;
+    padding: 1.2rem 1rem 1rem 1rem;
+    margin: 0.2rem;
+    width: 7em;
+    border-radius: 8px;
+    color: #ffffff;
+  }
+
+  .skill-icon {
+    color: white;
+    font-size: 40px;
+  }
+
+  .skill-holder {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    justify-content: space-evenly;
+    align-items: center;
+    margin: 4em 0;
+  }
+
+  .skill {
+    padding: 0;
+    font-size: 0rem;
+  } 
+} 
+/* End Skills section */
+
+/* Footer section  */
+.footer {
+  min-height: 20vh;
+  width: 100%;
+  background-color: black;
+  color: white;
+  flex-direction: column;
+  text-align: center;
+  padding: 5rem;
+}
+.footer .footer-contact-info {
+  padding: 20px;
+}
+.footer .footer-contact-info .footer-heading {
+  font-size: 2.5rem;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-bottom: 10px;
+}
+.footer .footer-contact-info .footer-contact-access {
+  font-size: 1.4rem;
+  padding-top: 10px;
+  letter-spacing: .2rem;
+  margin-bottom: -0.1rem;
+}
+.footer .social-icons a {
+  color: white;
+  font-size: 3rem;
+  margin: 0.7rem;
+  display: inline-block;
+}
+/* End Footer section  */
diff --git a/src/App.js b/src/App.js
@@ -2,6 +2,8 @@ import Header from './components/Header';
 import Body from './components/Body';
 import About from './components/About';
 import Projects from './components/Projects';
+import Skills from './components/Skills';
+import Footer from './components/Footer';
 import './App.css';
 
 const App = () => {
@@ -11,6 +13,8 @@ const App = () => {
       <Body />
       <About />
       <Projects />
+      <Skills />
+      <Footer />
     </div>
   );
 }

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1 +1,22 @@
-// Create your Footer component here
+import { FaMedium } from 'react-icons/fa';
+
+const Footer = () => {
+    return (
+        <footer id="footer" className="footer">
+            <div className="footer-contact-info">
+                <h1 className="footer-heading">Connect With Me</h1>
+                <p className="footer-contact-access">
+                <a href="mailto:ataturhan21@gmail.com">Email: ataturhan21@gmail.com</a>
+                </p>
+            </div>
+            <div>
+                <h1>Social Links</h1>
+                <div className="social-icons">
+                    <a href="https://medium.com/@ataturhan"><i><FaMedium /></i></a>
+                </div>
+            </div>
+        </footer>
+    )
+}
+
+export default Footer;
diff --git a/src/components/Skills.js b/src/components/Skills.js
@@ -1 +1,55 @@
-// Create your Skills component here
+import { FaJs, FaReact, FaHtml5, FaCss3, FaGithub, FaDocker } from "react-icons/fa";
+
+const Skills = () => {
+    const skillsArr = [
+        {
+            "name" : 'JavaScript',
+            "icon" : FaJs
+        },
+        {
+            "name" : "HTML",
+            "icon" : FaHtml5
+        },
+        {
+            "name" : "CSS",
+            "icon" : FaCss3
+        },
+        {
+            "name" : "Git",
+            "icon" : FaGithub
+        },
+        {
+            "name" : "Reactjs",
+            "icon" : FaReact
+        },
+        {
+            "name" : "Docker",
+            "icon" : FaDocker
+        }
+    ];
+
+    return (
+        <div id='skills' className='skills'>
+            <h2 className='title'>Skills</h2>
+            <div className='skill-holder'>
+                {
+                    skillsArr.map((skill, index) => {
+                        const Icon = skill.icon;
+                        return (
+                            <i key={index} className='skill-cards'>
+                                <Icon className='skill-icon'/>
+                                <p
+                                className="skill"
+                                >
+                                    {skill.name}
+                                </p>
+                            </i>
+                        )
+                    })                    
+                }
+            </div>
+        </div>
+    )
+}
+
+export default Skills;