update gh actions and fix linter errors

.github/workflows/linters.yml

@@ -8,37 +8,37 @@ env:
 jobs:
   webhint:
     name: Webhint
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '12.x'
+          node-version: '20'
       - name: Setup Webhint
         run: |
           npm install --save-dev hint@6.x
           [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
       - name: Webhint Report
         run: npx hint .
-  # stylelint:
-  #   name: Stylelint
-  #   runs-on: ubuntu-18.04
-  #   steps:
-  #     - uses: actions/checkout@v2
-  #     - uses: actions/setup-node@v1
-  #       with:
-  #         node-version: '12.x'
-  #     - name: Setup Stylelint
-  #       run: |
-  #         npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
-  #         [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
-  #     - name: Stylelint Report
-  #       run: npx stylelint "**/*.{css,scss}"
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Setup Stylelint
+        run: |
+          npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
+          [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
+      - name: Stylelint Report
+        run: npm run lint:css
   nodechecker:
     name: node_modules checker
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Check node_modules existence
         run: |
           if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi

.hintrc

@@ -0,0 +1,24 @@
+{
+  "connector": {
+    "name": "local",
+    "options": {
+      "pattern": ["**/*.html", "**/*.css", "!.git/**", "!node_modules/**", "!.next/**", "!sanity-portfolio/**"]
+    }
+  },
+  "extends": ["development"],
+  "formatters": ["stylish"],
+  "hints": {
+    "button-type": "error",
+    "disown-opener": "error",
+    "html-checker": "error",
+    "meta-charset-utf-8": "error",
+    "meta-viewport": "error",
+    "no-inline-styles": "error",
+    "compat-api/css": ["error", { "ignore": ["scrollbar-width", "scrollbar-color"] }],
+    "typescript-config/strict": "off",
+    "typescript-config/consistent-casing": "off",
+    "detect-css-reflows/paint": "off",
+    "detect-css-reflows/composite": "off"
+  },
+  "browserslist": ["last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions", "last 2 Edge versions"]
+}

.stylelintrc.json

@@ -16,5 +16,5 @@
     ],
     "csstree/validator": true
   },
-  "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
+  "ignoreFiles": ["build/**", "dist/**", "**/dist/**", "node_modules/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx", ".next/**", "sanity-portfolio/**"]
 }

components/Profile.tsx

@@ -68,16 +68,16 @@ export default function Profile({ pageInfo }: Props) {
 
 				<div className="pt-5">
 					<Link href="#about">
-						<button className="profileButton">About</button>
+						<button type="button" className="profileButton">About</button>
 					</Link>
 					<Link href="#experience">
-						<button className="profileButton">Experience</button>
+						<button type="button" className="profileButton">Experience</button>
 					</Link>
 					<Link href="#skills">
-						<button className="profileButton">Skills</button>
+						<button type="button" className="profileButton">Skills</button>
 					</Link>
 					<Link href="#projects">
-						<button className="profileButton">Projects</button>
+						<button type="button" className="profileButton">Projects</button>
 					</Link>
 				</div>
 			</div>

components/Projects.tsx

@@ -62,6 +62,7 @@ const Projects = ({ projects }: Props) => {
 			{/* Left Arrow */}
 			{canScrollLeft && isHovering && (
 				<button
+					type="button"
 					onClick={() => scroll('left')}
 					className="absolute left-2 sm:left-5 z-50 bg-[#F7AB0A]/80 hover:bg-[#F7AB0A] transition-all duration-200 rounded-full p-2 sm:p-3 shadow-lg"
 					aria-label="Scroll left"
@@ -137,6 +138,7 @@ const Projects = ({ projects }: Props) => {
 			{/* Right Arrow */}
 			{canScrollRight && isHovering && (
 				<button
+					type="button"
 					onClick={() => scroll('right')}
 					className="absolute right-2 sm:right-5 z-50 bg-[#F7AB0A]/80 hover:bg-[#F7AB0A] transition-all duration-200 rounded-full p-2 sm:p-3 shadow-lg"
 					aria-label="Scroll right"

components/WorkExperience.tsx

@@ -59,6 +59,7 @@ const WorkExperience = ({ experiences }: Props) => {
 				{/* Left Arrow */}
 				{canScrollLeft && isHovering && (
 					<button
+						type="button"
 						onClick={() => scroll('left')}
 						className="absolute left-2 sm:left-5 z-50 bg-[#F7AB0A]/80 hover:bg-[#F7AB0A] transition-all duration-200 rounded-full p-2 sm:p-3 shadow-lg"
 						aria-label="Scroll left"
@@ -90,6 +91,7 @@ const WorkExperience = ({ experiences }: Props) => {
 				{/* Right Arrow */}
 				{canScrollRight && isHovering && (
 					<button
+						type="button"
 						onClick={() => scroll('right')}
 						className="absolute right-2 sm:right-5 z-50 bg-[#F7AB0A]/80 hover:bg-[#F7AB0A] transition-all duration-200 rounded-full p-2 sm:p-3 shadow-lg"
 						aria-label="Scroll right"

package.json

@@ -2,14 +2,21 @@
   "name": "next-portfolio",
   "version": "0.1.0",
   "private": true,
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "last 2 Edge versions"
+  ],
   "engines": {
     "node": "24.x"
   },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "lint:css": "stylelint \"styles/**/*.css\" \"styles/**/*.scss\""
   },
   "dependencies": {
     "@heroicons/react": "^2.0.13",

styles/globals.css

@@ -31,6 +31,6 @@
   }
 
   .headerTextButton:hover {
-    color: #F7AB0A;
+    color: #f7ab0a;
   }
 }