Completed The Future card section

Author: InputOutputStream

src/App.jsx

@@ -2,7 +2,7 @@ import Hero from "./sections/Hero"
 import ShowCaseSection from "./sections/ShowCaseSection"
 import FeartureCards from "./sections/FeartureCards"
 import LogoSection from "./sections/LogoSection"
-
+import ExperienceSection from "./sections/ExperienceSection"
 import NavBar from "./components/NavBar"
 
 const App = () => {
@@ -11,8 +11,9 @@ const App = () => {
       <NavBar />
       <Hero />
       <ShowCaseSection />
-      <LogoSection />
+      {/* <LogoSection /> */}
       <FeartureCards />
+      <ExperienceSection/>
     </>
   )
 }

src/components/HeroModels/HeroExperience.jsx

@@ -10,7 +10,7 @@ const HeroExperience = () => {
     const isMobile = useMediaQuery({ query:'(max-width: 768px)'});
 
   return (
-    <Canvas camera={{position: [0, 0, 15], fov : 45}}>
+    <Canvas camera={{position: [2, 5, 6], fov : 70}}>
         <OrbitControls 
             enablePan={false}
             enableZoom={!isTablet}
@@ -22,7 +22,7 @@ const HeroExperience = () => {
 
         <HeroLights />
 
-        <Particles count={200}/>
+        {/* <Particles count={200}/> */}
         <group
                 scale={isMobile? 0.7 : 1} 
                 position={[0, -3.5, 0]}

src/components/NavBar.jsx

@@ -8,18 +8,18 @@ const NavBar = () => {
     useEffect(()=>{
         const handleScrolled = () =>{
             const isScrolled = window.scrollY > 10
-            setScrolled(true)
+            setScrolled(isScrolled)
         }
 
         window.addEventListener('scroll', handleScrolled)
         return () => window.removeEventListener('scroll', handleScrolled)
     }, [])
 
-  return (
+  return ( 
     <header className={`navbar  ${scrolled ? 'scrolled' : 'not-scrolled'}`}>
         <div className="inner">
             <a className="logo" href="#hero">
-                Edu Guiedi
+                Arnold HGE (This portfolio is still under development)
             </a>
 
             <nav className="desktop">

src/components/TitleHeader.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const TitleHeader = ({title, sub}) => {
+  return (
+    <div className='flex flex-col items-center gap-5'>
+        <div className='hero-badge'>
+            <p>{sub}</p>
+        </div>
+        <div className="font-semibold md:text-5xl text-3xl text-center">
+            {title}
+        </div>
+        
+    </div>
+  )
+}
+
+export default TitleHeader

src/components/glowCard.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const GlowCard = ({card, children}) => {
+  return (
+    <div className=''>
+        
+    </div>
+  )
+}
+
+export default GlowCard

src/sections/ExperienceSection.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import TitleHeader from '../components/TitleHeader'
+import expCards from '../constants/index'
+import GlowCard from '../components/glowCard'
+
+const ExperienceSection = () => {
+  return (
+    <section id='experience' className='w-full md:mt-40 mt-20 section-padding xl:px-0'>
+        <div className='w-full h-full md:px-20 px-5'>
+            <TitleHeader 
+                title="Project Experience" 
+                sub="💻My Practical Skills Overview" />
+                
+            <div className="mt-32 relative>">
+                <div className='relative z-50 xl:space-y-32 space-y-10'>
+                  {expCards.map((card) =>
+                      <div key={card.title} className='exp-card-wrapper'>
+                        <div className='xl:w-2/6'>
+                         <GlowCard card={card}>
+                            <div>
+                              <img src={card.imgPath} alt={card.title}/>
+                            </div>
+                         </GlowCard>
+                        </div>
+                      </div>
+                  )}
+                </div>
+            </div>
+        </div>
+    </section>
+  )
+}
+
+export default ExperienceSection

src/sections/FeartureCards.jsx

@@ -1,18 +1,17 @@
-import React from 'react'
 import { abilities } from '../constants'
-import { div } from 'three/tsl'
 
 const FeartureCards = () => {
   return (
-    <div className="w-ful paddingx-g-lg">
-        <div className="mx-auto grid-3-col">
+    <div className="w-full padding-x-lg">
+        <div className="mx-auto grid-3-cols">
             {
-                abilities.map(({imgpath, title, desc}) =>(
+                abilities.map(({imgPath, title, desc}) =>(
                     <div key={title} className="card-border rounded-xl p-8 flex flex-col gap-4">
-                        <div className="size-14 flex items-center justify-center">
-
+                        <div className="size-14 flex items-center justify-center rounded-full">
+                            <img src={imgPath} alt={title}/>
                         </div>
-                        <h3>{title}</h3>
+                        <h3 className='text-white text-2xl font-semibold mt-2'>{title}</h3>
+                        <p className='text-white-50 text-lg'>{desc}</p>
                     </div>
                 ))
             }

src/sections/LogoSection.jsx

@@ -29,7 +29,7 @@ const LogoSection = () => {
             </div>
         </div>
     </div>
-  )
+  ) 
 }
 
 export default LogoSection

src/sections/ShowCaseSection.jsx

@@ -44,7 +44,7 @@ const ShowCaseSection = () => {
             gsap.fromTo(
                 sectionRef.current, 
                     {opacity: 0}, 
-                    {opacity: 1, duration: 1.5}
+                    {opacity: 1, duration: 2}
             )
 
     }, [])