Repository: rizafahmi/carikerja
Branch: main
Commit: 41f19c2db58e
Files: 29
Total size: 38.0 KB

Directory structure:
gitextract_1chxirsc/

├── .eslintignore
├── .eslintrc.cjs
├── .gitignore
├── .husky/
│   ├── .gitignore
│   └── pre-commit
├── .npmrc
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── jsconfig.json
├── package.json
├── playwright.config.js
├── src/
│   ├── app.css
│   ├── app.d.ts
│   ├── app.html
│   ├── components/
│   │   └── Nav.svelte
│   ├── data/
│   │   ├── employer.js
│   │   ├── people.js
│   │   └── types.d.ts
│   ├── routes/
│   │   ├── +layout.svelte
│   │   ├── +page.svelte
│   │   ├── about/
│   │   │   └── +page.svelte
│   │   └── hiring/
│   │       └── +page.svelte
│   └── stores/
│       └── theme.js
├── svelte.config.js
├── tests/
│   ├── home.test.js
│   └── pages/
│       └── home.page.js
└── vite.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .eslintignore
================================================
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock


================================================
FILE: .eslintrc.cjs
================================================
module.exports = {
  root: true,
  extends: ["eslint:recommended", "prettier"],
  plugins: ["svelte3"],
  overrides: [{files: ["*.svelte"], processor: "svelte3/svelte3"}],
  parserOptions: {
    sourceType: "module",
    ecmaVersion: 2020,
  },
  env: {
    browser: true,
    es2017: true,
    node: true,
  },
  rules: {
    indent: ["error", 2],
    "linebreak-style": ["error", "unix"],
    quotes: ["error", "double"],
    semi: ["error", "always"],
  },
};


================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
.idea
playwright-report
test-results

================================================
FILE: .husky/.gitignore
================================================
_


================================================
FILE: .husky/pre-commit
================================================
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged


================================================
FILE: .npmrc
================================================
engine-strict=true


================================================
FILE: .prettierignore
================================================
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock


================================================
FILE: .prettierrc
================================================
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": false,
  "trailingComma": "all",

  "plugins": ["prettier-plugin-svelte"],
  "pluginSearchDirs": ["."],
  "overrides": [{"files": "*.svelte", "options": {"parser": "svelte"}}]
}


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2020 Riza Fahmi

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# Carikerja

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Daftar developer keren yang terpaksa di PHK karena dampak pandemi COVID-19.

Yang diperlukan (versi minimum): [Node.js](https://nodejs.org) versi 16.

```shell
git clone https://github.com/rizafahmi/carikerja.git
cd carikerja/
npm install
npm run dev
```

lalu buka alamat `localhost:5173`.

Untuk menambahkan data developer silakan ubah file `src/data/people.js`. Data social media dapat dibuat multi dengan mengupdate menjadi bentuk object, seperti contoh:

```javascript
    social_media: {
        Linkedin : 'https://www.linkedin.com/in/foo/',
        Github   : 'https://github.com/foo'
    },
```

dan untuk menambahkan data perusahaan yang masih melakukan hiring silakan ubah file `src/data/employer.js`.


================================================
FILE: jsconfig.json
================================================
{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true
  }
  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
  //
  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
  // from the referenced tsconfig.json - TypeScript does not merge them in
}


================================================
FILE: package.json
================================================
{
  "name": "carikerja",
  "description": "Menghubungkan para Software Engineer kece di tanah air yang terpaksa harus terkena pemutusan hubungan kerja karena pandemi COVID-19 dengan perusahaan yang sedang mencari talenta digital.",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
    "test": "playwright test",
    "test:unit": "vitest",
    "lint": "prettier --plugin-search-dir . --check . && eslint .",
    "format": "prettier --plugin-search-dir . --write .",
    "postinstall": "husky install"
  },
  "devDependencies": {
    "@playwright/test": "^1.30.0",
    "@sveltejs/adapter-auto": "^1.0.0",
    "@sveltejs/kit": "^1.8.3",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-svelte3": "^4.0.0",
    "husky": "^8.0.2",
    "lint-staged": "^13.0.4",
    "prettier": "^2.8.0",
    "prettier-plugin-svelte": "^2.8.1",
    "svelte": "^3.54.0",
    "svelte-check": "^2.9.2",
    "svelte-select": "^4.4.7",
    "terminal.css": "^0.7.2",
    "typescript": "^4.9.3",
    "vite": "^4.0.3",
    "vitest": "^0.25.3"
  },
  "type": "module",
  "lint-staged": {
    "*.js": [
      "npm run lint",
      "npm run format"
    ]
  }
}


================================================
FILE: playwright.config.js
================================================
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  webServer: {
    command: "npm run build && npm run preview",
    port: 4173,
  },
  testDir: "tests",
  reporter: "html",
  use: {
    trace: "retain-on-failure",
  },
};

export default config;


================================================
FILE: src/app.css
================================================
body {
  transition: 0.25s;
}

body.dark-mode {
  background-color: #111f31;
  color: #ffffff;
}

body.dark-mode h1,
body.dark-mode h4,
body.dark-mode strong {
  color: #ffffff;
}

body.dark-mode code {
  background-color: #172f4e;
  color: #ffffff;
}

body.dark-mode .filter {
  --itemColor: #151515;
  --itemHoverColor: #151515;
}

body.dark-mode .terminal-card {
  border: 1px solid #1a2c44;
}

body.dark-mode .terminal-card header {
  background: #253e5f;
}

body.dark-mode .button-switch-theme-dark {
  background: #0d131f;
  color: rgba(255, 255, 255, 0.85);
}

body a[aria-current="page"] {
  color: #000 !important;
}

body.dark-mode a[aria-current="page"] {
  color: #ffffff !important;
}


================================================
FILE: src/app.d.ts
================================================
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
// and what to do when importing types
declare namespace App {
  // interface Locals {}
  // interface PageData {}
  // interface Error {}
  // interface Platform {}
}


================================================
FILE: src/app.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width" />

    <meta name="theme-color" content="#333333" />

    <meta
      property="og:title"
      content="Daftar engineer keren yang terkena dampak pemutusan hubungan kerja karena pandemi."
    />
    <meta
      property="og:description"
      content="Daftar yang berisikan beberapa software engineer kece di tanah air yang terpaksa harus terkena pemutusan hubungan kerja karena pandemi COVID-19. Tujuannya supaya bisa menghubungkan developer keren ini dengan beberapa perusahaan yang sedang mencari talenta digital."
    />
    <meta property="og:image" content="%sveltekit.assets%/screenshot.png" />
    <meta property="og:url" content="https://carikerja.deeptech.id" />

    <meta
      name="twitter:title"
      content="Daftar engineer keren yang terkena dampak pemutusan hubungan kerja karena pandemi."
    />
    <meta
      property="twitter:description"
      content="Daftar yang berisikan beberapa software engineer kece di tanah air yang terpaksa harus terkena pemutusan hubungan kerja karena pandemi COVID-19. Tujuannya supaya bisa menghubungkan developer keren ini dengan beberapa perusahaan yang sedang mencari talenta digital."
    />
    <meta name="twitter:image" content="%sveltekit.assets%/screenshot.png" />
    <meta name="twitter:card" content="summary_large_image" />

    %sveltekit.head%
  </head>
  <body>
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>


================================================
FILE: src/components/Nav.svelte
================================================
<script>
  import {page} from "$app/stores";
  import {theme} from "$src/stores/theme.js";

  $: segment = $page.url.pathname;
  $: dark = $theme === "Dark";

  function toggleTheme() {
    // jika di localStorage tidak ada data tema maka ganti tema menjadi tema Gelap
    const newTheme =
      $theme === null ? "Dark" : $theme === "Light" ? "Dark" : "Light";
    theme.set(newTheme);
    localStorage.setItem("theme", newTheme);
  }
</script>

<nav class="terminal-nav">
  <header class="terminal-logo">
    <div class="terminal-prompt">
      <a href="/" class="no-style">Carikerja</a>
    </div>
  </header>
  <div class="terminal-menu">
    <ul typeof="BreadcrumbList">
      <li>
        <a aria-current={segment === "about" ? "page" : undefined} href="about">
          Tentang
        </a>
      </li>
      <li>
        <a
          aria-current={segment === "hiring" ? "page" : undefined}
          href="hiring"
        >
          Hiring?
        </a>
      </li>
      {#if $theme !== null}
        <li>
          <button on:click={toggleTheme} class="button-switch-theme" class:dark>
            {$theme === "Dark" ? "🌜 " + $theme : "🌞 " + $theme}
          </button>
        </li>
      {/if}
    </ul>
  </div>
</nav>

<style>
  .button-switch-theme {
    padding: 0.25em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-width: 0;
    border-radius: 1em;
    display: inline-block;
    background: #eee;
    cursor: pointer;
  }
  .dark {
    background: #162a44;
    color: #fff;
  }
</style>


================================================
FILE: src/data/employer.js
================================================
/** @type {Employer[]} */
export default [];


================================================
FILE: src/data/people.js
================================================
/** @type {Person[]} */
export default [
  {
    name: "M Abd Aziz Alfian",
    status: "Remote",
    role: "FullStack Developer",
    location: "Jakarta",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/azizalfian",
      Github: "https://github.com/aalfiann",
      Linktree: "https://linktr.ee/aalfiann",
    },
    tech_stack: [
      "NodeJS",
      "Fastify",
      "Laravel",
      "PostgreSQL",
      "Sequelize",
      "SvelteKit",
      "ReactJS",
      "ExpressJS",
      "TotalJS",
      "NextJS",
      "NestJS",
      "Docker",
      "Mocha",
      "JavaScript",
      "PHP",
      "MySQL",
      "MongoDB",
      "Redis",
      "HTML",
      "CSS3",
      "TailwindCSS",
      "Bulma",
      "Bootstrap",
      "TypeScript",
      "C#",
      "VB.NET",
      "GCP",
      "Framework7",
    ],
    hired: false,
  },
  {
    name: "Nurizko Maulana",
    status: "Fulltime, Remote",
    role: "Software Engineer, ",
    location: "Batam",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/nurizko-maulana",
      Github: "https://github.com/nurizko-maulana",
      Blog: "https://www.nurizkomaulana.site/about",
    },
    tech_stack: ["NodeJS", "Flutter", "React", "Laravel", "PostgreSQL"],
    hired: false,
  },
  {
    name: "Doddy Rizal Novianto",
    status: "Fulltime, Remote",
    role: "Frontend Developer",
    location: "Jakarta, Tangerang",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/doddy-rizal-novianto-559269157/",
      Github: "https://github.com/drzaln",
    },
    tech_stack: ["react-native", "react", "javascript"],
    hired: false,
  },
  {
    name: "Tony Sanjaya",
    status: "Fulltime, Remote",
    role: "Fullstack Developer",
    location: "Surabaya",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/tony-sanjaya-11836042/",
      Github: "https://github.com/sanjayatony",
    },
    tech_stack: ["WordPress", "PHP", "Tailwind CSS", "VueJS", "Shopify"],
    hired: false,
  },
  {
    name: "Rifki Andriyanto",
    status: "Fulltime",
    role: "Frontend Developer",
    location: "Bogor",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/andriyantorifki",
      Github: "https://github.com/rifkiandriyanto",
    },
    tech_stack: ["react", "react native", "javascript", "css", "nodejs"],
    hired: false,
  },
  {
    name: "Ainul",
    status: "Fulltime",
    role: "Junior Mobile Developer",
    location: "Surabaya",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/ai-null/",
      Github: "https://github.com/ai-null",
    },
    tech_stack: ["Kotlin"],
    hired: false,
  },
  {
    name: "Rikki Novar",
    status: "Fulltime",
    role: "Front-end Developer",
    location: "Bandung",
    social_media: "https://www.linkedin.com/in/rikkinovar/",
    tech_stack: ["react", "react-native"],
    hired: false,
  },
  {
    name: "Willy Tan",
    status: "Fulltime",
    role: "Front-end Developer",
    location: "Jakarta",
    social_media: "https://www.linkedin.com/in/willy-tan-198814150/",
    tech_stack: ["react", "react-native"],
    hired: false,
  },
  {
    name: "Natascha Meysarach Lamsu",
    status: "Fulltime",
    role: "Front-end Developer",
    location: "Jakarta",
    social_media: "https://www.linkedin.com/in/natascha-lamsu-445369167/",
    tech_stack: ["react"],
    hired: false,
  },
  {
    name: "Hary Dewantoro",
    status: "Fulltime",
    role: "Software Quality Assurance",
    location: "Jakarta",
    social_media: "https://www.linkedin.com/in/hary-dewantoro-7bb00512a/",
    tech_stack: [],
    hired: false,
  },
  {
    name: "Ari Rudiana",
    status: "Fulltime, Remote",
    role: "Jr. Full-Stack Developer",
    location: "Depok",
    social_media: "https://www.linkedin.com/in/ari-rudiana-260569192/",
    tech_stack: ["vuejs", "laravel"],
    hired: false,
  },
  {
    name: "Hardyin Alexander Hutapea",
    status: "Fulltime",
    role: "Back-end Software Engineer",
    location: "Jakarta",
    social_media: "https://www.linkedin.com/in/hardlexander/",
    tech_stack: ["golang", "mysql", "redis", "elasticsearch"],
    hired: false,
  },
  {
    name: "Muhammad Rizqi",
    status: "Fulltime",
    role: "Jr. Software Engineer",
    location: "Jakarta",
    social_media: "https://www.linkedin.com/in/muhrizqi/",
    tech_stack: ["Python", "Odoo", "PostgreSQL"],
    hired: false,
  },
  {
    name: "Ilham Bintang",
    status: "Fulltime",
    role: "Machine Learning Engineer",
    location: "Jakarta",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/nullphantom/",
      Github: "https://github.com/nullphantom",
      Blog: "https://abin.web.id/",
    },
    tech_stack: ["Tensorflow", "Python", "Elasticsearch"],
    hired: false,
  },
  {
    name: "Zainal Arifin",
    status: "Fulltime, Remote",
    role: "Software Developer",
    location: "Bandung",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/zainalar/",
      Github: "https://github.com/zainalarifinid",
    },
    tech_stack: ["JavaScript", "TypeScript", "NodeJS", "PHP", "VueJS"],
    hired: false,
  },
  {
    name: "Hasobi Roid Radityo",
    status: "Fulltime, Remote",
    role: "DevOps Engineer, Software Engineer",
    location: "Surakarta",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/hasobi/",
      Github: "https://github.com/hasobi",
    },
    tech_stack: ["Python", "JavaScript", "Go", "Terraform"],
    hired: false,
  },
  {
    name: "Anton Purwanto",
    status: "Fulltime, Remote",
    role: "Java Developer, Software Engineer",
    location: "Tangerang Selatan",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/anton-purwanto-268a4050",
      Github: "https://github.com/anteknik",
      AboutMe: "https://about.me/antonpurwanto",
    },
    tech_stack: [
      "Java",
      "Spring Framework",
      "Liferay",
      "JPA/hibernate",
      "JSF/JSP",
    ],
    hired: false,
  },
  {
    name: "Panji Asmoro",
    status: "Fulltime",
    role: "Front End Developer",
    location: "Depok",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/panjiasmoro/",
      Github: "https://github.com/panjiasmoroart",
    },
    tech_stack: [
      "HTML5",
      "CSS3",
      "SASS",
      "JavaScript",
      "ReactJS",
      "PHP",
      "Ruby",
    ],
    hired: false,
  },
  {
    name: "Ilham Bintang",
    status: "Fulltime",
    role: "Machine Learning Engineer",
    location: "Jakarta",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/nullphantom/",
      Github: "https://github.com/nullphantom",
      Blog: "https://abin.web.id/",
    },
    tech_stack: ["Tensorflow", "Python", "Elasticsearch"],
    hired: false,
  },
  {
    name: "Arian Saputra",
    status: "Fulltime, Remote",
    role: "Backend Developer",
    location: "Mataram",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/rhyanz46/",
      Github: "https://github.com/Rhyanz46/",
      Website: "https://ariansaputra.com/",
    },
    tech_stack: ["Flask", "Fastapi", "Mysql", "Redis", "Docker"],
    hired: false,
  },
  {
    name: "Zainal Arifin",
    status: "Fulltime, Remote",
    role: "Software Developer",
    location: "Bandung",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/zainalar/",
      Github: "https://github.com/zainalarifinid",
    },
    tech_stack: ["JavaScript", "TypeScript", "NodeJS", "PHP", "VueJS"],
    hired: false,
  },
  {
    name: "Hasobi Roid Radityo",
    status: "Fulltime, Remote",
    role: "DevOps Engineer, Software Engineer",
    location: "Surakarta",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/hasobi/",
      Github: "https://github.com/hasobi",
    },
    tech_stack: ["Python", "JavaScript", "Go", "Terraform"],
    hired: false,
  },
  {
    name: "Panji Asmoro",
    status: "Fulltime",
    role: "Front End Developer",
    location: "Depok",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/panjiasmoro/",
      Github: "https://github.com/panjiasmoroart",
    },
    tech_stack: [
      "HTML5",
      "CSS3",
      "SASS",
      "JavaScript",
      "ReactJS",
      "PHP",
      "Ruby",
    ],
    hired: false,
  },
  {
    name: "Panji Asmoro",
    status: "Fulltime",
    role: "Front End Developer",
    location: "Depok",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/panjiasmoro/",
      Github: "https://github.com/panjiasmoroart",
    },
    tech_stack: [
      "HTML5",
      "CSS3",
      "SASS",
      "JavaScript",
      "ReactJS",
      "PHP",
      "Ruby",
    ],
    hired: false,
  },
  {
    name: "Imam Riyadi",
    status: "Fulltime, Remote",
    role: "Software Developer",
    location: "Jakarta",
    social_media: {
      Linkedin: "https://linkedin.com/in/imam-riyadi",
      Github: "https://github.com/imamriyadi",
      Website: "https://imamriyadi.com",
    },
    tech_stack: ["JavaScript", "SASS", "Java Android ", "PHP", "C#"],
    hired: false,
  },
  {
    name: "Bambang Mohammad Azhari",
    status: "Fulltime, Remote",
    role: "Software Developer",
    location: "Tasikmalaya",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/bambang-m-azhari-5280a5192/",
      Github: "https://github.com/illusi03",
      Website: "https://azhari.my.id",
    },
    tech_stack: ["Typescript", "JavaScript", "PHP", "Laravel", "React"],
    hired: false,
  },
  {
    name: "Muhammad Luthfi Azzammi",
    status: "Fulltime, Onsite",
    role: "Software Developer",
    location: "Bekasi",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/azzammi/",
      Github: "https://github.com/Azzammi",
      Website: "https://azzammi.wordpress.com",
    },
    tech_stack: ["JavaScript", "PHP", "Laravel", "Vue", "Tailwind"],
    hired: false,
  },
  {
    name: "Imam Mufiid",
    status: "Fulltime, Internship, Remote",
    role: "Junior Android Engineer",
    location: "Jakarta, Bandung, Surabaya",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/imammufiid/",
      Github: "https://github.com/imufiid",
    },
    tech_stack: ["Kotlin"],
    hired: false,
  },
  {
    name: "Muhammad Fadhila Abiyyu Faris",
    status: "Fulltime, Internship, Remote",
    role: "Full Stack Developer",
    location: "Karawang",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/muhammad-fadhila/",
      Github: "https://github.com/fadhila36",
      Website: "https://fadhilaabiyyu.my.id",
    },
    tech_stack: ["Laravel", "Codeigniter", "React", "Flutter", "WordPress"],
    hired: false,
  },
  {
    name: "Andri Desmana Putra Wijaya",
    status: "Fulltime, Remote",
    role: "Backend Engineer",
    location: "Jakarta",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/andri-desmana/",
      Github: "https://github.com/andes2912",
      Website: "https://andridesmana.pw",
    },
    tech_stack: ["Laravel"],
    hired: false,
  },
  {
    name: "Andrian Fadhilla",
    status: "Freelance",
    role: "ReactJS Developer",
    location: "Tambun Selatan, Bekasi",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/andrianfaa/",
      Github: "https://github.com/andrianfaa",
      Website: "https://www.andriann.co",
    },
    tech_stack: ["ReactJS", "Express", "NodeJS", "MongoDB", "Typescript"],
  },
  {
    name: "Nugroho Dewantoro",
    status: "Fulltime, Remote",
    role: "Full Stack Developer",
    location: "Jakarta",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/nugroho-dewantoro-31951ba5/",
      Github: "https://github.com/wisnunugroho21",
    },
    tech_stack: ["PHP", "Laravel", "VueJS", "NodeJS", "MySQL"],
    hired: false,
  },
  {
    name: "Benny Rahmat",
    status: "Fulltime, Remote",
    role: "Backend Developer",
    location: "Banjarmasin",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/akunbeben",
      Github: "https://github.com/akunbeben",
    },
    tech_stack: ["PHP", "Laravel", "C#", ".NET", ".NET Core"],
    hired: false,
  },
  {
    name: "Wahyu Rahmana",
    status: "Fulltime, Remote",
    role: "Backend Developer",
    location: "Sumbawa",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/wahyu-rahmana/",
      Github: "https://github.com/wahyurahmana",
      Website: "http://www.indolearning.co.id/",
    },
    tech_stack: [
      "ExpressJs",
      "Nodejs",
      "Postgresql",
      "Redis",
      "Vuejs",
      "Reactjs",
      "MongoDB",
      "Hapi Framework",
      "AWS Cloud",
      "Sequelize",
    ],
    hired: false,
  },
  {
    name: "Nicholas Alvi Saputra",
    status: "Fulltime, Remote",
    role: "Front End Developer",
    location: "Bandung",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/nicholasalvis",
      Github: "https://github.com/kangnikol",
      Website: "https://new-portfolio-kangnikol.vercel.app",
    },
    tech_stack: [
      "PHP",
      "Laravel",
      "ReactJS",
      "Javascript",
      "MySQL",
      "NodeJS",
      "Bootstrap",
      "NextJS",
      "Tailwindcss",
      "SASS",
      "HTML5",
      "CSS3",
    ],
    hired: false,
  },
  {
    name: "Pramudya Arya Wicaksana",
    status: "Fulltime, Remote",
    role: "Software Engineer, DevOps",
    location: "Bandung",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/ryawcksn",
      Github: "https://github.com/RyaWcksn",
    },
    tech_stack: [
      "Go",
      "Redis",
      "NodeJS",
      "Typescript",
      "MongoDB",
      "GCP",
      "AWS",
      "Docker",
      "Kubernetes",
    ],
    hired: false,
  },
  {
    name: "Andrian Fauzi",
    status: "Fulltime, Remote, Onsite",
    role: "Full Stack Developer",
    location: "Lampung",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/andrian-fauzi/",
      Github: "https://github.com/AndrianFauzi",
    },
    tech_stack: [
      "React.js",
      "Vue.js",
      "Nodejs",
      "Go",
      "Bootstrap",
      "PostgreSQL",
      "HTML5",
      "CSS3",
      "mongoDB",
    ],
    hired: false,
  },
  {
    name: "Ibnu Raffi",
    status: "Fulltime, Remote",
    role: "Full Stack Developer",
    location: "Sleman",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/ibnu_raffi",
      Github: "https://github.com/BnewVanZuarez/",
      Website: "https://ibnuraffi.netlify.app/",
    },
    tech_stack: ["PHP", "Bootstrap", "MySQL", "Java Android"],
    hired: false,
  },
  {
    name: "Muhammad Fadhila Abiyyu Faris",
    status: "Fulltime, Internship, Remote",
    role: "Full Stack Developer",
    location: "Karawang",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/muhammad-fadhila/",
      Github: "https://github.com/fadhila36",
      Website: "https://fadhilaabiyyu.my.id",
    },
    tech_stack: [
      "Laravel",
      "Codeigniter",
      "React",
      "Flutter",
      "WordPress",
      "adonisJS",
      "NodeJs",
    ],
    hired: false,
  },
  {
    name: "Randy Maulana",
    status: "Fulltime, Remote",
    role: "Software Engineer",
    location: "Jakarta, Indonesia",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/randi-maulana-akbar",
      Github: "https://github.com/reporandi",
    },
    tech_stack: ["Flutter", "MERN"],
    hired: true,
  },
  {
    name: "Alfan Fauzy",
    status: "Fulltime, Remote",
    role: "Frontend Engineer",
    location: "Malang - Jakarta, Indonesia",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/alfan-fauzy",
      Github: "https://github.com/alfanfauzy",
    },
    tech_stack: ["ReactJs", "Typescript"],
    hired: true,
  },
  {
    name: "Abdullah Ammar",
    status: "Fulltime, Remote",
    role: "Frontend Engineer",
    location: "Jakarta, Indonesia",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/abdmmar",
      Github: "https://github.com/abdmmar",
      Website: "https://www.abdmmar.com",
    },
    tech_stack: [
      "React",
      "JavaScript",
      "TypeScript",
      "CSS",
      "HTML",
      "Slate",
      "Apollo",
      "GraphQL",
      "styled-components",
      "Node.js",
      "Jest",
      "Vite",
      "Preact",
      "Webpack",
      "Next.js",
    ],
    hired: false,
  },
  {
    name: "Bima Ahida Indaka Sugna",
    status: "Fulltime, Remote",
    role: "Backend Engineer",
    location: "Ponorogo",
    social_media: {
      Linkedin: "https://www.linkedin.com/in/bima-ahida/",
      Github: "https://github.com/bimaahida",
    },
    tech_stack: [
      "Golang",
      "Node.js",
      "PostgreSQL",
      "MySQL",
      "MongoDB",
      "CockroachDB",
      "Redis",
      "Elasticsearch",
      "NATS Jetstream",
      "Kafka",
      "AWS SNS and SQS",
      "Docker",
      "Magento",
      "Laravel",
      "Codeigniter",
      "GraphQL",
    ],
    hired: false,
  },
];


================================================
FILE: src/data/types.d.ts
================================================
interface SocialMedia {
  Linkedin?: string;
  Github?: string;
  Blog?: string;
  AboutMe?: string;
  Website?: string;
  [key: string]: string;
}

interface Person {
  name: string;
  status: string;
  role: string;
  location: string;
  social_media: string | SocialMedia;
  tech_stack: string[];
  hired?: boolean;
}

interface Employer {
  name: string;
  category: string;
  link: string;
  description: string;
}


================================================
FILE: src/routes/+layout.svelte
================================================
<script>
  import Nav from "$src/components/Nav.svelte";

  import "$src/app.css";
  import "terminal.css";
</script>

<main>
  <Nav />
  <slot />
  <hr />
  Dipersembahkan oleh
  <a href="https://deeptech.id" target="_blank" rel="noreferrer"
    >DeepTech Foundation</a
  >. Kode sumber tersedia di
  <a
    href="https://github.com/rizafahmi/carikerja"
    target="_blank"
    rel="noreferrer">GitHub</a
  >.
</main>

<style>
  :global(body.dark-mode) main {
    color: #ffffff;
  }

  main {
    position: relative;
    max-width: 56em;
    padding: 2em;
    margin: 0 auto;
    box-sizing: border-box;
  }
  @media (max-width: 480px) {
    /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
    main {
      padding: 0.5em;
    }
  }
</style>


================================================
FILE: src/routes/+page.svelte
================================================
<script>
  import people from "$src/data/people.js";
  import {onMount} from "svelte";
  import Select from "svelte-select";

  /** @type {Person[]} */
  let sortedPeople = [];
  let getAllLocation = people.map((person) => person.location);
  getAllLocation = [...new Set(getAllLocation)].sort((a, b) =>
    a.localeCompare(b),
  ); // get unique location and filter by alphabetically
  let getAllTechStack = [
    ...new Set(
      people
        .filter((person) => !person.hired)
        .map((person) => person.tech_stack.map((tech) => tech.toUpperCase()))
        .flat(),
    ),
  ].sort();

  function getSortedPeople() {
    // previous sorting doesn't work as expected
    sortedPeople = people.sort((a, b) => {
      let firstPersonName = a.name.replace(/\s/, "").toLowerCase();
      let secondPersonName = b.name.replace(/\s/, "").toLowerCase();

      if (firstPersonName < secondPersonName) {
        return -1;
      } else if (firstPersonName > secondPersonName) {
        return 1;
      } else {
        return 0;
      }
    });

    // remove duplicate data and filter only unhired job seeker
    sortedPeople = sortedPeople.filter((person, index, self) => {
      // temporarily filtering duplicate data using name and Linkedin (since it's unique)
      return (
        self.findIndex((predicateVariable) => {
          return (
            predicateVariable.name.replace(/\s/, "").toLowerCase() ==
              person.name.replace(/\s/, "").toLowerCase() &&
            // @ts-ignore TODO: need to check social_media type
            predicateVariable.social_media["Linkedin"] ==
              // @ts-ignore
              person.social_media["Linkedin"]
          );
        }) == index && !person.hired
      );
    });
  }

  // Store filter data to implement multiple filtering
  const filter = {
    /** @type {string | null} */
    location: "",
    /** @type {string[]} */
    techStacks: [],
  };

  // Filter function triggered by any filter changes
  function filterPeople() {
    getSortedPeople();

    if (filter.location) {
      sortedPeople = sortedPeople.filter(
        (person) => person.location === filter.location,
      );
    }

    if (filter.techStacks.length) {
      sortedPeople = sortedPeople.filter((person) => {
        let isExist = false;
        filter.techStacks.some((techStack) => {
          if (
            person.tech_stack
              .map((stack) => stack.toUpperCase())
              .includes(techStack)
          ) {
            isExist = true;
            return true;
          }
        });
        return isExist;
      });
    }
  }

  /**	@param {CustomEvent<{ value: string }>} e */
  function handleLocationChange(e) {
    const location = e.detail ? e.detail.value : null;
    filter.location = location;

    filterPeople();
  }

  /**	@param {CustomEvent<{ value:string }[]>} e */
  function handleStackChange(e) {
    const techStacks = e.detail ? e.detail.map((value) => value.value) : [];
    filter.techStacks = techStacks;

    filterPeople();
  }

  /** @type {{ text: string; style: string }[]} */
  let badges = [];

  /** @param {string} text */
  function getBadgeStyle(text) {
    if (!text) return;
    const existingBadge = badges.find(
      (badge) => badge.text === text.toLowerCase(),
    );
    if (existingBadge) {
      return existingBadge.style;
    }

    const red = (Math.random() * 256) | 0;
    const green = (Math.random() * 256) | 0;
    const blue = (Math.random() * 256) | 0;

    const yiq = (red * 299 + green * 587 + blue * 114) / 1000;
    const textColor = yiq >= 128 ? "#000" : "#fff";

    const style = `background-color: rgb(${red}, ${green}, ${blue}); color: ${textColor}`;

    badges.push({text: text.toLowerCase(), style});

    return style;
  }

  onMount(() => {
    getSortedPeople();
  });
</script>

<svelte:head>
  <title
    >Daftar engineer keren yang terkena dampak pemutusan hubungan kerja karena
    pandemi.</title
  >
</svelte:head>

<h4>Kata siapa cari software engineer yang berpengalaman itu susah?</h4>
<p>
  Sekarang, kami buat jadi mudah! Berikut adalah daftar engineer keren yang
  terkena dampak pemutusan hubungan kerja karena pandemi.
</p>
<div class="filter">
  <div>
    <span>Cari Berdasarkan Tech Stack</span>
    <Select
      on:select={handleStackChange}
      items={getAllTechStack}
      isMulti={true}
      id="inputTechStack"
    />
  </div>
  <div>
    <span>Cari Berdasarkan Lokasi</span>
    <Select
      on:select={handleLocationChange}
      on:clear={handleLocationChange}
      items={getAllLocation}
      id="inputLocation"
    />
  </div>
</div>
<div>
  {#each sortedPeople as p}
    <div class="terminal-card">
      <header>{p.name}</header>
      <ul>
        <li>⏲️ {p.status}</li>
        <li>💻 {p.role}</li>
        <li id="listLocation">📍 {p.location}</li>
        {#if p.tech_stack.length != 0}
          <li>
            ⚙️
            {#each p.tech_stack as tech}
              <span class="badge" style={getBadgeStyle(tech)}>{tech}</span>
            {/each}
          </li>
        {/if}
        <li>
          {#if p.hired}
            <div class="hired">HIRED!</div>
          {/if}

          {#if typeof p.social_media == "string"}
            <span>🔗</span>
            <a href={p.social_media} target="_blank" rel="noreferrer">
              Linkedin
            </a>
          {/if}

          {#if typeof p.social_media === "object"}
            {#each Object.keys(p.social_media).sort() as key}
              <span>🔗</span>
              <a href={p.social_media[key]} target="_blank" rel="noreferrer">
                {key}
              </a>
            {/each}
          {/if}
        </li>
      </ul>
    </div>
  {/each}
  <hr />
</div>
<div>
  <h4>Mau menambahkan seseorang?</h4>

  <a
    href="https://github.com/rizafahmi/carikerja"
    target="_blank"
    rel="noreferrer"
  >
    Clone repositori ini
  </a>
  dan tambahkan data baru di
  <code>src/data/people.js</code>
  . Bisa juga edit langsung melalui
  <a
    href="https://github.com/rizafahmi/carikerja/edit/main/src/data/people.js"
    target="_blank"
    rel="noreferrer"
  >
    Github
  </a>
  .
</div>

<style>
  .terminal-card {
    margin: 1em;
  }
  ul {
    margin-left: 1em;
  }
  li {
    margin-bottom: 0.5em;
  }
  .badge {
    margin-right: 0.5em;
    padding: 0.25em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-radius: 0.5em;
    margin-bottom: 0.25em;
    display: inline-block;
  }
  .hired {
    background-color: rgba(21, 21, 21, 0.75);
    z-index: 999;
    position: absolute;
    display: inline-block;
    color: #d20862;
    font-size: 2em;
    font-weight: 870;
  }

  .filter {
    display: flex;
    gap: 2rem;
  }

  .filter > div {
    flex: 1 1 0%;
  }
</style>


================================================
FILE: src/routes/about/+page.svelte
================================================
<svelte:head>
  <title>Tentang Carikerja</title>
</svelte:head>

<h1>Tentang Carikerja</h1>

<p>
  Kami menghubungkan para Software Engineer kece di tanah air yang terpaksa
  harus terkena pemutusan hubungan kerja karena pandemi COVID-19 dengan
  perusahaan yang sedang mencari talenta digital.
</p>
<h4>Ingin menambahkan seseorang?</h4>
<a
  href="https://github.com/rizafahmi/carikerja"
  target="_blank"
  rel="noreferrer"
>
  Clone repositori ini
</a>
dan tambahkan data baru di <code>src/data/people.js</code>. Bisa juga edit
langsung melalui
<a
  href="https://github.com/rizafahmi/carikerja/edit/main/src/data/people.js"
  target="_blank"
  rel="noreferrer"
>
  Github
</a>.
<br />
<br />
<h4>Ingin perusahaanmu ada di daftar kami?</h4>
<a
  href="https://github.com/rizafahmi/carikerja"
  target="_blank"
  rel="noreferrer"
>
  Clone repositori ini
</a>
dan tambahkan data baru di <code>src/data/employer.js</code>. Bisa juga edit
langsung melalui
<a
  href="https://github.com/rizafahmi/carikerja/edit/main/src/data/employer.js"
  target="_blank"
  rel="noreferrer"
>
  Github
</a>.


================================================
FILE: src/routes/hiring/+page.svelte
================================================
<script>
  import employers from "$src/data/employer.js";

  employers.sort((a, b) => {
    const nameA = a.name.replace(/\s/g, "").toUpperCase();
    const nameB = b.name.replace(/\s/g, "").toUpperCase();

    if (nameA < nameB) {
      return -1;
    } else if (nameA > nameB) {
      return 1;
    } else {
      return 0;
    }
  });
</script>

<svelte:head>
  <title>
    Untukmu yang terdampak, temukan beberapa perusahaan yang masih membuka
    lowongan
  </title>
</svelte:head>

<h1>
  Untukmu yang terdampak, temukan beberapa perusahaan yang masih membuka
  lowongan:
</h1>

<ul>
  {#each employers as employer}
    <li>
      <a href={employer.link} target="_blank" rel="noreferrer"
        >{employer.name}</a
      >
      <p>{employer.description}</p>
    </li>
  {:else}
    <li>data perusahaan belum tersedia</li>
  {/each}
</ul>

<hr />
<h4>Ingin perusahaanmu ada di daftar kami?</h4>
<p>
  <a
    href="https://github.com/rizafahmi/carikerja"
    target="_blank"
    rel="noreferrer"
  >
    Clone repositori ini
  </a>
  dan tambahkan data baru di
  <code>src/data/employer.js</code>
  . Bisa juga edit langsung via
  <a
    href="https://github.com/rizafahmi/carikerja/edit/main/src/data/employer.js"
    target="_blank"
    rel="noreferrer"
  >
    Github
  </a>
  .
</p>


================================================
FILE: src/stores/theme.js
================================================
import {writable} from "svelte/store";

/**
 * @type {import("svelte/store").Writable<string | null>}
 */
export let theme;

if (typeof window !== "undefined") {
  theme = writable(localStorage.getItem("theme") || "Light");
} else {
  theme = writable(null);
}

theme.subscribe((val) => {
  if (typeof window !== "undefined") {
    if (val === "Dark") {
      window.document.body.classList.add("dark-mode");
    } else {
      window.document.body.classList.remove("dark-mode");
    }
  }
});


================================================
FILE: svelte.config.js
================================================
import adapter from "@sveltejs/adapter-auto";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    alias: {
      $src: "src",
    },
  },
};

export default config;


================================================
FILE: tests/home.test.js
================================================
import {test, expect} from "@playwright/test";
import {HomePage} from "./pages/home.page.js";

test.describe("Cari Kerja Home Page E2E Test", () => {
  test.beforeEach(async ({page}) => {
    const homePage = new HomePage(page);
    await homePage.open();
    expect(await page.textContent("h4")).toBe(
      "Kata siapa cari software engineer yang berpengalaman itu susah?",
    );
  });

  test("user should be able to filter using location", async ({page}) => {
    const homePage = new HomePage(page);
    await homePage.filterByLocation("bandung");
  });
});


================================================
FILE: tests/pages/home.page.js
================================================
import {expect} from "@playwright/test";

export class HomePage {
  /**
   * @param { import('@playwright/test').Page} page
   */

  constructor(page) {
    this.page = page;
    this.inputLocation = page.locator("#inputLocation");
    this.listLocation = page.locator("#listLocation");
  }

  async open() {
    await this.page.goto("/");
  }

  /**
   * @param {string} location
   */
  async filterByLocation(location) {
    await this.inputLocation.click();
    await this.inputLocation.fill(location);
    await this.page.keyboard.press("Enter");
    for (const li of await this.listLocation.all()) {
      expect(li).toContainText(location, {ignoreCase: true});
    }
  }
}


================================================
FILE: vite.config.js
================================================
import {sveltekit} from "@sveltejs/kit/vite";

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  test: {
    include: ["src/**/*.{test,spec}.{js,ts}"],
  },
};

export default config;