new changes

Author: LeoGytis

src/components/About.tsx

@@ -1,22 +1,36 @@
+import { useIntersectionObserver } from '@/utils/useIntersectionObserver';
+import { cn } from '@/utils/utils';
+
 const About = () => {
+  const { elementRef, inView } = useIntersectionObserver({
+    threshold: 0.9,
+    rootMargin: '-50px',
+    mobileThreshold: 0.8,
+    mobileRootMargin: '-20px',
+  });
+
   return (
     <div
+      ref={elementRef}
       id="about"
-      className="flex flex-col gap-4 px-4 py-6 mb-16 text-xl md:mb-20 hover:shadow-border hover:bg-background"
+      className={cn(
+        'flex flex-col gap-4 px-4 py-6 mb-16 text-xl md:mb-20',
+        inView && 'shadow-border bg-background'
+      )}
     >
       <p>
-        I have experience developing web applications, from simple landing pages
-        to progressive web applications. I strive to create software that not
-        only functions efficiently under the hood, but also provides intuitive,
-        pixel-perfect user experiences.
+        Experienced in developing web applications ranging from simple landing
+        pages to progressive web applications. Focused on building software that
+        is both technically efficient and delivers intuitive, pixel-perfect user
+        experiences.
       </p>
       <p>
-        I love learning new and better ways to create seamless user experiences
-        with clean, efficient and scalable code. I consider work an ongoing
-        education, and I am always looking for opportunities to work with those
-        who are willing to share their knowledge as much as I want to learn. At
-        the end of the day, my primary goal is to create something beautiful
-        with people that bring out the best in me.
+        Strong focus on continuous improvement in building seamless user
+        experiences through clean, efficient, and scalable code. Approaches work
+        as an ongoing learning process, with a strong emphasis on collaboration,
+        knowledge sharing, and working closely with cross-functional teams.
+        Motivated to contribute to high-quality, well-engineered products while
+        growing alongside skilled professionals in a collaborative environment.
       </p>
       <p>At my free time I am out in the woods or swimming.</p>
     </div>

src/components/Education.tsx

@@ -1,16 +1,29 @@
+import { useIntersectionObserver } from '@/utils/useIntersectionObserver';
+import { cn } from '@/utils/utils';
 import Link from 'next/link';
 import SvgBit from '../../public/images/svg/svgBit';
 import SvgKtu from '../../public/images/svg/svgKtu';
 
 const Education = () => {
+  const { elementRef, inView } = useIntersectionObserver({
+    threshold: 0.9,
+    rootMargin: '-100px',
+    mobileThreshold: 0.5,
+    mobileRootMargin: '-50px',
+  });
+
   return (
     <div
+      ref={elementRef}
       id="education"
-      className="flex flex-col gap-8 p-4 mb-16 text-lg md:mb-24 hover:shadow-border hover:bg-background"
+      className={cn(
+        'flex flex-col gap-8 p-4 mb-16 text-lg md:mb-24',
+        inView && 'shadow-border bg-background'
+      )}
     >
       <Link
         href="https://en.ktu.edu/"
-        className="flex items-center gap-2 group"
+        className="flex gap-2 items-center group"
       >
         <SvgKtu
           width={40}
@@ -19,21 +32,21 @@ const Education = () => {
         />
         <div className="group-hover:text-secondary">
           <div>Kaunas University of Technology</div>
-          <p className="text-sm group-hover:text-secondary">
+          <p className="group-hover:text-secondary">
             Bachelor&apos;s degree in Information System Design
           </p>
         </div>
       </Link>
 
-      <Link href="https://bit.lt/" className="flex items-center gap-2 group ">
+      <Link href="https://bit.lt/" className="flex gap-2 items-center group">
         <SvgBit
           width={40}
           height={40}
           className="mr-3 fill-primary group-hover:fill-secondary"
         />
         <div className="group-hover:text-secondary">
           <div>Baltic Institute of Technology</div>
-          <p className="text-sm group-hover:text-secondary">
+          <p className="group-hover:text-secondary">
             Full-stack developer JavaScript + PHP
           </p>
         </div>

src/components/ExperienceWrapper.tsx

@@ -59,7 +59,7 @@ const ExperienceWrapper = ({
           <h5 className="text-xs">{date}</h5>
         </div>
       </div>
-      <p className="mb-4 text-lg font-light">{description}</p>
+      <p className="mb-4">{description}</p>
     </div>
   );
 };

src/styles/globals.css

@@ -48,6 +48,11 @@ body {
     var(--color-background-start);
 }
 
+p {
+  font-size: 18px;
+  font-weight: 300;
+}
+
 h5 {
   color: var(--color-primary);
 }