yousifpa/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hero square done

Browse Source
This commit is contained in:
yousifpa98
2024-12-19 22:52:36 +01:00
parent c58c287054
commit 1ff58ea7cc
15 changed files with 277 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.css
View File

@@ -0,0 +1,7 @@
main {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}

20
src/App.jsx
View File

@@ -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 (
<div>App</div>
)
}
<main>
{/* <Layout> */}
<Routes>
<Route path="/" element={<Home />} />
</Routes>
{/* </Layout> */}
</main>
);
};
export default App
export default App;

1
src/assets/fonts/San-Francisco-Pro-Fonts Submodule

Submodule src/assets/fonts/San-Francisco-Pro-Fonts added at 8bfea09aa6

1
src/assets/icons/skill-icons Submodule

Submodule src/assets/icons/skill-icons added at 65dea6c4ea

13
src/components/Home.jsx Normal file
View File

@@ -0,0 +1,13 @@
import React from "react";
import Hero from "./subComponents/Hero";
import "../css/Home.css";
const Home = () => {
return (
<div className="gridContainer">
<Hero />
</div>
);
};
export default Home;

17
src/components/subComponents/Hero.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import "../../css/Hero.css";
const Hero = () => {
return (
<div className="hero">
<p>
<span>
Hi, I'm Yousif. <br />
</span>{" "}
I'm a Full-Stack Developer from Germany.
</p>
</div>
);
};
export default Hero;

0
src/components/subComponents/TechStack.jsx Normal file
View File

17
src/css/Hero.css Normal file
View File

@@ -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);
}

8
src/css/Home.css Normal file
View File

@@ -0,0 +1,8 @@
.gridContainer {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 10px;
width: 50%;
}

146
src/css/fonts.css Normal file
View File

@@ -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;
}

10
src/index.css
View File

@@ -0,0 +1,10 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "SF Pro Display", sans-serif;
background-color: black;
}

9
src/layout/Footer.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
const Footer = () => {
return (
<div>Footer</div>
)
}
export default Footer

9
src/layout/Header.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
const Header = () => {
return (
<div>Header</div>
)
}
export default Header

15
src/layout/Layout.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from "react";
import Header from "./Header";
import Footer from "./Footer";
const Layout = ({ children }) => {
return (
<>
<Header />
{children}
<Footer />
</>
);
};
export default Layout;

17
src/main.jsx
View File

@@ -1,10 +1,11 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import { BrowserRouter } from "react-router-dom";
import "./css/fonts.css";
createRoot(document.getElementById('root')).render(
<StrictMode>
createRoot(document.getElementById("root")).render(
<BrowserRouter>
<App />
</StrictMode>,
)
</BrowserRouter>
);