feat: add relevant links in staff guide

src/content/docs/getting-started/04-staff-guide.mdx

@@ -12,42 +12,42 @@ Here's a concise list of technologies that new Kominfo staff need to learn:
 ## Core Technologies
 
 1. **Development Tools** 🛠️
-   - Git & GitHub (Use git CLI, don't be lazy)
-   - Node.js & npm
-   - VS Code
+   - <a href="https://git-scm.com/doc" target="_blank" rel="noopener noreferrer">Git</a> & <a href="https://docs.github.com/en" target="_blank" rel="noopener noreferrer">GitHub</a>
+   - <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">Node.js</a> & <a href="https://docs.npmjs.com/" target="_blank" rel="noopener noreferrer">npm</a>
+   - <a href="https://code.visualstudio.com/docs" target="_blank" rel="noopener noreferrer">VS Code</a>
 
 2. **Backend & API** 🔧
-   - tRPC
-   - Prisma ORM
-   - NextAuth.js
-   - REST API concepts
+   - <a href="https://trpc.io/docs" target="_blank" rel="noopener noreferrer">tRPC</a>
+   - <a href="https://create.t3.gg/docs" target="_blank" rel="noopener noreferrer">T3 Stack</a>
+   - <a href="https://www.prisma.io/docs" target="_blank" rel="noopener noreferrer">Prisma ORM</a>
+   - <a href="https://next-auth.js.org/" target="_blank" rel="noopener noreferrer">NextAuth.js</a>
+   - <a href="https://restfulapi.net/" target="_blank" rel="noopener noreferrer">REST API concepts</a>
 
 3. **Database** 💾
-   - PostgreSQL basics
-   - CockroachDB
-   - Database schema design
+   - <a href="https://www.postgresql.org/docs/" target="_blank" rel="noopener noreferrer">PostgreSQL</a>
+   - <a href="https://www.cockroachlabs.com/docs/" target="_blank" rel="noopener noreferrer">CockroachDB</a>
+   - <a href="https://www.prisma.io/dataguide/types/relational/what-is-an-orm" target="_blank" rel="noopener noreferrer">Database Schema Design</a>
 
 4. **Frontend** 🎨
-   - React.js
-   - Next.js 14 (App Router)
-   - TypeScript
-   - TailwindCSS
-   - Shadcn/UI
-   - Framer Motion
+   - <a href="https://react.dev/" target="_blank" rel="noopener noreferrer">React.js</a>
+   - <a href="https://nextjs.org/docs" target="_blank" rel="noopener noreferrer">Next.js 14</a> (App Router)
+   - <a href="https://www.typescriptlang.org/docs/" target="_blank" rel="noopener noreferrer">TypeScript</a>
+   - <a href="https://tailwindcss.com/docs" target="_blank" rel="noopener noreferrer">TailwindCSS</a>
+   - <a href="https://ui.shadcn.com/" target="_blank" rel="noopener noreferrer">Shadcn/UI</a>
+   - <a href="https://motion.dev/docs" target="_blank" rel="noopener noreferrer">Motion</a>
 
 5. **Deployment & Infrastructure** ☁️
-   - Vercel
-   - DNS management
-   - Environment variables
-   - CNAME records
+   - <a href="https://vercel.com/docs" target="_blank" rel="noopener noreferrer">Vercel</a>
+   - <a href="https://www.hostinger.com/tutorials/dns" target="_blank" rel="noopener noreferrer">DNS Management</a>
+   - <a href="https://vercel.com/docs/projects/environment-variables" target="_blank" rel="noopener noreferrer">Environment Variables</a>
+   - <a href="https://www.cloudflare.com/learning/dns/dns-records/" target="_blank" rel="noopener noreferrer">CNAME Records</a>
 
 6. **Analytics & Monitoring** 📊
-   - PostHog
+   - <a href="https://posthog.com/docs" target="_blank" rel="noopener noreferrer">PostHog</a>
 
 7. **Documentation** 📝
-   - Markdown/MDX
-   - Astro/Starlight
-   - JSDoc comments
+   - <a href="https://mdxjs.com/docs/" target="_blank" rel="noopener noreferrer">MDX</a>
+   - <a href="https://docs.astro.build/en/getting-started/" target="_blank" rel="noopener noreferrer">Astro</a> / <a href="https://starlight.astro.build/" target="_blank" rel="noopener noreferrer">Starlight</a>
 
 ## Your Key Responsibilities
 
@@ -100,23 +100,23 @@ As a staff member in Kominfo, you'll be responsible for:
 
 ## Domain Management 🌐
 
-Our domain `himarpl.com` is managed through [Hostinger](https://www.hostinger.com) and deployed on [Vercel](https://vercel.com) using CNAME records.
+Our domain `himarpl.com` is managed through <a href="https://www.hostinger.com" target="_blank" rel="noopener noreferrer">Hostinger</a> and deployed on <a href="https://vercel.com" target="_blank" rel="noopener noreferrer">Vercel</a> using CNAME records.
 
 ### Active Subdomains
 
 Main Websites:
-- [himarpl.com](https://himarpl.com) - Main website
-- [ascendia.himarpl.com](https://ascendia.himarpl.com) - Current cabinet website
-- [admin.himarpl.com](https://admin.himarpl.com) - Admin dashboard
+- <a href="https://himarpl.com" target="_blank" rel="noopener noreferrer">himarpl.com</a> - Main website
+- <a href="https://ascendia.himarpl.com" target="_blank" rel="noopener noreferrer">ascendia.himarpl.com</a> - Current cabinet website
+- <a href="https://admin.himarpl.com" target="_blank" rel="noopener noreferrer">admin.himarpl.com</a> - Admin dashboard
 
 Student Services:
-- [pmb.himarpl.com](https://pmb.himarpl.com) - New student information
-- [mabim.himarpl.com](https://mabim.himarpl.com) - Orientation website
+- <a href="https://pmb.himarpl.com" target="_blank" rel="noopener noreferrer">pmb.himarpl.com</a> - New student information
+- <a href="https://mabim.himarpl.com" target="_blank" rel="noopener noreferrer">mabim.himarpl.com</a> - Orientation website
 
 Content & Tools:
-- [blog.himarpl.com](https://blog.himarpl.com) - Staff blog platform
-- [docs.himarpl.com](https://docs.himarpl.com) - Technical documentation
-- [bot.himarpl.com](https://bot.himarpl.com) - Telegram bot (Phoenix-chan)
+- <a href="https://blog.himarpl.com" target="_blank" rel="noopener noreferrer">blog.himarpl.com</a> - Staff blog platform
+- <a href="https://docs.himarpl.com" target="_blank" rel="noopener noreferrer">docs.himarpl.com</a> - Technical documentation
+- <a href="https://bot.himarpl.com" target="_blank" rel="noopener noreferrer">bot.himarpl.com</a> - Telegram bot (Phoenix-chan)
 
 ### Future Planning
 
@@ -136,23 +136,23 @@ New Vercel projects require manual GitHub Actions setup:
 Keep in mind these upcoming changes:
 
 1. Main Website Transition
-   - Current: [www.himarpl.com](https://www.himarpl.com) (Ascendia cabinet)
+   - Current: <a href="https://www.himarpl.com" target="_blank" rel="noopener noreferrer">www.himarpl.com</a> (Ascendia cabinet)
    - Future: Will be used for 2024/2025 cabinet
 
 2. Orientation Website
-   - Current: [mabim.himarpl.com](https://mabim.himarpl.com)
-   - Future: Move to [mabim2024.himarpl.com](https://mabim2024.himarpl.com)
+   - Current: <a href="https://mabim.himarpl.com" target="_blank" rel="noopener noreferrer">mabim.himarpl.com</a>
+   - Future: Move to <a href="https://mabim2024.himarpl.com" target="_blank" rel="noopener noreferrer">mabim2024.himarpl.com</a>
 
 3. Event Subdomain
-   - [lomba.himarpl.com](https://lomba.himarpl.com) - Available for future events
+   - <a href="https://lomba.himarpl.com" target="_blank" rel="noopener noreferrer">lomba.himarpl.com</a> - Available for future events
    - Can use existing repo or create new ones as needed
 
 ## Input New Staff Data
 
 Follow these steps to add new staff members:
 
 1. **Access the Admin Panel**
-   - Go to [admin.himarpl.com](https://admin.himarpl.com)
+   - Go to <a href="https://admin.himarpl.com" target="_blank" rel="noopener noreferrer">admin.himarpl.com</a>
    - Login using the main HIMARPL account
 
 2. **Navigate to Staff Section**
@@ -164,8 +164,8 @@ If there is no data for the current period, you can add it manually using prisma
 :::
 
 3. **Prepare Staff Images**
-   - Upload staff photos to the [assets-himarpl](https://github.com/himarpl/assets-himarpl) repository
-   - Convert GitHub links to CDN links using [jsdelivr](https://www.jsdelivr.com/github)
+   - Upload staff photos to the <a href="https://github.com/himarpl/assets-himarpl" target="_blank" rel="noopener noreferrer">assets-himarpl</a> repository
+   - Convert GitHub links to CDN links using <a href="https://www.jsdelivr.com/github" target="_blank" rel="noopener noreferrer">jsdelivr</a>
 
 4. **Add Staff Members**
    - Click "Add New Staff"