feat: Add initial design (#1)

* feat: Add initial design

* Update README

.github/CODEOWNERS

@@ -0,0 +1,8 @@
+# This is a comment.
+# Each line is a file pattern followed by one or more owners.
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @global-owner1 and @global-owner2 will be requested for
+# review when someone opens a pull request.
+*       [email protected]

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+---
+github: asyrafnorafandi

.github/pr-labeler.yml

@@ -0,0 +1,9 @@
+"kind/ci": ci/*
+"kind/bug": ["fix/*", "bug/*"]
+"kind/chore": chore/*
+"kind/refactor": refactor/*
+"kind/release": release/*
+"kind/revert": revert/*
+"kind/security": security/*
+"kind/documentation": ["documentation/*", "doc/*"]
+"kind/enhancement": ["feat/*", "feature/*"]

.github/workflows/pr-labeler.yml

@@ -0,0 +1,20 @@
+name: PR Labeler
+
+on:
+  pull_request:
+    types: [opened]
+
+permissions:
+  contents: read
+
+jobs:
+  pr-labeler:
+    permissions:
+      contents: read # for TimonVS/pr-labeler-action to read config file
+      pull-requests: write # for TimonVS/pr-labeler-action to add labels in PR
+    runs-on: ubuntu-latest
+    steps:
+      - uses: TimonVS/pr-labeler-action@v5
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          configuration-path: .github/pr-labeler.yml # optional, .github/pr-labeler.yml is the default value

.github/workflows/semantic-title.yml

@@ -0,0 +1,38 @@
+name: "Semantic Title Check"
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - reopened
+
+permissions:
+  pull-requests: read
+
+jobs:
+  main:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      # https://github.com/commitizen/conventional-commit-types/blob/master/index.json
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          types: |
+            bug
+            fix
+            hotfix
+            chore
+            ci
+            feat
+            doc
+            epic
+            perf
+            refactor
+            release
+            revert
+            test
+            security

.github/workflows/stale.yml

@@ -0,0 +1,31 @@
+---
+name: Close inactive issues
+
+on:
+  schedule:
+    - cron: "0 0 * * 1"
+
+jobs:
+  close-issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@v8
+        with:
+          days-before-stale: 120
+          days-before-close: 60
+          exempt-issue-labels: bug,pinned,security,planned
+          exempt-pr-labels: bug,pinned,security,planned
+          stale-issue-label: "stale"
+          stale-pr-label: "stale"
+          stale-issue-message: |
+            This issue has been marked 'stale' due to lack of recent activity. If there is no further activity, the issue will be closed in another 30 days. Thank you for your contribution!
+          close-issue-message: |
+            This issue has been closed due to inactivity. If you feel this is in error, please reopen the issue or file a new issue with the relevant details.
+          stale-pr-message: |
+            This pr has been marked 'stale' due to lack of recent activity. If there is no further activity, the issue will be closed in another 30 days. Thank you for your contribution!
+          close-pr-message: |
+            This pr has been closed due to inactivity. If you feel this is in error, please reopen the issue or file a new issue with the relevant details.
+          repo-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/tests.yml

@@ -0,0 +1,68 @@
+name: Check NextJs build
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Runs on any open or reopened pull request
+  pull_request:
+    types: [opened, reopened]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager" >&2
+            exit 1
+          fi
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+
+      - name: Build with Next.js
+        run: npm run build

README.md

@@ -1,6 +1,25 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+<div align="center">
+  <br />
+    <a href="https://astar.network/" target="_blank">
+      <img src="./docs/resume-site.png" alt="Project Banner">
+    </a>
+  <br />
 
-## Getting Started
+  <div>
+    <img src="https://img.shields.io/badge/-NextJS-black?style=for-the-badge&logoColor=white&logo=next.js&color=000000" alt="nextjs" />
+    <img src="https://img.shields.io/badge/-TailwindCSS-black?style=for-the-badge&logoColor=sky&logo=tailwindcss&color=ffffff" alt="jinja" />
+  </div>
+</div>
+
+## 📋 Table of Contents
+
+[![Check NextJs build](https://github.com/asyrafnorafandi/asyrafnorafandi.dev/actions/workflows/tests.yml/badge.svg)](https://github.com/asyrafnorafandi/asyrafnorafandi.dev/actions/workflows/tests.yml)
+
+1. 🚀 [Quick Start](#quick-start)
+2. 📜 [License](#license)
+3. 🧐 [Author Information](#author)
+
+## 🚀 <a name="quick-start">Quick Start</a>
 
 First, run the development server:
 
@@ -20,17 +39,10 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## 📜 <a name="license">License</a>
 
-## Deploy on Vercel
+MIT / BSD
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## 🧐 <a name="author">Author Information</a>
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+This website was created in 2024 by [Asyraf Norafandi](https://www.github.com/asyrafnorafandi)

app/globals.css

@@ -31,3 +31,14 @@ body {
     text-wrap: balance;
   }
 }
+
+.active .nav-indicator {
+  width: 4rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+}
+
+.active .nav-text {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity));
+}

app/layout.tsx

@@ -1,22 +1,27 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import ParticlesBackground from "@/components/particles";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Muhammad Asyraf Norafandi | Senior DevOps Engineer",
+  description: "Bridging Code to Cloud with DevOps Excellence",
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <ParticlesBackground>
+          <div className="mx-auto min-h-screen max-w-screen-xl px-6 py-12 md:px-12 md:py-20 lg:px-24 lg:py-0 z-10">
+            {children}
+          </div>
+        </ParticlesBackground>
+      </body>
     </html>
   );
 }

app/manifest.ts

@@ -0,0 +1,20 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Muhammad Asyraf Norafandi",
+    short_name: "Asyraf",
+    description: "Bridging Code to Cloud with DevOps Excellence",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#0f172a",
+    theme_color: "#7dd3fc",
+    icons: [
+      {
+        src: "/favicon.ico",
+        sizes: "any",
+        type: "image/x-icon",
+      },
+    ],
+  };
+}