Merge pull request #13 from yusufk/react18

Trying an improved deploy action

Author: yusufk

.github/workflows/deploy.yml

@@ -3,22 +3,26 @@ name: Deploy to GitHub Pages
 on:
   push:
     branches:
-      - master  # or the branch you want to deploy from
+      - master
   pull_request:
     types:
       - closed
     branches:
       - master
 
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
 jobs:
   build:
-    # Only run if PR was merged
-    if: github.event.pull_request.merged == true
+    # Modified condition to handle both direct pushes and merged PRs
+    if: github.event_name == 'push' || github.event.pull_request.merged == true
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Generate index files
         run: |
@@ -33,18 +37,35 @@ jobs:
           done
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: '18'
+          cache: 'npm'  # Add caching for faster installations
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci  # Use ci instead of install for cleaner, more reliable builds
 
       - name: Build project
         run: npm run build
 
-      - name: Deploy to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build
+          path: ./out
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    permissions:
+      pages: write
+      id-token: write
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

src/components/about.jsx

@@ -60,61 +60,6 @@ export default class About extends Component {
                         </div>
                     </div>
                     {/* End About Me */}
-                    {/* ======= Counts ======= */}
-                    {/*
-                    <div className="counts container">
-                        <div className="row">
-                            <div className="col-lg-3 col-md-6">
-                                <div className="count-box">
-                                    <i className="bi bi-emoji-smile" />
-                                    <span
-                                        data-purecounter-start={0}
-                                        data-purecounter-end={232}
-                                        data-purecounter-duration={1}
-                                        className="purecounter"
-                                    />
-                                    <p>Happy Clients</p>
-                                </div>
-                            </div>
-                            <div className="col-lg-3 col-md-6 mt-5 mt-md-0">
-                                <div className="count-box">
-                                    <i className="bi bi-journal-richtext" />
-                                    <span
-                                        data-purecounter-start={0}
-                                        data-purecounter-end={521}
-                                        data-purecounter-duration={1}
-                                        className="purecounter"
-                                    />
-                                    <p>Projects</p>
-                                </div>
-                            </div>
-                            <div className="col-lg-3 col-md-6 mt-5 mt-lg-0">
-                                <div className="count-box">
-                                    <i className="bi bi-headset" />
-                                    <span
-                                        data-purecounter-start={0}
-                                        data-purecounter-end={1463}
-                                        data-purecounter-duration={1}
-                                        className="purecounter"
-                                    />
-                                    <p>Hours Of Support</p>
-                                </div>
-                            </div>
-                            <div className="col-lg-3 col-md-6 mt-5 mt-lg-0">
-                                <div className="count-box">
-                                    <i className="bi bi-award" />
-                                    <span
-                                        data-purecounter-start={0}
-                                        data-purecounter-end={24}
-                                        data-purecounter-duration={1}
-                                        className="purecounter"
-                                    />
-                                    <p>Awards</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    {/* End Counts */}
                     {/* ======= Skills  ======= */}
                     <div className="skills container">
                         <div className="section-title">

src/components/header.jsx

@@ -13,7 +13,18 @@ export default class Header extends Component {
                         <h2>
                             I'm a passionate&nbsp;
                             <div className="ms-slider">
-                                {/* slider content */}
+                                <ul className="ms-slider__words">
+                                        <li className="ms-slider__word">Engineer</li>
+                                        <li className="ms-slider__word">Husband</li>
+                                        <li className="ms-slider__word">Product Manager</li>
+                                        <li className="ms-slider__word">Wanderer</li>
+                                        <li className="ms-slider__word">Father</li>
+                                        <li className="ms-slider__word">Mountain Biker</li>
+                                        <li className="ms-slider__word">Tinkerer</li>
+                                        <li className="ms-slider__word">Muslim</li>
+                                        <li className="ms-slider__word">Technologist</li>
+                                        <li className="ms-slider__word">Engineer</li>
+                                </ul>
                             </div>
                         </h2>
                         <nav id="navbar" className="navbar">