{"id":27733734,"url":"https://github.com/pixel-point/pixelpoint-website","last_synced_at":"2025-04-28T13:00:18.455Z","repository":{"id":37092487,"uuid":"456574794","full_name":"pixel-point/pixelpoint-website","owner":"pixel-point","description":"Design and development of JAMStack-based marketing websites","archived":false,"fork":false,"pushed_at":"2025-03-24T13:59:47.000Z","size":148244,"stargazers_count":55,"open_issues_count":3,"forks_count":11,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-24T14:41:13.965Z","etag":null,"topics":["gatsby","jamstack","jamstack-site","react","rive","tailwindcss"],"latest_commit_sha":null,"homepage":"https://pixelpoint.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixel-point.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-07T15:57:48.000Z","updated_at":"2025-03-24T13:59:50.000Z","dependencies_parsed_at":"2025-01-27T10:36:16.303Z","dependency_job_id":null,"html_url":"https://github.com/pixel-point/pixelpoint-website","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"pixel-point/gatsby-tailwind-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixel-point%2Fpixelpoint-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixel-point%2Fpixelpoint-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixel-point%2Fpixelpoint-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixel-point%2Fpixelpoint-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixel-point","download_url":"https://codeload.github.com/pixel-point/pixelpoint-website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251319598,"owners_count":21570426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","jamstack","jamstack-site","react","rive","tailwindcss"],"created_at":"2025-04-28T13:00:17.699Z","updated_at":"2025-04-28T13:00:18.440Z","avatar_url":"https://github.com/pixel-point.png","language":"JavaScript","readme":"\u003ch1 align=\"left\"\u003e\n  Pixel Point — Web Design and Development\n\u003c/h1\u003e\n\n\u003cp align=\"left\"\u003e\n\u003ca href=\"https://twitter.com/intent/follow?screen_name=alex_barashkov\"\u003e\n  \u003cimg alt=\"Follow on Twitter\" src=\"https://img.shields.io/twitter/follow/alex_barashkov?color=%23ee2b6c\u0026label=Follow%20Pixel%20Point%20on%20Twitter\u0026labelColor=black\u0026logoColor=%23ee2b6c\u0026style=for-the-badge\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.pixelpoint.io\"\u003e\n    \u003cimg alt=\"Gatsby\" src=\"https://pixelpoint.io/images/social-preview.jpg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n- [Welcome](#welcome)\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n  - [Run the website](#run-the-website)\n  - [Build the website](#build-the-website)\n  - [Run the built website](#run-the-built-website)\n  - [Clean Gatsby cache](#clean-gatsby-cache)\n- [Project Structure](#project-structure)\n- [Component Folder Structure](#component-folder-structure)\n  - [Each component includes](#each-component-includes)\n  - [Each component optionally may include](#each-component-optionally-may-include)\n  - [Example structure](#example-structure)\n- [Code Style](#code-style)\n  - [ESLint](#eslint)\n  - [Prettier](#prettier)\n  - [VS Code](#vs-code)\n- [Contribution](#contribution)\n\n## Welcome\n\nHello there! This repo is a home to Pixel Point, a web agency that designs and develops world-class marketing websites. We made this codebase available to open source community so everyone can get something useful out of our expertise, be it for project structure, code patterns or plugins.\n\nBelow you will find some basic information about how to work with this project. If you've spotted a bug, a copywriting mistake or just want to suggest some better solution, please, refer to the [contribution](#contribution) section.\n\n## Getting Started\n\n1. Clone repository\n\n```bash\ngit clone git@github.com:pixel-point/pixelpoint-website.git\n```\n\n2. Install dependencies\n\n```bash\nnpm install\n```\n\n3. Add `.env` file\n\n```bash\ncp .env.example .env\n```\n\n## Usage\n\n### Run the website\n\n```bash\nnpm run start\n```\n\n### Build the website\n\n```bash\nnpm run build\n```\n\n### Run the built website\n\n```bash\nnpm run serve\n```\n\n### Clean Gatsby cache\n\n```bash\nnpm run clean\n```\n\n## Project Structure\n\n```text\n├── content\n│   ├── case-studies\n│   └── posts\n├── src\n│   ├── components\n│   │   ├── pages — React components that are being used specifically on a certain page\n│   │   └── shared — React components that are being used across the whole website\n│   ├── constants\n│   ├── hooks\n│   ├── images\n│   ├── pages\n│   ├── styles\n│   ├── templates\n│   ├── utils\n│   └── html.jsx\n├── static\n│   ├── animations\n│   │   ├── pages — Rive animation files that are being used specifically on a certain page\n│   │   └── shared — Rive animation files that are being used across the whole website\n│   ├── fonts\n│   └── images\n├── gatsby-browser.js\n├── gatsby-config.js\n├── gatsby-node.js\n├── gatsby-ssr.js\n└── tailwind.config.js\n```\n\n## Component Folder Structure\n\n### Each component includes\n\n1. Main JavaScript File\n2. Index File\n\n### Each component optionally may include\n\n1. Folder with images and icons\n2. Folder with data\n\nAlso, each component may include another component that follows all above listed rules.\n\n### Example structure\n\n```bash\ncomponent\n├── nested-component\n│  ├── data\n│  │  └── nested-component-lottie-data.json\n│  ├── images\n│  │  ├── nested-component-image.jpg\n│  │  ├── nested-component-inline-svg.inline.svg\n│  │  └── nested-component-url-svg.svg\n│  ├── nested-component.js\n│  └── index.js\n├── data\n│  └── component-lottie-data.json\n├── images\n│  ├── component-image.jpg\n│  ├── component-inline-svg.inline.svg\n│  └── component-url-svg.svg\n├── component.js\n└── index.js\n```\n\n## Code Style\n\n### ESLint\n\n[ESLint](https://eslint.org/) helps find and fix code style issues and force developers to follow same rules. Current configuration is based on [Airbnb style guide](https://github.com/airbnb/javascript).\n\nAdditional commands:\n\n```bash\nnpm run lint\n```\n\nRun it to check the current status of eslint issues across project.\n\n```bash\nnpm run lint:fix\n```\n\nRun it to fix all possible issues.\n\n### Prettier\n\n[Prettier](https://prettier.io/) helps to format code based on defined rules. [Difference between Prettier and ESLint](https://prettier.io/docs/en/comparison.html).\n\nAdditional commands:\n\n```bash\nnpm run format\n```\n\nRun it to format all files across the project.\n\n### VS Code\n\nFollowing extensions required to simplify the process of keeping the same code style across the project:\n\n- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n\nAfter installation enable \"ESLint on save\" by adding to your VS Code settings.json the following line:\n\n```json\n\"editor.codeActionsOnSave\": {\n  \"source.fixAll.eslint\": true\n}\n```\n\nYou can navigate to settings.json by using Command Pallete (CMD+Shift+P) and then type \"Open settings.json\".\n\nTo enable Prettier go to Preferences -\u003e Settings -\u003e type \"Format\". Then check that you have esbenp.prettier-vscode as default formatter, and also enable \"Format On Save\".\n\nReload VS Code and auto-format will work for you.\n\n## Tips \u0026 Tricks\n\nIn order to generate a poster for a video you can use ffmpeg tool. Modify `00:00:01.000` timecode option to get a desired poster quality.\n\n```bash\nffmpeg -i https://pixel-point-website.s3.amazonaws.com/posts/2022-06-20-motion-morning-3/9.mp4 -ss 00:00:01.000 -vframes 1 video-cover-1.jpg\n```\n\n## Contribution\n\nContribution is highly welcomed!\n\nIf there is a bug you've encountered, an occasional typo or just want to ask something, don't hesitate to raise and issue or even make a PR.\n\nThere are no special contribution guidelines, just use your common sense, keep your changes cohesive with the overall code style and leverage the project info above.\n\nWhen raising an issue or making a pull request, please do use appropriate labels.\n\nThank you!\n\n## License\n\nAll assets and code are under the [MIT LICENSE](/LICENSE) and in the public domain unless specified otherwise.\n\nThe client logos are trademarks of their respective companies and are under their terms and license.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixel-point%2Fpixelpoint-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixel-point%2Fpixelpoint-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixel-point%2Fpixelpoint-website/lists"}