{"id":18255910,"url":"https://github.com/nothingnothings/artgaragewebpackversion","last_synced_at":"2026-05-05T04:09:30.107Z","repository":{"id":58731468,"uuid":"533146673","full_name":"nothingnothings/ArtGarageWebpackVersion","owner":"nothingnothings","description":"Fictional art announcement website, single-page, built with vanilla HTML5, CSS3 and JavaScript (with Webpack workflow and GitHub Actions usage).","archived":false,"fork":false,"pushed_at":"2024-10-02T21:43:02.000Z","size":1925,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T22:23:51.722Z","etag":null,"topics":["css","css3","desktop","flexbox","frontend","github-actions","html","html5","javascript","mobile","single-page-site","webpack"],"latest_commit_sha":null,"homepage":"https://nothingnothings.github.io/ArtGarageWebpackVersion/","language":"CSS","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/nothingnothings.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-09-06T03:28:29.000Z","updated_at":"2024-10-02T21:43:05.000Z","dependencies_parsed_at":"2024-11-05T10:35:10.361Z","dependency_job_id":null,"html_url":"https://github.com/nothingnothings/ArtGarageWebpackVersion","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nothingnothings/ArtGarageWebpackVersion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FArtGarageWebpackVersion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FArtGarageWebpackVersion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FArtGarageWebpackVersion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FArtGarageWebpackVersion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nothingnothings","download_url":"https://codeload.github.com/nothingnothings/ArtGarageWebpackVersion/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FArtGarageWebpackVersion/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265327827,"owners_count":23747789,"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":["css","css3","desktop","flexbox","frontend","github-actions","html","html5","javascript","mobile","single-page-site","webpack"],"created_at":"2024-11-05T10:19:03.416Z","updated_at":"2026-05-05T04:09:25.087Z","avatar_url":"https://github.com/nothingnothings.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![ArtGarage](/src/assets/images/ArtGarage.png)\n\n# ArtGarage\n\nFrontend App built with vanilla HTML, CSS and Javascript. Flexbox and media queries were used for the responsive design (attempting to cater to multiple device types, both desktop and mobile, with different resolutions). \n\nThe webApp was bundled with Webpack and deployed with `gh-pages`, assisted by the GitHub Actions feature. It can be accessed [here](https://nothingnothings.github.io/ArtGarageWebpackVersion/).\n\n![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/nothingnothings/ArtGarageWebpackVersion/master?style=flat-square)\n[![en](https://img.shields.io/badge/lang-en-red.svg?style=flat-square)](https://github.com/nothingnothings/ArtGarageWebpackVersion)\n[![pt-br](https://img.shields.io/badge/lang-pt--br-green.svg?style=flat-square)](https://github.com/nothingnothings/ArtGarageWebpackVersion/blob/master/README.pt-br.md)\n\n\n## Technologies\n\nSome of the Languages and Libraries employed:\n\n- HTML5\n- CSS3 (besides animations, mainly Flexbox and common styles, with media queries for adjustments)\n- Vanilla JavaScript (no JavasScript frameworks; usage of `var`, normal functions and common eventListeners)\n\n## Project Directory Structure \n\nThe development environment (with the use of a Webpack workflow):\n\n```\n.\\\n│\n├── src\\\n│   │\n│   ├── assets\\\n│   │   │\n│   │   ├── css\\\n│   │   │   └── style.css\n│   │   │\n│   │   └── images\\\n│   │       ├── ArtGarage.png\n│   │       ├── about1.jpg\n│   │       ├── about2.jpg\n│   │       ├── favicon.ico\n│   │       ├── products1.jpg\n│   │       ├── products2.jpg\n│   │       └── products3.jpg\n│   │\n│   │\n│   ├── js\\\n│   │   └── index.js\n│   │\n│   └── index.html\n│\n├── .gitignore\n├── README.md\n├── package-lock.json\n├── package.json\n└── webpack.config.js\n\n```\n\nThe Webpack workflow's production output, as shown in the gh-pages branch (tasked with the deployment of the app):\n\n\n```\n.\\\n│\n├── assets\\\n│   │\n│   └── images\\\n│       ├── about1.jpg\n│       ├── about2.jpg\n│       ├── favicon.ico\n│       ├── products1.jpg\n│       ├── products2.jpg\n│       └── products3.jpg\n│\n│\n├── .nojekyll\n├── bundle.js\n└── index.html\n```\n\n## Webpack and Project Configuration Files\n\nThe webpack.config.js file used in the project:\n\n```\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nconst { CleanWebpackPlugin } = require('clean-webpack-plugin');\nconst path = require('path');\n\nmodule.exports = {\n  entry: './src/js/index.js',\n\n  mode: 'production',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n    assetModuleFilename: (pathData) =\u003e {\n      const filePath = path\n        .dirname(pathData.filename)\n        .split('/')\n        .slice(1)\n        .join('/');\n      return `${filePath}/[name][ext]`;\n    },\n  },\n  resolve: {\n    extensions: ['.js'],\n  },\n\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: ['style-loader', 'css-loader'],\n      },\n      {\n        test: /\\.(woff|woff2|ttf|eot)$/,\n        type: 'asset/resource',\n      },\n\n      {\n        test: /\\.(?:ico|gif|png|jpg|jpeg|svg|xml|webmanifest)$/i,\n        type: 'asset/resource',\n      },\n    ],\n  },\n\n  plugins: [\n    new HtmlWebpackPlugin({\n      filename: 'index.html',\n      template: 'src/index.html',\n    }),\n    new CleanWebpackPlugin(),\n  ],\n\n  performance: {\n    hints: false,\n  },\n};\n```\n\nThe package.json file:\n\n```\n{\n  \"name\": \"projetoartgaragewebpack\",\n  \"version\": \"1.0.0\",\n  \"description\": \"![ArtGarage](/images/ArtGarage.png)\",\n  \"main\": \"src/js/index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\",\n    \"build:prod\": \"webpack\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"clean-webpack-plugin\": \"^4.0.0\",\n    \"css-loader\": \"^6.7.1\",\n    \"file-loader\": \"^6.2.0\",\n    \"html-webpack-plugin\": \"^5.5.0\",\n    \"style-loader\": \"^3.3.1\",\n    \"webpack\": \"^5.74.0\",\n    \"webpack-cli\": \"^4.10.0\"\n  }\n}\n```\n\n## Setup\n\nTo use this project, clone it using Git:\n\n1. Run `git clone` to clone the project into your local Git repository\n2. Run `npm install` to install all dependencies\n3. Run `npm run build:prod` to create the production version of the app (outputted in `/dist`)\n4. Serve the production files locally (e.g. webpack-dev-server), or on the web, with the help of a hosting provider\n\n## Features\n\n- SPA (Single-Page Application)-inspired webApp\n- Responsive design (mobile and desktop) created with Flexbox and media queries\n- Addition/removal of CSS classes (\"slide-in\" animation) implemented with JavaScript\n- Usage of GitHub Actions and GitHub Pages with Webpack, for a seamless workflow (transition from development stage to production/deployment stage). Upon the `git push command`, GitHub Actions transfers the contents of the master branch into the `gh-pages` branch, which then deploys the app at https://nothingnothings.github.io/ArtGarageWebpackVersion/.\n- Custom favicon, compatible with multiple devices\n\n\n## Inspiration\n\nThis app was based on the \"CSS Flexbox\" course provided by Origamid.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingnothings%2Fartgaragewebpackversion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnothingnothings%2Fartgaragewebpackversion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingnothings%2Fartgaragewebpackversion/lists"}