{"id":18070069,"url":"https://github.com/polatengin/rome","last_synced_at":"2026-04-12T07:37:27.323Z","repository":{"id":144742354,"uuid":"203024661","full_name":"polatengin/rome","owner":"polatengin","description":"Matrix style rundown","archived":false,"fork":false,"pushed_at":"2024-08-28T15:25:56.000Z","size":3645,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-04T19:46:03.687Z","etag":null,"topics":["devcontainer","dockerfile","github-actions","netlify","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://polatengin-rome.netlify.com/","language":"Dockerfile","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/polatengin.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":"2019-08-18T15:41:23.000Z","updated_at":"2020-05-01T05:54:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"3d284560-3149-470e-9969-2172604dc5dc","html_url":"https://github.com/polatengin/rome","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/polatengin/rome","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polatengin%2Frome","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polatengin%2Frome/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polatengin%2Frome/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polatengin%2Frome/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/polatengin","download_url":"https://codeload.github.com/polatengin/rome/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polatengin%2Frome/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31707953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T06:22:27.080Z","status":"ssl_error","status_checked_at":"2026-04-12T06:21:52.710Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["devcontainer","dockerfile","github-actions","netlify","typescript","webpack"],"created_at":"2024-10-31T08:24:02.017Z","updated_at":"2026-04-12T07:37:27.291Z","avatar_url":"https://github.com/polatengin.png","language":"Dockerfile","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Matrix-style rundown\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/283de46b-13c3-4b86-92fe-2fa96057cf6c/deploy-status)](https://app.netlify.com/sites/polatengin-rome/deploys)\n\n[![GitHub Actions Status](https://github.com/polatengin/rome/workflows/BuildAndPublish/badge.svg)](https://github.com/polatengin/rome/workflows/ci-and-cd)\n\nYou can use the running version of this project at [https://polatengin-rome.netlify.com/](https://polatengin-rome.netlify.com/)\n\nThe reasons I made this project;\n\n* To learn how to inject _javascript_ and _css_ into an _html_ page by configuring [Webpack](https://github.com/webpack/webpack) and [PostCSS](https://github.com/postcss/postcss)\n\n* To understand the steps of loading and using a custom font into a web page\n\n* Create and run a pipeline with [GitHub Actions](https://github.com/features/actions)\n\n* Gain the habit of project development within [VS Code DevContainer](https://code.visualstudio.com/docs/remote/containers)\n\n* Develop _keyframe_ animations with _CSS_\n\nTechnologies I used in this project are;\n\n* Typescript\n* Webpack\n  * PostCSS\n* GitHub Actions\n* Docker\n* Netlify\n* DevContainers\n\nTo create the project, let's run the following command in an empty directory\n\n```bash\nnpm init --force\n```\n\nFirst of all, we're gonna create [./src/index.html](./src/index.html) file and then add a _div_ element in it with `scene` _id_ value.\n\n```html\n\u003cdiv id=\"scene\"\u003e\u003c/div\u003e\n```\n\nNow we can create [./src/index.css](./src/index.css) file and make all _body_ element has [Matrix Code NFI](https://www.cufonfonts.com/font/matrix-code-nfi) as font.\n\n```css\n@font-face {\n  font-family: 'Matrix Code NFI';\n  font-style: normal;\n  font-weight: normal;\n  src: local('Matrix Code NFI'), url('matrix_code_nfi.woff') format('woff');\n}\nbody {\n  margin:0;\n  padding: 0;\n  background-color: #000;\n  font-family: 'Matrix Code NFI';\n  font-size: 3em;\n  overflow: hidden;\n}\n```\n\nAlso, we need to define _keyframe_ animation in the [./src/index.css](./src/index.css) file and we'll apply the animation to all elements that have `.fall-down` css class.\n\n```css\n@keyframes fall-down {\n  from {\n    transform: translateY(-2em);\n  }\n  to {\n    transform : translateY(100vh);\n  }\n}\n.fall-down {\n  animation: fall-down 3s linear forwards;\n}\n```\n\nNow, we can create [./src/index.ts](./src/index.ts) file, we're gonna have have 2 main methods in this file.\n\n* `createRunDownColumn()` method will create columns\n\n```typescript\nfunction createRunDownColumn(): HTMLDivElement {\n  const div = document.createElement('div');\n  div.className = 'column';\n\n  scene.appendChild(div);\n\n  return div;\n}\n```\n\n* `createRunDownAnimation()` method will add rundown animations in columns.\n\n```typescript\nfunction createRunDownAnimation(div: HTMLDivElement) {\n  const interval = (Math.random() * 10) + 200;\n  setInterval(() =\u003e {\n    let randomCharacter = 32;\n    if (Math.random() \u003e 0.45) {\n      randomCharacter = Math.floor(Math.random() * 25) + 97;\n    }\n\n    const span = document.createElement('span');\n    span.style.opacity = (Math.random() + 0.2) + '';\n    span.innerText = String.fromCharCode(randomCharacter);\n    span.className = 'fall-down';\n\n    if (Math.random() \u003e 0.85) {\n      span.classList.add('white');\n    }\n\n    div.insertBefore(span, div.firstChild);\n\n    let spans = div.getElementsByTagName('span');\n    for (let index = spans.length - 1; index \u003e= 20; index--) {\n      div.removeChild(spans[index]);\n    }\n  }, interval);\n}\n```\n\nAll we need to do is calling `createRunDownAnimation()` method as much as we want.\n\n```typescript\nfor (let index = 0; index \u003c columnCount; index++) {\n  const div = createRunDownColumn();\n\n  createRunDownAnimation(div);\n}\n```\n\nAlso we're providing the same editor settings to the developers (_space/tab_, _end-of-line-character_, etc.) with the [.editorconfig](./.editorconfig) file.\n\nIn the [tsconfig.json](./tsconfig.json) file, we give the `compilerOptions.outDir` property a value of `./dist`, so that when the [webpack](https://webpack.js.org/) compiles, the compiled files will be created in the `./dist` folder.\n\nWe added the following `plugins` into the [webpack.config.js](./webpack.config.js) file\n\n* With [CopyWebpackPlugin](https://webpack.js.org/plugins/copy-webpack-plugin/), we can copy files based on their extensions\n\n* With [HtmlMinifierPlugin](https://www.npmjs.com/package/html-minifier-webpack-plugin), we can compress the html files\n\n* With [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/), the `bundle.js` file that is generated by compiling the `ts` files, and it's added into the [index.html](./src/index.html) file\n\nAlso, with the [hash](https://github.com/jantimon/html-webpack-plugin#options) option of the [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/) plugin, we added the compiled ts files into the [index.html](./src/index.html) as `bundle.js?{HASH}`.\n\nThanks to _Multi-Layered_ and _Multi-Staged_ [Dockerfile](./Dockerfile), we compile the project on [node:13.10.1-buster](https://hub.docker.com/_/node/) image, then move all compiled files to [nginx:1.17.0-alpine](https://hub.docker.com/_/nginx/) image.\n\nIn the end, we have a _Docker Image_ that takes about _20MB_ in size.\n\nIf you want to try it on your machine;\n\n```bash\ngit clone https://github.com/polatengin/rome.git\n\ncd rome\n\ndocker build -t rome:latest .\n\ndocker run -d -it -p 8080:80 rome:latest\n```\n\nor\n\n```bash\ndocker run -d -it -p 8080:80 polatengin/rome:latest\n```\n\n![Sample Screenshot](./assets/sample-screenshot.gif \"Sample Screenshot\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolatengin%2Frome","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolatengin%2Frome","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolatengin%2Frome/lists"}