├── .gitignore ├── src ├── README.md ├── content │ ├── placeholder-1.png │ ├── placeholder-2.png │ ├── placeholder-3.png │ └── svg │ │ ├── logo-stackoverflow.svg │ │ ├── command-palette.svg │ │ ├── logo-linkedin.svg │ │ ├── logo-twitter.svg │ │ ├── file-code.svg │ │ ├── apps.svg │ │ ├── logo-github.svg │ │ └── rocket.svg ├── styles │ ├── font │ │ ├── Mona-Sans-Regular.woff2 │ │ ├── Mona-Sans-BoldWide.woff2 │ │ └── font.css │ └── styles.css └── index.html ├── .devcontainer ├── extensions │ └── github-actions-demo-0.0.55.vsix ├── setup.sh ├── welcome-message.txt └── devcontainer.json ├── .github └── workflows │ ├── hello-world.yml │ ├── linter.yml │ └── deploy.yml ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 | # My portfolio 2 | 3 | This is a portfolio template that you can edit and deploy to GitHub Pages! 4 | -------------------------------------------------------------------------------- /src/content/placeholder-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LadyKerr/codespaces-actions-playground/HEAD/src/content/placeholder-1.png -------------------------------------------------------------------------------- /src/content/placeholder-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LadyKerr/codespaces-actions-playground/HEAD/src/content/placeholder-2.png -------------------------------------------------------------------------------- /src/content/placeholder-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LadyKerr/codespaces-actions-playground/HEAD/src/content/placeholder-3.png -------------------------------------------------------------------------------- /src/styles/font/Mona-Sans-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LadyKerr/codespaces-actions-playground/HEAD/src/styles/font/Mona-Sans-Regular.woff2 -------------------------------------------------------------------------------- /src/styles/font/Mona-Sans-BoldWide.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LadyKerr/codespaces-actions-playground/HEAD/src/styles/font/Mona-Sans-BoldWide.woff2 -------------------------------------------------------------------------------- /.devcontainer/extensions/github-actions-demo-0.0.55.vsix: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LadyKerr/codespaces-actions-playground/HEAD/.devcontainer/extensions/github-actions-demo-0.0.55.vsix -------------------------------------------------------------------------------- /.devcontainer/setup.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | if [ -f "./.devcontainer/welcome-message.txt" ]; then 3 | sudo cp --force ./.devcontainer/welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt 4 | fi 5 | -------------------------------------------------------------------------------- /.github/workflows/hello-world.yml: -------------------------------------------------------------------------------- 1 | name: Hello World 2 | 3 | on: [push] 4 | 5 | jobs: 6 | hello-world: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: Hello world 10 | run: | 11 | echo "Hello world" 12 | -------------------------------------------------------------------------------- /.devcontainer/welcome-message.txt: -------------------------------------------------------------------------------- 1 | 👋 Welcome to the GitHub Actions Playground! Please wait for the walkthrough to appear! 2 | 3 | 🔍 To bring back the walkthrough, search for "GitHub Actions Demo" using the Command Palette (Cmd/Ctrl + Shift + P) 4 | 5 | -------------------------------------------------------------------------------- /src/styles/font/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Mona Sans"; 3 | src: url("./Mona-Sans-Regular.woff2") format("woff2"); 4 | font-weight: 400; 5 | } 6 | 7 | @font-face { 8 | font-family: "Mona Sans"; 9 | src: url("./Mona-Sans-BoldWide.woff2") format("woff2"); 10 | font-weight: 700; 11 | } 12 | -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GitHub Actions Demo", 3 | "onCreateCommand": ".devcontainer/setup.sh", 4 | "customizations": { 5 | "codespaces": { 6 | "openFiles": [] 7 | }, 8 | "vscode": { 9 | "extensions": [ 10 | "${containerWorkspaceFolder}/.devcontainer/extensions/github-actions-demo-0.0.55.vsix", 11 | "redhat.vscode-yaml" 12 | ] 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.github/workflows/linter.yml: -------------------------------------------------------------------------------- 1 | name: Lint Codebase 2 | 3 | on: 4 | push: 5 | branches: ["main"] 6 | pull_request: 7 | branches: ["main"] 8 | 9 | jobs: 10 | run-lint: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Checkout code 14 | uses: actions/checkout@v3 15 | with: 16 | fetch-depth: 0 17 | 18 | - name: Lint Code Base 19 | uses: github/super-linter@v4 20 | env: 21 | VALIDATE_ALL_CODEBASE: false 22 | DEFAULT_BRANCH: "main" 23 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 24 | -------------------------------------------------------------------------------- /src/content/svg/logo-stackoverflow.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/content/svg/command-palette.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /src/content/svg/logo-linkedin.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /src/content/svg/logo-twitter.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 GitHub 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 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | # yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json 3 | name: Deploy static content to Pages 4 | 5 | on: 6 | # Runs on pushes targeting the default branch 7 | push: 8 | branches: ["production"] 9 | 10 | # Allows you to run this workflow manually from the Actions tab 11 | workflow_dispatch: 12 | 13 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 14 | permissions: 15 | contents: read 16 | pages: write 17 | id-token: write 18 | 19 | # Allow one concurrent deployment 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: true 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v3 34 | - name: Setup Pages 35 | uses: actions/configure-pages@v2 36 | - name: Upload artifact 37 | uses: actions/upload-pages-artifact@v1 38 | with: 39 | # Upload the source folder 40 | path: './src' 41 | - name: Deploy to GitHub Pages 42 | id: deployment 43 | uses: actions/deploy-pages@v1 44 | -------------------------------------------------------------------------------- /src/content/svg/file-code.svg: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/content/svg/apps.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # There's an Action for That! Exploring the possibilities of GitHub Actions 💡 2 | 3 | [](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=623718616&machine=standardLinux32gb&devcontainer_path=.devcontainer%2Fdevcontainer.json&location=EastUs) 4 | 5 | This repo contains resources and demos for the talk "There's an Action for That! Exploring the possibilitis of GitHub Actions" that I presented. 6 | 7 | # Slides ✨ 8 | 9 | The slides for the talk can be found here: 10 | [Click There's an action for that](https://www.canva.com/design/DAFfRK5vJ-U/9Y_mizbL-dLBm0g69LuZHQ/view?utm_content=DAFfRK5vJ-U&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink) 11 | 12 | # Repository Content 📔 13 | 14 | This repository contains simple demos and pipelines showcasing the use of GitHub Actions in various scenarios and is based on the [GitHub Actions Playground](https://github.com/github/codespaces-actions-playground) guide. 15 | 16 | # Resources 📚 17 | 18 | - [GitHub Actions Documentation](https://docs.github.com/en/actions) 19 | - [GitHub Skills](https://github.com/skills/hello-github-actions) 20 | - [List of awesome actions to explore](https://github.com/sdras/awesome-actions) 21 | - [Send a text message with GitHub Actions](https://github.com/marketplace/actions/twilio-sms) 22 | 23 | ```yaml 24 | - name: Send SMS with twilio 25 | uses: twilio-labs/actions-sms@v1 26 | with: 27 | fromPhoneNumber: ${{ secrets.TWILIO_PHONE_NUMBER }} 28 | toPhoneNumber: ${{ secrets.MY_PHONE_NUMBER }} 29 | message: "Hello from GitHub Actions via Twilio" 30 | env: 31 | TWILIO_ACCOUNT_SID: ${{ secrets.TWILIO_ACCOUNT_SID }} 32 | TWILIO_API_KEY: ${{ secrets.TWILIO_API_KEY }} 33 | TWILIO_API_SECRET: ${{ secrets.TWILIO_API_SECRET }} 34 | ``` 35 | -------------------------------------------------------------------------------- /src/content/svg/logo-github.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/content/svg/rocket.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/styles/styles.css: -------------------------------------------------------------------------------- 1 | /* Make a CSS variable */ 2 | :root { 3 | --font: "Mona Sans", sans-serif; 4 | --font-size: 1.5rem; 5 | --bg: 6 | linear-gradient( 7 | 150deg, 8 | #14121e 0%, 9 | #0d1117 10%, 10 | #0d0d0f 20%, 11 | #181426 65%, 12 | #0d1117 80%, 13 | #101013 100% 14 | ); 15 | --bg-default: #0d1117; 16 | --bg-subtle: #161b22; 17 | --fg-default: #c9d1d9; 18 | --fg-subtle: #6e7681; 19 | --border: #484f58; 20 | --break-max: 1440px; 21 | --break-min: 768px; 22 | } 23 | 24 | html { 25 | background: var(--bg); 26 | scroll-behavior: smooth; 27 | box-sizing: border-box; 28 | } 29 | 30 | body { 31 | width: 100%; 32 | position: relative; 33 | margin: 0; 34 | padding: 0; 35 | display: flex; 36 | flex-direction: column; 37 | align-items: center; 38 | overflow-x: hidden; 39 | font-family: var(--font); 40 | } 41 | 42 | p { 43 | color: var(--fg-subtle); 44 | font-family: var(--font); 45 | margin-top: 0; 46 | font-size: var(--font-size); 47 | line-height: 1.6; 48 | } 49 | 50 | h1, 51 | h2, 52 | h3, 53 | h4 { 54 | font-family: var(--font); 55 | font-weight: 700; 56 | color: var(--fg-default); 57 | line-height: 1.2; 58 | margin: 0; 59 | } 60 | 61 | h1 { 62 | font-size: 64px; 63 | } 64 | 65 | h2 { 66 | font-size: 48px; 67 | } 68 | 69 | h3 { 70 | font-size: 32px; 71 | } 72 | 73 | h4 { 74 | font-size: 24px; 75 | } 76 | 77 | a { 78 | color: #58a6ff; 79 | text-decoration: none; 80 | } 81 | 82 | label { 83 | font-size: var(--font-size); 84 | color: var(--fg-default); 85 | font-weight: 700; 86 | display: block; 87 | width: 100%; 88 | text-align: left; 89 | } 90 | 91 | /* Containers */ 92 | .container { 93 | max-width: var(--break-max); 94 | padding: 2rem; 95 | margin: 0 auto; 96 | box-sizing: border-box; 97 | } 98 | 99 | .section { 100 | margin: 10rem 0; 101 | width: 100%; 102 | padding-top: 3rem; 103 | } 104 | 105 | .section-sm { 106 | max-width: 900px; 107 | text-align: center; 108 | } 109 | 110 | .section-xs { 111 | max-width: 600px; 112 | text-align: center; 113 | } 114 | 115 | /* Navigation */ 116 | .nav { 117 | max-width: var(--break-max); 118 | display: flex; 119 | flex-direction: row; 120 | justify-content: space-between; 121 | position: relative; 122 | align-items: center; 123 | padding: 1.5rem 0; 124 | width: 100%; 125 | box-sizing: border-box; 126 | } 127 | 128 | .nav-items { 129 | display: flex; 130 | flex-direction: row; 131 | gap: 3rem; 132 | list-style: none; 133 | } 134 | 135 | .nav-items a { 136 | text-decoration: none; 137 | background-image: 138 | linear-gradient(var(--fg-default), var(--fg-default)), 139 | linear-gradient(var(--fg-default), var(--fg-default)); 140 | background-size: 20px 1px, 0 1px, 100% 1px; 141 | background-position: calc(100% * -1) 100%, 100% 100%, 0 100%; 142 | background-repeat: no-repeat; 143 | transition: all 0.2s linear; 144 | } 145 | 146 | .nav-items a:hover { 147 | background-size: 20px 1px, 100% 1px, 0 1px; 148 | background-position: calc(20px * 20px) 100%, 100% 100%, 0 100%; 149 | } 150 | 151 | .nav-link { 152 | color: var(--fg-default); 153 | text-decoration: none; 154 | font-size: var(--font-size); 155 | font-weight: 700; 156 | cursor: pointer; 157 | } 158 | 159 | .logo { 160 | height: 2.5rem; 161 | width: 2.5rem; 162 | } 163 | 164 | /* Footer */ 165 | .footer { 166 | display: flex; 167 | flex-direction: row; 168 | justify-content: space-between; 169 | border-top: 1px solid var(--border); 170 | width: 100%; 171 | padding: 1.5rem; 172 | } 173 | 174 | .footer p { 175 | font-size: 1rem; 176 | } 177 | 178 | /* Buttons */ 179 | .button { 180 | cursor: pointer; 181 | font-family: var(--font); 182 | padding: 1rem 1.5rem; 183 | border-radius: 0.5rem; 184 | color: var(--fg-default); 185 | transition: all 150ms ease-in-out; 186 | background: transparent; 187 | font-size: var(--font-size); 188 | text-decoration: none; 189 | border: 1px solid var(--border); 190 | font-weight: 700; 191 | } 192 | 193 | .button:hover { 194 | border-color: var(--fg-default); 195 | } 196 | 197 | .social-icons { 198 | display: flex; 199 | justify-content: center; 200 | gap: 1rem; 201 | margin-top: 2rem; 202 | border-top: 1px solid var(--border); 203 | padding-top: 2rem; 204 | } 205 | 206 | .icon-button { 207 | height: 4rem; 208 | width: 4rem; 209 | display: flex; 210 | justify-content: center; 211 | cursor: pointer; 212 | align-items: center; 213 | border-radius: 50%; 214 | background: transparent; 215 | border: 1px solid var(--border); 216 | transition: all ease 0.25s; 217 | } 218 | 219 | .icon-button:hover { 220 | border-color: var(--fg-default); 221 | } 222 | 223 | /* Projects */ 224 | .projects { 225 | display: flex; 226 | flex-direction: column; 227 | gap: 5rem; 228 | } 229 | 230 | .project { 231 | padding-bottom: 5rem; 232 | border-bottom: 1px solid var(--border); 233 | } 234 | 235 | .project-image { 236 | background: var(--bg-default); 237 | box-shadow: 0 12px 24px rgba(0 0 0 / 24%); 238 | border-radius: 0.5rem; 239 | align-self: center; 240 | } 241 | 242 | .project-icon { 243 | width: 2rem; 244 | margin-bottom: 2rem; 245 | } 246 | 247 | /* Input */ 248 | .input { 249 | font-size: var(--font-size); 250 | font-family: var(--font); 251 | color: var(--fg-default); 252 | padding: 1.25rem 1rem; 253 | width: 100%; 254 | border-radius: 0.5rem; 255 | border: 1px solid var(--border); 256 | background: transparent; 257 | transition: all 150ms ease-in-out; 258 | } 259 | 260 | input { 261 | color: var(--fg-subtle); 262 | } 263 | 264 | input::placeholder { 265 | color: var(--fg-subtle); 266 | } 267 | 268 | .input:focus { 269 | outline: none; 270 | border-color: var(--fg-default); 271 | } 272 | 273 | /* Skills chart */ 274 | .skill { 275 | margin-top: 2rem; 276 | } 277 | 278 | .skill-bar { 279 | width: 100%; 280 | height: 6px; 281 | background: #27272a; 282 | border-radius: 6px; 283 | } 284 | 285 | .skill-progress { 286 | height: 100%; 287 | border-radius: 6px; 288 | } 289 | 290 | .skill-1 { 291 | width: 90%; 292 | background: #2563eb; 293 | box-shadow: 0 10px 22px rgba(37 99 235 / 58%); 294 | } 295 | 296 | .skill-2 { 297 | width: 80%; 298 | background: #7c3aed; 299 | box-shadow: 0 10px 22px rgba(124 58 237 / 44%); 300 | } 301 | 302 | .skill-3 { 303 | width: 70%; 304 | background: #f97316; 305 | box-shadow: 0 10px 22px rgba(249 115 22 / 23%); 306 | } 307 | 308 | .skill-4 { 309 | width: 100%; 310 | background: #ca8a04; 311 | box-shadow: 0 10px 22px rgba(249 115 22 / 23%); 312 | } 313 | 314 | /* Utility */ 315 | .faded { 316 | color: var(--fg-subtle); 317 | } 318 | 319 | .flex { 320 | display: flex; 321 | width: 100%; 322 | } 323 | 324 | .full-width { 325 | width: 100%; 326 | } 327 | 328 | .gap { 329 | gap: 4rem; 330 | } 331 | 332 | .mb-1 { 333 | margin-bottom: 1rem; 334 | } 335 | 336 | .mb-2 { 337 | margin-bottom: 2rem; 338 | } 339 | 340 | /* Mobile styles */ 341 | @media (max-width: 768px) { 342 | p { 343 | font-size: 1.25rem; 344 | } 345 | 346 | h1 { 347 | font-size: 40px; 348 | } 349 | 350 | h2 { 351 | font-size: 32px; 352 | } 353 | 354 | h3 { 355 | font-size: 24px; 356 | } 357 | 358 | h4 { 359 | font-size: 16px; 360 | } 361 | 362 | .section-sm, 363 | .section-xs { 364 | text-align: left; 365 | } 366 | 367 | .social-icons { 368 | justify-content: left; 369 | } 370 | 371 | .logo { 372 | height: 2rem; 373 | width: 2rem; 374 | } 375 | 376 | .flex { 377 | flex-direction: column; 378 | } 379 | 380 | .skill { 381 | width: 100%; 382 | max-width: 1000px; 383 | margin-bottom: 2rem; 384 | } 385 | 386 | .nav-items { 387 | gap: 1.5rem; 388 | } 389 | 390 | .nav-link { 391 | font-size: 1rem; 392 | } 393 | 394 | .footer { 395 | flex-direction: column; 396 | align-items: center; 397 | } 398 | } 399 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |74 | My journey into coding began in high-school, when I took a 75 | Javascript class and built an open source website. 76 |
77 |78 | For a while, I developed web and mobile apps for small businesses as 79 | a freelancer. I also worked at a small startup for three years as a 80 | Lead Engineer. Currently, I’m the Founder of a platform marketplace 81 | that connects people with services and products. 82 |
83 |84 | In my downtime you’ll find me hiking, walking my dog, or stargazing 85 | with friends. 86 |
87 |
131 |
146 |
155 |
170 |