add Landing & About sections

pchloe02 · Apr 20, 2024 · 51283cd · 51283cd
1 parent cd58ecb
commit 51283cd
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/cat.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Chloé Pelerin | Portfolio</title>
   </head>
   <div id="noise"></div>
   <body id="color">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "react": "^18.2.0",
+    "react-anchor-link-smooth-scroll": "^1.0.12",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,10 +1,15 @@
 import React from 'react'
 import Navbar from './Component/Navbar'
+import Landing from './Component/Landing'
+import About from './Component/About'
 
 function App() {
   return (
+
       <div>
         <Navbar/>
+        <Landing/>
+        <About/>
       </div>
   )
 }

diff --git a/src/Component/About.css b/src/Component/About.css
@@ -0,0 +1,8 @@
+.about {
+    z-index: 0;
+    height: 100vh;
+}
+
+h1 {
+    text-align: center;
+}
diff --git a/src/Component/About.jsx b/src/Component/About.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import './About.css'
+
+function About() {
+  return (
+    <div className='about'>
+        <h1>A propos de moi </h1>
+    </div>
+  )
+}
+
+export default About
diff --git a/src/Component/Landing.css b/src/Component/Landing.css
@@ -0,0 +1,11 @@
+.landing {
+    position: relative;
+    z-index: 99;
+    height: 100vh;
+    width: 100%;
+    background-image: radial-gradient(75% 75% at 38% 44%, #282C46BF 0%, #073AFF00 99%), radial-gradient(75% 75% at -10% 8%, #110F23B5 1%, #073AFF00 60%), radial-gradient(75% 75% at 114% 112%, #110F23B8 1%, #073AFF00 60%), radial-gradient(75% 75% at 8% 90%, #3F206021 1%, #073AFF00 60%), radial-gradient(85% 85% at 12% 82%, #9930AF21 1%, #073AFF00 60%), radial-gradient(30% 75% at 70% 23%, #3B27528A 2%, #073AFF00 60%), radial-gradient(80% 80% at 75% 9%, #A03FC52B 26%, #073AFF00 60%), radial-gradient(80% 80% at 19% 48%, #0F31943D 26%, #073AFF00 60%), radial-gradient(80% 80% at 89% 67%, #344AB038 26%, #073AFF00 60%), linear-gradient(29deg, #181C30FF 100%, #7C5F85FF 100%);
+
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+}
diff --git a/src/Component/Landing.jsx b/src/Component/Landing.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import './Landing.css'
+
+function Landing() {
+  return (
+    <div className='landing'>
+       <h1 className='greeting'> I'm Chloé Pelerin, frontend developer looking for an intership !</h1>
+    </div>
+  )
+}
+
+export default Landing
diff --git a/src/Component/Navbar.css b/src/Component/Navbar.css
@@ -5,11 +5,11 @@
 
 .navbar {
     position: fixed;
-    z-index: 1;
+    z-index: 98;
     margin-top: 2.5rem;
     margin-left: 2.5rem;
     height: 100vh;
-    color: #fff;
+
     display: grid;
     grid-template-rows: 1fr 2fr;
 }

diff --git a/src/index.css b/src/index.css
@@ -11,6 +11,7 @@
 body {
   font-family: 'Red Hat Text', Arial, Helvetica, sans-serif ;
   height: 100vh;
+  color: #fff;
 }
 
 #noise {