├── .github └── workflows │ ├── azure-static-web-apps-agreeable-pond-087f7a90f.yml │ └── gh-pages.yml ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── conf └── default.conf ├── deploy ├── vite.config.gh-pages.js └── vite.config.main.js ├── docker-compose.yml ├── images ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── github-logo-20.svg ├── github-logo-40.svg ├── github-profile-header-generator-demo-poster.png ├── github-profile-header-generator-demo.webm └── icons │ ├── center-align.svg │ ├── close.svg │ ├── info.svg │ ├── left-align.svg │ ├── product-hunt.svg │ └── right-align.svg ├── index.html ├── js ├── default-theme.js ├── main.js ├── tabs.js ├── toolbox-background.js ├── toolbox-decorations.js ├── toolbox-main.js └── utils │ ├── background-patterns.js │ ├── fonts.js │ └── themes.js ├── package-lock.json ├── package.json ├── public ├── fonts │ ├── Athiti-Regular.ttf │ ├── Courgette-Regular.ttf │ ├── DellaRespira-Regular.ttf │ ├── IstokWeb-Regular.ttf │ ├── Kalam-Regular.ttf │ ├── Lancelot-Regular.ttf │ ├── Lato-Regular.ttf │ ├── LifeSavers-Regular.ttf │ ├── Martel-Regular.ttf │ ├── MavenPro-Regular.ttf │ ├── Playball-Regular.ttf │ ├── Poppins-Regular.ttf │ ├── Quattrocento-Regular.ttf │ └── Ubuntu-Regular.ttf ├── gphg-logo.png ├── images │ ├── decorations │ │ ├── apple-thumbnail.png │ │ ├── apple.png │ │ ├── binary-code-thumbnail.png │ │ ├── binary-code.png │ │ ├── code-thumbnail.png │ │ ├── code.png │ │ ├── coding-screen-thumbnail.png │ │ ├── coding-screen.png │ │ ├── coding-thumbnail.png │ │ ├── coding.png │ │ ├── dev-badge-thumbnail.png │ │ ├── dev-badge.png │ │ ├── dev-rainbow-thumbnail.png │ │ ├── dev-rainbow.png │ │ ├── dev-white-thumbnail.png │ │ ├── dev-white.png │ │ ├── github-mark-thumbnail.png │ │ ├── github-mark.png │ │ ├── idea-thumbnail.png │ │ ├── idea.png │ │ ├── my-octocat-thumbnail.png │ │ ├── my-octocat.png │ │ ├── octocat-thumbnail.png │ │ ├── octocat.png │ │ ├── programming-thumbnail.png │ │ ├── programming.png │ │ ├── rocket-thumbnail.png │ │ ├── rocket.png │ │ ├── tabs-thumbnail.png │ │ ├── tabs.png │ │ ├── terminal-circle-thumbnail.png │ │ ├── terminal-circle.png │ │ ├── terminal-thumbnail.png │ │ └── terminal.png │ └── patterns │ │ ├── bubbles-thumbnail.svg │ │ ├── bubbles.svg │ │ ├── circuit-board-thumbnail.svg │ │ ├── circuit-board.svg │ │ ├── endless-clouds-thumbnail.svg │ │ ├── endless-clouds.svg │ │ ├── endless-constellation-thumbnail.svg │ │ ├── endless-constellation.svg │ │ ├── falling-triangles-thumbnail.svg │ │ ├── falling-triangles.svg │ │ ├── floating-cogs-thumbnail.svg │ │ ├── floating-cogs.svg │ │ ├── github-thumbnail.svg │ │ ├── github.svg │ │ ├── glamorous-thumbnail.svg │ │ ├── glamorous.svg │ │ ├── i-like-food-thumbnail.svg │ │ ├── i-like-food.svg │ │ ├── jigsaw-thumbnail.svg │ │ ├── jigsaw.svg │ │ ├── leaf-thumbnail.svg │ │ ├── leaf.svg │ │ ├── lisbon-thumbnail.svg │ │ ├── lisbon.svg │ │ ├── overlapping-circles-thumbnail.svg │ │ ├── overlapping-circles.svg │ │ ├── random-shapes-thumbnail.svg │ │ ├── random-shapes.svg │ │ ├── temple-thumbnail.svg │ │ ├── temple.svg │ │ ├── topography-thumbnail.svg │ │ └── topography.svg ├── robots.txt ├── site.webmanifest └── sitemap.xml ├── social ├── examples │ ├── example-1.png │ ├── example-2.png │ ├── example-3.png │ ├── example-4.png │ └── example-5.png ├── repo-header-image.png ├── social-preview-small.png └── social-preview.png ├── styles ├── how-to.scss ├── index.scss ├── main.scss ├── modals.scss ├── reset.scss ├── tabs.scss ├── toolbox-background.scss ├── toolbox-decorations.scss ├── toolbox-main.scss └── variables.scss └── vite.config.js /.github/workflows/azure-static-web-apps-agreeable-pond-087f7a90f.yml: -------------------------------------------------------------------------------- 1 | name: Azure Static Web Apps CI/CD 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | paths-ignore: 8 | - '**/*.md' 9 | pull_request: 10 | types: [opened, synchronize, reopened, closed] 11 | branches: 12 | - main 13 | paths-ignore: 14 | - '**/*.md' 15 | 16 | jobs: 17 | build_and_deploy_job: 18 | if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') 19 | runs-on: ubuntu-latest 20 | name: Build and Deploy Job 21 | steps: 22 | - uses: actions/checkout@v2 23 | with: 24 | submodules: true 25 | - name: Build And Deploy 26 | id: builddeploy 27 | uses: Azure/static-web-apps-deploy@v1 28 | with: 29 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AGREEABLE_POND_087F7A90F }} 30 | repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) 31 | action: "upload" 32 | ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### 33 | # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig 34 | app_location: "/" # App source code path 35 | # api_location: "" # Api source code path - optional 36 | output_location: "dist" # Built app content directory - optional 37 | app_build_command: "npm run build" 38 | ###### End of Repository/Build Configurations ###### 39 | 40 | close_pull_request_job: 41 | if: github.event_name == 'pull_request' && github.event.action == 'closed' 42 | runs-on: ubuntu-latest 43 | name: Close Pull Request Job 44 | steps: 45 | - name: Close Pull Request 46 | id: closepullrequest 47 | uses: Azure/static-web-apps-deploy@v1 48 | with: 49 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AGREEABLE_POND_087F7A90F }} 50 | action: "close" 51 | -------------------------------------------------------------------------------- /.github/workflows/gh-pages.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy for GH Pages 2 | on: 3 | push: 4 | branches: 5 | - main 6 | paths-ignore: 7 | - '**/*.md' 8 | pull_request: 9 | types: [opened, synchronize, reopened, closed] 10 | branches: 11 | - main 12 | paths-ignore: 13 | - '**/*.md' 14 | jobs: 15 | build-and-deploy: 16 | concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession. 17 | runs-on: ubuntu-latest 18 | steps: 19 | - name: Checkout 🛎️ 20 | uses: actions/checkout@v3 21 | 22 | - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built. 23 | run: | 24 | npm ci 25 | npm run build:gh-pages 26 | 27 | - name: Deploy 🚀 28 | uses: JamesIves/github-pages-deploy-action@v4.2.5 29 | with: 30 | branch: gh-pages # The branch the action should deploy to. 31 | folder: dist # The folder the action should deploy. 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # Build 2 | FROM node:18-alpine AS build 3 | 4 | WORKDIR /usr/src/app 5 | 6 | COPY package.json package-lock.json ./ 7 | 8 | RUN npm install 9 | 10 | COPY . . 11 | 12 | RUN npm run build 13 | 14 | # Setup nginx 15 | FROM nginx:1.21.6-alpine 16 | COPY conf/default.conf /etc/nginx/conf.d/ 17 | COPY --from=build /usr/src/app/dist /usr/share/nginx/html 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Leví Arista 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # Github Profile Header Generator 4 | 5 | ## What is it? 6 | 7 | A simple but nice header image generator for your Github profile Readme. [Website Link](https://leviarista.github.io/github-profile-header-generator/). 8 | 9 | ## How to use it? 10 | 1. Create a nice github header image. 11 | 2. Create your GitHub profile README following [this guide](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme). 12 | 3. Upload your header to your profile repo. 13 | 4. Add this line to your README: 14 | ```` Markdown 15 | ![Header](./[Your header image]) 16 | ```` 17 | 18 | ## Examples 19 | 20 | ![Example 1](https://raw.githubusercontent.com/leviarista/github-profile-header-generator/main/social/examples/example-1.png) 21 | ![Example 2](https://raw.githubusercontent.com/leviarista/github-profile-header-generator/main/social/examples/example-2.png) 22 | ![Example 3](https://raw.githubusercontent.com/leviarista/github-profile-header-generator/main/social/examples/example-3.png) 23 | ![Example 4](https://raw.githubusercontent.com/leviarista/github-profile-header-generator/main/social/examples/example-4.png) 24 | ![Example 5](https://raw.githubusercontent.com/leviarista/github-profile-header-generator/main/social/examples/example-5.png) 25 | 26 | ## Features list 27 | 28 | - Edit title and subtitle texts. 29 | - Choose colors for text, background and borders. 30 | - Set dimensions and padding. 31 | - Align text and decorations. 32 | - Change fonts. 33 | - Set the size and radius of the border. 34 | - Set background pattern image, its color, size and opacity. 35 | - Add decorations. 36 | - Upload your own decoration, octocat or profile pic. 37 | - Toogle Github dark and light mode. 38 | - Download image as png. 39 | - Randomize between predefined themes. 40 | 41 | ## Tech used 42 | 43 | - [Vite](https://vitejs.dev/) 44 | - [html2canvas](https://html2canvas.hertzen.com/) 45 | 46 | ## Get started 47 | 48 | - `npm run dev`- starts dev server 49 | - `npm run build` - builds for production 50 | - `npm run preview` - locally previews production build 51 | 52 | ## Get started with Docker 53 | 54 | ```bash 55 | docker-compose up -d --build --force-recreate 56 | ``` 57 | -------------------------------------------------------------------------------- /conf/default.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 80; 3 | sendfile on; 4 | default_type application/octet-stream; 5 | gzip on; 6 | gzip_http_version 1.1; 7 | gzip_disable "MSIE [1-6]\."; 8 | gzip_min_length 1100; 9 | gzip_vary on; 10 | gzip_proxied expired no-cache no-store private auth; 11 | gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; 12 | gzip_comp_level 9; 13 | 14 | root /usr/share/nginx/html; 15 | 16 | location / { 17 | try_files $uri $uri/ /index.html =404; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /deploy/vite.config.gh-pages.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | base: '/github-profile-header-generator/', 3 | build: { 4 | emptyOutDir: true 5 | } 6 | } -------------------------------------------------------------------------------- /deploy/vite.config.main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | build: { 3 | emptyOutDir: true 4 | } 5 | } -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '2' 2 | 3 | services: 4 | web: 5 | build: 6 | dockerfile: Dockerfile 7 | context: . 8 | image: github-profile-header-generator:latest 9 | container_name: github-profile-header-generator 10 | ports: 11 | - 8008:80 12 | restart: always 13 | mem_limit: 256m 14 | logging: 15 | options: 16 | "max-size": 2048m 17 | 18 | -------------------------------------------------------------------------------- /images/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/images/android-chrome-192x192.png -------------------------------------------------------------------------------- /images/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/images/android-chrome-512x512.png -------------------------------------------------------------------------------- /images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/images/apple-touch-icon.png -------------------------------------------------------------------------------- /images/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/images/favicon-16x16.png -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/images/favicon-32x32.png -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/images/favicon.ico -------------------------------------------------------------------------------- /images/github-logo-20.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/github-logo-40.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /images/github-profile-header-generator-demo-poster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/images/github-profile-header-generator-demo-poster.png -------------------------------------------------------------------------------- /images/github-profile-header-generator-demo.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/images/github-profile-header-generator-demo.webm -------------------------------------------------------------------------------- /images/icons/center-align.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /images/icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/icons/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /images/icons/left-align.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /images/icons/product-hunt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /images/icons/right-align.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /js/default-theme.js: -------------------------------------------------------------------------------- 1 | /* ************** Elements ************** */ 2 | 3 | let toolbox = document.querySelector('.toolbox'); 4 | 5 | /* ************** Options ************** */ 6 | 7 | let selectedTheme = 'github'; 8 | 9 | /* ************** Theme options ************** */ 10 | 11 | document.querySelectorAll('.theme-option') 12 | .forEach(button => { 13 | button.addEventListener('click', (e) => { 14 | console.log(e.target); 15 | document.querySelectorAll('.theme-option').forEach(button => { button.classList.remove('active'); }); 16 | button.classList.add('active'); 17 | }); 18 | if (button.getAttribute('data-theme') === selectedTheme) 19 | button.classList.add('active'); 20 | }) 21 | 22 | // Github theme 23 | 24 | let paddingValue = document.querySelector('#paddings-input').value || 25; 25 | let padding = `${paddingValue}px`; 26 | 27 | const imageDecorationContainer = document.querySelector('.img-decoration-container'); 28 | const imgDecorationElement = document.createElement('img'); 29 | imgDecorationElement.className = 'img-decoration'; 30 | imgDecorationElement.src = './images/decorations/my-octocat.png'; 31 | imgDecorationElement.style.position = 'absolute'; 32 | imgDecorationElement.style.bottom = 'calc(50%)'; 33 | imgDecorationElement.style.transform = 'translateY(50%)' 34 | imgDecorationElement.style.left = 'auto'; 35 | imgDecorationElement.style.right = padding; 36 | imgDecorationElement.style.width = '77px'; 37 | imgDecorationElement.alt = 'Header image decoration' 38 | imageDecorationContainer.appendChild(imgDecorationElement) 39 | 40 | toolbox.querySelectorAll('.align-buttons button') 41 | .forEach(button => { 42 | button.addEventListener('click', (e) => { 43 | const element = e.target.tagName.toLowerCase() === 'img' ? 44 | e.target.parentNode : 45 | e.target; 46 | const alignValue = element.getAttribute('data-align-value'); 47 | const paddingValue = document.querySelector('#paddings-input').value || 25; 48 | const padding = `${paddingValue}px`; 49 | if (selectedTheme === 'github') { 50 | const imageDecoration = document.querySelector('.img-decoration-container img'); 51 | if (alignValue === 'flex-end') { 52 | document.querySelector('.img-decoration-container .img-decoration-2')?.remove(); 53 | imageDecoration.style.left = padding; 54 | imageDecoration.style.right = 'auto'; 55 | } else if (alignValue === 'flex-start') { 56 | document.querySelector('.img-decoration-container .img-decoration-2')?.remove(); 57 | imageDecoration.style.left = 'auto'; 58 | imageDecoration.style.right = padding; 59 | } else if (alignValue === 'center') { 60 | imageDecoration.style.left = 'auto'; 61 | imageDecoration.style.right = padding; 62 | if (!document.querySelector('.img-decoration-container .img-decoration-2')) { 63 | const clonedImageDecoration = imageDecoration.cloneNode(true); 64 | clonedImageDecoration.style.left = padding; 65 | clonedImageDecoration.style.right = 'auto'; 66 | clonedImageDecoration.className = 'img-decoration-2'; 67 | imageDecorationContainer.appendChild(clonedImageDecoration) 68 | } 69 | } 70 | } 71 | }); 72 | }) 73 | 74 | /* ************** ************** ************** */ 75 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | import { setFontValues } from './utils/fonts'; 2 | import { getRandomTheme } from './utils/themes'; 3 | 4 | /* ************** Elements ************** */ 5 | 6 | let headerImageContainer = document.querySelector('.header-image-container'); 7 | let headerImage = document.querySelector('#github-header-image'); 8 | let title = headerImage.querySelector('.title'); 9 | let subtitle = headerImage.querySelector('.subtitle'); 10 | 11 | let toolbox = document.querySelector('.toolbox'); 12 | 13 | /* ************** Options ************** */ 14 | 15 | let selectedTheme = 'github'; 16 | 17 | // Init 18 | document.querySelector('.toolbox .size-inputs input#width-input').value = headerImageContainer.clientWidth; 19 | let titleFontSelect = toolbox.querySelector('.font-selectors-container #title-font-selector'); 20 | let subtitleFontSelect = toolbox.querySelector('.font-selectors-container #subtitle-font-selector'); 21 | titleFontSelect.value='Red Hat Display'; 22 | subtitleFontSelect.value='Kalam'; 23 | 24 | // Demo reset after ended 25 | document.querySelector('.how-to-section video.demo').onended = (e) => e.target.currentTime = 0; 26 | 27 | /* ************** Header image buttons ************** */ 28 | 29 | // Download button 30 | document.querySelector('.download-button') 31 | .addEventListener('click', () => { 32 | html2canvas( 33 | document.querySelector('#github-header-image'), 34 | { 35 | backgroundColor: null 36 | // widtH: (headerImage.clientWidth * 2), 37 | // height: (headerImage.style.height * 2) 38 | }) 39 | .then(function (canvas) { 40 | // for testing 41 | // document.body.before(canvas); 42 | 43 | let imageURL = canvas.toDataURL("image/png"); 44 | let a = document.createElement("a"); 45 | a.href = imageURL; 46 | a.download = 'github-header-image'; 47 | a.click(); 48 | }); 49 | }) 50 | 51 | // Toogle Dark Mode button 52 | document.querySelector('.dark-mode-button') 53 | .addEventListener('click', (e) => { 54 | let resultBox = document.querySelector('.result-box'); 55 | const toogleDarkModeButton = document.querySelector('.dark-mode-button'); 56 | 57 | resultBox.classList.toggle('light-mode'); 58 | if (resultBox.className.includes('light')) { 59 | toogleDarkModeButton.innerText = 'Light Mode' 60 | } else { 61 | toogleDarkModeButton.innerText = 'Dark Mode' 62 | } 63 | }); 64 | 65 | /* ************** Randomize ************** */ 66 | 67 | document.querySelector('.randomize-button') 68 | .addEventListener('click', (e) => { 69 | const theme = getRandomTheme(); 70 | 71 | // Background 72 | const mainTabBgColorSelector = document.querySelector('.color-selectors-container input#main-bg-color-selector'); 73 | const backgroundTabBgColorSelector = document.querySelector('.bg-color-selectors input#background-bg-color-selector'); 74 | mainTabBgColorSelector.value = theme.background; 75 | backgroundTabBgColorSelector.value = theme.background; 76 | headerImage.style.backgroundColor = theme.background; 77 | 78 | // Title 79 | const mainTabtitleColorSelector = document.querySelector('.color-selectors-container input#title-color-selector'); 80 | mainTabtitleColorSelector.value = theme.title; 81 | title.style.color = theme.title; 82 | 83 | // Subtitle 84 | const mainTabSubtitleColorSelector = document.querySelector('.color-selectors-container input#subtitle-color-selector'); 85 | mainTabSubtitleColorSelector.value = theme.subtitle; 86 | subtitle.style.color = theme.subtitle; 87 | 88 | // Borders 89 | const borderColorSelector = document.querySelector('.bg-color-selectors input#border-color-selector'); 90 | const borderInput = document.querySelector('.border-inputs input#border-input'); 91 | const borderRadiusInput = document.querySelector('.border-inputs input#border-radius-input'); 92 | borderColorSelector.value = theme.border; 93 | borderInput.value = theme.borderSize; 94 | borderInput.nextElementSibling.value = theme.borderSize; 95 | borderRadiusInput.value = theme.borderRadius; 96 | borderRadiusInput.nextElementSibling.value = theme.borderRadius; 97 | headerImage.style.border = `solid ${borderColorSelector.value} ${borderInput.value}px`; 98 | headerImage.style.borderRadius = `${borderRadiusInput.value}px`; 99 | 100 | // Text Align 101 | document.querySelector(`.align-buttons button[data-align-value="${theme.textAlign}"]`).click(); 102 | 103 | // Decoration 104 | const decorationSizeInput = document.querySelector('.decorations-size-inputs input#decoration-size-input'); 105 | decorationSizeInput.value = theme.decorationSize; 106 | decorationSizeInput.nextElementSibling.value = theme.decorationSize; 107 | document.querySelector(`.decorations-buttons button[data-decoration-value="${theme.decoration}"]`).click(); 108 | 109 | // Patterns 110 | const patternOpacityInput = document.querySelector('.pattern-inputs input#pattern-opacity-input'); 111 | const patternColorSelector = document.querySelector('.pattern-inputs input#pattern-color-selector'); 112 | patternOpacityInput.value = theme.patternOpacity 113 | patternOpacityInput.nextElementSibling.value = theme.patternOpacity 114 | patternColorSelector.value = theme.patternColor; 115 | document.querySelector(`.patterns-buttons button[data-pattern-value="${theme.pattern}"]`).click(); 116 | 117 | // Fonts 118 | document.querySelector('.font-selectors-container #title-font-selector').value = theme.titleFont ?? 'Red Hat Display'; 119 | document.querySelector('.font-selectors-container #subtitle-font-selector').value = theme.subtitleFont ?? 'Kalam'; 120 | setFontValues(); 121 | 122 | }); 123 | 124 | /* ************** ************** ************** */ 125 | -------------------------------------------------------------------------------- /js/tabs.js: -------------------------------------------------------------------------------- 1 | function openTab(e, name) { 2 | let i, tabcontent, tablinks; 3 | 4 | tabcontent = document.getElementsByClassName("tabcontent"); 5 | for (i = 0; i < tabcontent.length; i++) { 6 | tabcontent[i].style.display = "none"; 7 | } 8 | 9 | tablinks = document.getElementsByClassName("tablinks"); 10 | for (i = 0; i < tablinks.length; i++) { 11 | tablinks[i].className = tablinks[i].className.replace(" active", ""); 12 | } 13 | 14 | document.getElementById(name).style.display = "block"; 15 | e.currentTarget.className += " active"; 16 | } 17 | 18 | document.querySelectorAll('.tab .tablinks') 19 | .forEach(button => { 20 | button.addEventListener('click', (e) => { 21 | const name = e.target.getAttribute('data-name'); 22 | openTab(e, name); 23 | }); 24 | }) 25 | 26 | document.getElementById("defaultOpenTag").click(); 27 | -------------------------------------------------------------------------------- /js/toolbox-background.js: -------------------------------------------------------------------------------- 1 | import { getBackgroundSvg } from './utils/background-patterns'; 2 | 3 | /* ************** Elements ************** */ 4 | 5 | let headerImageContainer = document.querySelector('.header-image-container'); 6 | let headerImage = document.querySelector('#github-header-image'); 7 | let title = headerImage.querySelector('.title'); 8 | let subtitle = headerImage.querySelector('.subtitle'); 9 | 10 | let toolboxBackground = document.querySelector('.toolbox-background'); 11 | 12 | // init 13 | let selectedPattern = 'jigsaw'; 14 | let selectedPatternOpacity = 0.25; 15 | let selectedPatternColor = 'FFF'; 16 | let selectedPatternSize = '100px'; 17 | setPatternBackground(); 18 | 19 | /* ************** Set theme button ************** */ 20 | 21 | // document.querySelector('.log-theme-button').addEventListener('click', () => { 22 | // let obj = ` {background: '${document.querySelector('.color-selectors-container input#main-bg-color-selector').value}', title: '${document.querySelector('.color-selectors-container input#title-color-selector').value}', subtitle: '${document.querySelector('.color-selectors-container input#subtitle-color-selector').value}', border: '${document.querySelector('.bg-color-selectors input#border-color-selector').value}', borderSize: ${document.querySelector('.border-inputs input#border-input').value}, borderRadius: ${document.querySelector('.border-inputs input#border-radius-input').value}, textAlign: '${headerImage.style.alignItems}', decoration: '${document.querySelector('.img-decoration-container img').src.split('/').pop().replace('.png', '')}.png', decorationSize: ${document.querySelector('.decorations-size-inputs input#decoration-size-input').value}, pattern: '${selectedPattern}', patternColor: '${document.querySelector('.pattern-inputs input#pattern-color-selector').value}', patternOpacity: ${document.querySelector('.pattern-inputs input#pattern-opacity-input').value}, titleFont: '${document.querySelector('.font-selectors-container #title-font-selector').value}', subtitleFont: '${document.querySelector('.font-selectors-container #subtitle-font-selector').value}'}, `; 23 | // console.log(JSON.stringify(obj).replaceAll('\"', '\'')) 24 | // }) 25 | 26 | /* ************** Color selectors ************** */ 27 | 28 | function setBgColorValues() { 29 | let bgColorSelector = toolboxBackground.querySelector('.bg-color-selectors input#background-bg-color-selector'); 30 | let borderColorSelector = toolboxBackground.querySelector('.bg-color-selectors input#border-color-selector'); 31 | 32 | headerImage.style.backgroundColor = bgColorSelector.value; 33 | headerImage.style.borderColor = borderColorSelector.value; 34 | 35 | let mainTabBgColorSelector = document.querySelector('.color-selectors-container input#main-bg-color-selector'); 36 | mainTabBgColorSelector.value = bgColorSelector.value; 37 | } 38 | 39 | toolboxBackground.querySelectorAll('.bg-color-selectors input') 40 | .forEach(input => { 41 | input.addEventListener('input', (e) => { 42 | setBgColorValues(); 43 | }); 44 | }) 45 | 46 | /* ************** Border Inputs ************** */ 47 | 48 | function setBorderValues() { 49 | let borderInput = toolboxBackground.querySelector('.border-inputs input#border-input'); 50 | let borderRadiusInput = toolboxBackground.querySelector('.border-inputs input#border-radius-input'); 51 | let borderColorSelector = toolboxBackground.querySelector('.bg-color-selectors input#border-color-selector'); 52 | 53 | headerImage.style.border = `solid ${borderColorSelector.value} ${borderInput.value}px`; 54 | headerImage.style.borderRadius = `${borderRadiusInput.value}px`; 55 | } 56 | 57 | toolboxBackground.querySelectorAll('.border-inputs input') 58 | .forEach(input => { 59 | input.addEventListener('input', (e) => { 60 | e.target.nextElementSibling.value = e.target.value 61 | setBorderValues(); 62 | }); 63 | }) 64 | 65 | /* ************** Pattern inputs ************** */ 66 | 67 | function setPatternValues() { 68 | selectedPatternOpacity = toolboxBackground.querySelector('.pattern-inputs input#pattern-opacity-input').value; 69 | selectedPatternSize = toolboxBackground.querySelector('.pattern-inputs input#pattern-size-input').value; 70 | } 71 | 72 | toolboxBackground.querySelectorAll('.pattern-inputs input[type="range"]') 73 | .forEach(input => { 74 | input.addEventListener('input', (e) => { 75 | e.target.nextElementSibling.value = e.target.value 76 | setPatternValues(); 77 | setPatternBackground(); 78 | }); 79 | }) 80 | 81 | toolboxBackground.querySelectorAll('.pattern-inputs input[type="color"]') 82 | .forEach(input => { 83 | input.addEventListener('input', (e) => { 84 | setPatternBackground(); 85 | }); 86 | }) 87 | 88 | /* ************** Patterns ************** */ 89 | 90 | function setPatternBackground() { 91 | const patternColor = toolboxBackground.querySelector('.pattern-inputs input#pattern-color-selector').value; 92 | selectedPatternColor = patternColor.replace('#', ''); 93 | 94 | headerImage.style.backgroundImage = getBackgroundSvg(selectedPattern, selectedPatternColor, selectedPatternOpacity); 95 | headerImage.style.backgroundSize = `${selectedPatternSize}px`; 96 | } 97 | 98 | toolboxBackground.querySelectorAll('.patterns-buttons button') 99 | .forEach(button => { 100 | button.addEventListener('click', (e) => { 101 | const element = e.target.tagName.toLowerCase() === 'img' ? 102 | e.target.parentNode : 103 | e.target; 104 | const patternValue = element.getAttribute('data-pattern-value'); 105 | selectedPattern = patternValue; 106 | setPatternDefaultSize(patternValue); 107 | setPatternValues(); 108 | setPatternBackground(); 109 | }); 110 | }) 111 | 112 | function setPatternDefaultSize(patternValue) { 113 | switch (patternValue) { 114 | case 'jigsaw': 115 | selectedPatternSize = 100; 116 | break; 117 | case 'github': 118 | selectedPatternSize = 40; 119 | break; 120 | case 'endless-constellation': 121 | selectedPatternSize = 250; 122 | break; 123 | case 'floating-cogs': 124 | selectedPatternSize = 350; 125 | break; 126 | case 'bubbles': 127 | selectedPatternSize = 200; 128 | break; 129 | case 'random-shapes': 130 | selectedPatternSize = 80; 131 | break; 132 | case 'lisbon': 133 | selectedPatternSize = 80; 134 | break; 135 | case 'temple': 136 | selectedPatternSize = 100; 137 | break; 138 | case 'topography': 139 | selectedPatternSize = 500; 140 | break; 141 | case 'falling-triangles': 142 | selectedPatternSize = 36; 143 | break; 144 | case 'glamorous': 145 | selectedPatternSize = 135; 146 | break; 147 | case 'i-like-food': 148 | selectedPatternSize = 225; 149 | break; 150 | case 'leaf': 151 | selectedPatternSize = 80; 152 | break; 153 | case 'circuit-board': 154 | selectedPatternSize = 304; 155 | break; 156 | case 'overlapping-circles': 157 | selectedPatternSize = 80; 158 | break; 159 | case 'endless-clouds': 160 | selectedPatternSize = 112; 161 | break; 162 | default: 163 | selectedPatternSize = 100; 164 | break; 165 | } 166 | toolboxBackground.querySelector('.pattern-inputs #pattern-size-input').value = selectedPatternSize; 167 | toolboxBackground.querySelector('.pattern-inputs #pattern-size-input').nextElementSibling.innerHTML = selectedPatternSize; 168 | } 169 | 170 | /* ************** ************** ************** */ -------------------------------------------------------------------------------- /js/toolbox-decorations.js: -------------------------------------------------------------------------------- 1 | /* ************** Elements ************** */ 2 | 3 | let headerImageContainer = document.querySelector('.header-image-container'); 4 | let headerImage = document.querySelector('#github-header-image'); 5 | let title = headerImage.querySelector('.title'); 6 | let subtitle = headerImage.querySelector('.subtitle'); 7 | 8 | let toolboxDecorations = document.querySelector('.toolbox-decorations'); 9 | 10 | /* ************** Decorations inputs ************** */ 11 | 12 | function setDecorationSize() { 13 | let selectedDecorationSize = toolboxDecorations.querySelector('.decorations-size-inputs input#decoration-size-input').value; 14 | 15 | const imageDecoration = document.querySelector('.img-decoration-container .img-decoration'); 16 | imageDecoration.style.width = `${selectedDecorationSize}px`; 17 | 18 | const otherImageDecoration = document.querySelector('.img-decoration-container .img-decoration-2'); 19 | if (otherImageDecoration) { 20 | otherImageDecoration.style.width = `${selectedDecorationSize}px`; 21 | } 22 | } 23 | 24 | toolboxDecorations.querySelectorAll('.decorations-size-inputs input[type="range"]') 25 | .forEach(input => { 26 | input.addEventListener('input', (e) => { 27 | e.target.nextElementSibling.value = e.target.value 28 | setDecorationSize(); 29 | }); 30 | }) 31 | 32 | /* ************** Decorations ************** */ 33 | 34 | function setDecoration(decorationValue) { 35 | const imageDecoration = document.querySelector('.img-decoration-container .img-decoration'); 36 | const otherImageDecoration = document.querySelector('.img-decoration-container .img-decoration-2'); 37 | 38 | if (decorationValue === 'none') { 39 | imageDecoration.style.display = 'none'; 40 | if (otherImageDecoration) { 41 | otherImageDecoration.style.display = 'none'; 42 | } 43 | } else { 44 | imageDecoration.style.display = 'block'; 45 | imageDecoration.src = `images/decorations/${decorationValue}`; 46 | if (otherImageDecoration) { 47 | otherImageDecoration.style.display = 'block'; 48 | otherImageDecoration.src = `images/decorations/${decorationValue}`; 49 | } 50 | } 51 | } 52 | 53 | toolboxDecorations.querySelectorAll('.decorations-buttons button') 54 | .forEach(button => { 55 | button.addEventListener('click', (e) => { 56 | const element = e.target.tagName.toLowerCase() === 'img' ? 57 | e.target.parentNode : 58 | e.target; 59 | const decorationValue = element.getAttribute('data-decoration-value'); 60 | setDecoration(decorationValue); 61 | setDecorationSize(); 62 | }); 63 | }) 64 | 65 | /* ************** Upload decoration ************** */ 66 | 67 | toolboxDecorations.querySelector('#decoration-upload-input') 68 | .addEventListener('change', () => { 69 | const file = toolboxDecorations.querySelector('#decoration-upload-input').files[0]; 70 | 71 | let reader = new FileReader(); 72 | reader.readAsDataURL(file); 73 | reader.onload = function (e) { 74 | const decoration = document.querySelector('.img-decoration'); 75 | decoration.src = this.result; 76 | const otherDecoration = document.querySelector('.img-decoration-2'); 77 | if (otherDecoration) otherDecoration.src = this.result; 78 | } 79 | }) 80 | 81 | /* ************** ************** ************** */ 82 | -------------------------------------------------------------------------------- /js/toolbox-main.js: -------------------------------------------------------------------------------- 1 | import { setFontValues } from './utils/fonts'; 2 | 3 | /* ************** Elements ************** */ 4 | 5 | let headerImageContainer = document.querySelector('.header-image-container'); 6 | let headerImage = document.querySelector('#github-header-image'); 7 | let title = headerImage.querySelector('.title'); 8 | let subtitle = headerImage.querySelector('.subtitle'); 9 | 10 | let toolbox = document.querySelector('.toolbox'); 11 | 12 | /* ************** Info text inputs ************** */ 13 | 14 | function setInfoValues() { 15 | let titleInput = toolbox.querySelector('.text-inputs input#title-input'); 16 | let subtitleInput = toolbox.querySelector('.text-inputs input#subtitle-input'); 17 | 18 | title.innerText = titleInput.value || ''; 19 | subtitle.innerText = subtitleInput.value || ''; 20 | } 21 | 22 | toolbox.querySelectorAll('.text-inputs input') 23 | .forEach(input => { 24 | input.addEventListener('click', () => input.select()); 25 | 26 | input.addEventListener('keyup', (e) => { 27 | setInfoValues(); 28 | }); 29 | }) 30 | 31 | /* ************** Color selectors ************** */ 32 | 33 | function setColorValues() { 34 | let bgColorSelector = toolbox.querySelector('.color-selectors-container input#main-bg-color-selector'); 35 | let titleColorSelector = toolbox.querySelector('.color-selectors-container input#title-color-selector'); 36 | let subtitleColorSelector = toolbox.querySelector('.color-selectors-container input#subtitle-color-selector'); 37 | 38 | headerImage.style.backgroundColor = bgColorSelector.value; 39 | title.style.color = titleColorSelector.value; 40 | subtitle.style.color = subtitleColorSelector.value; 41 | 42 | let backgroundTabBgColorSelector = document.querySelector('.bg-color-selectors input#background-bg-color-selector'); 43 | backgroundTabBgColorSelector.value = bgColorSelector.value; 44 | } 45 | 46 | toolbox.querySelectorAll('.color-selectors-container input') 47 | .forEach(input => { 48 | input.addEventListener('input', (e) => { 49 | setColorValues(); 50 | }); 51 | }) 52 | 53 | /* ************** Size inputs ************** */ 54 | 55 | function setSizeValues() { 56 | let widthInput = toolbox.querySelector('.size-inputs input#width-input'); 57 | let heightInput = toolbox.querySelector('.size-inputs input#height-input'); 58 | 59 | if (Number(widthInput.value) > headerImageContainer.clientWidth) { 60 | headerImage.style.zoom = headerImageContainer.clientWidth / widthInput.value; 61 | } else { 62 | headerImage.style.zoom = 1; 63 | } 64 | headerImage.style.width = `${widthInput.value}px`; 65 | headerImage.style.height = `${heightInput.value}px`; 66 | } 67 | 68 | function setPaddingValues() { 69 | let paddingInput = toolbox.querySelector('.size-inputs input#paddings-input'); 70 | let paddingValue = `${paddingInput.value}px`; 71 | 72 | headerImage.style.padding = paddingValue; 73 | 74 | document.querySelectorAll('.img-decoration-container img') 75 | .forEach(decoration => { 76 | if (decoration.style.left === 'auto') { 77 | decoration.style.right = paddingValue; 78 | } else { 79 | decoration.style.left = paddingValue; 80 | } 81 | }); 82 | } 83 | 84 | toolbox.querySelectorAll('.size-inputs input') 85 | .forEach(input => { 86 | if (input.type === 'text') { 87 | input.addEventListener('click', () => input.select()); 88 | 89 | input.addEventListener('keyup', (e) => { 90 | setSizeValues(); 91 | }); 92 | } else { 93 | input.addEventListener('input', (e) => { 94 | e.target.nextElementSibling.value = e.target.value 95 | setPaddingValues(); 96 | }); 97 | } 98 | }) 99 | 100 | /* ************** Align buttons ************** */ 101 | 102 | function setAlignValues(alignValue) { 103 | headerImage.style.alignItems = alignValue; 104 | } 105 | 106 | toolbox.querySelectorAll('.align-buttons button') 107 | .forEach(button => { 108 | button.addEventListener('click', (e) => { 109 | const element = e.target.tagName.toLowerCase() === 'img' ? 110 | e.target.parentNode : 111 | e.target; 112 | const alignValue = element.getAttribute('data-align-value'); 113 | setAlignValues(alignValue); 114 | }); 115 | }) 116 | 117 | /* ************** Font Selectors ************** */ 118 | 119 | toolbox.querySelectorAll('.font-selectors-container') 120 | .forEach(button => { 121 | button.addEventListener('change', (e) => { 122 | setFontValues(); 123 | }); 124 | }) 125 | 126 | /* ************** Font Size inputs ************** */ 127 | 128 | function setFontSizeValues() { 129 | let titleFontSizeInput = toolbox.querySelector('.font-size-inputs input#title-font-size-input'); 130 | let subtitleFontSizeInput = toolbox.querySelector('.font-size-inputs input#sutitle-font-size-input'); 131 | 132 | title.style.fontSize = `${titleFontSizeInput.value}px`; 133 | subtitle.style.fontSize = `${subtitleFontSizeInput.value}px`; 134 | } 135 | 136 | toolbox.querySelectorAll('.font-size-inputs input') 137 | .forEach(input => { 138 | input.addEventListener('input', (e) => { 139 | e.target.nextElementSibling.value = e.target.value 140 | setFontSizeValues(); 141 | }); 142 | }) 143 | 144 | /* ************** ************** ************** */ 145 | -------------------------------------------------------------------------------- /js/utils/fonts.js: -------------------------------------------------------------------------------- 1 | /* ************** Elements ************** */ 2 | 3 | let headerImageContainer = document.querySelector('.header-image-container'); 4 | let headerImage = document.querySelector('#github-header-image'); 5 | let title = headerImage.querySelector('.title'); 6 | let subtitle = headerImage.querySelector('.subtitle'); 7 | 8 | let toolbox = document.querySelector('.toolbox'); 9 | 10 | /* ************** Fonts ************** */ 11 | 12 | function listFonts() { 13 | let { fonts } = document; 14 | const it = fonts.entries(); 15 | 16 | let arr = []; 17 | let done = false; 18 | 19 | while (!done) { 20 | const font = it.next(); 21 | if (!font.done) { 22 | arr.push(font.value[0].family); 23 | } else { 24 | done = font.done; 25 | } 26 | } 27 | 28 | return [...new Set(arr)]; 29 | } 30 | 31 | function setFontValues() { 32 | let titleFontSelect = toolbox.querySelector('.font-selectors-container #title-font-selector'); 33 | let subtitleFontSelect = toolbox.querySelector('.font-selectors-container #subtitle-font-selector'); 34 | 35 | document.fonts.ready.then(() => { 36 | let titleFont = getFont(titleFontSelect.value) 37 | titleFont.load().then(function (loadedFont) { 38 | document.fonts.add(loadedFont) 39 | console.log('Font loaded an added'); 40 | title.style.fontFamily = `"${titleFontSelect.value}"`; 41 | }).catch(function (error) { 42 | console.log('Failed to load font: ' + error) 43 | }) 44 | 45 | let subTitlefont = getFont(subtitleFontSelect.value) 46 | subTitlefont.load().then(function (loadedFont) { 47 | document.fonts.add(loadedFont) 48 | console.log('Font loaded an added'); 49 | subtitle.style.fontFamily = `"${subtitleFontSelect.value}"`; 50 | }).catch(function (error) { 51 | console.log('Failed to load font: ' + error) 52 | }) 53 | }); 54 | } 55 | 56 | function getFont(fontName) { 57 | switch (fontName) { 58 | case 'Kalam': 59 | return new FontFace('Kalam', 'url("./fonts/Kalam-Regular.ttf")'); 60 | case 'Poppins': 61 | return new FontFace('Poppins', 'url("./fonts/Poppins-Regular.ttf")'); 62 | case 'Athiti': 63 | return new FontFace('Athiti', 'url("./fonts/Athiti-Regular.ttf")'); 64 | case 'MavenPro': 65 | return new FontFace('MavenPro', 'url("./fonts/MavenPro-Regular.ttf")'); 66 | case 'Ubuntu': 67 | return new FontFace('Ubuntu', 'url("./fonts/Ubuntu-Regular.ttf")'); 68 | case 'IstokWeb': 69 | return new FontFace('IstokWeb', 'url("./fonts/IstokWeb-Regular.ttf")'); 70 | case 'Courgette': 71 | return new FontFace('Courgette', 'url("./fonts/Courgette-Regular.ttf")'); 72 | case 'Quattrocento': 73 | return new FontFace('Quattrocento', 'url("./fonts/Quattrocento-Regular.ttf")'); 74 | case 'DellaRespira': 75 | return new FontFace('DellaRespira', 'url("./fonts/DellaRespira-Regular.ttf")'); 76 | case 'Lato': 77 | return new FontFace('Lato', 'url("./fonts/Lato-Regular.ttf")'); 78 | case 'Martel': 79 | return new FontFace('Martel', 'url("./fonts/Martel-Regular.ttf")'); 80 | case 'Lancelot': 81 | return new FontFace('Lancelot', 'url("./fonts/Lancelot-Regular.ttf")'); 82 | case 'Playball': 83 | return new FontFace('Playball', 'url("./fonts/Playball-Regular.ttf")'); 84 | case 'LifeSavers': 85 | return new FontFace('LifeSavers', 'url("./fonts/LifeSavers-Regular.ttf")'); 86 | default: 87 | return new FontFace('Kalam', 'url("./fonts/Kalam-Regular.ttf")'); 88 | } 89 | } 90 | 91 | export { setFontValues }; -------------------------------------------------------------------------------- /js/utils/themes.js: -------------------------------------------------------------------------------- 1 | function getRandomTheme() { 2 | const themes = [{ 3 | background: '#4078C0', title: '#FFFFFF', subtitle: '#FFFFFF', 4 | border: '#FFFFFF', borderSize: 0, borderRadius: 7, textAlign: 'flex-start', 5 | decoration: 'my-octocat.png', decorationSize: 77, 6 | pattern: 'jigsaw', patternColor: '#FFFFFF', patternOpacity: 0.25 7 | }, { 8 | background: '#4078C0', title: '#FFFFFF', subtitle: '#05F1FA', 9 | border: '#FFFFFF', borderSize: 0, borderRadius: 7, textAlign: 'flex-start', 10 | decoration: 'octocat.png', decorationSize: 100, 11 | pattern: 'floating-cogs', patternColor: '#FFFFFF', patternOpacity: 0.25 12 | }, { 13 | background: '#112137', title: '#FFFFFF', subtitle: '#05F1FA', 14 | border: '#eeff00', borderSize: 4, borderRadius: 10, textAlign: 'center', 15 | decoration: 'github-mark.png', decorationSize: 100, 16 | pattern: 'i-like-food', patternColor: '#FFFFFF', patternOpacity: 0.25 17 | }, { 18 | background: '#000000', title: '#FFFFFF', subtitle: '#c671d9', 19 | border: '#FFFFFF', borderSize: 0, borderRadius: 15, textAlign: 'center', 20 | decoration: 'code.png', decorationSize: 100, 21 | pattern: 'endless-constellation', patternColor: '#87d2ff', patternOpacity: 0.7 22 | }, { 23 | background: '#ff0066', title: '#FFFFFF', subtitle: '#0f0006', 24 | border: '#FFFFFF', borderSize: 0, borderRadius: 15, textAlign: 'flex-end', 25 | decoration: 'dev-badge.png', decorationSize: 100, 26 | pattern: 'temple', patternColor: '#FFFFFF', patternOpacity: 0.25 27 | }, { 28 | background: '#FFFFFF', title: '#f7b3ce', subtitle: '#55c1ae', 29 | border: '#88aedc', borderSize: 7, borderRadius: 0, textAlign: 'flex-end', 30 | decoration: 'dev-rainbow.png', decorationSize: 100, 31 | pattern: 'bubbles', patternColor: '#f3f095', patternOpacity: 0.7 32 | }, { 33 | background: '#207e78', title: '#d0b506', subtitle: '#8fd100', 34 | border: '#ffffff', borderSize: 0, borderRadius: 7, textAlign: 'center', 35 | decoration: 'dev-white.png', decorationSize: 100, 36 | pattern: 'i-like-food', patternColor: '#1b96f3', patternOpacity: 0.45 37 | }, { 38 | background: '#4078c0', title: '#ffffff', subtitle: '#ffffff', 39 | border: '#ffffff', borderSize: 0, borderRadius: 7, textAlign: 'flex-start', 40 | decoration: 'my-octocat.png', decorationSize: 100, 41 | pattern: 'jigsaw', patternColor: '#ffffff', patternOpacity: 0.25 42 | }, { 43 | background: '#000000', title: '#4cfca7', subtitle: '#0ad6ff', 44 | border: '#ffffff', borderSize: 0, borderRadius: 25, textAlign: 'flex-end', 45 | decoration: 'dev-white.png', decorationSize: 145, 46 | pattern: 'overlapping-circles', patternColor: '#ffffff', patternOpacity: 0.3 47 | }, { 48 | background: '#9340bf', title: '#fbff00', subtitle: '#ffffff', 49 | border: '#ffffff', borderSize: 0, borderRadius: 7, textAlign: 'center', 50 | decoration: 'none', decorationSize: 100, 51 | pattern: 'jigsaw', patternColor: '#ffffff', patternOpacity: 0.25, 52 | titleFont: 'LifeSavers', subtitleFont: 'DellaRespira' 53 | }, { 54 | background: '#012d4e', title: '#5affb7', subtitle: '#00d6bd', 55 | border: '#ffffff', borderSize: 0, borderRadius: 200, textAlign: 'flex-end', 56 | decoration: 'binary-code.png', decorationSize: 122, 57 | pattern: 'circuit-board', patternColor: '#94ffdb', patternOpacity: 0.3, 58 | titleFont: 'Ubuntu', subtitleFont: 'Courier New' 59 | }, { 60 | background: '#002a52', title: '#ffffff', subtitle: '#ffffff', 61 | border: '#b4b701', borderSize: 3, borderRadius: 0, textAlign: 'center', 62 | decoration: 'coding.png', decorationSize: 91, 63 | pattern: 'lisbon', patternColor: '#bbff00', patternOpacity: 0.5, 64 | titleFont: 'DellaRespira', subtitleFont: 'Courgette' 65 | }, { 66 | background: '#96349d', title: '#ffffff', subtitle: '#bef3fe', 67 | border: '#ffffff', borderSize: 0, borderRadius: 7, textAlign: 'center', 68 | decoration: 'rocket.png', decorationSize: 95, 69 | pattern: 'endless-clouds', patternColor: '#ffffff', patternOpacity: 0.25, 70 | titleFont: 'MavenPro', subtitleFont: 'Quattrocento' 71 | }, { 72 | background: '#6cbf40', title: '#ffffff', subtitle: '#e7eb00', 73 | border: '#ffffff', borderSize: 0, borderRadius: 11, textAlign: 'flex-end', 74 | decoration: 'idea.png', decorationSize: 80, 75 | pattern: 'leaf', patternColor: '#ffffff', patternOpacity: 0.25, 76 | titleFont: 'DellaRespira', subtitleFont: 'DellaRespira' 77 | }, { 78 | background: '#252646', title: '#fdbf00', subtitle: '#64e1dc', 79 | border: '#ffffff', borderSize: 0, borderRadius: 15, textAlign: 'flex-end', 80 | decoration: 'coding-screen.png', decorationSize: 116, 81 | pattern: 'github', patternColor: '#ffffff', patternOpacity: 0.1, 82 | titleFont: 'Tahoma', subtitleFont: 'Courgette' 83 | }, { 84 | background: '#001061', title: '#ffffff', subtitle: '#ffffff', 85 | border: '#ffffff', borderSize: 0, borderRadius: 0, textAlign: 'center', 86 | decoration: 'apple.png', decorationSize: 59, 87 | pattern: 'endless-constellation', patternColor: '#ffffff', patternOpacity: 0.5, 88 | titleFont: 'MavenPro', subtitleFont: 'MavenPro' 89 | }, { 90 | background: '#b83700', title: '#ffd500', subtitle: '#41d7e1', 91 | border: '#ffffff', borderSize: 0, borderRadius: 15, textAlign: 'flex-start', 92 | decoration: 'idea.png', decorationSize: 100, 93 | pattern: 'falling-triangles', patternColor: '#fff700', patternOpacity: 0.15, 94 | titleFont: 'Ubuntu', subtitleFont: 'Trebuchet MS' 95 | }, { 96 | background: '#4099bf', title: '#ffffff', subtitle: '#ffc6b1', 97 | border: '#ffffff', borderSize: 5, borderRadius: 7, textAlign: 'flex-start', 98 | decoration: 'my-octocat.png', decorationSize: 100, 99 | pattern: 'bubbles', patternColor: '#ffffff', patternOpacity: 0.25, titleFont: 'Ubuntu', subtitleFont: 'Courgette' 100 | }, { 101 | background: '#eeb25d', title: '#ffffff', subtitle: '#000000', 102 | border: '#ffffff', borderSize: 5, borderRadius: 37, textAlign: 'center', 103 | decoration: 'octocat.png', decorationSize: 69, 104 | pattern: 'bubbles', patternColor: '#ffffff', patternOpacity: 0.25, 105 | titleFont: 'DellaRespira', subtitleFont: 'LifeSavers' 106 | }, { 107 | background: '#000000', title: '#ffffff', subtitle: '#ffffff', 108 | border: '#299900', borderSize: 2, borderRadius: 0, textAlign: 'flex-start', 109 | decoration: 'github-mark.png', decorationSize: 60, 110 | pattern: 'i-like-food', patternColor: '#27eb00', patternOpacity: 0.35, 111 | titleFont: 'MavenPro', subtitleFont: 'MavenPro' 112 | }, { 113 | background: '#000000', title: '#ffffff', subtitle: '#00c732', 114 | border: '#ffffff', borderSize: 0, borderRadius: 0, textAlign: 'flex-end', 115 | decoration: 'coding.png', decorationSize: 100, 116 | pattern: 'circuit-board', patternColor: '#00ff6e', patternOpacity: 0.4, 117 | titleFont: 'Courier New', subtitleFont: 'Courier New' 118 | }, { 119 | background: '#37cd8c', title: '#d5fe06', subtitle: '#85ffd0', 120 | border: '#ffffff', borderSize: 0, borderRadius: 7, textAlign: 'flex-start', 121 | decoration: 'github-mark.png', decorationSize: 64, 122 | pattern: 'temple', patternColor: '#ffffff', patternOpacity: 0.25, 123 | titleFont: 'Lancelot', subtitleFont: 'Athiti' 124 | }, 125 | ] 126 | 127 | let random = Math.floor(Math.random() * themes.length); 128 | return themes[random]; 129 | } 130 | 131 | export { getRandomTheme }; -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "github-profile-header-generator", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "anymatch": { 8 | "version": "3.1.2", 9 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", 10 | "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", 11 | "dev": true, 12 | "requires": { 13 | "normalize-path": "^3.0.0", 14 | "picomatch": "^2.0.4" 15 | } 16 | }, 17 | "base64-arraybuffer": { 18 | "version": "1.0.2", 19 | "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", 20 | "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==" 21 | }, 22 | "binary-extensions": { 23 | "version": "2.2.0", 24 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", 25 | "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", 26 | "dev": true 27 | }, 28 | "braces": { 29 | "version": "3.0.2", 30 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", 31 | "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", 32 | "dev": true, 33 | "requires": { 34 | "fill-range": "^7.0.1" 35 | } 36 | }, 37 | "chokidar": { 38 | "version": "3.5.3", 39 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", 40 | "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", 41 | "dev": true, 42 | "requires": { 43 | "anymatch": "~3.1.2", 44 | "braces": "~3.0.2", 45 | "fsevents": "~2.3.2", 46 | "glob-parent": "~5.1.2", 47 | "is-binary-path": "~2.1.0", 48 | "is-glob": "~4.0.1", 49 | "normalize-path": "~3.0.0", 50 | "readdirp": "~3.6.0" 51 | } 52 | }, 53 | "css-line-break": { 54 | "version": "2.1.0", 55 | "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", 56 | "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", 57 | "requires": { 58 | "utrie": "^1.0.2" 59 | } 60 | }, 61 | "esbuild": { 62 | "version": "0.14.23", 63 | "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.23.tgz", 64 | "integrity": "sha512-XjnIcZ9KB6lfonCa+jRguXyRYcldmkyZ99ieDksqW/C8bnyEX299yA4QH2XcgijCgaddEZePPTgvx/2imsq7Ig==", 65 | "dev": true, 66 | "requires": { 67 | "esbuild-android-arm64": "0.14.23", 68 | "esbuild-darwin-64": "0.14.23", 69 | "esbuild-darwin-arm64": "0.14.23", 70 | "esbuild-freebsd-64": "0.14.23", 71 | "esbuild-freebsd-arm64": "0.14.23", 72 | "esbuild-linux-32": "0.14.23", 73 | "esbuild-linux-64": "0.14.23", 74 | "esbuild-linux-arm": "0.14.23", 75 | "esbuild-linux-arm64": "0.14.23", 76 | "esbuild-linux-mips64le": "0.14.23", 77 | "esbuild-linux-ppc64le": "0.14.23", 78 | "esbuild-linux-riscv64": "0.14.23", 79 | "esbuild-linux-s390x": "0.14.23", 80 | "esbuild-netbsd-64": "0.14.23", 81 | "esbuild-openbsd-64": "0.14.23", 82 | "esbuild-sunos-64": "0.14.23", 83 | "esbuild-windows-32": "0.14.23", 84 | "esbuild-windows-64": "0.14.23", 85 | "esbuild-windows-arm64": "0.14.23" 86 | } 87 | }, 88 | "esbuild-android-arm64": { 89 | "version": "0.14.23", 90 | "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.23.tgz", 91 | "integrity": "sha512-k9sXem++mINrZty1v4FVt6nC5BQCFG4K2geCIUUqHNlTdFnuvcqsY7prcKZLFhqVC1rbcJAr9VSUGFL/vD4vsw==", 92 | "dev": true, 93 | "optional": true 94 | }, 95 | "esbuild-darwin-64": { 96 | "version": "0.14.23", 97 | "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.23.tgz", 98 | "integrity": "sha512-lB0XRbtOYYL1tLcYw8BoBaYsFYiR48RPrA0KfA/7RFTr4MV7Bwy/J4+7nLsVnv9FGuQummM3uJ93J3ptaTqFug==", 99 | "dev": true, 100 | "optional": true 101 | }, 102 | "esbuild-darwin-arm64": { 103 | "version": "0.14.23", 104 | "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.23.tgz", 105 | "integrity": "sha512-yat73Z/uJ5tRcfRiI4CCTv0FSnwErm3BJQeZAh+1tIP0TUNh6o+mXg338Zl5EKChD+YGp6PN+Dbhs7qa34RxSw==", 106 | "dev": true, 107 | "optional": true 108 | }, 109 | "esbuild-freebsd-64": { 110 | "version": "0.14.23", 111 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.23.tgz", 112 | "integrity": "sha512-/1xiTjoLuQ+LlbfjJdKkX45qK/M7ARrbLmyf7x3JhyQGMjcxRYVR6Dw81uH3qlMHwT4cfLW4aEVBhP1aNV7VsA==", 113 | "dev": true, 114 | "optional": true 115 | }, 116 | "esbuild-freebsd-arm64": { 117 | "version": "0.14.23", 118 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.23.tgz", 119 | "integrity": "sha512-uyPqBU/Zcp6yEAZS4LKj5jEE0q2s4HmlMBIPzbW6cTunZ8cyvjG6YWpIZXb1KK3KTJDe62ltCrk3VzmWHp+iLg==", 120 | "dev": true, 121 | "optional": true 122 | }, 123 | "esbuild-linux-32": { 124 | "version": "0.14.23", 125 | "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.23.tgz", 126 | "integrity": "sha512-37R/WMkQyUfNhbH7aJrr1uCjDVdnPeTHGeDhZPUNhfoHV0lQuZNCKuNnDvlH/u/nwIYZNdVvz1Igv5rY/zfrzQ==", 127 | "dev": true, 128 | "optional": true 129 | }, 130 | "esbuild-linux-64": { 131 | "version": "0.14.23", 132 | "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.23.tgz", 133 | "integrity": "sha512-H0gztDP60qqr8zoFhAO64waoN5yBXkmYCElFklpd6LPoobtNGNnDe99xOQm28+fuD75YJ7GKHzp/MLCLhw2+vQ==", 134 | "dev": true, 135 | "optional": true 136 | }, 137 | "esbuild-linux-arm": { 138 | "version": "0.14.23", 139 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.23.tgz", 140 | "integrity": "sha512-x64CEUxi8+EzOAIpCUeuni0bZfzPw/65r8tC5cy5zOq9dY7ysOi5EVQHnzaxS+1NmV+/RVRpmrzGw1QgY2Xpmw==", 141 | "dev": true, 142 | "optional": true 143 | }, 144 | "esbuild-linux-arm64": { 145 | "version": "0.14.23", 146 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.23.tgz", 147 | "integrity": "sha512-c4MLOIByNHR55n3KoYf9hYDfBRghMjOiHLaoYLhkQkIabb452RWi+HsNgB41sUpSlOAqfpqKPFNg7VrxL3UX9g==", 148 | "dev": true, 149 | "optional": true 150 | }, 151 | "esbuild-linux-mips64le": { 152 | "version": "0.14.23", 153 | "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.23.tgz", 154 | "integrity": "sha512-kHKyKRIAedYhKug2EJpyJxOUj3VYuamOVA1pY7EimoFPzaF3NeY7e4cFBAISC/Av0/tiV0xlFCt9q0HJ68IBIw==", 155 | "dev": true, 156 | "optional": true 157 | }, 158 | "esbuild-linux-ppc64le": { 159 | "version": "0.14.23", 160 | "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.23.tgz", 161 | "integrity": "sha512-7ilAiJEPuJJnJp/LiDO0oJm5ygbBPzhchJJh9HsHZzeqO+3PUzItXi+8PuicY08r0AaaOe25LA7sGJ0MzbfBag==", 162 | "dev": true, 163 | "optional": true 164 | }, 165 | "esbuild-linux-riscv64": { 166 | "version": "0.14.23", 167 | "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.23.tgz", 168 | "integrity": "sha512-fbL3ggK2wY0D8I5raPIMPhpCvODFE+Bhb5QGtNP3r5aUsRR6TQV+ZBXIaw84iyvKC8vlXiA4fWLGhghAd/h/Zg==", 169 | "dev": true, 170 | "optional": true 171 | }, 172 | "esbuild-linux-s390x": { 173 | "version": "0.14.23", 174 | "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.23.tgz", 175 | "integrity": "sha512-GHMDCyfy7+FaNSO8RJ8KCFsnax8fLUsOrj9q5Gi2JmZMY0Zhp75keb5abTFCq2/Oy6KVcT0Dcbyo/bFb4rIFJA==", 176 | "dev": true, 177 | "optional": true 178 | }, 179 | "esbuild-netbsd-64": { 180 | "version": "0.14.23", 181 | "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.23.tgz", 182 | "integrity": "sha512-ovk2EX+3rrO1M2lowJfgMb/JPN1VwVYrx0QPUyudxkxLYrWeBxDKQvc6ffO+kB4QlDyTfdtAURrVzu3JeNdA2g==", 183 | "dev": true, 184 | "optional": true 185 | }, 186 | "esbuild-openbsd-64": { 187 | "version": "0.14.23", 188 | "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.23.tgz", 189 | "integrity": "sha512-uYYNqbVR+i7k8ojP/oIROAHO9lATLN7H2QeXKt2H310Fc8FJj4y3Wce6hx0VgnJ4k1JDrgbbiXM8rbEgQyg8KA==", 190 | "dev": true, 191 | "optional": true 192 | }, 193 | "esbuild-sunos-64": { 194 | "version": "0.14.23", 195 | "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.23.tgz", 196 | "integrity": "sha512-hAzeBeET0+SbScknPzS2LBY6FVDpgE+CsHSpe6CEoR51PApdn2IB0SyJX7vGelXzlyrnorM4CAsRyb9Qev4h9g==", 197 | "dev": true, 198 | "optional": true 199 | }, 200 | "esbuild-windows-32": { 201 | "version": "0.14.23", 202 | "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.23.tgz", 203 | "integrity": "sha512-Kttmi3JnohdaREbk6o9e25kieJR379TsEWF0l39PQVHXq3FR6sFKtVPgY8wk055o6IB+rllrzLnbqOw/UV60EA==", 204 | "dev": true, 205 | "optional": true 206 | }, 207 | "esbuild-windows-64": { 208 | "version": "0.14.23", 209 | "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.23.tgz", 210 | "integrity": "sha512-JtIT0t8ymkpl6YlmOl6zoSWL5cnCgyLaBdf/SiU/Eg3C13r0NbHZWNT/RDEMKK91Y6t79kTs3vyRcNZbfu5a8g==", 211 | "dev": true, 212 | "optional": true 213 | }, 214 | "esbuild-windows-arm64": { 215 | "version": "0.14.23", 216 | "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.23.tgz", 217 | "integrity": "sha512-cTFaQqT2+ik9e4hePvYtRZQ3pqOvKDVNarzql0VFIzhc0tru/ZgdLoXd6epLiKT+SzoSce6V9YJ+nn6RCn6SHw==", 218 | "dev": true, 219 | "optional": true 220 | }, 221 | "fill-range": { 222 | "version": "7.0.1", 223 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", 224 | "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", 225 | "dev": true, 226 | "requires": { 227 | "to-regex-range": "^5.0.1" 228 | } 229 | }, 230 | "fsevents": { 231 | "version": "2.3.2", 232 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 233 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 234 | "dev": true, 235 | "optional": true 236 | }, 237 | "function-bind": { 238 | "version": "1.1.1", 239 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", 240 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", 241 | "dev": true 242 | }, 243 | "glob-parent": { 244 | "version": "5.1.2", 245 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 246 | "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 247 | "dev": true, 248 | "requires": { 249 | "is-glob": "^4.0.1" 250 | } 251 | }, 252 | "has": { 253 | "version": "1.0.3", 254 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", 255 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", 256 | "dev": true, 257 | "requires": { 258 | "function-bind": "^1.1.1" 259 | } 260 | }, 261 | "html2canvas": { 262 | "version": "1.4.1", 263 | "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", 264 | "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", 265 | "requires": { 266 | "css-line-break": "^2.1.0", 267 | "text-segmentation": "^1.0.3" 268 | } 269 | }, 270 | "immutable": { 271 | "version": "4.0.0", 272 | "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", 273 | "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", 274 | "dev": true 275 | }, 276 | "is-binary-path": { 277 | "version": "2.1.0", 278 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 279 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 280 | "dev": true, 281 | "requires": { 282 | "binary-extensions": "^2.0.0" 283 | } 284 | }, 285 | "is-core-module": { 286 | "version": "2.8.1", 287 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz", 288 | "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==", 289 | "dev": true, 290 | "requires": { 291 | "has": "^1.0.3" 292 | } 293 | }, 294 | "is-extglob": { 295 | "version": "2.1.1", 296 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 297 | "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", 298 | "dev": true 299 | }, 300 | "is-glob": { 301 | "version": "4.0.3", 302 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", 303 | "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", 304 | "dev": true, 305 | "requires": { 306 | "is-extglob": "^2.1.1" 307 | } 308 | }, 309 | "is-number": { 310 | "version": "7.0.0", 311 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 312 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 313 | "dev": true 314 | }, 315 | "nanoid": { 316 | "version": "3.3.1", 317 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", 318 | "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==", 319 | "dev": true 320 | }, 321 | "normalize-path": { 322 | "version": "3.0.0", 323 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 324 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 325 | "dev": true 326 | }, 327 | "path-parse": { 328 | "version": "1.0.7", 329 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", 330 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", 331 | "dev": true 332 | }, 333 | "picocolors": { 334 | "version": "1.0.0", 335 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 336 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", 337 | "dev": true 338 | }, 339 | "picomatch": { 340 | "version": "2.3.1", 341 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", 342 | "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", 343 | "dev": true 344 | }, 345 | "postcss": { 346 | "version": "8.4.7", 347 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.7.tgz", 348 | "integrity": "sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==", 349 | "dev": true, 350 | "requires": { 351 | "nanoid": "^3.3.1", 352 | "picocolors": "^1.0.0", 353 | "source-map-js": "^1.0.2" 354 | } 355 | }, 356 | "readdirp": { 357 | "version": "3.6.0", 358 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", 359 | "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", 360 | "dev": true, 361 | "requires": { 362 | "picomatch": "^2.2.1" 363 | } 364 | }, 365 | "resolve": { 366 | "version": "1.22.0", 367 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", 368 | "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==", 369 | "dev": true, 370 | "requires": { 371 | "is-core-module": "^2.8.1", 372 | "path-parse": "^1.0.7", 373 | "supports-preserve-symlinks-flag": "^1.0.0" 374 | } 375 | }, 376 | "rollup": { 377 | "version": "2.68.0", 378 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.68.0.tgz", 379 | "integrity": "sha512-XrMKOYK7oQcTio4wyTz466mucnd8LzkiZLozZ4Rz0zQD+HeX4nUK4B8GrTX/2EvN2/vBF/i2WnaXboPxo0JylA==", 380 | "dev": true, 381 | "requires": { 382 | "fsevents": "~2.3.2" 383 | } 384 | }, 385 | "sass": { 386 | "version": "1.49.9", 387 | "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz", 388 | "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==", 389 | "dev": true, 390 | "requires": { 391 | "chokidar": ">=3.0.0 <4.0.0", 392 | "immutable": "^4.0.0", 393 | "source-map-js": ">=0.6.2 <2.0.0" 394 | } 395 | }, 396 | "source-map-js": { 397 | "version": "1.0.2", 398 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 399 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 400 | "dev": true 401 | }, 402 | "supports-preserve-symlinks-flag": { 403 | "version": "1.0.0", 404 | "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", 405 | "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", 406 | "dev": true 407 | }, 408 | "text-segmentation": { 409 | "version": "1.0.3", 410 | "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", 411 | "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", 412 | "requires": { 413 | "utrie": "^1.0.2" 414 | } 415 | }, 416 | "to-regex-range": { 417 | "version": "5.0.1", 418 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 419 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 420 | "dev": true, 421 | "requires": { 422 | "is-number": "^7.0.0" 423 | } 424 | }, 425 | "utrie": { 426 | "version": "1.0.2", 427 | "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz", 428 | "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", 429 | "requires": { 430 | "base64-arraybuffer": "^1.0.2" 431 | } 432 | }, 433 | "vite": { 434 | "version": "2.8.4", 435 | "resolved": "https://registry.npmjs.org/vite/-/vite-2.8.4.tgz", 436 | "integrity": "sha512-GwtOkkaT2LDI82uWZKcrpRQxP5tymLnC7hVHHqNkhFNknYr0hJUlDLfhVRgngJvAy3RwypkDCWtTKn1BjO96Dw==", 437 | "dev": true, 438 | "requires": { 439 | "esbuild": "^0.14.14", 440 | "fsevents": "~2.3.2", 441 | "postcss": "^8.4.6", 442 | "resolve": "^1.22.0", 443 | "rollup": "^2.59.0" 444 | } 445 | } 446 | } 447 | } 448 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "github-profile-header-generator", 3 | "version": "1.0.0", 4 | "description": "A simple but nice header image generator for your Github profile", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "build:gh-pages": "cp deploy/vite.config.gh-pages.js vite.config.js && vite build" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/leviarista/github-profile-header-generator.git" 14 | }, 15 | "author": "Leví Arista", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/leviarista/github-profile-header-generator/issues" 19 | }, 20 | "homepage": "https://github.com/leviarista/github-profile-header-generator#readme", 21 | "devDependencies": { 22 | "sass": "^1.49.9", 23 | "vite": "^2.8.0" 24 | }, 25 | "dependencies": { 26 | "html2canvas": "^1.4.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /public/fonts/Athiti-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/Athiti-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/Courgette-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/Courgette-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/DellaRespira-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/DellaRespira-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/IstokWeb-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/IstokWeb-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/Kalam-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/Kalam-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/Lancelot-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/Lancelot-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/Lato-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/Lato-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/LifeSavers-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/LifeSavers-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/Martel-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/Martel-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/MavenPro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/MavenPro-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/Playball-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/Playball-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/Poppins-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/Poppins-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/Quattrocento-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/Quattrocento-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/Ubuntu-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/fonts/Ubuntu-Regular.ttf -------------------------------------------------------------------------------- /public/gphg-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/gphg-logo.png -------------------------------------------------------------------------------- /public/images/decorations/apple-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/apple-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/apple.png -------------------------------------------------------------------------------- /public/images/decorations/binary-code-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/binary-code-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/binary-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/binary-code.png -------------------------------------------------------------------------------- /public/images/decorations/code-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/code-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/code.png -------------------------------------------------------------------------------- /public/images/decorations/coding-screen-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/coding-screen-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/coding-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/coding-screen.png -------------------------------------------------------------------------------- /public/images/decorations/coding-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/coding-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/coding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/coding.png -------------------------------------------------------------------------------- /public/images/decorations/dev-badge-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/dev-badge-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/dev-badge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/dev-badge.png -------------------------------------------------------------------------------- /public/images/decorations/dev-rainbow-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/dev-rainbow-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/dev-rainbow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/dev-rainbow.png -------------------------------------------------------------------------------- /public/images/decorations/dev-white-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/dev-white-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/dev-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/dev-white.png -------------------------------------------------------------------------------- /public/images/decorations/github-mark-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/github-mark-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/github-mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/github-mark.png -------------------------------------------------------------------------------- /public/images/decorations/idea-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/idea-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/idea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/idea.png -------------------------------------------------------------------------------- /public/images/decorations/my-octocat-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/my-octocat-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/my-octocat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/my-octocat.png -------------------------------------------------------------------------------- /public/images/decorations/octocat-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/octocat-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/octocat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/octocat.png -------------------------------------------------------------------------------- /public/images/decorations/programming-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/programming-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/programming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/programming.png -------------------------------------------------------------------------------- /public/images/decorations/rocket-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/rocket-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/rocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/rocket.png -------------------------------------------------------------------------------- /public/images/decorations/tabs-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/tabs-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/tabs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/tabs.png -------------------------------------------------------------------------------- /public/images/decorations/terminal-circle-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/terminal-circle-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/terminal-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/terminal-circle.png -------------------------------------------------------------------------------- /public/images/decorations/terminal-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/terminal-thumbnail.png -------------------------------------------------------------------------------- /public/images/decorations/terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/public/images/decorations/terminal.png -------------------------------------------------------------------------------- /public/images/patterns/bubbles-thumbnail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/patterns/bubbles.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | bubbles 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/images/patterns/circuit-board-thumbnail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/patterns/circuit-board.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /public/images/patterns/endless-clouds-thumbnail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/patterns/endless-clouds.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /public/images/patterns/endless-constellation-thumbnail.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 9 | 13 | 17 | 21 | 23 | -------------------------------------------------------------------------------- /public/images/patterns/endless-constellation.svg: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 6 | 7 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /public/images/patterns/falling-triangles-thumbnail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/images/patterns/falling-triangles.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/images/patterns/github-thumbnail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/images/patterns/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/images/patterns/glamorous-thumbnail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/patterns/glamorous.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | glamorous 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/images/patterns/i-like-food-thumbnail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/patterns/i-like-food.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /public/images/patterns/jigsaw-thumbnail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/patterns/jigsaw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/patterns/leaf-thumbnail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/images/patterns/leaf.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /public/images/patterns/lisbon-thumbnail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/patterns/lisbon.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /public/images/patterns/overlapping-circles-thumbnail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/images/patterns/overlapping-circles.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/images/patterns/random-shapes-thumbnail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/patterns/random-shapes.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /public/images/patterns/temple-thumbnail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/patterns/temple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-Agent: * 2 | Allow: / 3 | 4 | -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Github Profile Header Generator", 3 | "short_name": "A simple but nice header image generator for your Github profile", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } -------------------------------------------------------------------------------- /public/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | https://leviarista.github.io/github-profile-header-generator/ 12 | 2022-03-24T14:57:29+00:00 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /social/examples/example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/social/examples/example-1.png -------------------------------------------------------------------------------- /social/examples/example-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/social/examples/example-2.png -------------------------------------------------------------------------------- /social/examples/example-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/social/examples/example-3.png -------------------------------------------------------------------------------- /social/examples/example-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/social/examples/example-4.png -------------------------------------------------------------------------------- /social/examples/example-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/social/examples/example-5.png -------------------------------------------------------------------------------- /social/repo-header-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/social/repo-header-image.png -------------------------------------------------------------------------------- /social/social-preview-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/social/social-preview-small.png -------------------------------------------------------------------------------- /social/social-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leviarista/github-profile-header-generator/792cde4383a9184c18f5fdb5c487fdfbb7d71620/social/social-preview.png -------------------------------------------------------------------------------- /styles/how-to.scss: -------------------------------------------------------------------------------- 1 | .how-to-section { 2 | grid-area: section1; 3 | margin-top: 25px; 4 | margin-bottom: 25px; 5 | text-align: center; 6 | 7 | .title { 8 | font-family: "Kalam", sans-serif; 9 | } 10 | 11 | li { 12 | list-style-position: inside; 13 | margin-top: 10px; 14 | 15 | .demo { 16 | margin-top: 10px; 17 | } 18 | 19 | a { 20 | text-decoration: underline; 21 | } 22 | 23 | .code { 24 | margin: auto; 25 | margin-top: 5px; 26 | width: fit-content; 27 | padding: 5px 10px; 28 | background-color: #22272e; 29 | border-radius: 5px; 30 | 31 | code { 32 | font-size: 0.9rem; 33 | } 34 | } 35 | } 36 | } 37 | 38 | @media (max-width: 768px) { 39 | .how-to-section { 40 | margin-top: 50px; 41 | margin-bottom: 50px; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /styles/index.scss: -------------------------------------------------------------------------------- 1 | @use "reset"; 2 | @use "variables"; 3 | @use "main"; 4 | @use "how-to"; 5 | @use "toolbox-main"; 6 | @use "toolbox-background"; 7 | @use "toolbox-decorations"; 8 | @use "tabs"; 9 | @use "modals"; -------------------------------------------------------------------------------- /styles/main.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #4078c0; 3 | } 4 | 5 | .main-container { 6 | margin: 0 auto; 7 | padding: 25px 10%; 8 | display: grid; 9 | grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 10 | // grid-template-rows: 300px calc(100% - 300px - 25px - 45px) 25px; 11 | grid-template-rows: auto 1fr auto; 12 | grid-gap: 15px 40px; 13 | grid-auto-flow: row; 14 | grid-template-areas: 15 | "header header section2 section2 section2 section2" 16 | "section1 section1 section2 section2 section2 section2" 17 | "footer footer section2 section2 section2 section2"; 18 | background: linear-gradient(180deg, #6e5494 0%, #605fa1 32.6%, #4e6db3 68.54%, #4078c0 100%); 19 | background-repeat: no-repeat; 20 | background-size: cover; 21 | background-position: center; 22 | background-attachment: fixed; 23 | color: var(--text-color); 24 | font-family: var(--main-font-familiy); 25 | } 26 | 27 | a:link, 28 | a:visited { 29 | color: var(--text-color); 30 | text-decoration: none; 31 | } 32 | 33 | input, 34 | select, 35 | .btn { 36 | height: 35px; 37 | padding: 0 10px; 38 | background: rgba(255, 255, 255, 0.15); 39 | border: 1px solid rgb(255, 255, 255, 0.5); 40 | box-sizing: border-box; 41 | border-radius: var(--input-border-radius); 42 | font-family: var(--main-font-familiy); 43 | color: var(--text-color); 44 | 45 | &:focus { 46 | box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7); 47 | outline: transparent; 48 | // filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.5)); 49 | } 50 | 51 | &::placeholder { 52 | color: #cccccc; 53 | font-family: var(--main-font-familiy); 54 | } 55 | } 56 | 57 | textarea{ 58 | padding: 10px; 59 | background: rgba(255, 255, 255, 0.15); 60 | border: 1px solid rgb(255, 255, 255, 0.5); 61 | box-sizing: border-box; 62 | border-radius: var(--input-border-radius); 63 | font-family: var(--main-font-familiy); 64 | color: var(--text-color); 65 | 66 | &:focus { 67 | box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7); 68 | outline: transparent; 69 | } 70 | } 71 | 72 | 73 | input[type="range"] { 74 | // width: 100%; 75 | height: 10px; 76 | margin-left: 5px; 77 | margin-top: 5px; 78 | padding: 0; 79 | -webkit-appearance: none; 80 | appearance: none; 81 | background: rgba(255, 255, 255, 0.467); 82 | outline: none; 83 | -webkit-transition: 0.2s; 84 | transition: opacity 0.2s; 85 | // cursor: pointer; 86 | 87 | &::-webkit-slider-thumb { 88 | -webkit-appearance: none; 89 | appearance: none; 90 | width: 20px; 91 | height: 20px; 92 | background: #6e5494; 93 | border: solid white 1px; 94 | border-radius: 50%; 95 | cursor: pointer; 96 | } 97 | 98 | &::-moz-range-thumb { 99 | width: 20px; 100 | height: 20px; 101 | background: #6e5494; 102 | border: solid white 1px; 103 | border-radius: 50%; 104 | cursor: pointer; 105 | } 106 | } 107 | 108 | input[type="file"] { 109 | width: 120px; 110 | padding: 0; 111 | font-family: var(--main-font-familiy); 112 | color: var(--text-color); 113 | 114 | &::-webkit-file-upload-button { 115 | visibility: hidden; 116 | } 117 | 118 | &::before { 119 | height: 35px; 120 | content: "Select an image"; 121 | display: flex; 122 | align-items: center; 123 | justify-content: center; 124 | background: rgba(255, 255, 255, 0.15); 125 | padding: 5px 8px; 126 | outline: none; 127 | white-space: nowrap; 128 | cursor: pointer; 129 | font-family: var(--main-font-familiy); 130 | color: var(--text-color); 131 | border: 1px solid rgb(255, 255, 255, 0.5); 132 | border-radius: var(--input-border-radius); 133 | } 134 | 135 | &:hover::before { 136 | border-color: rgb(255, 255, 255); 137 | } 138 | 139 | &:active { 140 | outline: 0; 141 | transition: all 1s; 142 | } 143 | 144 | // &:active::before { 145 | // background: -webkit-linear-gradient(top, #e3e3e3, #9976ce); 146 | // } 147 | } 148 | 149 | input[type="color"] { 150 | border-radius: 2px; 151 | } 152 | 153 | output { 154 | min-width: 25px; 155 | } 156 | 157 | button { 158 | font-family: var(--main-font-familiy); 159 | font-size: 14px; 160 | cursor: pointer; 161 | } 162 | 163 | .header { 164 | grid-area: header; 165 | display: flex; 166 | align-items: center; 167 | justify-content: center; 168 | flex-direction: column; 169 | text-align: center; 170 | padding-top: 25px; 171 | filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.5)); 172 | 173 | img { 174 | margin-bottom: 5px; 175 | } 176 | 177 | span { 178 | font-family: var(--secondary-font-familiy); 179 | line-height: 1; 180 | } 181 | 182 | h2 { 183 | margin-top: 15px; 184 | font-size: 14px; 185 | font-style: italic; 186 | } 187 | 188 | .github-button-container { 189 | margin-top: 15px; 190 | } 191 | } 192 | 193 | .footer { 194 | grid-area: footer; 195 | display: flex; 196 | align-items: center; 197 | flex-direction: column; 198 | justify-content: space-between; 199 | 200 | >div { 201 | display: flex; 202 | 203 | >a { 204 | margin-top: 10px; 205 | display: flex; 206 | align-items: center; 207 | justify-content: center; 208 | text-align: center; 209 | 210 | &:hover { 211 | text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5); 212 | } 213 | 214 | &:not(:first-child) { 215 | margin-left: 10px; 216 | } 217 | 218 | } 219 | } 220 | 221 | .icons img { 222 | width: 25px; 223 | height: 25px; 224 | } 225 | 226 | // FF5F5F 227 | // 40DCA5 228 | // 5F7FFF 229 | // FFDD00 230 | // BD5FFF 231 | // 794bc4 232 | // 6E5494 233 | 234 | .feedback-button { 235 | background-color: #6E5494; 236 | box-shadow: 1px 1px 0px rgb(0 0 0 / 20%); 237 | line-height: 35px !important; 238 | min-width: 135px; 239 | display: inline-block !important; 240 | padding: 2px 12px !important; 241 | text-align: center !important; 242 | border-radius: 7px; 243 | color: #fff; 244 | cursor: pointer; 245 | overflow-wrap: break-word; 246 | vertical-align: middle; 247 | border: 0 none #fff !important; 248 | // font-family: 'Quicksand', Helvetica, Century Gothic, sans-serif !important; 249 | text-decoration: none; 250 | text-shadow: none; 251 | font-weight: 600 !important; 252 | font-size: 14px !important; 253 | } 254 | } 255 | 256 | @media (max-width: 768px) { 257 | .main-container { 258 | flex-direction: column; 259 | display: flex; 260 | padding: 25px 5%; 261 | } 262 | } -------------------------------------------------------------------------------- /styles/modals.scss: -------------------------------------------------------------------------------- 1 | .modal { 2 | position: fixed; 3 | background-color: rgba(0, 0, 0, 0.25); 4 | top: 0; 5 | right: 0; 6 | bottom: 0; 7 | left: 0; 8 | z-index: 999; 9 | visibility: hidden; 10 | opacity: 0; 11 | pointer-events: none; 12 | transition: all 0.25s; 13 | 14 | &:target { 15 | visibility: visible; 16 | opacity: 1; 17 | pointer-events: auto; 18 | } 19 | 20 | &>div { 21 | width: 450px; 22 | margin-top: 15px; 23 | max-width: calc(100% - 30px); 24 | position: absolute; 25 | top: 50%; 26 | left: 50%; 27 | transform: translate(-50%, -50%); 28 | padding: 2em; 29 | background: #4e6db3; 30 | box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5), 0px 0px 10px rgba(0, 0, 0, 0.25); 31 | border-radius: var(--button-border-radius); 32 | } 33 | 34 | .modal-title { 35 | font-size: 1.2rem; 36 | } 37 | 38 | .modal-info-text { 39 | border-top: solid 1px rgba(255, 255, 255, 0.5); 40 | font-size: 12px; 41 | } 42 | 43 | a { 44 | font-weight: 700; 45 | } 46 | } 47 | 48 | .modal-close { 49 | position: absolute; 50 | right: 15px; 51 | top: 15px; 52 | } 53 | 54 | #feedback-modal { 55 | input { 56 | width: calc(50% - 2px); 57 | margin-bottom: 5px; 58 | } 59 | textarea{ 60 | width: 100%; 61 | 62 | &::-webkit-scrollbar { 63 | width: 14px; 64 | cursor: pointer; 65 | } 66 | 67 | &::-webkit-scrollbar-track { 68 | background: rgba(0, 0, 0, 0.1); 69 | // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 70 | } 71 | 72 | &::-webkit-scrollbar-thumb { 73 | border-radius: var(--input-border-radius); 74 | background-color: rgba(255, 255, 255, 0.75); 75 | // 76 | } 77 | } 78 | button { 79 | display: block; 80 | margin-left: auto 81 | } 82 | } -------------------------------------------------------------------------------- /styles/reset.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-size: 14px; 4 | } 5 | 6 | * { 7 | border: none; 8 | } 9 | 10 | *, 11 | *:before, 12 | *:after { 13 | box-sizing: inherit; 14 | } 15 | 16 | body, 17 | h1, 18 | h2, 19 | h3, 20 | h4, 21 | h5, 22 | h6, 23 | p, 24 | ol, 25 | ul { 26 | margin: 0; 27 | padding: 0; 28 | font-weight: normal; 29 | } 30 | 31 | html, body { 32 | min-height: 100%; 33 | height: 100%; 34 | } 35 | @media (max-width: 768px) { 36 | body { 37 | height: auto; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /styles/tabs.scss: -------------------------------------------------------------------------------- 1 | /* Style the tab */ 2 | .tab { 3 | display: flex; 4 | justify-content: center; 5 | overflow: hidden; 6 | border-bottom: 1px solid #ccc; 7 | color: var(--text-color); 8 | } 9 | 10 | /* Style the buttons that are used to open the tab content */ 11 | .tab button { 12 | background-color: inherit; 13 | float: left; 14 | border: none; 15 | outline: none; 16 | cursor: pointer; 17 | padding: 14px 16px; 18 | transition: 0.3s; 19 | color: white; 20 | } 21 | 22 | /* Change background color of buttons on hover */ 23 | .tab button:hover { 24 | background-color: rgba(255, 255, 255, 0.15); 25 | } 26 | 27 | /* Create an active/current tablink class */ 28 | .tab button.active { 29 | background-color: rgba(255, 255, 255, 0.15); 30 | // border-top-left-radius: 7px; 31 | // border-top-right-radius: 7px; 32 | } 33 | 34 | /* Style the tab content */ 35 | .tabcontent { 36 | display: none; 37 | padding: 15px 15px 0 15px; 38 | } 39 | 40 | .tabcontent { 41 | animation: fadeEffect 1s; /* Fading effect takes 1 second */ 42 | } 43 | 44 | /* Go from zero to full opacity */ 45 | @keyframes fadeEffect { 46 | from { 47 | opacity: 0; 48 | } 49 | to { 50 | opacity: 1; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /styles/toolbox-background.scss: -------------------------------------------------------------------------------- 1 | .toolbox-background { 2 | box-sizing: border-box; 3 | 4 | > div { 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | flex-wrap: wrap; 9 | 10 | &:not(:last-child) { 11 | margin-bottom: 15px; 12 | } 13 | } 14 | 15 | .bg-color-selectors { 16 | > div { 17 | display: flex; 18 | align-items: center; 19 | 20 | &:not(:last-child) { 21 | margin-right: 15px; 22 | } 23 | } 24 | 25 | input { 26 | margin-left: 5px; 27 | cursor: pointer; 28 | padding: 0; 29 | } 30 | } 31 | 32 | .border-inputs { 33 | div { 34 | display: flex; 35 | align-items: flex-start; 36 | 37 | &:not(:last-child) { 38 | margin-right: 15px; 39 | } 40 | 41 | input { 42 | cursor: pointer; 43 | } 44 | } 45 | } 46 | 47 | .pattern-inputs { 48 | div { 49 | display: flex; 50 | align-items: flex-start; 51 | 52 | &:not(:last-child) { 53 | margin-right: 15px; 54 | } 55 | 56 | &:first-child { 57 | align-items: center; 58 | } 59 | 60 | #pattern-color-selector { 61 | padding: 0; 62 | } 63 | 64 | input { 65 | margin-left: 5px; 66 | cursor: pointer; 67 | } 68 | } 69 | } 70 | 71 | .patterns-buttons { 72 | max-width: 550px; 73 | margin: auto; 74 | 75 | button { 76 | width: 50px; 77 | height: 50px; 78 | padding: 0; 79 | margin-left: 5px; 80 | margin-bottom: 5px; 81 | display: flex; 82 | align-items: center; 83 | justify-content: center; 84 | 85 | img { 86 | max-width: 45px; 87 | max-height: 45px; 88 | } 89 | 90 | &.selected { 91 | border: solid white 2px; 92 | } 93 | } 94 | } 95 | } 96 | 97 | @media (max-width: 768px) { 98 | .toolbox-background { 99 | .border-inputs { 100 | > div { 101 | &:not(:last-child) { 102 | margin-bottom: 10px; 103 | } 104 | } 105 | } 106 | 107 | .pattern-inputs { 108 | input { 109 | &:not(:last-child) { 110 | margin-bottom: 15px; 111 | } 112 | } 113 | } 114 | 115 | .patterns-buttons { 116 | button { 117 | margin-bottom: 5px; 118 | } 119 | } 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /styles/toolbox-decorations.scss: -------------------------------------------------------------------------------- 1 | .toolbox-decorations { 2 | box-sizing: border-box; 3 | max-width: 550px; 4 | margin: auto; 5 | 6 | > div { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | flex-wrap: wrap; 11 | 12 | &:not(:last-child) { 13 | margin-bottom: 15px; 14 | } 15 | } 16 | 17 | .decorations-buttons { 18 | button { 19 | width: 50px; 20 | height: 50px; 21 | padding: 0; 22 | margin-left: 5px; 23 | margin-bottom: 5px; 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | 28 | img { 29 | max-width: 40px; 30 | max-height: 40px; 31 | // border-radius: var(--input-border-radius); 32 | } 33 | 34 | &.selected { 35 | border: solid white 2px; 36 | } 37 | } 38 | } 39 | 40 | .decorations-upload { 41 | flex-direction: column; 42 | 43 | input { 44 | margin-top: 5px; 45 | } 46 | 47 | .myoctocats-tip { 48 | margin-top: 10px; 49 | margin-bottom: 10px; 50 | padding: 5px 10px; 51 | // border: 2px solid rgb(255, 255, 255, 0.5); 52 | border-radius: var(--input-border-radius); 53 | font-size: 0.9rem; 54 | // text-transform: uppercase; 55 | // text-align: center; 56 | line-height: 1.5; 57 | background: rgba(255, 255, 255, 0.15); 58 | 59 | a { 60 | font-weight: 700; 61 | text-decoration: underline; 62 | } 63 | } 64 | } 65 | } 66 | 67 | @media (max-width: 768px) { 68 | .toolbox-decorations { 69 | .decorations-buttons { 70 | button { 71 | margin-bottom: 5px; 72 | } 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /styles/toolbox-main.scss: -------------------------------------------------------------------------------- 1 | .toolbox-container { 2 | grid-area: section2; 3 | // text-align: center; 4 | background: rgba(255, 255, 255, 0.15); 5 | border-radius: 10px; 6 | box-shadow: 0px 0px 5px 2px rgba(255, 255, 255, 0.25); 7 | overflow: auto; 8 | 9 | .result-box { 10 | // height: 300px; 11 | padding: var(--paddings); 12 | border-radius: 10px 10px 0px 0px; 13 | background: var(--github-dark-mode-color); 14 | transition: 0.5s ease; 15 | 16 | &.light-mode { 17 | background: var(--github-light-mode-color); 18 | } 19 | 20 | #github-header-image { 21 | margin: 0 auto; 22 | border: none; 23 | overflow: hidden; 24 | background-size: 100px; 25 | transition: 0.25s ease; 26 | 27 | .title, 28 | .subtitle { 29 | transition: 0.25s ease; 30 | } 31 | 32 | img { 33 | transition: 0.15s; 34 | } 35 | } 36 | 37 | .options-container { 38 | display: flex; 39 | justify-content: center; 40 | flex-wrap: wrap; 41 | padding: var(--paddings) 0 0 0; 42 | 43 | button { 44 | width: 155px; 45 | height: 35px; 46 | border: 1px solid #ffffff; 47 | border-radius: var(--button-border-radius); 48 | color: var(--text-color); 49 | text-transform: uppercase; 50 | font-size: 12px; 51 | font-weight: 600; 52 | transition: all 0.25s ease-in-out; 53 | 54 | &:hover { 55 | box-shadow: 0px 0px 5px 2px rgba(255, 255, 255, 0.25); 56 | } 57 | 58 | &:not(:last-child) { 59 | margin-right: 15px; 60 | } 61 | } 62 | 63 | .dark-mode-button { 64 | background: #2e384d; 65 | } 66 | .download-button { 67 | background: #2D8655; 68 | } 69 | .randomize-button { 70 | background: #862D5A; 71 | } 72 | } 73 | } 74 | 75 | .toolbox { 76 | box-sizing: border-box; 77 | 78 | > div { 79 | display: flex; 80 | align-items: center; 81 | justify-content: center; 82 | flex-wrap: wrap; 83 | 84 | &:not(:last-child) { 85 | margin-bottom: 15px; 86 | } 87 | } 88 | 89 | .text-inputs { 90 | justify-content: space-between; 91 | 92 | input { 93 | text-align: center; 94 | width: calc(50% - 7.5px); 95 | } 96 | } 97 | 98 | .color-selectors-container { 99 | div { 100 | display: flex; 101 | align-items: center; 102 | 103 | &:not(:last-child) { 104 | margin-right: 15px; 105 | } 106 | 107 | input { 108 | margin-left: 5px; 109 | cursor: pointer; 110 | padding: 0; 111 | } 112 | } 113 | } 114 | 115 | .size-inputs { 116 | > div { 117 | &:not(:last-child) { 118 | margin-right: 15px; 119 | } 120 | 121 | input { 122 | width: 70px; 123 | margin-left: 5px; 124 | } 125 | } 126 | 127 | .paddings-input { 128 | width: 100px; 129 | } 130 | } 131 | 132 | .align-buttons { 133 | button { 134 | margin-left: 5px; 135 | } 136 | } 137 | 138 | .font-selectors-container { 139 | div { 140 | &:not(:last-child) { 141 | margin-right: 15px; 142 | } 143 | 144 | input { 145 | margin-left: 5px; 146 | } 147 | } 148 | 149 | select { 150 | cursor: pointer; 151 | margin-left: 5px; 152 | 153 | option { 154 | color: black; 155 | } 156 | } 157 | } 158 | 159 | .font-size-inputs { 160 | display: flex; 161 | 162 | div { 163 | display: flex; 164 | align-items: flex-start; 165 | 166 | &:not(:last-child) { 167 | margin-right: 15px; 168 | } 169 | 170 | input { 171 | cursor: pointer; 172 | } 173 | } 174 | } 175 | } 176 | 177 | &::-webkit-scrollbar { 178 | width: 0.4em; 179 | } 180 | 181 | &::-webkit-scrollbar-track { 182 | background: rgba(0, 0, 0, 0.1); 183 | // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 184 | } 185 | 186 | &::-webkit-scrollbar-thumb { 187 | border-radius: 10px; 188 | background-color: rgba(255, 255, 255, 0.75); 189 | // 190 | } 191 | } 192 | 193 | @media (max-width: 768px) { 194 | .toolbox-container { 195 | input { 196 | margin-bottom: 5px; 197 | } 198 | 199 | .result-box { 200 | .options-container { 201 | button { 202 | width: 100%; 203 | &:not(:last-child) { 204 | margin-bottom: 10px; 205 | margin-right: 0; 206 | } 207 | } 208 | } 209 | } 210 | 211 | .toolbox { 212 | .text-inputs { 213 | input { 214 | width: 100%; 215 | // &:not(:last-child) { 216 | // margin-bottom: 10px; 217 | // } 218 | } 219 | } 220 | .font-selectors-container { 221 | > div { 222 | &:not(:last-child) { 223 | margin-bottom: 10px; 224 | } 225 | } 226 | } 227 | .font-size-inputs { 228 | input { 229 | &:not(:last-child) { 230 | margin-bottom: 15px; 231 | } 232 | } 233 | } 234 | } 235 | } 236 | } 237 | -------------------------------------------------------------------------------- /styles/variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --button-border-radius: 7px; 3 | --input-border-radius: 7px; 4 | --text-color: white; 5 | --paddings: 25px; 6 | --github-dark-mode-color: #0d1117; 7 | --github-light-mode-color: white; 8 | --main-font-familiy: "Red Hat Display", Arial, Helvetica, sans-serif; 9 | --secondary-font-familiy: "Kalam"; 10 | } 11 | 12 | @media (max-width: 768px) { 13 | :root { 14 | --paddings: 15px; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | build: { 3 | emptyOutDir: true 4 | } 5 | } --------------------------------------------------------------------------------