Merge remote-tracking branch 'origin/development' into development

jasperdemmers · May 22, 2024 · 7504181 · 7504181
2 parents 8a6e14a + cb3ee8f
commit 7504181
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 5 deletions.
diff --git a/src/components/ThemeButton.jsx b/src/components/ThemeButton.jsx
@@ -31,7 +31,7 @@ const ThemeButton = () => {
                 {isDark ? 
                     <CiSun className="w-8 h-8 lg:w-12 lg:h-12 text-text-dark"/> 
                     : 
-                    <CiDark className="w-8 h-8 lg:w-12 lg:h-12 text-text-light"/>
+                    <CiDark className="w-8 h-8 lg:w-12 lg:h-12 text-text-dark"/>
                 }
             </button> 
         </div>

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,11 +1,13 @@
 import Hero from '../sections/home/Hero'
 import Whoami from '../sections/home/Whoami'
+import Bin from '../sections/home/Bin'
 
 const Home = () => {
     return (
         <div className='text-text-light dark:text-text-dark mx-auto'>
             <Hero />
             <Whoami />
+            <Bin />
         </div>
     )
 }

diff --git a/src/sections/home/Bin.jsx b/src/sections/home/Bin.jsx
@@ -0,0 +1,100 @@
+const Bin = () => {
+    return (
+        <div>
+            <div className={"text-center pt-24 pb-8"}>
+                <div className="font-body text-3xl">
+                    ./Bin
+                </div>
+                <div className="pt-4 font-body text-6xl">
+                    Portfolio
+                </div>
+            </div>
+            <div className={"grid grid-cols-2 lg:grid-cols-3 gap-2 md:gap-12 font-body m-4 md:m-0"}>
+                <div className={"rounded-3xl bg-secondary-light dark:bg-secondary-dark"}>
+                    <div className={"p-4 flex flex-col"}>
+                        <img alt="Portfolio Webiste" className={"rounded-3xl h-40 md:h-60 object-cover"}
+                             src={"/portfolio/portfoliowebsite.png"}></img>
+                        <div className={"md:flex justify-evenly flex-row flex-wrap gap-2 py-4 text-center hidden"}>
+                            <div className={"p-2 px-4 bg-secondary-dark dark:bg-secondary-light rounded-full"}>
+                                <span className={"text-text-light dark:text-text-dark"}>
+                                    Web Design
+                                </span>
+                            </div>
+                            <div className={"p-2 px-4 bg-secondary-dark dark:bg-secondary-light rounded-full"}>
+                                <span className={"text-text-light dark:text-text-dark"}>
+                                    Web Development
+                                </span>
+                            </div>
+                        </div>
+                        <div className={"flex mt-4 md:mt-0"}>
+                            <button className={"text-text-dark md:text-2xl w-full px-6 p-2 rounded-full bg-primary-light dark:bg-primary-dark"}>
+                                Portfolio Website
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div className={"rounded-3xl bg-secondary-light dark:bg-secondary-dark"}>
+                    <div className={"p-4 flex flex-col"}>
+                        <img alt="Portfolio Webiste" className={"rounded-3xl h-40 md:h-60 object-cover"}
+                             src={"/portfolio/citriclabs.png"}></img>
+                        <div className={"md:flex justify-evenly flex-row flex-wrap gap-2 py-4 text-center hidden"}>
+                            <div className={"p-2 px-4 bg-secondary-dark dark:bg-secondary-light rounded-full"}>
+                                <span className={"text-text-light dark:text-text-dark"}>
+                                    Load-Testing
+                                </span>
+                            </div>
+                            <div className={"p-2 px-4 bg-secondary-dark dark:bg-secondary-light rounded-full"}>
+                                <span className={"text-text-light dark:text-text-dark"}>
+                                    Cloud
+                                </span>
+                            </div>
+                        </div>
+                        <div className={"flex mt-4 md:mt-0"}>
+                            <button
+                                className={"text-text-dark md:text-2xl w-full px-6 p-2 rounded-full bg-primary-light dark:bg-primary-dark"}>
+                                Greenroom - Citric Labs
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div className={"rounded-3xl bg-secondary-light dark:bg-secondary-dark col-span-2 lg:col-span-1"}>
+                    <div className={"p-4 flex flex-col"}>
+                        <img alt="Portfolio Webiste" className={"rounded-3xl h-40 md:h-60 object-cover"}
+                             src={"/portfolio/simplepark.png"}></img>
+                        <div className={"md:flex justify-evenly flex-row flex-wrap gap-2 py-4 text-center hidden"}>
+                            <div className={"p-2 px-4 bg-secondary-dark dark:bg-secondary-light rounded-full"}>
+                                <span className={"text-text-light dark:text-text-dark"}>
+                                    Cyber
+                                </span>
+                            </div>
+                            <div className={"p-2 px-4 bg-secondary-dark dark:bg-secondary-light rounded-full"}>
+                                <span className={"text-text-light dark:text-text-dark"}>
+                                    Logging
+                                </span>
+                            </div>
+                            <div className={"p-2 px-4 bg-secondary-dark dark:bg-secondary-light rounded-full"}>
+                                <span className={"text-text-light dark:text-text-dark"}>
+                                    Data Laws
+                                </span>
+                            </div>
+                        </div>
+                        <div className={"flex mt-4 md:mt-0"}>
+                            <button
+                                className={"text-text-dark md:text-2xl w-full px-6 p-2 rounded-full bg-primary-light dark:bg-primary-dark"}>
+                                SimplePark
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className={"flex justify-center mt-4"}>
+                <button
+                    className={"py-2 px-6 font-body text-2xl bg-primary-light rounded-full dark:bg-primary-dark text-text-dark hover:bg-primary-dark dark:hover:bg-primary-light"}>
+                    More dope projects
+                </button>
+            </div>
+        </div>
+    )
+}
+export default Bin
+
diff --git a/src/sections/home/Whoami.jsx b/src/sections/home/Whoami.jsx
@@ -13,9 +13,9 @@ const Whoami = () => {
                 <div className="flex-1 basis-1/3 hidden md:block">
                     <img alt="Side look" className="border-8 rounded-3xl border-accent-light dark:border-accent-dark" src={"/portraits/side-look.png"}></img>
                 </div>
-                <div className="flex-1 basis-2/3 lg:pl-11 xl:pl-20">
+                <div className="flex-1 basis-2/3 lg:pl-11 xl:pl-20 text-center md:text-left">
                     <div className={"py-4"}>
-                        <p className="font-body tracking-wide text-xl break-normal antialiased">
+                        <p className="font-body tracking-wide lg:text-xl break-normal antialiased">
                             Hey there, I’m Japer, an 18-year-old passionate, diligent, and intellectually curious individual with a deep-seated fascination for IT.
                             My life’s journey is not just marked by the places I’ve called home but by an insatiable curiosity about how the world works.
                             My interests extend beyond the immediate tangible world. To me, there are no borders in the universe - what we do isn’t confined by the physical or the immediate.
@@ -31,8 +31,8 @@ const Whoami = () => {
                             Denzel Washington
                         </p>
                     </div>
-                    <div className={"flex mt-4"}>
-                        <button className={"py-2 px-6 font-body text-2xl bg-primary-light flex-shrink-0 rounded-full dark:bg-primary-dark text-text-dark hover:bg-primary-dark dark:hover:bg-primary-light"}>
+                    <div className={"flex mt-4 justify-center md:justify-start"}>
+                        <button className={"text-center py-2 px-6 font-body text-2xl bg-primary-light flex-shrink-0 rounded-full dark:bg-primary-dark text-text-dark hover:bg-primary-dark dark:hover:bg-primary-light"}>
                             Get to know me
                         </button>
                     </div>