Tip added

src/App.js

@@ -9,7 +9,7 @@ function App() {
 
   return (
     <div className="App text-white bg-slate-950 flex md:flex-row justify-stretch md:p-0 pt-24 md:justify-center items-center min-h-screen md:gap-48 flex-col">
-      {showHelp && <Tip message="Click on one of the sections on the right to continue!" duration={5000} />}
+      {showHelp && <Tip message="Click on one of the sections below to continue!" duration={5000} />}
       <div className="flex flex-col md:w-auto">
         <div className='my-4 md:my-12'><Name/></div>
         <div className='mb-4 mt-8 md:my-12'><LogoBar/></div>

src/Sections/BackButton/BackButton.js

@@ -18,7 +18,7 @@ function BackButton({ setActiveSections }) {
 
   return (
     <div className={`mt-8 font-bold text-sm text-center ${hide ? 'button-hide' : ''}`} onClick={handleBackClick}>
-      Click anywhere to go back
+      Click outside the active area to go back!
     </div>
   );
 }

src/Sections/Education/Education.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 const Education = () => {
+
     return (
         <div className='text-center md:text-left'>
             <div className='flex flex-row items-center justify-between'>

src/Sections/SectionContainer.js

@@ -9,6 +9,7 @@ import BackButton from "./BackButton/BackButton";
 
 function SectionContainer() {
   const [activeSections, setActiveSections] = useState([]);
+
   const containerRef = React.useRef(null); // Ref to track the container element
 
   const sections = {

src/Sections/SectionList.js

@@ -3,11 +3,12 @@ import React from "react";
 function SectionList({ handleLinkClick }) {
 
   return (
-    <div className="flex flex-col gap-4 text-xl ">
+    <div className="flex flex-col gap-4 text-2xl ">
       <a onClick={() => handleLinkClick('education', 0)} className="hover:scale-125 transition-transform cursor-pointer">Education</a>
       {/* <a onClick={() => handleLinkClick('books', 0)} className="hover:scale-125 transition-transform cursor-pointer">Books</a> */}
       <a onClick={() => handleLinkClick('projects', 0)} className="hover:scale-125 transition-transform cursor-pointer">Projects</a>
       <a onClick={() => handleLinkClick('experience', 0)} className="hover:scale-125 transition-transform cursor-pointer">Experience</a>
+      <a href="knresume.pdf" target="_blank" className="hover:scale-125 transition-transform cursor-pointer">Resume</a>
     </div>
     );
 }

src/Tip/Tip.css

@@ -0,0 +1,12 @@
+@keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  .button-hide {
+    animation: fadeOut 2s forwards;
+  }

src/Tip/Tip.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import './Tip.css';
 
 function Tip({ message, duration }) {
   const [visible, setVisible] = useState(true);
@@ -11,12 +12,11 @@ function Tip({ message, duration }) {
     return () => clearTimeout(timer);
   }, [duration]);
 
-  if (!visible) {
-    return null;
-  }
 
   return (
-    <div className="fixed top-4 left-1/2 transform -translate-x-1/2 p-2 rounded font-bold">
+    <div className={`fixed top-4 text-xl left-1/2 transform -translate-x-1/2 p-2 rounded font-bold
+    ${visible ? '' : 'button-hide'}
+    `}>
       {message}
     </div>
   );