├── .astro └── settings.json ├── .github ├── FUNDING.yml ├── actions │ └── build-template-action │ │ ├── action.yml │ │ └── script.sh └── workflows │ ├── deploy.yml │ ├── release.yml │ └── standard-version.yml ├── .gitignore ├── .npmrc ├── .vscode ├── extensions.json ├── launch.json └── settings.json ├── CHANGELOG.md ├── Dockerfile ├── Dockerfile.api ├── LICENSE.md ├── README.md ├── astro.config.mjs ├── bulma-css-vars.config.cjs ├── db.json ├── docker-compose.dev.yml ├── docker-compose.yml ├── nginx └── alpinejs.conf ├── package.json ├── pnpm-lock.yaml ├── postcss.config.cjs ├── public ├── api │ └── search.json └── img │ ├── avatars │ ├── 1.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 21.jpg │ ├── 22.jpg │ ├── 23.jpg │ ├── 24.jpg │ ├── 25.jpg │ ├── 26.jpg │ ├── 27.jpg │ ├── 3.jpeg │ ├── 4.jpg │ └── 7.jpg │ ├── companies │ ├── airbnb.svg │ ├── atlassian.svg │ ├── dribbble.svg │ ├── facebook.svg │ ├── github-icon.svg │ ├── github.svg │ ├── gitlab.svg │ ├── google.svg │ ├── hubspot.svg │ ├── slack.svg │ └── taiga.svg │ ├── favicon.png │ ├── illustrations │ ├── feature-1-dark.svg │ ├── feature-1.svg │ ├── feature-2-dark.svg │ ├── feature-2.svg │ ├── feature-3.gif │ └── no-results.svg │ ├── logo │ ├── brands │ │ ├── bitbreaker-dark.svg │ │ ├── bitbreaker-light.svg │ │ ├── bitbreaker.svg │ │ ├── covenant-dark.svg │ │ ├── covenant-light.svg │ │ ├── covenant.svg │ │ ├── evently.svg │ │ ├── grubspot-dark.svg │ │ ├── grubspot-light.svg │ │ ├── grubspot.svg │ │ ├── gutwork-light.svg │ │ ├── gutwork.svg │ │ ├── infinite-dark.svg │ │ ├── infinite-light.svg │ │ ├── infinite.svg │ │ ├── kromo-dark.svg │ │ ├── kromo-light.svg │ │ ├── kromo.svg │ │ ├── livetalk-dark.svg │ │ ├── livetalk-light.svg │ │ ├── livetalk.svg │ │ ├── metamovies.svg │ │ ├── phasekit-dark.svg │ │ ├── phasekit-light.svg │ │ ├── phasekit.svg │ │ ├── powerball.svg │ │ ├── proactive-dark.svg │ │ ├── proactive-light.svg │ │ ├── proactive.svg │ │ ├── systek.svg │ │ ├── taskbot.svg │ │ ├── tower.svg │ │ ├── transfuseio.svg │ │ ├── tribe-dark.svg │ │ ├── tribe-light.svg │ │ └── tribe.svg │ ├── cssninja-white.svg │ ├── cssninja.svg │ ├── digisquad.svg │ └── logo.svg │ ├── posts │ ├── 1.jpg │ ├── 2.jpg │ └── 3.jpg │ ├── schools │ ├── 1.svg │ ├── 2.svg │ ├── 3.svg │ ├── 4.svg │ ├── 5.svg │ └── 6.svg │ ├── skills │ ├── android.svg │ ├── angular.svg │ ├── bulma.svg │ ├── csharp.svg │ ├── css3.svg │ ├── english.svg │ ├── french.svg │ ├── german.svg │ ├── html5.svg │ ├── js.svg │ ├── laravel.svg │ ├── nodejs.svg │ ├── php.svg │ ├── reactjs.svg │ ├── sass.svg │ ├── spanish.svg │ ├── swift.svg │ ├── symfony.svg │ └── vuejs.svg │ ├── tools │ ├── alfresco.svg │ ├── doc.svg │ ├── freshbooks.svg │ ├── github.svg │ ├── gitlab.svg │ ├── gulp.svg │ ├── illustrator.svg │ ├── monday.svg │ ├── photoshop.svg │ ├── ppt.svg │ ├── quickbooks.svg │ ├── sketch.svg │ ├── slack.svg │ └── xls.svg │ └── video │ ├── hands.jpeg │ ├── hands.mp4 │ ├── hands.ogv │ ├── hands.webm │ ├── poster-1.jpg │ ├── poster-1b.jpg │ ├── poster-2.jpg │ ├── poster-2b.jpg │ ├── poster-2c.jpg │ └── poster-3.jpg ├── routes.json └── src ├── components ├── Footer.astro └── Navbar.astro ├── env.d.ts ├── js ├── libs │ ├── components │ │ ├── employee │ │ │ └── employee.js │ │ ├── employees │ │ │ └── employees.js │ │ ├── index.js │ │ ├── navbar │ │ │ └── navbar.js │ │ ├── pageloader │ │ │ └── pageloader.js │ │ ├── posts │ │ │ └── posts.js │ │ ├── search │ │ │ └── searchJSON.js │ │ └── theme │ │ │ └── theme.js │ └── utils │ │ ├── api.js │ │ ├── constants.js │ │ └── utils.js └── main.js ├── layouts └── Default.astro ├── pages ├── employee.astro ├── employees.astro └── index.astro └── styles ├── abstracts └── _variables.scss ├── base ├── _all.scss ├── _base.scss ├── _button.scss ├── _card.scss ├── _hamburger.scss ├── _image.scss ├── _pageloader.scss ├── _placeholder.scss ├── _placeload.scss ├── _table.scss └── _tag.scss ├── bulma-generated ├── bulma-colors.ts ├── generated-fallback.css └── generated-vars.sass ├── components ├── _all.scss ├── navigation │ ├── _all.scss │ └── _navbar.scss └── pages │ ├── _all.scss │ └── _details.scss ├── css-variables ├── _all.scss ├── _colors-brands.scss ├── _colors-dark.scss ├── _colors-shades.scss ├── _colors.scss ├── _fonts.scss ├── _mixins.scss ├── _shadows.scss └── components │ ├── _all.scss │ ├── advanced │ ├── _all.scss │ └── _navbar.scss │ ├── base │ ├── _all.scss │ ├── _base.scss │ ├── _button.scss │ ├── _card.scss │ ├── _datepicker.scss │ ├── _dropdown.scss │ ├── _link.scss │ ├── _tag.scss │ ├── _typography.scss │ └── _wrap.scss │ ├── forms │ ├── _all.scss │ └── _input.scss │ ├── layout │ ├── _all.scss │ ├── _footer.scss │ ├── _hero.scss │ └── _section.scss │ └── misc │ ├── _all.scss │ └── _shapes.scss ├── forms ├── _all.scss ├── _input.scss └── _toggle.scss ├── layout ├── _all.scss ├── _footer.scss ├── _hero.scss └── _section.scss ├── main.scss └── utilities ├── _all.scss ├── _animations.scss ├── _helpers.scss ├── _snug.scss ├── _typography.scss └── _utilities.scss /.astro/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "_variables": { 3 | "lastUpdateCheck": 1714259334603 4 | }, 5 | "devToolbar": { 6 | "enabled": false 7 | } 8 | } -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: cssninjaStudio 2 | -------------------------------------------------------------------------------- /.github/actions/build-template-action/action.yml: -------------------------------------------------------------------------------- 1 | name: 'build template' 2 | description: 'build template archive' 3 | # We declare that the action takes two arguments in input 4 | inputs: 5 | project: 6 | description: 'Project' 7 | required: true 8 | tag: 9 | description: 'Tag' 10 | required: true 11 | # And ouput one variable that will be available by the workflow 12 | outputs: 13 | filepath: 14 | description: "template archive path" 15 | value: ${{ steps.build.outputs.filepath }} 16 | runs: 17 | using: "composite" 18 | steps: 19 | # Ensure that zip is installed 20 | - run: sudo apt-get install zip 21 | shell: bash 22 | # Here we pass our inputs to the script.sh 23 | - id: build 24 | run: ${{ github.action_path }}/script.sh ${{inputs.project}} ${{inputs.tag}} 25 | shell: bash -------------------------------------------------------------------------------- /.github/actions/build-template-action/script.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | DIRECTORY=`dirname $0` 4 | INPUT_PROJECT=$1 5 | INPUT_TAG=$2 6 | 7 | if [ -z $INPUT_PROJECT ] 8 | then 9 | echo " missing" 10 | echo "Usage: ${0} " 11 | exit 1 12 | fi 13 | 14 | if [ -z $INPUT_TAG ] 15 | then 16 | echo " missing" 17 | echo "Usage: ${0} " 18 | exit 1 19 | fi 20 | 21 | # Set archive name from arguments 22 | ARCHIVE=template-${INPUT_PROJECT}-${INPUT_TAG}.zip 23 | 24 | echo "::group::building ${ARCHIVE}" 25 | echo "::debug::${ARCHIVE}" 26 | 27 | # zip sources template-${PROJECT}-${TAG}.zip 28 | zip -r ${ARCHIVE} . \ 29 | -x "dist/*" \ 30 | -x "node_modules/*" \ 31 | -x ".git/*" \ 32 | -x ".github/*" \ 33 | -x "docker-compose.yml" 34 | 35 | # Here we use echo to ouput the variables, usefull for to debug in github ui 36 | echo "$PWD" 37 | echo "$DIRECTORY" 38 | echo "$GITHUB_WORKSPACE" 39 | 40 | ls -lh $ARCHIVE 41 | 42 | echo "::endgroup::" 43 | 44 | echo "- ${INPUT_PROJECT^} ${INPUT_TAG} template built :rocket:" >> $GITHUB_STEP_SUMMARY 45 | 46 | # This step is important, it set the "filepath" output variable 47 | # Will be accessible in workflow 48 | echo "filepath=${ARCHIVE}" >> "$GITHUB_OUTPUT" -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: release 2 | on: 3 | # Automatically run when a semver tag is pushed 4 | push: 5 | tags: 6 | - 'v*.*.*' 7 | 8 | jobs: 9 | release: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | # Checkout action retreive the source (git clone) 14 | - uses: actions/checkout@v4 15 | with: 16 | fetch-depth: 0 # needed to retreive all git history 17 | 18 | # Enable corepack, note that nodejs is already installed 19 | - run: corepack enable 20 | 21 | # Setup pnpm with cache 22 | - uses: actions/setup-node@v4 23 | with: 24 | node-version: 20 25 | cache: "pnpm" 26 | 27 | # Compute tag and capitalized product name 28 | - id: meta 29 | name: release meta 30 | run: | 31 | project=${GITHUB_REPOSITORY#*/} 32 | echo "PROJECT=${project}" >> "$GITHUB_OUTPUT" 33 | echo "PROJECT_CAP=${project^}" >> "$GITHUB_OUTPUT" 34 | echo "TAG=${GITHUB_REF#refs/tags/}" >> "$GITHUB_OUTPUT" 35 | # This is where we generate releases assets. 36 | # It use a github action in the current directory 37 | # which contains a shell script to create the archive. 38 | # The archive path is stored in the output action 39 | - id: build_template 40 | name: build release template 41 | uses: ./.github/actions/build-template-action 42 | with: 43 | tag: ${{ steps.meta.outputs.TAG }} 44 | project: ${{ steps.meta.outputs.PROJECT }} 45 | 46 | # We re-generate the changelog using a subset of standard-version 47 | # The content is generated in a temp /CHANGELOG_RELEASE.md file 48 | # It is used to generate the body of the github release 49 | - id: changelog 50 | name: release changelog 51 | run: | 52 | pnpm dlx conventional-changelog-cli -p conventionalcommits -r 2 -o ${{ github.workspace }}/CHANGELOG_RELEASE.md 53 | cat ${{ github.workspace }}/CHANGELOG_RELEASE.md 54 | # Prepare the draft github release 55 | - id: create_release 56 | name: create github draft release 57 | uses: softprops/action-gh-release@v2 58 | with: 59 | # Use outputs from meta and changelog 60 | tag_name: ${{ steps.meta.outputs.TAG }} 61 | name: ${{ steps.meta.outputs.PROJECT_CAP }} ${{ steps.meta.outputs.TAG }} 62 | body_path: ${{ github.workspace }}/CHANGELOG_RELEASE.md 63 | prerelease: false 64 | # The draft is required to allow file upload 65 | draft: true 66 | fail_on_unmatched_files: true 67 | # Here we bind files built by custom actions to the release 68 | files: | 69 | ${{ github.workspace }}/${{ steps.build_template.outputs.filepath }} 70 | # Publish the github release 71 | # Dojo listen to those events 72 | - name: publish github draft release 73 | uses: eregon/publish-release@v1 74 | env: 75 | GITHUB_TOKEN: ${{ secrets.APP_GITHUB_TOKEN }} 76 | with: 77 | release_id: ${{ steps.create_release.outputs.id }} -------------------------------------------------------------------------------- /.github/workflows/standard-version.yml: -------------------------------------------------------------------------------- 1 | name: standard-version 2 | on: 3 | # Allow to be manually dispatched 4 | workflow_dispatch: 5 | inputs: 6 | options: 7 | description: 'standard-version options' 8 | # Allow to be run via webhooks (Dojo will use this) 9 | repository_dispatch: 10 | types: [standard-version] 11 | 12 | jobs: 13 | standard-version: 14 | runs-on: ubuntu-latest 15 | 16 | steps: 17 | # Checkout action retreive the source (git clone) 18 | - uses: actions/checkout@v4 19 | with: 20 | fetch-depth: 0 # needed to retreive all git history 21 | token: ${{ secrets.APP_GITHUB_TOKEN }} 22 | 23 | # Enable corepack, note that nodejs is already installed 24 | - run: corepack enable 25 | 26 | # Setup pnpm with cache 27 | - uses: actions/setup-node@v4 28 | with: 29 | node-version: 20 30 | cache: "pnpm" 31 | 32 | # Run "standard-version", which may create a new tag 33 | - run: | 34 | git config user.name digisquad-bot 35 | git config user.email admin@digisquad.io 36 | pnpm dlx standard-version ${{ github.event.inputs.options }} 37 | git push --follow-tags origin main 38 | env: 39 | GITHUB_TOKEN: ${{ secrets.APP_GITHUB_TOKEN }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | .output/ 4 | *.zip 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # Disable npm warning about missing optional peer dependencies 2 | strict-peer-dependencies=false 3 | legacy-peer-deps=true 4 | # Force pnpm to install all deep dependencies in node_modules 5 | shamefully-hoist=true 6 | # Use v6 lockfile format 7 | use-lockfile-v6=true -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "astro.typescript.enabled": false 3 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ## [2.3.0](https://github.com/cssninjaStudio/hr/compare/v2.2.0...v2.3.0) (2024-04-27) 6 | 7 | 8 | ### Features 9 | 10 | * migrate to iconify-icon, update dependencies ([a609465](https://github.com/cssninjaStudio/hr/commit/a609465f4110f7f3778eba8e0746ae424cc8166c)) 11 | 12 | 13 | ### Bug Fixes 14 | 15 | * set absolute image paths ([9e87b0b](https://github.com/cssninjaStudio/hr/commit/9e87b0b2224bd14becb7349a0db9d0465c3cced5)) 16 | * update broken links ([080c359](https://github.com/cssninjaStudio/hr/commit/080c359cd19d7d48fdd46fbc6c763354b7c6b028)) 17 | 18 | ## [2.2.0](https://github.com/cssninjaStudio/hr/compare/v2.1.0...v2.2.0) (2023-05-03) 19 | 20 | 21 | ### Features 22 | 23 | * upgrade to astro 2 + add unplugin-fonts ([031ca7c](https://github.com/cssninjaStudio/hr/commit/031ca7cb2113298fcd68385a2c54056ade3dbabb)) 24 | 25 | 26 | ### Bug Fixes 27 | 28 | * update hr demo api url ([e510fc2](https://github.com/cssninjaStudio/hr/commit/e510fc2ecfd9a717950d404bd013b1314833dd31)) 29 | * update hr demo api url ([6dab14d](https://github.com/cssninjaStudio/hr/commit/6dab14dfda5ef65de47f9d5586097fe4e1271cae)) 30 | 31 | ## [2.1.0](https://github.com/cssninjaStudio/hr/compare/v2.0.0...v2.1.0) (2023-02-10) 32 | 33 | 34 | ### Features 35 | 36 | * upgrade to Astro v2 ([df97d32](https://github.com/cssninjaStudio/hr/commit/df97d3278aaaa26986d9f20777f327a3f2fd89a3)) 37 | 38 | ## [2.0.0](https://github.com/cssninjaStudio/hr/compare/v1.1.0...v2.0.0) (2023-01-06) 39 | 40 | 41 | ### ⚠ BREAKING CHANGES 42 | 43 | * migrate from gulp to astro 44 | 45 | ### Features 46 | 47 | * migrate from gulp to astro ([e7e2b6a](https://github.com/cssninjaStudio/hr/commit/e7e2b6a831070ddddaeda136bfbd4462cfcf40c7)) 48 | 49 | ## 1.1.0 (2022-11-28) 50 | 51 | 52 | ### Features 53 | 54 | * add demo placeholder, tidy CSS ([234a1ad](https://github.com///commit/234a1ad2792988a1329340dcb6db54e46d17f61c)) 55 | * add github actions scripts ([6ca0cd3](https://github.com///commit/6ca0cd33d257c2b98be3c18b401784064dd31039)) 56 | * update dependencies ([b3d69fd](https://github.com///commit/b3d69fdc16a1dc7c83e73818cd830b913466a154)) 57 | * update discord url ([9c590c6](https://github.com///commit/9c590c61ad5e4e1c6a7af68563c6792aa1471bf0)) 58 | * update to Alpine v3, update dependencies, add bulma css vars ([5b6f1d2](https://github.com///commit/5b6f1d2dd5589d59b453bc865c1064b4d28d009e)) 59 | * upgrade to ES module ([b6c738c](https://github.com///commit/b6c738c1cf208e93b9c573d7c0443ed41139ee45)) 60 | 61 | 62 | ### Bug Fixes 63 | 64 | * search, broken images, broken links ([13c71ee](https://github.com///commit/13c71eeead148104f0a03309bd84e2fc3944f040)) 65 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM bitnami/node:20 AS build 2 | WORKDIR /app 3 | 4 | ARG API 5 | 6 | RUN corepack enable && corepack prepare pnpm@latest --activate 7 | 8 | COPY package.json ./ 9 | COPY pnpm-lock.yaml ./ 10 | COPY .npmrc ./ 11 | RUN pnpm install --frozen-lockfile 12 | 13 | COPY . . 14 | RUN API=https://api-hr.cssninja.io/ pnpm build 15 | 16 | 17 | FROM bitnami/nginx:1.25 AS prod 18 | WORKDIR /app 19 | 20 | COPY --from=build /app/dist . 21 | COPY ./nginx/alpinejs.conf /opt/bitnami/nginx/conf/server_blocks/nginx.conf -------------------------------------------------------------------------------- /Dockerfile.api: -------------------------------------------------------------------------------- 1 | FROM bitnami/node:20 AS build 2 | WORKDIR /app 3 | 4 | RUN corepack enable && corepack prepare pnpm@latest --activate 5 | 6 | COPY package.json ./ 7 | COPY pnpm-lock.yaml ./ 8 | COPY .npmrc ./ 9 | RUN pnpm install --frozen-lockfile 10 | 11 | COPY . . 12 | 13 | EXPOSE 8090 14 | 15 | CMD ["pnpm", "server:preview"] 16 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018-2023 cssninjaStudio 4 | 5 | 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: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![HR landing Screenshot](https://media.cssninja.io/products/hr/product.png "HR landing") 2 | 3 | # HR 👋 | An awesome Bulma + Alpine JS sample app 4 | 5 | [![cssninja-discord](https://img.shields.io/discord/785473098069311510?label=join%20us%20on%20discord&color=6944EC)](https://go.cssninja.io/discord) 6 | 7 | > HR is a sample Astro + alpine JS + Bulma app built by [Css Ninja Studio](https://cssninja.io). HR is licensed under the MIT license. 8 | 9 | ## ✌️ Preview 10 | 11 | You can access the demo [here](https://cssninjastudio.github.io/hr/index.html). HR is built with [Bulma](https://bulma.io). Thanks to [Emy Lascan](https://dribbble.com/shots/14820469-wondrhub-Video-Monetization) for the homepage hero inspiration. 12 | 13 | ## 👌 Usage 14 | 15 | 1. Install depedencies 16 | 17 | ```sh 18 | pnpm i 19 | ``` 20 | 21 | 2. Run in dev mode 22 | 23 | ```sh 24 | pnpm dev 25 | ``` 26 | 27 | 3. Or build source 28 | 29 | ```sh 30 | pnpm build 31 | ``` 32 | 33 | ## 🍔 Issues 34 | 35 | If you've found an issue or a bug, you can report it in the issues section of this repository. Please try to follow these simple guidelines to report your issue: 36 | 37 | * Issue definition 38 | * Expected behaviour 39 | * Actual behaviour 40 | * steps to reproduce 41 | * Already tried fixes (if relevant) 42 | 43 | ## 🎉 More 44 | 45 | Find more premium website and webapp templates on [Css Ninja](https://cssninja.io/). 46 | 47 | ## 🚀 About Us 48 | 49 | Css Ninja is a web design studio. We build handcrafted and polished templates that will give some hype to your startup or to your next project. 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | import Unfonts from 'unplugin-fonts/astro' 3 | 4 | // https://astro.build/config 5 | export default defineConfig({ 6 | integrations: [ 7 | Unfonts({ 8 | google: { 9 | families: [ 10 | { 11 | name: 'Roboto', 12 | styles: 'wght@300;400;500;700', 13 | }, 14 | { 15 | name: 'Montserrat', 16 | styles: 'wght@400;600;700;800' 17 | }, 18 | ], 19 | }, 20 | }) 21 | ] 22 | }); 23 | -------------------------------------------------------------------------------- /bulma-css-vars.config.cjs: -------------------------------------------------------------------------------- 1 | const { hsl } = require('@cssninja/bulma-css-vars') 2 | 3 | const appColors = { 4 | white: '#fff', 5 | primary: hsl(239, 100, 59), // '#2e31ff', 6 | dark: hsl(226, 34, 24), // '#283252', 7 | link: hsl(229, 53, 53), // '#485fc7', 8 | info: hsl(200, 97, 45), // '#039be5', 9 | success: hsl(164, 95, 43), // '#06d6a0', 10 | warning: hsl(35, 95, 62), // '#faae42', 11 | danger: hsl(341, 79, 53), // '#e62965', 12 | } 13 | 14 | module.exports = { 15 | jsOutputFile: 'src/styles/bulma-generated/bulma-colors.ts', 16 | sassOutputFile: 'src/styles/bulma-generated/generated-vars.sass', 17 | cssFallbackOutputFile: 'src/styles/bulma-generated/generated-fallback.css', 18 | colorDefs: appColors, 19 | sassEntryFile: 'src/styles/main.scss', 20 | transition: null, 21 | } 22 | -------------------------------------------------------------------------------- /docker-compose.dev.yml: -------------------------------------------------------------------------------- 1 | version: '3.7' 2 | 3 | services: 4 | hr-demo: 5 | build: 6 | context: . 7 | ports: 8 | - "8080:8080" 9 | 10 | hr-api: 11 | build: 12 | context: . 13 | dockerfile: Dockerfile.api 14 | ports: 15 | - "8090:8080" 16 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | networks: 2 | cssninja-services: 3 | external: true 4 | 5 | services: 6 | hr-demo: 7 | image: digisquad/cssninja.hr-demo:latest 8 | networks: 9 | - cssninja-services 10 | restart: 'unless-stopped' 11 | labels: 12 | traefik.enable: true 13 | traefik.docker.network: 'cssninja-services' 14 | traefik.http.routers.hr-demo.entrypoints: 'http' 15 | traefik.http.routers.hr-demo.rule: 'Host(`hr.${HOST:-127.0.0.1.nip.io}`)' 16 | traefik.http.routers.hr-demo.middlewares: 'https-redirect@docker' 17 | traefik.http.routers.hr-demo.service: 'hr-demo-https' 18 | traefik.http.services.hr-demo-https.loadbalancer.server.port: 8080 19 | traefik.http.routers.hr-demo-https.rule: 'Host(`hr.${HOST:-127.0.0.1.nip.io}`)' 20 | traefik.http.routers.hr-demo-https.tls: true 21 | traefik.http.routers.hr-demo-https.entrypoints: 'https' 22 | traefik.http.routers.hr-demo-https.tls.certresolver: 'http' 23 | traefik.http.routers.hr-demo-https.service: 'hr-demo-https' 24 | 25 | hr-api: 26 | image: digisquad/cssninja.hr-api:latest 27 | networks: 28 | - cssninja-services 29 | restart: 'unless-stopped' 30 | labels: 31 | traefik.enable: true 32 | traefik.docker.network: 'cssninja-services' 33 | traefik.http.routers.hr-api.entrypoints: 'http' 34 | traefik.http.routers.hr-api.rule: 'Host(`api-hr.${HOST:-127.0.0.1.nip.io}`)' 35 | traefik.http.routers.hr-api.middlewares: 'https-redirect@docker' 36 | traefik.http.routers.hr-api.service: 'hr-api-https' 37 | traefik.http.services.hr-api-https.loadbalancer.server.port: 8090 38 | traefik.http.routers.hr-api-https.rule: 'Host(`api-hr.${HOST:-127.0.0.1.nip.io}`)' 39 | traefik.http.routers.hr-api-https.tls: true 40 | traefik.http.routers.hr-api-https.entrypoints: 'https' 41 | traefik.http.routers.hr-api-https.tls.certresolver: 'http' 42 | traefik.http.routers.hr-api-https.service: 'hr-api-https' 43 | 44 | -------------------------------------------------------------------------------- /nginx/alpinejs.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 8080; 3 | server_name 0.0.0.0; 4 | error_page 500 502 503 504 /50x.html; 5 | charset utf-8; 6 | proxy_hide_header X-Frame-Options; 7 | add_header X-Frame-Options ""; 8 | 9 | # Media: images, icons, video, audio, HTC 10 | location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff2)$ { 11 | expires 1y; 12 | access_log off; 13 | add_header Cache-Control "public"; 14 | } 15 | 16 | # CSS and Javascript 17 | location ~* \.(?:css|js)$ { 18 | expires 1y; 19 | access_log off; 20 | add_header Cache-Control "public"; 21 | } 22 | 23 | # Allow performing POST requests on static JSON files 24 | location ~* \.(?:json)$ { 25 | error_page 405 =200 $uri; 26 | } 27 | 28 | location / { 29 | root /app; 30 | index index.html; 31 | try_files $uri $uri/ /index.html; 32 | } 33 | 34 | location = /50x.html { 35 | root /usr/share/nginx/html; 36 | } 37 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hr", 3 | "version": "2.3.0", 4 | "description": "HR - Human Resources portal", 5 | "type": "module", 6 | "packageManager": "pnpm@9.0.6", 7 | "private": true, 8 | "author": { 9 | "name": "cssninjaStudio (https://cssninja.io)" 10 | }, 11 | "license": "MIT", 12 | "scripts": { 13 | "dev": "astro dev & json-server --watch db.json --routes routes.json --port 8090", 14 | "dev:astro": "astro dev", 15 | "dev:server": "json-server --watch db.json --routes routes.json --port 8090", 16 | "start": "astro dev", 17 | "build": "run-s build:*", 18 | "build:update-bulma-colors": "bulma-css-vars", 19 | "build:astro": "astro build", 20 | "preview": "astro preview", 21 | "astro": "astro", 22 | "server:preview": "json-server -q --read-only --routes routes.json --host 0.0.0.0 --port 8090 db.json" 23 | }, 24 | "dependencies": { 25 | "@alpinejs/collapse": "3.13.10", 26 | "@alpinejs/intersect": "3.13.10", 27 | "@alpinejs/persist": "3.13.10", 28 | "alpinejs": "3.13.10", 29 | "astro": "4.7.0", 30 | "axios": "1.6.8", 31 | "bulma": "0.9.4", 32 | "fuse.js": "7.0.0", 33 | "iconify-icon": "^2.0.0", 34 | "js-datepicker": "5.18.2", 35 | "lozad": "1.16.0", 36 | "moment": "2.30.1", 37 | "notyf": "3.10.0", 38 | "plyr": "3.7.8", 39 | "sass": "1.75.0", 40 | "simplebar": "6.2.5" 41 | }, 42 | "devDependencies": { 43 | "@cssninja/bulma-css-vars": "0.9.2", 44 | "autoprefixer": "10.4.19", 45 | "json-server": "0.17.3", 46 | "npm-run-all": "4.1.5", 47 | "unplugin-fonts": "1.1.1" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer'), 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /public/api/search.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "type": "user", 4 | "title": "Mary Smith", 5 | "content": "Los Angeles", 6 | "photoUrl": "/img/avatars/42.jpg", 7 | "color": null 8 | }, 9 | { 10 | "type": "user", 11 | "title": "Janet Briggs", 12 | "content": "Los Angeles", 13 | "photoUrl": null, 14 | "color": "#ff9b17" 15 | }, 16 | { 17 | "type": "user", 18 | "title": "Paul Walters", 19 | "content": "San Francisco", 20 | "photoUrl": null, 21 | "color": "#3bf486" 22 | }, 23 | { 24 | "type": "user", 25 | "title": "Kristie Wang", 26 | "content": "San Francisco", 27 | "photoUrl": null, 28 | "color": "#7938f4" 29 | }, 30 | { 31 | "type": "user", 32 | "title": "Sheryl Allen", 33 | "content": "San Diego", 34 | "photoUrl": null, 35 | "color": "#e73c7e" 36 | }, 37 | { 38 | "type": "user", 39 | "title": "Alex Walsh", 40 | "content": "Irvine", 41 | "photoUrl": "/img/avatars/2.jpg", 42 | "color": null 43 | }, 44 | { 45 | "type": "user", 46 | "title": "Adam Klinsky", 47 | "content": "Irvine", 48 | "photoUrl": "/img/avatars/6.jpg", 49 | "color": null 50 | }, 51 | { 52 | "type": "user", 53 | "title": "Christina Xi", 54 | "content": "Mystic Falls", 55 | "photoUrl": "/img/avatars/5.jpg", 56 | "color": null 57 | }, 58 | { 59 | "type": "user", 60 | "title": "Tommy Brucks", 61 | "content": "Los Angeles", 62 | "photoUrl": "/img/avatars/7.jpg", 63 | "color": null 64 | }, 65 | { 66 | "type": "user", 67 | "title": "Sally Mitchells", 68 | "content": "San Francisco", 69 | "photoUrl": "/img/avatars/21.jpg", 70 | "color": null 71 | }, 72 | { 73 | "type": "file", 74 | "title": "INV-49465", 75 | "content": "Pending invoice", 76 | "photoUrl": "/img/icons/1.svg", 77 | "color": null 78 | }, 79 | { 80 | "type": "file", 81 | "title": "INV-49789", 82 | "content": "Pending invoice", 83 | "photoUrl": "/img/icons/1.svg", 84 | "color": null 85 | }, 86 | { 87 | "type": "transaction", 88 | "title": "TR-8066", 89 | "content": "Transaction amount: + $874.99", 90 | "photoUrl": "/img/icons/2.svg", 91 | "color": null 92 | }, 93 | { 94 | "type": "transaction", 95 | "title": "TR-8067", 96 | "content": "Transaction amount: + $1042.99", 97 | "photoUrl": "/img/icons/2.svg", 98 | "color": null 99 | }, 100 | { 101 | "type": "transaction", 102 | "title": "TR-9078", 103 | "content": "Transaction amount: - $2500.00", 104 | "photoUrl": "/img/icons/2.svg", 105 | "color": null 106 | }, 107 | { 108 | "type": "transaction", 109 | "title": "TR-8066", 110 | "content": "Transaction amount: - $139.99", 111 | "photoUrl": "/img/icons/2.svg", 112 | "color": null 113 | } 114 | ] -------------------------------------------------------------------------------- /public/img/avatars/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/1.jpg -------------------------------------------------------------------------------- /public/img/avatars/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/11.jpg -------------------------------------------------------------------------------- /public/img/avatars/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/12.jpg -------------------------------------------------------------------------------- /public/img/avatars/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/13.jpg -------------------------------------------------------------------------------- /public/img/avatars/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/14.jpg -------------------------------------------------------------------------------- /public/img/avatars/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/15.jpg -------------------------------------------------------------------------------- /public/img/avatars/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/16.jpg -------------------------------------------------------------------------------- /public/img/avatars/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/17.jpg -------------------------------------------------------------------------------- /public/img/avatars/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/18.jpg -------------------------------------------------------------------------------- /public/img/avatars/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/19.jpg -------------------------------------------------------------------------------- /public/img/avatars/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/2.jpg -------------------------------------------------------------------------------- /public/img/avatars/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/20.jpg -------------------------------------------------------------------------------- /public/img/avatars/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/21.jpg -------------------------------------------------------------------------------- /public/img/avatars/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/22.jpg -------------------------------------------------------------------------------- /public/img/avatars/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/23.jpg -------------------------------------------------------------------------------- /public/img/avatars/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/24.jpg -------------------------------------------------------------------------------- /public/img/avatars/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/25.jpg -------------------------------------------------------------------------------- /public/img/avatars/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/26.jpg -------------------------------------------------------------------------------- /public/img/avatars/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/27.jpg -------------------------------------------------------------------------------- /public/img/avatars/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/3.jpeg -------------------------------------------------------------------------------- /public/img/avatars/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/4.jpg -------------------------------------------------------------------------------- /public/img/avatars/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/avatars/7.jpg -------------------------------------------------------------------------------- /public/img/companies/airbnb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/companies/atlassian.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/companies/dribbble.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/companies/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/companies/github-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/companies/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/companies/gitlab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/companies/google.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/companies/hubspot.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/companies/slack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/companies/taiga.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/favicon.png -------------------------------------------------------------------------------- /public/img/illustrations/feature-3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/illustrations/feature-3.gif -------------------------------------------------------------------------------- /public/img/logo/brands/bitbreaker-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/bitbreaker-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/bitbreaker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/covenant-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/covenant-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/covenant.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/gutwork-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/gutwork.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/infinite-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/infinite-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/infinite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/kromo-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/kromo-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/kromo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/livetalk-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/livetalk-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/livetalk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/metamovies.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/phasekit-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/phasekit-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/phasekit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/powerball.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/proactive-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/proactive-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/proactive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/systek.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/tower.svg: -------------------------------------------------------------------------------- 1 | TOWER -------------------------------------------------------------------------------- /public/img/logo/brands/transfuseio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/tribe-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/tribe-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/brands/tribe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/digisquad.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/logo/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/posts/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/posts/1.jpg -------------------------------------------------------------------------------- /public/img/posts/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/posts/2.jpg -------------------------------------------------------------------------------- /public/img/posts/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/posts/3.jpg -------------------------------------------------------------------------------- /public/img/schools/2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 19 | -------------------------------------------------------------------------------- /public/img/schools/3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 10 | -------------------------------------------------------------------------------- /public/img/skills/android.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/angular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 11 | 12 | 13 | 14 | 15 | 17 | 19 | 20 | -------------------------------------------------------------------------------- /public/img/skills/bulma.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/csharp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/css3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 13 | 14 | 16 | 18 | 19 | -------------------------------------------------------------------------------- /public/img/skills/english.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 23 | -------------------------------------------------------------------------------- /public/img/skills/french.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/img/skills/german.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/html5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/js.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/laravel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 17 | 18 | -------------------------------------------------------------------------------- /public/img/skills/nodejs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/php.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/reactjs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /public/img/skills/sass.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/spanish.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/swift.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/symfony.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/skills/vuejs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/alfresco.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/doc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/freshbooks.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/gitlab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/gulp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/illustrator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/monday.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/photoshop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/ppt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/quickbooks.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/sketch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/slack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/tools/xls.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/video/hands.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/video/hands.jpeg -------------------------------------------------------------------------------- /public/img/video/hands.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/video/hands.mp4 -------------------------------------------------------------------------------- /public/img/video/hands.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/video/hands.ogv -------------------------------------------------------------------------------- /public/img/video/hands.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/video/hands.webm -------------------------------------------------------------------------------- /public/img/video/poster-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/video/poster-1.jpg -------------------------------------------------------------------------------- /public/img/video/poster-1b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/video/poster-1b.jpg -------------------------------------------------------------------------------- /public/img/video/poster-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/video/poster-2.jpg -------------------------------------------------------------------------------- /public/img/video/poster-2b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/video/poster-2b.jpg -------------------------------------------------------------------------------- /public/img/video/poster-2c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/video/poster-2c.jpg -------------------------------------------------------------------------------- /public/img/video/poster-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cssninjaStudio/hr/e9dfb9a3579bf90a29eccc06abed332511b97a37/public/img/video/poster-3.jpg -------------------------------------------------------------------------------- /routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": "/$1", 3 | "/:resource/:id/show": "/:resource/:id", 4 | "/posts/:category": "/posts?category=:category", 5 | "/articles\\?id=:id": "/posts/:id" 6 | } -------------------------------------------------------------------------------- /src/components/Footer.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | 7 | 8 | 9 | 20 |
21 |
22 |
23 |

24 | © 2018-{new Date().getFullYear()} CSS Ninja. All rights reserved. 25 |

26 |
27 |
28 |
29 |
30 | -------------------------------------------------------------------------------- /src/components/Navbar.astro: -------------------------------------------------------------------------------- 1 | 83 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// -------------------------------------------------------------------------------- /src/js/libs/components/employee/employee.js: -------------------------------------------------------------------------------- 1 | import getBaseAPI from "../../utils/api"; 2 | import { getUrlParams } from "../../utils/utils"; 3 | 4 | const employeeId = getUrlParams("id"); 5 | console.log("ID", employeeId); 6 | 7 | export function initEmployee() { 8 | return { 9 | isLoading: true, 10 | isEmpty: false, 11 | getEmployee() { 12 | const _this = this; 13 | if (employeeId != null || employeeId != undefined) { 14 | getBaseAPI() 15 | .get(`/employees/${employeeId}`) 16 | .then((response) => { 17 | console.log(response.data); 18 | _this.employee = response.data; 19 | setTimeout(() => { 20 | _this.isLoading = false; 21 | }, 3000); 22 | }) 23 | .catch((error) => { 24 | console.log(error); 25 | }); 26 | } else { 27 | _this.isEmpty = true; 28 | } 29 | }, 30 | employee: {}, 31 | }; 32 | } 33 | -------------------------------------------------------------------------------- /src/js/libs/components/employees/employees.js: -------------------------------------------------------------------------------- 1 | import getBaseAPI from "../../utils/api"; 2 | 3 | export function initEmployees() { 4 | return { 5 | isLoading: true, 6 | getEmployees() { 7 | const _this = this; 8 | getBaseAPI() 9 | .get("/employees") 10 | .then((response) => { 11 | console.log(response.data); 12 | _this.employees = response.data; 13 | setTimeout(() => { 14 | _this.isLoading = false; 15 | }, 3000); 16 | }) 17 | .catch((error) => { 18 | console.log(error); 19 | }); 20 | }, 21 | employees: [], 22 | }; 23 | } 24 | -------------------------------------------------------------------------------- /src/js/libs/components/index.js: -------------------------------------------------------------------------------- 1 | import { initTheme } from "./theme/theme"; 2 | import { initNavbar } from "./navbar/navbar"; 3 | import { initPosts } from "./posts/posts"; 4 | import { initEmployees } from "./employees/employees"; 5 | import { initEmployee } from "./employee/employee"; 6 | 7 | window.initTheme = initTheme; 8 | window.initNavbar = initNavbar; 9 | window.initPosts = initPosts; 10 | window.initEmployees = initEmployees; 11 | window.initEmployee = initEmployee; 12 | -------------------------------------------------------------------------------- /src/js/libs/components/navbar/navbar.js: -------------------------------------------------------------------------------- 1 | import { searchJSON } from "../search/searchJSON"; 2 | 3 | const url = "https://api-hr.cssninja.io/employees"; 4 | 5 | export function initNavbar() { 6 | return { 7 | scrolled: false, 8 | height: 60, 9 | mobileOpen: false, 10 | mobileSearch: false, 11 | searchModel: "", 12 | scroll() { 13 | let scrollValue = window.scrollY; 14 | if (scrollValue >= this.height) { 15 | this.scrolled = true; 16 | } else { 17 | this.scrolled = false; 18 | } 19 | this.searchExpanded = false; 20 | }, 21 | 22 | openMobileMenu() { 23 | this.mobileOpen = !this.mobileOpen; 24 | }, 25 | searchData(e) { 26 | let searchTerm = e.target.value; 27 | const batch = searchJSON(searchTerm, url); 28 | }, 29 | toggleMobileSearch() { 30 | this.mobileSearch = !this.mobileSearch; 31 | this.searchModel = ""; 32 | }, 33 | }; 34 | } 35 | -------------------------------------------------------------------------------- /src/js/libs/components/pageloader/pageloader.js: -------------------------------------------------------------------------------- 1 | export function initPageLoader() { 2 | window.addEventListener("load", () => { 3 | const pageloader = document.getElementById("pageloader"); 4 | const infraloader = document.getElementById("infraloader"); 5 | pageloader.classList.toggle("is-active"); 6 | var pageloaderTimeout = setTimeout(function () { 7 | infraloader.classList.remove("is-active"); 8 | pageloader.classList.toggle("is-active"); 9 | clearTimeout(pageloaderTimeout); 10 | }, 1200); 11 | }); 12 | } 13 | -------------------------------------------------------------------------------- /src/js/libs/components/posts/posts.js: -------------------------------------------------------------------------------- 1 | import getBaseAPI from "../../utils/api"; 2 | 3 | export function initPosts() { 4 | return { 5 | getPosts() { 6 | const _this = this; 7 | getBaseAPI() 8 | .get("/posts") 9 | .then((response) => { 10 | console.log(response.data); 11 | _this.posts = response.data; 12 | }) 13 | .catch((error) => { 14 | console.log(error); 15 | }); 16 | }, 17 | posts: [], 18 | }; 19 | } 20 | -------------------------------------------------------------------------------- /src/js/libs/components/search/searchJSON.js: -------------------------------------------------------------------------------- 1 | export function searchJSON(searchTerm, url) { 2 | const resultsContainer = document.getElementById("search-results"); 3 | const expression = new RegExp(searchTerm, "i"); 4 | 5 | resultsContainer.innerHTML = ""; 6 | resultsContainer.classList.add("is-active"); 7 | 8 | if (searchTerm.length > 0) { 9 | fetch(url) 10 | .then((resp) => resp.json()) 11 | .then(function (data) { 12 | console.log(data); 13 | if (data.length > 0) { 14 | data.forEach(function (value, index) { 15 | if ( 16 | value.fullName.search(expression) != -1 || 17 | value.position.search(expression) != -1 18 | ) { 19 | let template = ` 20 | 21 | 22 |
23 | ${value.fullName} 24 | ${value.position} 25 |
26 | 27 | `; 28 | console.log(template); 29 | resultsContainer.innerHTML += template; 30 | } 31 | }); 32 | const results = resultsContainer.querySelectorAll(".search-result"); 33 | if (results.length === 0) { 34 | let placeholder = ` 35 |
36 |
37 | 38 |

No Matching Results

39 |

Sorry, we couldn't find any matching records. Please try different search terms.

40 |
41 |
42 | `; 43 | 44 | resultsContainer.innerHTML += placeholder; 45 | } 46 | } 47 | }) 48 | .catch(function (error) {}); 49 | } else { 50 | resultsContainer.classList.remove("is-active"); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/js/libs/components/theme/theme.js: -------------------------------------------------------------------------------- 1 | export function initTheme() { 2 | return { 3 | dark: false, 4 | toggleTheme() { 5 | //this.dark = !this.dark; 6 | this.$store.app.isDark = !this.$store.app.isDark; 7 | }, 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /src/js/libs/utils/api.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const apiServer = import.meta.env.PROD ? 'https://api-hr.cssninja.io/' : 'http://localhost:8090' 4 | 5 | export default function getBaseAPI() { 6 | return axios.create({ 7 | // to replace the url server, check gulp file on javascriptBuild 8 | baseURL: apiServer 9 | }) 10 | } -------------------------------------------------------------------------------- /src/js/libs/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const env = 'development'; -------------------------------------------------------------------------------- /src/js/libs/utils/utils.js: -------------------------------------------------------------------------------- 1 | export function getUrlParams(param) { 2 | const queryString = window.location.search; 3 | const urlParams = new URLSearchParams(queryString); 4 | return urlParams.get(param); 5 | } 6 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | //Alpine JS and plugins import 4 | import Alpine from "alpinejs"; 5 | import intersect from "@alpinejs/intersect"; 6 | import collapse from "@alpinejs/collapse"; 7 | import persist from "@alpinejs/persist"; 8 | import 'iconify-icon'; 9 | 10 | window.Alpine = Alpine; 11 | //Init intersect plugin 12 | Alpine.plugin(intersect); 13 | //Init persist plugin 14 | Alpine.plugin(persist); 15 | //Init collapse plugin 16 | Alpine.plugin(collapse); 17 | //Init store 18 | Alpine.store("app", { 19 | init() { 20 | this.isDark = window.matchMedia("(prefers-color-scheme: dark)").matches; 21 | }, 22 | isDark: Alpine.$persist(false), 23 | }); 24 | //Start Alpine JS 25 | Alpine.start(); 26 | 27 | import "./libs/components"; 28 | 29 | document.onreadystatechange = function () { 30 | if (document.readyState == "complete") { 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /src/layouts/Default.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { ViewTransitions } from 'astro:transitions'; 3 | import Unfont from 'unplugin-fonts/astro/component.astro' 4 | import Navbar from '../components/Navbar.astro' 5 | import Footer from '../components/Footer.astro' 6 | import 'simplebar/dist/simplebar.min.css' 7 | import 'plyr/dist/plyr.css' 8 | import '../styles/main.scss' 9 | const { title } = Astro.props 10 | --- 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | HR {'- ' + title} 21 | 22 | 23 | 24 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |