add navbar

Author: DFelipehDEV

src/App.jsx

@@ -1,17 +1,31 @@
-import { useState } from 'react'
 import avatar from './assets/Avatar500.png'
+import Navbar from './components/Navbar'
 
 function App() {
-  return (
-    <>
-      <div className="flex gap-2 items-center justify-center">
-        <h1 className="text-3xl text-center">
-          DFelipeh
-        </h1>
-        <img src={avatar} className='w-25 rounded-full'></img>
-      </div>
-    </>
-  )
+    return (
+        <>
+            <Navbar />
+            <div className="flex gap-2 items-center justify-center">
+                <h1 className="text-3xl text-center">
+                    DFelipeh
+                </h1>
+                <img src={avatar} className='w-25 rounded-full'></img>
+            </div>
+
+            <div className="max-w-3xl mx-auto mt-10 p-6 text-lg leading-relaxed">
+                <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate expedita error possimus. Odit, accusantium amet dolorum quod eaque aut vel error itaque optio illum inventore quos consequuntur vitae saepe minima.
+                    Dolore natus sed placeat et aspernatur ipsum voluptatum magni animi minus incidunt in illo repellendus cum iste vel porro mollitia, nisi possimus! Aperiam, iusto enim perferendis delectus quisquam possimus incidunt?
+                    Aliquid iure excepturi laborum beatae suscipit placeat sequi, odio atque magni nostrum praesentium minima sint distinctio accusantium molestiae molestias numquam omnis nisi architecto ex enim, error debitis doloremque. Ex, ipsa!
+                    Suscipit pariatur reprehenderit veritatis, illum voluptatum ipsa odio, error cupiditate maiores aspernatur dolor aliquid sed impedit dignissimos accusamus, natus officiis excepturi? Dicta, neque saepe dolorum reiciendis quos ex ducimus reprehenderit?
+                    Dicta quis fugiat dolores accusantium error reiciendis ipsum doloremque illum, dolor vel ut qui impedit nemo et sunt atque quas architecto dolorem blanditiis laudantium excepturi tenetur. Unde commodi provident velit?
+                    Incidunt recusandae quam voluptatibus iusto magnam quaerat nulla ducimus aliquam numquam est beatae velit deleniti consectetur, aperiam earum libero corporis explicabo ipsum eaque. Officia doloribus tenetur, porro adipisci impedit voluptates?
+                    Id sapiente, illo doloribus ullam nihil quia alias totam expedita officia aut, aliquid excepturi deleniti sed suscipit. Magnam iusto illum sequi quis, non dicta ab libero odio hic animi commodi!
+                    Qui nemo exercitationem facere praesentium quos, facilis illum dolorem, inventore ipsa quae tempore iste numquam libero atque assumenda aperiam est amet, illo eius autem iure tenetur! Fugiat blanditiis porro placeat.
+                </p>
+            </div>
+        </>
+    )
 }
 
 export default App

src/components/Navbar.jsx

@@ -0,0 +1,29 @@
+function Navbar() {
+    return (
+        <nav
+            className="sticky top-4 z-10 mb-8 mx-auto w-[75%] sm:w-4/6 
+                 bg-white/5 backdrop-blur-xs border border-white/15 
+                 rounded-full"
+        >
+            <div className="flex justify-between items-center px-8 py-4 text-gray-200 text-lg font-extralight">
+                <a
+                    href="#"
+                    className="font-light text-white tracking-wide hover:text-pink-400"
+                >
+                    DFelipeh's Corner
+                </a>
+
+                <div className="space-x-4 hidden sm:flex">
+                    <a href="#" className="hover:text-pink-400">
+                        Home
+                    </a>
+                    <a href="#" className="hover:text-pink-400">
+                        Projects
+                    </a>
+                </div>
+            </div>
+        </nav>
+    );
+}
+
+export default Navbar;

src/main.jsx

@@ -4,7 +4,7 @@ import './style.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+    <StrictMode>
+        <App />
+    </StrictMode>,
 )

src/style.css

@@ -1 +1,5 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+body {
+    @apply bg-zinc-950 text-white;
+}