about

Author: DFelipehDEV

src/components/Navbar.jsx

@@ -2,7 +2,7 @@ function Navbar() {
     return (
         <nav
             className="sticky top-4 z-10 mb-8 mx-auto w-[75%]
-                 bg-white/5 backdrop-blur-xs border border-white/15 
+                 bg-brand/5 backdrop-blur-xs border border-white/15 
                  rounded-full"
         >
             <div className="flex justify-center sm:justify-between items-center px-8 py-4 text-gray-200 text-lg font-extralight">

src/pages/Home.jsx

@@ -1,30 +1,47 @@
-import avatar from '../assets/Avatar500.png'
-import Navbar from '../components/Navbar'
+import avatar from '../assets/Avatar500.png';
 
-function App() {
+function Home() {
     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>
+        <section className="mx-auto w-4/5 py-24 text-gray-200">
+            <div className="flex justify-between items-center gap-3">
+                <div className="flex-col">
+                    <h1 className="text-5xl font-light mb-6 text-brand">About</h1>
+
+                    <p className="text-lg text-gray-400 leading-relaxed mb-6">
+                        I enjoy making stuff. I work with systems languages like{" "}
+                        <span className="text-white font-medium">C++</span>,{" "}
+                        <span className="text-white font-medium">C#</span>,{" "}
+                        <span className="text-white font-medium">Kotlin</span>,{" "}
+                        <span className="text-white font-medium">Java</span>...
+                        I also do web stuff sometimes using{" "}
+                        <span className="text-white font-medium">JavaScript</span>,{" "}
+                        <span className="text-white font-medium">PHP</span>,{" "}
+                        <span className="text-white font-medium">Laravel</span>,{" "}
+                        and <span className="text-white font-medium">Tailwind</span> when I feel like it.
+                    </p>
+
+                    <p className="text-lg text-gray-400 leading-relaxed">
+                        I've done some <span className="text-white font-medium">web dev</span>,{" "}
+                        a bit of <span className="text-white font-medium">backend</span>, and I also like
+                        messing with <span className="text-white font-medium">software architecture</span> — still getting the hang of it though.
+                        I mostly just like making things that look nice, write code that doesn't explode after a month,
+                        and code that goes *vroom vroom*.
+                    </p>
+                </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 className="flex-col">
+                    <img
+                        src={avatar}
+                        alt="Avatar"
+                        className="rounded-full"
+                    />
+                    <div className="flex justify-center">
+                        <small className="mt-3 text-gray-400 italic">Art by Pablo Tavares</small>
+                    </div>
+                </div>
             </div>
-        </>
-    )
+        </section>
+    );
 }
 
-export default App
+export default Home;

src/pages/Projects.jsx

@@ -1,6 +1,4 @@
-import Navbar from '../components/Navbar'
-
-function App() {
+function Projects() {
     return (
         <>
             <div className="flex gap-2 items-center justify-center">
@@ -12,4 +10,4 @@ function App() {
     )
 }
 
-export default App
+export default Projects