From 1ff58ea7ccbe3c6007062959e6da35eeefe14391 Mon Sep 17 00:00:00 2001 From: yousifpa98 Date: Thu, 19 Dec 2024 22:52:36 +0100 Subject: [PATCH] hero square done --- src/App.css | 7 + src/App.jsx | 20 ++- src/assets/fonts/San-Francisco-Pro-Fonts | 1 + src/assets/icons/skill-icons | 1 + src/components/Home.jsx | 13 ++ src/components/subComponents/Hero.jsx | 17 +++ src/components/subComponents/TechStack.jsx | 0 src/css/Hero.css | 17 +++ src/css/Home.css | 8 ++ src/css/fonts.css | 146 +++++++++++++++++++++ src/index.css | 10 ++ src/layout/Footer.jsx | 9 ++ src/layout/Header.jsx | 9 ++ src/layout/Layout.jsx | 15 +++ src/main.jsx | 17 +-- 15 files changed, 277 insertions(+), 13 deletions(-) create mode 160000 src/assets/fonts/San-Francisco-Pro-Fonts create mode 160000 src/assets/icons/skill-icons create mode 100644 src/components/Home.jsx create mode 100644 src/components/subComponents/Hero.jsx create mode 100644 src/components/subComponents/TechStack.jsx create mode 100644 src/css/Hero.css create mode 100644 src/css/Home.css create mode 100644 src/css/fonts.css create mode 100644 src/layout/Footer.jsx create mode 100644 src/layout/Header.jsx create mode 100644 src/layout/Layout.jsx diff --git a/src/App.css b/src/App.css index e69de29..aaad169 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,7 @@ +main { + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/App.jsx b/src/App.jsx index d89aae9..fce2c51 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,19 @@ -import React from 'react' +import React from "react"; +import Layout from "./layout/Layout"; +import { Route, Routes } from "react-router-dom"; +import Home from "./components/Home"; +import "./App.css"; const App = () => { return ( -
App
- ) -} +
+ {/* */} + + } /> + + {/* */} +
+ ); +}; -export default App \ No newline at end of file +export default App; diff --git a/src/assets/fonts/San-Francisco-Pro-Fonts b/src/assets/fonts/San-Francisco-Pro-Fonts new file mode 160000 index 0000000..8bfea09 --- /dev/null +++ b/src/assets/fonts/San-Francisco-Pro-Fonts @@ -0,0 +1 @@ +Subproject commit 8bfea09aa6f1139479f80358b2e1e5c6dc991a58 diff --git a/src/assets/icons/skill-icons b/src/assets/icons/skill-icons new file mode 160000 index 0000000..65dea6c --- /dev/null +++ b/src/assets/icons/skill-icons @@ -0,0 +1 @@ +Subproject commit 65dea6c4eaca7da319e552c09f4cf5a9a8dab2c8 diff --git a/src/components/Home.jsx b/src/components/Home.jsx new file mode 100644 index 0000000..a2b8867 --- /dev/null +++ b/src/components/Home.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import Hero from "./subComponents/Hero"; +import "../css/Home.css"; + +const Home = () => { + return ( +
+ +
+ ); +}; + +export default Home; diff --git a/src/components/subComponents/Hero.jsx b/src/components/subComponents/Hero.jsx new file mode 100644 index 0000000..39c55bf --- /dev/null +++ b/src/components/subComponents/Hero.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import "../../css/Hero.css"; + +const Hero = () => { + return ( +
+

+ + Hi, I'm Yousif.
+ {" "} + I'm a Full-Stack Developer from Germany. +

+
+ ); +}; + +export default Hero; diff --git a/src/components/subComponents/TechStack.jsx b/src/components/subComponents/TechStack.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/css/Hero.css b/src/css/Hero.css new file mode 100644 index 0000000..0d7fd46 --- /dev/null +++ b/src/css/Hero.css @@ -0,0 +1,17 @@ +.hero { + grid-area: 1 / 1 / 5 / 5; + background-color: #28272a; + padding: 2rem; + border-radius: 1rem; + border: 0.5px solid rgb(73, 73, 73); +} + +.hero p span { + color: white; + font-weight: bold; +} + +.hero p { + font-size: 2rem; + color: rgb(151, 151, 151); +} diff --git a/src/css/Home.css b/src/css/Home.css new file mode 100644 index 0000000..474f706 --- /dev/null +++ b/src/css/Home.css @@ -0,0 +1,8 @@ +.gridContainer { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-template-rows: repeat(9, 1fr); + gap: 10px; + width: 50%; +} + diff --git a/src/css/fonts.css b/src/css/fonts.css new file mode 100644 index 0000000..9db8be4 --- /dev/null +++ b/src/css/fonts.css @@ -0,0 +1,146 @@ +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Thin.otf") format("opentype"); + font-weight: 100; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-ThinItalic.otf") format("opentype"); + font-weight: 100; + font-style: italic; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Light.otf") format("opentype"); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-LightItalic.otf") format("opentype"); + font-weight: 300; + font-style: italic; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Regular.otf") format("opentype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-RegularItalic.otf") format("opentype"); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Medium.otf") format("opentype"); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-MediumItalic.otf") format("opentype"); + font-weight: 500; + font-style: italic; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Semibold.otf") format("opentype"); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-SemiboldItalic.otf") format("opentype"); + font-weight: 600; + font-style: italic; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Bold.otf") format("opentype"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-BoldItalic.otf") format("opentype"); + font-weight: 700; + font-style: italic; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Black.otf") format("opentype"); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-BlackItalic.otf") format("opentype"); + font-weight: 900; + font-style: italic; +} + +@font-face { + font-family: "SF Pro Display Rounded"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Light.otf") format("opentype"); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display Rounded"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Regular.otf") format("opentype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display Rounded"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Medium.otf") format("opentype"); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display Rounded"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Semibold.otf") format("opentype"); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display Rounded"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Bold.otf") format("opentype"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display Rounded"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Heavy.otf") format("opentype"); + font-weight: 800; + font-style: normal; +} + +@font-face { + font-family: "SF Pro Display Rounded"; + src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Black.otf") format("opentype"); + font-weight: 900; + font-style: normal; +} diff --git a/src/index.css b/src/index.css index e69de29..7152ed4 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,10 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "SF Pro Display", sans-serif; + background-color: black; +} diff --git a/src/layout/Footer.jsx b/src/layout/Footer.jsx new file mode 100644 index 0000000..09379a2 --- /dev/null +++ b/src/layout/Footer.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Footer = () => { + return ( +
Footer
+ ) +} + +export default Footer \ No newline at end of file diff --git a/src/layout/Header.jsx b/src/layout/Header.jsx new file mode 100644 index 0000000..041aba3 --- /dev/null +++ b/src/layout/Header.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Header = () => { + return ( +
Header
+ ) +} + +export default Header \ No newline at end of file diff --git a/src/layout/Layout.jsx b/src/layout/Layout.jsx new file mode 100644 index 0000000..7376c63 --- /dev/null +++ b/src/layout/Layout.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import Header from "./Header"; +import Footer from "./Footer"; + +const Layout = ({ children }) => { + return ( + <> +
+ {children} +