|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"><head> |
| 3 | + <!-- Generated from the 11ty Netlify Jumpstart: https://github.com/5t3ph/11ty-netlify-jumpstart --> |
| 4 | + <!-- Modified for usage/content provided by Adam J. Jolicoeur: https://github.com/AdamJ --> |
| 5 | + <meta charset="UTF-8" /> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 7 | + <meta name="keywords" content="@Adam, Adam Jolicoeur, Adam J. Jolicoeur, AdamJ, Jolicoeur, adamjolicoeur.com, www.adamjolicoeur.com, mindreeper2420, Portfolio, Design, UXD, UX Designer, UX Developer, UX Engineer, Design Technologist, CSS" /> |
| 8 | + <title>codepen examples | Adam Jolicoeur</title> |
| 9 | + <meta |
| 10 | + name="description" |
| 11 | + content="When I&#39;m trying out new ideas, I&#39;ll often go to codepen to riff on them, but also to see what is already out there." |
| 12 | + /> |
| 13 | + <meta name="generator" content="Eleventy"> |
| 14 | + <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> |
| 15 | + <link rel="icon" type="image/png" size="48x48" href="/favicon.ico"> |
| 16 | + <link rel="icon" type="image/png" size="72x72" href="/favicon.png"> |
| 17 | + <link rel="manifest" href="/manifest.json"> |
| 18 | + <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#333333"> |
| 19 | + <meta name="msapplication-TileColor" content="#da532c"> |
| 20 | + <meta name="theme-color" content="#333333"> |
| 21 | + <style> |
| 22 | + @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&family=PT+Sans&family=Work+Sans&display=swap'); |
| 23 | + </style> |
| 24 | + <link href="/css/style.css" rel="stylesheet" /> |
| 25 | + <link href="/css/fontawesome.css" rel="stylesheet" /> |
| 26 | + <meta name="twitter:card" content="summary_large_image" /> |
| 27 | + |
| 28 | + <meta name="twitter:creator" content="@AdamJJolicoeur" /> |
| 29 | + <meta name="twitter:creator:id" content="@AdamJJolicoeur" /> |
| 30 | + |
| 31 | + <meta |
| 32 | + name="twitter:title" |
| 33 | + content="Adam Jolicoeur - User Experience Designer and Developer" |
| 34 | + /> |
| 35 | + <meta |
| 36 | + name="twitter:description" |
| 37 | + content="Driven and passionate user experience designer with a background in software development. Looking for a role where I can continue to utilize my UX/UI skills and create interfaces that will allows users to perform their work seamlessly." |
| 38 | + /> |
| 39 | + |
| 40 | + <meta |
| 41 | + name="og:title" |
| 42 | + content="codepen examples | Adam Jolicoeur" |
| 43 | + /> |
| 44 | + <meta |
| 45 | + name="og:description" |
| 46 | + content="When I&#39;m trying out new ideas, I&#39;ll often go to codepen to riff on them, but also to see what is already out there." |
| 47 | + /> |
| 48 | + <meta name="twitter:image" content="https://www.adamjolicoeur.com/img/AdamJolicoeur_social.png" /> |
| 49 | + <meta property="og:image" content="https://www.adamjolicoeur.com/img/AdamJolicoeur_social.png" /> |
| 50 | + |
| 51 | + <link |
| 52 | + rel="alternate" |
| 53 | + type="application/rss+xml" |
| 54 | + title="RSS Feed for Adam Jolicoeur" |
| 55 | + href="/feed/" |
| 56 | + /> |
| 57 | + </head> |
| 58 | + <a rel="me" href="https://mastodon.world/@adamjol" aria-hidden="true" class="d-none">Mastodon</a> |
| 59 | + <body class="layout"> |
| 60 | + <container> |
| 61 | + <nav class="navbar navbar-expand-md bg-dark border-bottom border-body" data-bs-theme="dark"> |
| 62 | + <div class="container-fluid"> |
| 63 | + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> |
| 64 | + <span class="navbar-toggler-icon"></span> |
| 65 | + </button> |
| 66 | + <div class="collapse navbar-collapse d-md-flex" id="navbarNavAltMarkup"> |
| 67 | + <div class="navbar-nav col-md-6 justify-content-md-center"> |
| 68 | + <a class="navbar-brand col-md-1 me-0 text-center" href="/"> |
| 69 | + <img src="/img/navbar-logo.png" alt="Avatar" width="32" height="32"> |
| 70 | + </a> |
| 71 | + <a class="nav-link " href="/about" alt="Link to my About page.">about</a> |
| 72 | + <a class="nav-link " href="/designs" alt="Link to Designs that I have created and worked on.">designs</a> |
| 73 | + <a class="nav-link active" href="/development" alt="Link to development examples.">development</a> |
| 74 | + </div> |
| 75 | + <div class="navbar-nav d-md-flex col-md-3 justify-content-md-end"> |
| 76 | + <a class="nav-link " href="/testimonials/testimonials" alt="Testimonials">testimonials</a> |
| 77 | + <a class="nav-link " href="/contact" alt="Contact me">contact</a> |
| 78 | + </div> |
| 79 | + </div> |
| 80 | + </div> |
| 81 | + </nav> |
| 82 | +</container> |
| 83 | + |
| 84 | + <main class="content"> |
| 85 | + |
| 86 | +<div class="container-xxl intro py-3 px-0 px-md-5 text-center"> |
| 87 | + <h1 class="display-1 fw-bold text-break">codepen examples</h1> |
| 88 | + <p class="sub-header text-break px-2 px-md-0"> |
| 89 | + When I'm trying out new ideas, I'll often go to codepen to riff on them, but also to see what is already out there. |
| 90 | + </p></div> |
| 91 | + |
| 92 | +<content> |
| 93 | + <div class="container-xxl mb-2 py-2 px-md-5"> |
| 94 | + <table> |
| 95 | +<thead> |
| 96 | +<tr> |
| 97 | +<th style="text-align:left">Codepen</th> |
| 98 | +<th></th> |
| 99 | +<th>Description</th> |
| 100 | +</tr> |
| 101 | +</thead> |
| 102 | +<tbody> |
| 103 | +<tr> |
| 104 | +<td style="text-align:left"><a href="https://codepen.io/AdamJolicoeur/pen/NWjOzwm" title="Link to Codepen example showing a calendar web application">SwitchTrack</a></td> |
| 105 | +<td> </td> |
| 106 | +<td>A calendar in a webapp, part of a time tracking system</td> |
| 107 | +</tr> |
| 108 | +<tr> |
| 109 | +<td style="text-align:left"><a href="https://codepen.io/AdamJolicoeur/pen/XWpPmjw" title="Link to Codepen example demonstrating basic example of an architectural drawing library">CAS Ripper</a></td> |
| 110 | +<td> </td> |
| 111 | +<td>Link to Codepen example demonstrating basic example of an architectural drawing library</td> |
| 112 | +</tr> |
| 113 | +<tr> |
| 114 | +<td style="text-align:left"><a href="https://codepen.io/AdamJolicoeur/pen/XWNbJvp" title="Link to Codepen example showing animated cards on simulated glass">Animated Cards on Glass</a></td> |
| 115 | +<td> </td> |
| 116 | +<td>Link to Codepen example showing animated cards on simulated glass</td> |
| 117 | +</tr> |
| 118 | +</tbody> |
| 119 | +</table> |
| 120 | +<h3 id="see-all-of-my-work-on-codepen" tabindex="-1"><a class="header-anchor" href="#see-all-of-my-work-on-codepen"><span><a href="https://codepen.io/AdamJolicoeur" title="See all of my work on CodePen">See all of my work on CodePen</a></span></a></h3> |
| 121 | +<hr> |
| 122 | +<div class="container-xxl mb-2 py-2 px-3"> |
| 123 | + <h2> |
| 124 | + CodePens |
| 125 | + </h2> |
| 126 | + <div class="row px-3"> |
| 127 | + <p class="codepen" data-height="550" data-default-tab="result" data-slug-hash="NWjOzwm" data-user="AdamJolicoeur" style="height: 550px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> |
| 128 | + <span>See the Pen <a href="https://codepen.io/AdamJolicoeur/pen/NWjOzwm"> |
| 129 | + SwitchTrack - Calendar</a> by Adam Jolicoeur (<a href="https://codepen.io/AdamJolicoeur">@AdamJolicoeur</a>) |
| 130 | + on <a href="https://codepen.io">CodePen</a>.</span> |
| 131 | + </p> |
| 132 | + <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> |
| 133 | + <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> |
| 134 | + <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> |
| 135 | + </div> |
| 136 | + </div> |
| 137 | +</div> |
| 138 | + |
| 139 | + </div> |
| 140 | +</content> |
| 141 | + |
| 142 | + </main> |
| 143 | + <footer class="footer"> |
| 144 | + <div class="container-md"> |
| 145 | + <div class="row justify-content-between"> |
| 146 | + <div class="col-12 col-md-4 text-md-start text-center"> |
| 147 | + <a class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="/about" alt="Link to my about page">Adam J. Jolicoeur</a> <small>©2008-2024</small> |
| 148 | + </div> |
| 149 | + <div class="col-12 col-md-8 text-md-end text-center"> |
| 150 | + <a class="footer-link icon-link" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View my LinkedIn profile"> |
| 151 | + <span class="d-none d-sm-none d-md-block">LinkedIn</span> |
| 152 | + </a> |
| 153 | + <a class="footer-link icon-link" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile"> |
| 154 | + <span class="d-none d-sm-none d-md-block">GitHub</span> |
| 155 | + </a> |
| 156 | + <a class="footer-link icon-link" href="https://dev.to/adamj" target="top" alt="View my Dev.to profile"> |
| 157 | + <span class="d-none d-sm-none d-md-block">Dev</span> |
| 158 | + </a> |
| 159 | + </div> |
| 160 | + </div> |
| 161 | + </div> |
| 162 | + <script src=" https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity=" sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin=" anonymous" ></script> |
| 163 | + <script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity=" sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin=" anonymous" ></script> |
| 164 | + <!-- Global site tag (gtag.js) - Google Analytics --> |
| 165 | + <script async src="https://www.googletagmanager.com/gtag/js?id=G-XQCZPW3PZN"></script> |
| 166 | + <script> |
| 167 | + window.dataLayer = window.dataLayer || []; |
| 168 | + function gtag(){dataLayer.push(arguments);} |
| 169 | + gtag('js', new Date()); |
| 170 | + |
| 171 | + gtag('config', 'G-XQCZPW3PZN'); |
| 172 | + </script> |
| 173 | + </footer> |
| 174 | + </body> |
| 175 | +</html> |
0 commit comments