From ea02411d09d9afe5c0d0453fb999f313204c5bca Mon Sep 17 00:00:00 2001 From: fotino21 Date: Tue, 30 Apr 2024 18:52:24 -0500 Subject: [PATCH] feature: skills and footer added --- src/App.css | 130 ++++++++++++++++++++++++++++++++++++++- src/App.js | 4 ++ src/components/Footer.js | 23 ++++++- src/components/Skills.js | 56 ++++++++++++++++- 4 files changed, 210 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index a22b8cf..e2e3471 100644 --- 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); } -} \ No newline at end of file +} + +/* 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 */ \ No newline at end of file diff --git a/src/App.js b/src/App.js index 97c414f..e48d5b6 100644 --- 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 = () => { + +