├── .husky ├── .gitignore ├── pre-commit └── commit-msg ├── CNAME ├── .babelrc ├── public ├── favicon.png ├── developer-titles.jpg └── index.html ├── postcss.config.js ├── src ├── js │ ├── modules │ │ ├── analytics.js │ │ ├── randomInt.js │ │ ├── randomInt.test.js │ │ ├── shareLink.js │ │ └── shareLink.test.js │ └── index.js ├── css │ ├── reset.css │ └── index.css └── data │ └── titles.json ├── .gitignore ├── .github ├── PULL_REQUEST_TEMPLATE.md ├── workflows │ ├── test.yml │ └── deploy.yml └── CONTRIBUTING.md ├── webpack.config.js ├── LICENSE ├── package.json └── README.md /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | developertitles.com -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | ['@babel/preset-env'] 4 | ] 5 | } -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jlozovei/developer-titles/HEAD/public/favicon.png -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit "" 5 | -------------------------------------------------------------------------------- /public/developer-titles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jlozovei/developer-titles/HEAD/public/developer-titles.jpg -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('autoprefixer'), require('precss'), require('rucksack-css')] 3 | }; 4 | -------------------------------------------------------------------------------- /src/js/modules/analytics.js: -------------------------------------------------------------------------------- 1 | const analytics = { 2 | sendEvent(action, meta) { 3 | if (typeof gtag !== 'function') { 4 | return setTimeout(() => analytics.sendEvent(action, meta), 500); 5 | } 6 | 7 | return gtag('event', action, meta); 8 | } 9 | }; 10 | 11 | export default analytics; 12 | -------------------------------------------------------------------------------- /src/js/modules/randomInt.js: -------------------------------------------------------------------------------- 1 | const randomInt = (min, max, last) => { 2 | const random = Math.floor(Math.random() * (max - min + 1)) + min; 3 | 4 | if (last) { 5 | if (random === last) return randomInt(min, max); 6 | else return random; 7 | } else return random; 8 | }; 9 | 10 | export default randomInt; 11 | -------------------------------------------------------------------------------- /src/js/modules/randomInt.test.js: -------------------------------------------------------------------------------- 1 | import randomInt from './randomInt'; 2 | 3 | describe('randomInt', () => { 4 | it('Should generate a random integer', () => { 5 | const min = 0; 6 | const max = 10; 7 | const random = randomInt(min, max, false); 8 | 9 | expect(random).toBeGreaterThanOrEqual(min); 10 | expect(random).toBeLessThanOrEqual(max); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/js/modules/shareLink.js: -------------------------------------------------------------------------------- 1 | const shareLink = titleName => { 2 | const options = { 3 | username: 'juliolozovei', 4 | hashtags: 'developer,developertitles', 5 | url: 'https://developertitles.com/' 6 | }; 7 | 8 | return encodeURI( 9 | `https://twitter.com/intent/tweet?url=${options.url}&text=I'm the "${titleName}". Check your title at Developer Titles&related=${options.username}&hashtags=${options.hashtags}` 10 | ); 11 | }; 12 | 13 | export default shareLink; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | coverage/ 4 | 5 | # local env files 6 | .env 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Test files 16 | test/unit/coverage/ 17 | /test/e2e/reports/ 18 | selenium-debug.log 19 | 20 | # Editor directories and files 21 | .idea 22 | .vscode 23 | *.suo 24 | *.ntvs* 25 | *.njsproj 26 | *.sln 27 | *.sketch 28 | *.mov 29 | *.zip 30 | 31 | # Design files 32 | design/ 33 | 34 | # Build files 35 | public/*.js 36 | public/*.md 37 | public/CNAME 38 | -------------------------------------------------------------------------------- /src/js/modules/shareLink.test.js: -------------------------------------------------------------------------------- 1 | import shareLink from './shareLink'; 2 | 3 | describe('shareLink', () => { 4 | it('Should generate the share link correctly', () => { 5 | const titleName = 'SR Share link developer'; 6 | const link = shareLink(titleName); 7 | const decoded = decodeURI(link); 8 | 9 | expect(decoded).toBe( 10 | `https://twitter.com/intent/tweet?url=https://developertitles.com/&text=I'm the "${titleName}". Check your title at Developer Titles&related=juliolozovei&hashtags=developer,developertitles` 11 | ); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Hey there, welcome. Please follow the steps below to tell us about your contribution. 2 | Answer the questions below - if it can't be answered, use `N/A` as the answer - and click `Create pull request`. 3 | 4 | Please verify if the status checks are passing. If they're not and you believe it's because of your changes, leave a comment and we'll take a deeper look to solve it! 5 | 6 | --- 7 | 8 | #### What is the goal of this change? 9 | (answer here) 10 | 11 | #### Is there any issue related? 12 | (answer here) 13 | 14 | #### How does the changes address the issue? 15 | (answer here) 16 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | on: 3 | pull_request: 4 | branches: 5 | - master 6 | jobs: 7 | test: 8 | name: Test code 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Checkout 12 | uses: actions/checkout@v4 13 | 14 | - name: Setup Node.js 15 | uses: actions/setup-node@v4 16 | with: 17 | node-version: 18.16.0 18 | cache: 'npm' 19 | 20 | - name: Install dependencies 21 | run: npm install 22 | 23 | - name: Test code 24 | run: npm run test 25 | 26 | - name: Test build 27 | run: npm run build 28 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | release: 8 | name: Deploy to GitHub Pages 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Checkout 12 | uses: actions/checkout@v4 13 | 14 | - name: Setup Node.js 15 | uses: actions/setup-node@v4 16 | with: 17 | node-version: 18.16.0 18 | cache: 'npm' 19 | 20 | - name: Install dependencies 21 | run: npm install 22 | 23 | - name: Build 24 | run: npm run build 25 | 26 | - name: Push to gh-pages 27 | uses: crazy-max/ghaction-github-pages@v1.3.0 28 | with: 29 | build_dir: public 30 | keep_history: true 31 | env: 32 | GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} 33 | -------------------------------------------------------------------------------- /src/css/reset.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, 4 | Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 5 | } 6 | 7 | body { 8 | min-height: 100vh; 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | font-size: 16px; 12 | } 13 | 14 | body, 15 | h1, 16 | h2, 17 | p, 18 | ul, 19 | li, 20 | button { 21 | margin: 0; 22 | padding: 0; 23 | } 24 | 25 | li { 26 | list-style: none; 27 | } 28 | 29 | a { 30 | cursor: pointer; 31 | color: inherit; 32 | text-decoration: underline; 33 | } 34 | 35 | button { 36 | border: 0; 37 | background-color: transparent; 38 | appearance: none; 39 | color: inherit; 40 | font-size: inherit; 41 | 42 | &:focus { 43 | outline: none; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | 4 | const config = { 5 | devServer: { 6 | contentBase: path.join(__dirname, 'public'), 7 | compress: true, 8 | port: 9000 9 | }, 10 | entry: './src/js/index.js', 11 | mode: 'production', 12 | output: { 13 | path: path.resolve(__dirname, 'public'), 14 | filename: 'index.js' 15 | }, 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.js$/, 20 | use: 'babel-loader', 21 | exclude: /node_modules/ 22 | }, 23 | { 24 | test: /\.css$/, 25 | use: [ 26 | 'style-loader', 27 | { 28 | loader: 'css-loader', 29 | options: { 30 | importLoaders: 1 31 | } 32 | }, 33 | 'postcss-loader' 34 | ] 35 | } 36 | ] 37 | } 38 | }; 39 | 40 | module.exports = config; 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Julio Lozovei 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. -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | Well, thanks for taking a time to contribute! This is really awesome! :tada: 3 | 4 | 5 | ## How to Contribute? 6 | There are many ways to contribute with this project: from bug reporting to performance/code enhancements, asking for new features, improving documentation... 7 | 8 | To do so, first take a look on the [opened issues](https://github.com/jlozovei/developer-titles/issues). If you don't find any that fits your request/problem you can [open a new issue](https://github.com/jlozovei/developer-titles/issues/new) and provide a nice description of what you are asking; technical references (links, reports...) and code samples are always welcome, and they help us to find the better solution for the problems. 9 | 10 | 11 | ## Coding Conventions 12 | Personally I'm not stricted to any `JavaScript Guideline`, but I like to keep nice patterns and use community approved conventions. 13 | 14 | So, if you use the project's linting rules and conventions your request will be halfway approved! 15 | 16 | Also, if possible, create test cases for your modifications - it's very important to keep the project's quality and assurance of good code! 17 | 18 | 19 | ## Pull Requests 20 | To create a nice PR, follow the [template](https://github.com/jlozovei/developer-titles/blob/master/.github/PULL_REQUEST_TEMPLATE.md). The goal will always be to maintain/improve the project's quality and fix the existing problems; and to do so, we must keep a pattern. 21 | 22 | 23 | ## Is it your first contribution? 24 | Take a look at the [beginner issues](https://github.com/jlozovei/developer-titles/labels/beginner) and [help wanted issues](https://github.com/jlozovei/developer-titles/labels/help%20wanted), they are a nice way to start. 25 | 26 | Either in the project or in the open source community, your contribution will always be welcome. We (the community) will help you to create a nice and worthy contribution! 27 | -------------------------------------------------------------------------------- /src/css/index.css: -------------------------------------------------------------------------------- 1 | body, 2 | .page { 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | } 7 | 8 | body { 9 | align-items: center; 10 | background-color: #ffffff; 11 | color: #131415; 12 | transition: background-color ease 100ms; 13 | } 14 | 15 | .page { 16 | padding: 1em; 17 | width: 100%; 18 | flex: 1; 19 | } 20 | 21 | .refresh { 22 | align-self: flex-end; 23 | cursor: pointer; 24 | } 25 | 26 | .devtitle { 27 | display: flex; 28 | flex-direction: column; 29 | align-items: flex-start; 30 | justify-content: center; 31 | flex: 1; 32 | 33 | &__name { 34 | font-size: responsive 2em 8em; 35 | font-range: 18.75em 56em; 36 | line-height: 1.2; 37 | word-break: break-word; 38 | } 39 | 40 | &__credits { 41 | p, 42 | a { 43 | font-size: 0.75em; 44 | } 45 | 46 | a { 47 | text-decoration: underline; 48 | } 49 | } 50 | } 51 | 52 | .about { 53 | position: fixed; 54 | top: 0; 55 | left: 0; 56 | display: flex; 57 | flex-direction: column; 58 | align-items: flex-start; 59 | justify-content: flex-start; 60 | width: 100%; 61 | height: 100%; 62 | padding: 4rem 1rem 1rem; 63 | opacity: 0; 64 | visibility: hidden; 65 | transition: all ease-in-out 200ms; 66 | z-index: 2; 67 | overflow: auto; 68 | 69 | &--active { 70 | opacity: 1; 71 | visibility: visible; 72 | } 73 | 74 | h2 { 75 | margin-bottom: 4rem; 76 | font-size: 4rem; 77 | } 78 | 79 | p { 80 | margin-bottom: 1.125rem; 81 | font-size: 1.875rem; 82 | line-height: calc(100% + 8px); 83 | } 84 | 85 | a { 86 | font-weight: bold; 87 | } 88 | 89 | button { 90 | position: absolute; 91 | top: 1rem; 92 | right: 1rem; 93 | cursor: pointer; 94 | } 95 | } 96 | 97 | nav { 98 | display: flex; 99 | flex-flow: row wrap; 100 | align-items: center; 101 | justify-content: space-between; 102 | margin: 0 -0.25em; 103 | 104 | h2 { 105 | padding: 0.25em; 106 | } 107 | 108 | ul { 109 | li { 110 | display: inline-block; 111 | 112 | a, 113 | button { 114 | cursor: pointer; 115 | padding: 0.25em; 116 | text-decoration: underline; 117 | } 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "developer-titles", 3 | "version": "0.0.2", 4 | "description": "Fictional developer titles", 5 | "main": "", 6 | "scripts": { 7 | "test": "jest", 8 | "start": "webpack-dev-server", 9 | "prebuild": "cp ./README.md ./public && cp ./CNAME ./public", 10 | "build": "webpack", 11 | "prepare": "husky install", 12 | "format": "prettier --write \"**/*.{js,json}\"" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/jlozovei/developer-titles.git" 17 | }, 18 | "author": "Julio Lozovei (https://jlozovei.dev)", 19 | "homepage": "https://github.com/jlozovei/developer-titles#readme", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/jlozovei/developer-titles/issues" 23 | }, 24 | "devDependencies": { 25 | "@babel/core": "^7.6.2", 26 | "@babel/preset-env": "^7.6.2", 27 | "@commitlint/cli": "^17.4.2", 28 | "@commitlint/config-conventional": "^17.4.2", 29 | "autoprefixer": "^9.6.4", 30 | "babel-loader": "^8.0.6", 31 | "css-loader": "^3.2.0", 32 | "eslint": "^8.0.1", 33 | "eslint-config-prettier": "^6.4.0", 34 | "eslint-plugin-prettier": "^3.1.1", 35 | "husky": "^8.0.3", 36 | "jest": "^27.2.5", 37 | "lint-staged": "^13.1.0", 38 | "postcss-loader": "^3.0.0", 39 | "prettier": "^1.18.2", 40 | "style-loader": "^1.0.0", 41 | "webpack": "^5.76.0", 42 | "webpack-cli": "^4.9.0", 43 | "webpack-dev-server": "^4.3.1" 44 | }, 45 | "dependencies": { 46 | "precss": "^4.0.0", 47 | "rucksack-css": "^1.0.2" 48 | }, 49 | "lint-staged": { 50 | "src/**/*.{js,css}": [ 51 | "npm run format" 52 | ], 53 | "*.js": "eslint --cache --fix" 54 | }, 55 | "commitlint": { 56 | "extends": [ 57 | "@commitlint/config-conventional" 58 | ] 59 | }, 60 | "prettier": { 61 | "printWidth": 100, 62 | "useTabs": false, 63 | "tabWidth": 2, 64 | "semi": true, 65 | "singleQuote": true, 66 | "trailingComma": "none" 67 | }, 68 | "eslintConfig": { 69 | "rules": {}, 70 | "env": { 71 | "es6": true, 72 | "browser": true 73 | }, 74 | "parserOptions": { 75 | "ecmaVersion": 2018, 76 | "sourceType": "module" 77 | }, 78 | "extends": [ 79 | "eslint:recommended", 80 | "plugin:prettier/recommended" 81 | ], 82 | "globals": { 83 | "Atomics": "readonly", 84 | "SharedArrayBuffer": "readonly" 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # :boom: Developer Titles 2 | 3 | > `['fictional', 'awesome', 'random', 'funny', 'obsolete']` developer titles 4 | 5 |
6 | Developer Titles - Awesome developer titles for bios, descriptions and statuses | Product Hunt Embed 7 |
8 | 9 | 10 | ## :scroll: About 11 | After years viewing crazy job and developer titles on social media, I've decided to merge them in a single website. 12 | 13 | 14 | ## :gem: Stack 15 | This site is create using [Vanilla JS](http://vanilla-js.com/) (ES6) and [PostCSS](https://postcss.org/), with [Webpack](https://webpack.js.org/). It uses [GitHub Pages](https://pages.github.com/). 16 | 17 | I'm using [npm](https://npmjs.com) as the package manager. 18 | 19 | > Oh but why not creating it with React or Vue? 20 | >> Because I didn't want to :smile: 21 | 22 | 23 | ## :pencil: Contributing 24 | You can contribute to this project following the steps below: 25 | 26 | - Fork the repo 27 | - Create a new branch 28 | - Do the work 29 | - Fill a PR, assign it to you and, if possible, write a cool description 30 | - Wait for the review 31 | 32 | Also, take a look at the [contributing guide](https://github.com/jlozovei/developer-titles/blob/master/.github/CONTRIBUTING.md)! 33 | 34 | After that, if your request doesn't offend anyone, your title will be able to be part of the great array. 35 | 36 | **Don't be afraid to fill some issues, if you want! :heart:** 37 | 38 | > For the colors, I like to use [colorion](http://colorion.co). 39 | 40 | If you're only looking for the titles, [here they are](https://github.com/jlozovei/developer-titles/blob/master/src/data/titles.json). :rocket: 41 | 42 | 43 | ## :computer: Developing 44 | After forking and cloning the project in your local environment, run the following commands: 45 | 46 | ```bash 47 | # install dependencies 48 | npm i 49 | # or yarn 50 | 51 | # run the project at localhost:9000 52 | npm start 53 | # or yarn start 54 | ``` 55 | 56 | To add a new title, go to [`src/data/titles.json`](https://github.com/jlozovei/developer-titles/blob/master/src/data/titles.json) and add a new title object to the array. It's important the title to have, at least, the `name` key - because if the title hasn't a name, then it shouldn't be here; `background`, `color` and `credits` keys are optional. 57 | 58 | Here's how a new title object should look: 59 | 60 | ```json 61 | { 62 | "name": "Your title name", 63 | "background": "Your title hex background", 64 | "color": "Your title hex background", 65 | "credits": { 66 | "name": "Who you want to credit (name, nick or slug)", 67 | "url": "The person's profile URL (linkedin, github...)" 68 | } 69 | } 70 | ``` 71 | 72 | 73 | ## :warning: Disclaimer 74 | The goal here is to have fun. Don't use it to be a jerk on other people's work/job! 75 | 76 | > Have fun, stay cold! 77 | 78 | 79 | ## :boom: Inspiration and Related Work 80 | When I was creating this site, I faced some related content on the internet. Like: 81 | 82 | - [Pseudo Design Titles](https://designtitles.com/) 83 | - [bullshit job titles generator](https://bullg.it/bullshit-job-titles/) 84 | - [@kutyel/superb-developer-titles](https://github.com/kutyel/superb-developer-titles) 85 | - [Silicon Valley Job Title Generator](https://siliconvalleyjobtitlegenerator.tumblr.com/) 86 | 87 | 88 | ## :closed_lock_with_key: License 89 | Licensed under the [MIT](https://github.com/jlozovei/developer-titles/blob/master/LICENSE). 90 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | // titles 2 | import data from '../data/titles.json'; 3 | 4 | // styles 5 | import '../css/reset.css'; 6 | import '../css/index.css'; 7 | 8 | // modules 9 | import analytics from './modules/analytics'; 10 | import randomInt from './modules/randomInt'; 11 | import shareLink from './modules/shareLink'; 12 | 13 | (() => { 14 | const app = { 15 | init() { 16 | window.goToTitle = this.goToTitle; 17 | 18 | this.cacheDOM(); 19 | }, 20 | 21 | cacheDOM() { 22 | this.lastIndex = null; 23 | 24 | this.titleContainer = document.querySelector('.devtitle'); 25 | this.refreshButton = document.querySelector('.refresh'); 26 | this.tweetButton = document.querySelector('.tweet'); 27 | 28 | this.aboutButton = document.querySelectorAll('.about-btn'); 29 | this.aboutModal = document.querySelector('.about'); 30 | 31 | this.bindEvents(); 32 | }, 33 | 34 | bindEvents() { 35 | this.randomTitle(); 36 | 37 | this.refreshButton.addEventListener('click', () => this.randomTitle()); 38 | 39 | for (const button of this.aboutButton) { 40 | button.addEventListener('click', () => { 41 | this.toggleAboutModal(); 42 | }); 43 | } 44 | }, 45 | 46 | toggleAboutModal() { 47 | const isActive = this.aboutModal.classList.contains('about--active'); 48 | 49 | if (!isActive) { 50 | this.aboutModal.classList.add('about--active'); 51 | this.aboutModal.setAttribute('aria-hidden', false); 52 | } else { 53 | this.aboutModal.classList.remove('about--active'); 54 | this.aboutModal.setAttribute('aria-hidden', true); 55 | } 56 | }, 57 | 58 | randomTitle(index) { 59 | // fix for 0 index 60 | const fixIndex = index == 0 ? '0' : index; 61 | const { titles } = data; 62 | const { length } = titles; 63 | const random = !fixIndex ? randomInt(0, length - 1, this.lastIndex) : fixIndex; 64 | 65 | this.lastIndex = random; 66 | 67 | const randomized = titles[random]; 68 | 69 | if (!randomized) return false; 70 | 71 | this.titleContainer.querySelector('h1').innerHTML = randomized.name; 72 | 73 | if (randomized.background) { 74 | document.body.style.backgroundColor = randomized.background; 75 | this.aboutModal.style.backgroundColor = randomized.background; 76 | } else { 77 | document.body.removeAttribute('style'); 78 | this.aboutModal.removeAttribute('style'); 79 | } 80 | 81 | if (randomized.color) document.body.style.color = randomized.color; 82 | else document.body.removeAttribute('style'); 83 | 84 | if (randomized.credits) { 85 | const { credits } = randomized; 86 | 87 | let htmlString = ''; 88 | 89 | htmlString += '

Credits to '; 90 | if (credits.url) 91 | htmlString += ``; 92 | 93 | htmlString += `${credits.name}`; 94 | 95 | if (credits.url) htmlString += ''; 96 | 97 | htmlString += '

'; 98 | 99 | this.titleContainer 100 | .querySelector('.devtitle__credit') 101 | .classList.add('devtitle__credit--visible'); 102 | 103 | this.titleContainer.querySelector('.devtitle__credit').innerHTML = htmlString; 104 | } else { 105 | this.titleContainer 106 | .querySelector('.devtitle__credit') 107 | .classList.remove('devtitle__credit--visible'); 108 | 109 | this.titleContainer.querySelector('.devtitle__credit').innerHTML = ''; 110 | } 111 | 112 | this.tweetButton.setAttribute('href', shareLink(randomized.name)); 113 | 114 | analytics.sendEvent('Random title', { 115 | event_category: 'Title', 116 | event_label: randomized.name 117 | }); 118 | }, 119 | 120 | goToTitle(index) { 121 | app.randomTitle(index); 122 | } 123 | }; 124 | 125 | app.init(); 126 | })(); 127 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Developer Titles 23 | 24 | 25 | 26 |
27 | 28 | 29 |
30 |

Developer title

31 | 32 |
33 |
34 |
35 | 36 | 51 | 52 | 73 |
74 | 75 | 76 | 77 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /src/data/titles.json: -------------------------------------------------------------------------------- 1 | { 2 | "titles": [ 3 | { 4 | "name": "HTML Programmer", 5 | "background": "#E65D12", 6 | "color": "#ffffff" 7 | }, 8 | { 9 | "name": "jQuery Artisan", 10 | "background": "#141E30", 11 | "color": "#ffffff" 12 | }, 13 | { 14 | "name": "Markdown Specialist Developer", 15 | "background": "#f12711", 16 | "color": "#ffffff" 17 | }, 18 | { 19 | "name": "Fullstack Front-end Developer", 20 | "background": "#654ea3", 21 | "color": "#ffffff" 22 | }, 23 | { 24 | "name": "Fullstack Game Developer", 25 | "background": "#ad5389", 26 | "color": "#ffffff" 27 | }, 28 | { 29 | "name": "UI Developer Specialist", 30 | "background": "#dd1818", 31 | "color": "#ffffff" 32 | }, 33 | { 34 | "name": "Jr FrontPage Specialist", 35 | "background": "#22BE4B", 36 | "color": "#ffffff" 37 | }, 38 | { 39 | "name": "JS Philosopher", 40 | "background": "#F6A808", 41 | "color": "#131415" 42 | }, 43 | { 44 | "name": "Sr Webmaster", 45 | "background": "#CECC9E", 46 | "color": "#131415" 47 | }, 48 | { 49 | "name": "Jr Web Designer", 50 | "background": "#114B55", 51 | "color": "#ffffff" 52 | }, 53 | { 54 | "name": "Automation Craftsman", 55 | "background": "#9F9F9F", 56 | "color": "#ffffff" 57 | }, 58 | { 59 | "name": "Sr Log Reader", 60 | "background": "#FEC9B1", 61 | "color": "#131415" 62 | }, 63 | { 64 | "name": "VanillaJS Guru", 65 | "background": "#f0d91c", 66 | "color": "black" 67 | }, 68 | { 69 | "name": "Website Maker", 70 | "background": "#4B335F", 71 | "color": "#23C7EB" 72 | }, 73 | { 74 | "name": "Spaghetti Code Enthusiast", 75 | "background": "#FDCF50", 76 | "color": "#76040A" 77 | }, 78 | { 79 | "name": "Flash Trainee", 80 | "background": "#5c2626", 81 | "color": "#fe0000" 82 | }, 83 | { 84 | "name": "esreveR gnireenignE repoleveD", 85 | "background": "#A8CFFE", 86 | "color": "#0F0A58" 87 | }, 88 | { 89 | "name": "Head of Bug Development", 90 | "background": "#232425", 91 | "color": "#78F54A" 92 | }, 93 | { 94 | "name": "Brogrammer", 95 | "background": "#1d1d56", 96 | "color": "#c5438b" 97 | }, 98 | { 99 | "name": "Knockout Front-end Developer", 100 | "background": "#6f0201", 101 | "color": "#ffffff" 102 | }, 103 | { 104 | "name": "Jr PrimeFaces JSF Specialist", 105 | "background": "#30383c", 106 | "color": "#3fc5fe" 107 | }, 108 | { 109 | "name": "Sr Wix Site Developer", 110 | "background": "#2f4150", 111 | "color": "#9f26ab" 112 | }, 113 | { 114 | "name": "Copypasta Manager", 115 | "background": "#CA5273", 116 | "color": "#FFF2D8" 117 | }, 118 | { 119 | "name": "Quantic Microfrontend Specialist", 120 | "background": "#1E184C", 121 | "color": "#479255" 122 | }, 123 | { 124 | "name": "Sr Australian Stylesheets Developer", 125 | "background": "#00843D", 126 | "color": "#FFCD00" 127 | }, 128 | { 129 | "name": "Sr Web Developer Intern", 130 | "background": "#666bad", 131 | "color": "#bad666" 132 | }, 133 | { 134 | "name": "Fullstack Designer", 135 | "background": "#bad666", 136 | "color": "#666bad" 137 | }, 138 | { 139 | "name": "Linux Exorcist", 140 | "background": "#050607", 141 | "color": "#ffffff", 142 | "credits": { 143 | "name": "Horacio Leon", 144 | "url": "https://www.linkedin.com/in/horacioleonencina/" 145 | } 146 | }, 147 | { 148 | "name": "Glorious Coder", 149 | "background": "#5e7bf8", 150 | "color": "#ffffff", 151 | "credits": { 152 | "name": "Rafael Camargo", 153 | "url": "https://glorious.codes/" 154 | } 155 | }, 156 | { 157 | "name": "WordPress Almighty Father", 158 | "background": "white", 159 | "color": "#117ac9", 160 | "credits": { 161 | "name": "Celso Fabri Jr", 162 | "url": "https://celsofabri.github.io/" 163 | } 164 | }, 165 | { 166 | "name": "Code wizardry creator", 167 | "background": "#592b83", 168 | "color": "#f49820" 169 | }, 170 | { 171 | "name": "Institutional Website + Blog Creator", 172 | "background": "#23d4d4", 173 | "color": "#592769" 174 | }, 175 | { 176 | "name": "BBQ Developer", 177 | "background": "#402828", 178 | "color": "#debe17" 179 | }, 180 | { 181 | "name": "Button Painter Engineer", 182 | "background": "#6D9886", 183 | "color": "#F6F6F6", 184 | "credits": { 185 | "name": "Lucas Viana (Baú)", 186 | "url": "https://lucasviana.dev/" 187 | } 188 | } 189 | ] 190 | } 191 | --------------------------------------------------------------------------------