Layout polish, About improvements, and site-wide component refactors (#9)

* feat(resume): updated resume

* build: added mdx-js to render mdx files

* feat(resume): made education displayed in header mobile-friendly

* build: updated dependencies

* lint: define rules in eslintrc

* lint: apply linting rules defined in previous commit

* lint: add prettier for code formatting

* lint: add eslint plugin for organizing and validating whole import statements

* lint: add Prettier plugin for sorting Tailwind class names

* ci: added lint-staged as pre-commit hook using husky

* lint: add pre-commit hook and run as intended

* lint: modify lint-staged and disable linting during production builds

* ci: move lint-staged settings from package.json to .lintstagedrc.js

* lint: run set lint commands to lint entire project

* ci: add workflow for linting (ESLint & Prettier) & type checking

* ci: modify workflow to fix issue with jobs not working as intended on push

* style: improve responsibilities list with cleaner bullet styling

* feat: move company logo outside margins and reveal on hover

* refactor: rename isDesktop to isTablet for 768px breakpoint

* feat: make company logo backdrop transparent and adjust image size for large screens

* style: adjust spacing between - positions with/(out) responsibilities and between given position and responsibility

* chore: update Education component to use RecordTile

* feat: implement generic RecordTile component for experience and education

* refactor: improve readability of heading rendering logic in jobDescriptorSection

* refactor: rename details to body in RecordTile

* chore: update Education component to use EducationTile

* feat: use RecordTile in EducationTile with combined degree and major

* refactor: update ExperienceTile to use generic RecordTile component

* style: decrease padding around highlighted text by Highlighter component

* refactor(highlight): simplify color logic using color map

* feat: add StrikeHighlight component for colorful strikethrough-style text highlights

* feat: add and customize Accordion component from shadcn

* feat: convert extra info paragraphs to AccordionForExtraInfo component in About component

Refactored the static informational paragraphs into a dynamic Accordion component.

* style: replace Iconify icon with lucide-react icon in ExperienceTile for better visibility

* ci: avoid deploying on any push to main & add CODEOWNERS file

* ci: add automatic, scheduled, and manual PR labeling with labeler

* Revert "ci: add automatic, scheduled, and manual PR labeling with labeler"

This reverts commit c6fda59.

Author: steadyfall

.eslintrc.json

@@ -1,6 +1,41 @@
 {
   "extends": [
     "next/core-web-vitals",
-    "next/typescript"
-  ]
+    "next/typescript",
+    "plugin:prettier/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript"
+  ],
+  "plugins": ["prettier", "import"],
+  "rules": {
+    // Code quality
+    "no-console": "warn",
+    "no-debugger": "error",
+    "no-unused-vars": "off", // Handled by TS version above
+
+    // Import sorting and cleanliness
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object",
+          "type"
+        ],
+        "newlines-between": "always",
+        "alphabetize": { "order": "asc", "caseInsensitive": true }
+      }
+    ],
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+
+    // Prettier takes over formatting rules now
+    "prettier/prettier": "error"
+  }
 }

.github/CODEOWNERS

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

.github/workflows/deploy.yml

@@ -2,7 +2,8 @@ name: Deploy to GitHub Pages
 
 on:
   push:
-    branches: [main]
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
 
 jobs:
   build-and-deploy:

.github/workflows/lint-and-check.yml

@@ -0,0 +1,91 @@
+name: Lint and Type-checking
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+    branches:
+      - main
+      - dev
+
+jobs:
+  lint:
+    name: ESLint & Prettier 
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Determine base branch
+        id: vars
+        run: |
+          if [[ "${{ github.event_name }}" == "pull_request" ]]; then
+            echo "BASE_BRANCH=${{ github.event.pull_request.base.ref }}" >> $GITHUB_ENV
+          else
+            echo "BASE_BRANCH=${{ github.ref_name }}" >> $GITHUB_ENV
+          fi
+      
+      - name: Fetch base branch
+        run: |
+          git fetch origin $BASE_BRANCH
+
+      - name: Get list of changed files
+        id: files
+        run: |
+          echo "CHANGED_FILES=$(git diff --name-only --diff-filter=ACMRT origin/$BASE_BRANCH | tr '\n' ' ')" >> $GITHUB_ENV
+
+      - name: Lint JS/TS files with ESLint (no auto-fix)
+        if: ${{ env.CHANGED_FILES != ''}}
+        run: |
+          FILES=$(echo "$CHANGED_FILES" | tr ' ' '\n' | grep -E '\.(js|jsx|ts|tsx)$' | xargs)
+          if [ -n "$FILES" ]; then
+            echo "Running ESLint on:"
+            echo "$FILES"
+            npx next lint --file $FILES
+          else
+            echo "No JS/TS files to lint."
+          fi
+
+      - name: Format other files with Prettier (no auto-fix)
+        if: ${{ env.CHANGED_FILES != ''}}
+        run: |
+          FILES=$(echo "$CHANGED_FILES" | tr ' ' '\n' | grep -E '\.(json|md|css|scss|html)$' | xargs)
+          if [ -n "$FILES" ]; then
+            echo "Running Prettier on:"
+            echo "$FILES"
+            npx prettier --check $FILES
+          else
+            echo "No files to format with Prettier."
+          fi
+  
+  type-check:
+    name: Type Checking 
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type Check
+        run: |
+          echo "Running TypeScript type checking..."
+          npx tsc --noEmit

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.lintstagedrc.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`;
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
+  '*.{json,md,css,scss,html}': ['prettier --write'],
+};

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -1,26 +1,31 @@
 # steadyfall.github.io
 
 ## color-palette
+
 main:
+
 - `text-pink-500`
 - `text-thunderbird-600`
 - `text-azure-radiance-600`
 - `text-neon-green-500 dark:text-neon-green-400`
 
 across_colors:
+
 - `text-midnight-blue-500`
 - `text-pink-500`
 - `text-orange-500`
 - `text-blue-violet-500`
 
 highlighter:
+
 - cyan: `bg-cyan-300 dark:bg-cyan-500/30`
 - pink/violet-web: `bg-[#ff77e4]`
 - slate-blue: `bg-[#7777ff]`
 - red: `bg-[#ff7777]`
 - yellow/lemon/laser-lemon: `bg-[#ffff77]`
 
 ## to-do:
+
 - [x] check out about highlighting words
 - [ ] YAML file parser for experience, projects
 - [x] skills, education section

next.config.mjs

@@ -1,6 +1,18 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'export',
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
 };
 
 export default nextConfig;
+
+// import withMDX from '@next/mdx';
+
+// /** @type {import('next').NextConfig} */
+// const nextConfig = {
+//     output: 'export',
+//     pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+// };
+
+// export default withMDX()(nextConfig);