Removed non-existent build dependency for github workflow. and build …

…Project Client and Set up Rust toolchain + Build Project Server as two separate jobs that run simultaneously.

.github/workflows/build.yml

@@ -7,9 +7,8 @@ on:
       - deploy
 
 jobs:
-  test-build:
+  build-client:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v2
@@ -19,9 +18,29 @@ jobs:
         with:
           node-version: '21'  # Set the Node.js version
 
-      - name: Build Project
+      - name: Build Project Client
         run: |
           cd ./client
+          echo '*' >> .eslintignore
           npm install [email protected] --save-dev  # Force TypeScript to a compatible version
           npm install
           npm run build
+
+  build-server:
+    runs-on: ubuntu-latest
+    needs: build-client
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Set up Rust toolchain
+        uses: actions-rs/toolchain@v1
+        with:
+          profile: minimal
+          toolchain: nightly-2023-03-01
+          override: true
+
+      - name: Build Project Server
+        run: |
+          cd ./server
+          cargo build --verbose

.github/workflows/deploy.yml

@@ -7,7 +7,7 @@ on:
       - deploy
 
 jobs:
-  build-and-deploy:
+  build-and-deploy-client:
     runs-on: ubuntu-latest
 
     steps:
@@ -22,6 +22,7 @@ jobs:
       - name: Build Project
         run: |
           cd ./client
+          echo '*' >> .eslintignore
           npm install [email protected] --save-dev  # Force TypeScript to a compatible version
           npm install
           npm run build
@@ -47,3 +48,40 @@ jobs:
           port: 22
           script: "nginx -s reload"
 
+  build-and-deploy-server:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Set up Rust toolchain
+        uses: actions-rs/toolchain@v1
+        with:
+          profile: minimal
+          toolchain: nightly-2023-03-01
+          override: true
+
+      - name: Build Project Server
+        run: |
+          cd ./server
+          cargo build --release --verbose
+
+      - name: Copy files to the server
+        uses: appleboy/scp-action@master
+        with:
+          host: ${{ secrets.REMOTE_HOST }}
+          username: ${{ secrets.REMOTE_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          source: "server/target/release/server"
+          target: "/usr/local/bin/"
+          strip_components: 3
+
+      - name: Reload Systemd
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.REMOTE_HOST }}
+          username: ${{ secrets.REMOTE_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          script: "sudo systemctl daemon-reload && sudo systemctl restart personal_portfolio_client.service"

client/.eslintignore

@@ -1 +0,0 @@
-*

client/package.json

@@ -48,6 +48,7 @@
   },
   "devDependencies": {
     "babel-plugin-prismjs": "^2.1.0",
-    "nodemon": "^2.0.22"
+    "nodemon": "^2.0.22",
+    "typescript": "^4.9.5"
   }
 }

client/src/App.css

@@ -224,6 +224,11 @@ a {
                 .5px .5px 1px rgba(139, 101, 77, 0.2); /* Right shadow */
 }
 
+.user-image {
+    border-radius: 100%;
+    object-fit: cover
+}
+
 /*****************************************************************************/
 /*                         Global Animation Keyframes                        */
 /*****************************************************************************/

client/src/App.tsx

@@ -15,92 +15,114 @@ import { useNavigate, BrowserRouter, Route, Routes } from 'react-router-dom';
 import './App.css';
 
 interface IAppStateInterface {
-    scrolled: number | null,
-    scrolling: boolean | null
+    scrollY: number | null,
+    scrolling: boolean | null,
+    deltaScrollCalculation: {
+        lastRecordedScrollY: number | null,
+        deltaScrolled: number | null,
+        timeIntervalCheckMiliseconds: number | null
+    }
 }
 
 const RedirectToRoot = (props: { link: string }): React.ReactElement<{ link: string }> => {
     let navigate = useNavigate();
+
     React.useEffect(() => {
         navigate(props.link);
-    }, [navigate]);
+    }, [navigate, props.link]);
 
     return null;
 }
 
 function App() {
     const [appState, setAppState] = useState<IAppStateInterface>({
-        scrolled: null,
-        scrolling: null
+        scrollY: null,
+        scrolling: null,
+        deltaScrollCalculation: {
+            lastRecordedScrollY: null,
+            deltaScrolled: null,
+            timeIntervalCheckMiliseconds: 10
+        }
     });
 
     useEffect(() => {
+        let scrollTimeout: NodeJS.Timeout = null;
+        const timeToCheckScrollingHasStoppedMiliseconds =  50;
+
         const handleScroll = () => {
-            const scrolled = window.scrollY;
-            setAppState(({
-                ...appState,
-                scrolled: scrolled,
+            clearTimeout(scrollTimeout); // Clear the timeout to reset the end-of-scroll detection
+
+            setAppState(prevState => ({
+                ...prevState,
+                scrollY: window.scrollY,
                 scrolling: true
             }));
+
+            // Check if the user has stopped scrolling after a certain time
+            scrollTimeout = setTimeout(() => {
+                setAppState(prevState => ({
+                    ...prevState,
+                    scrolling: false
+                }));
+            }, timeToCheckScrollingHasStoppedMiliseconds);
         };
 
+        // Add the event listener
         window.addEventListener("scroll", handleScroll);
 
+        // Interval for calculating the delta scroll every timeIntervalCheckMiliseconds.
+        const deltaScrollCalculationInterval: NodeJS.Timeout = setInterval(() => {
+            setAppState(prevState => ({
+                ...prevState,
+                deltaScrollCalculation: {
+                    ...prevState.deltaScrollCalculation,
+                    lastRecordedScrollY: window.scrollY,
+                    deltaScrolled: window.scrollY - Math.max(0, prevState.deltaScrollCalculation.lastRecordedScrollY)
+                }
+            }));
+        }, appState.deltaScrollCalculation.timeIntervalCheckMiliseconds);
+
         return () => {
             window.removeEventListener("scroll", handleScroll);
+            window.clearTimeout(scrollTimeout);
+            window.clearInterval(deltaScrollCalculationInterval);
         };
-    }, []);
 
-    useEffect(() => {
-        let scrollTimeout: NodeJS.Timeout;
+    }, [appState.deltaScrollCalculation.timeIntervalCheckMiliseconds]);
 
-        const timeToCheckScrollingHasStoppedMiliseconds =  2;
-
-        scrollTimeout = setInterval(() => {
-            if (appState.scrolling === true) {
-                setAppState(prevState => ({
-                    ...prevState,
-                    scrolling: false
-                }));
-            }
-        }, timeToCheckScrollingHasStoppedMiliseconds);
-
-        return () => {
-            window.clearInterval(scrollTimeout);
-        };
-    }, [appState.scrolled]);
+    const deltaScrolled = appState.deltaScrollCalculation.deltaScrolled;
 
     return (
         <div className="App">
             <AppContextProvider>
-                <BrowserRouter>
-                    <NavBar scrollStatus={{ scrolled: appState.scrolled, scrolling: appState.scrolling }} />
-                    <div className="page-body">
-                        <Routes>
-                            <Route path="/" element={
-                                <LandingPage scrolled={appState.scrolled} scrolling={appState.scrolling} />
-                            } />
-                            <Route path="/digital_chronicles/blogs" element={<BlogPage showTopPicks={true} />} />
-                            <Route path="/resume" element={<ResumePage />} />
-                            <Route path="/projects/3d_printing" element={<ThreeDPrintingGallery />} />
-                            <Route path="/projects/hardware" element={<HardwareProjectsPage />} />
-                            <Route path="/projects/code" element={<CodingProjectsPage />} />
-                            <Route path="/digital_chronicles/blog" element={<BlogContent />} />
-                            <Route path="/user/login" element={<LogInPage />} />
-                            <Route path="/user/register" element={<RegisterPage />} />
-
-                            {/* Catch-all route */}
-                            <Route path="*" element={<UnderConstruction />} />
-
-                            {/* Redirections */}
-                            <Route path="/digital_chronicles" element={<RedirectToRoot link="/digital_chronicles/blogs" />} />
-                            <Route path="/tools" element={<RedirectToRoot link="/tools/mood_tracker" />} />
-                            <Route path="/about" element={<RedirectToRoot link="/about/teddie" />} />
-                        </Routes>
-                    </div>
-                </BrowserRouter>
+            <BrowserRouter>
+            <NavBar scrollStatus={{ scrolled: appState.scrollY, deltaScrolled: deltaScrolled }} />
+            <div className="page-body">
+            <Routes>
+            <Route path="/" element={
+                <LandingPage scrolled={appState.scrollY} scrolling={appState.scrolling} />
+            } />
+            <Route path="/digital_chronicles/blogs" element={<BlogPage showTopPicks={true} />} />
+            <Route path="/resume" element={<ResumePage />} />
+            <Route path="/projects/3d_printing" element={<ThreeDPrintingGallery />} />
+            <Route path="/projects/hardware" element={<HardwareProjectsPage />} />
+            <Route path="/projects/code" element={<CodingProjectsPage />} />
+            <Route path="/digital_chronicles/blog" element={<BlogContent />} />
+            <Route path="/user/login" element={<LogInPage />} />
+            <Route path="/user/register" element={<RegisterPage />} />
+
+            {/* Catch-all route */}
+            <Route path="*" element={<UnderConstruction />} />
+
+            {/* Redirections */}
+            <Route path="/digital_chronicles" element={<RedirectToRoot link="/digital_chronicles/blogs" />} />
+            <Route path="/tools" element={<RedirectToRoot link="/tools/mood_tracker" />} />
+            <Route path="/about" element={<RedirectToRoot link="/about/teddie" />} />
+            </Routes>
+            </div>
+            </BrowserRouter>
             </AppContextProvider>
-        </div>
+            </div>
     );
 }
 

client/src/components/Card/Card.css

@@ -151,8 +151,7 @@
 .card-image--author-image {
     width: 20px;
     height: 20px;
-    margin-right: 4px;
-    border-radius: 100%;
+    margin-right: 4px
 }
 
 .card-image--author-info {

client/src/components/Card/Card.tsx

@@ -57,7 +57,7 @@ class Card extends Component<ICardProps, ICardState> {
         return (
             <NavLink ref={this.cardItemRef} onMouseMove={cardGradientEffect} className="card card-item" to={link}>
                 <div className="card-image--author-info">
-                    {<Image src="http://llcode.tech/api/image/65817ae96c73ceb16ba51731" className="card-image--author-image" alt="Author" />}
+                    <Image src={authorImage} className="user-image card-image--author-image" alt="Author" />
                     {author}
                 </div>
                 <div className="card-item__content">

client/src/components/CodingCat/CodingCat.tsx

@@ -5,7 +5,7 @@ import { gsap } from 'gsap';
 import ICodingCatProps from './Interface/ICodingCatProps';
 import ICodingCatState from './Interface/ICodingCatState';
 
-import ChristmasHat from "./ChristmasHat/ChristmasHat";
+// import ChristmasHat from "./ChristmasHat/ChristmasHat";
 
 class CodingCat extends Component<ICodingCatProps, ICodingCatState> {
     constructor(props: ICodingCatProps) {

client/src/components/ExperienceSection/ExperienceSection.tsx

@@ -336,7 +336,8 @@ class ExperienceSection extends Component<IExperienceSectionProps, IExperienceSe
         const isBeforeLockPosition = this.props.scrolled < this.getLockPosition();
 
         // TODO check if it is past timelime and show a default overlay when locked
-        const isPastTimelineLength = this.isLocked() && this.props.scrolled - this.getLockPosition() > this.state.timeLineLength;
+        // const isPastTimelineLength = this.isLocked() && this.props.scrolled - this.getLockPosition() > this.state.timeLineLength;
+
         return isBeforeLockPosition;
     }
 

client/src/components/ExperienceSection/ExperienceSectionEvent/ExperienceSectionEvent.tsx

@@ -3,7 +3,13 @@ import { ExperienceSectionItem } from "../Interface/IExperienceSectionState";
 import "./ExperienceSectionEvent.css";
 import { PiMapPinLineThin } from "react-icons/pi";
 
-const ExperienceSectionEvent: React.FC<{ item: ExperienceSectionItem, index: number }> = ({ item, index }) => {
+interface ExperienceSectionEventProps {
+    item: ExperienceSectionItem,
+    index: number,
+    alt?: string 
+}
+
+const ExperienceSectionEvent: React.FC<ExperienceSectionEventProps> = ({ item, index, alt }) => {
     const displayIsImage = item.display === "IMAGE";
     const defaultDisplay = item.display === "NORMAL" || !item.display;
 
@@ -47,6 +53,7 @@ const ExperienceSectionEvent: React.FC<{ item: ExperienceSectionItem, index: num
 
             <div className={imageWrapperclassName.join(" ")}>
                 <img className="experience-section-card__image box-shadow-medium"
+                    alt={alt}
                     style={displayIsImage ? { maxHeight: "180px", objectFit: "cover", minWidth: "100%", marginBottom: "10px" } : {}}
                     src={item.media.source.url} />
             </div>