https://bennettfeely.com/

1<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport"><title>Bennett Feely</title><meta content="Bennett Feely is a web developer based in Pittsburgh. He makes websites so you don&#39;t have to." name="description"><link href="style.min.css" rel="stylesheet"><link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"><link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet"><link href="_img/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"><link href="_img/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"><link href="_img/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"><link color="#5bbad5" href="img//safari-pinned-tab.svg" rel="mask-icon"><meta content="#ffffff" name="theme-color"><!--
2
3
4    Have I not commanded you? Be strong and 
5    courageous. Do not be afraid; do not be 
6    discouraged, for the LORD your God will 
7    be with you wherever you go.
8
9    Joshua 1:9
10
11
12--></head><body><div class="header-wrapper"><header><div class="container"><img alt="Photo of Bennett Feely" class="me" height="250" src="_img/me.jpg" width="250"><h1>Hello! My name is Bennett Feely.&nbsp;<br>I make websites so you don't have to.</h1></div></header></div><!-- <div class="job-wrapper"><section><div class="container"><h2>Update January 2021:</h2><p>I'm currently available for freelance web design and development, logo design, brand design, and graphic design work.</p><a href="#contact">Let's get in touch!</a></div></section></div> --><div class="main-wrapper"><section><h2 class="outline"><span>Recent Projects</span></h2><div class="container"><ul><li class="project"><a class="project-link" data-img="ztext" href="https://bennettfeely.com/ztext/"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/ztext.png" width="600"></div><div class="line"></div><div class="caption"><strong>ztext.js</strong>, 3D typography for any website and any font</div></a></li><li class="project"><a class="project-link" data-img="csscreatures" href="https://bennettfeely.com/csscreatures/"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/csscreatures.png" width="600"></div><div class="line"></div><div class="caption"><strong>CSS Creatures</strong>, make a creature from your tweet</div></a></li><li class="project"><a class="project-link" data-img="copypastelist" href="https://copypastelist.com"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/copypastelist.png" width="600"></div><div class="line"></div><div class="caption"><strong>Copy Paste List</strong>, collection of lists in plain text</div></a></li><li class="project"><a class="project-link" data-img="usa" href="/usa-css"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/usacss.png" width="600"></div><div class="line"></div><div class="caption"><strong>USA.css</strong>, the most American CSS stylesheet</div></a></li><li class="project"><a class="project-link" data-img="pie" href="/csspiechart"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/csspiechart.png" width="600"></div><div class="line"></div><div class="caption"><strong>CSS Pie Chart</strong>, generate pie charts with conic gradients</div></a></li><li class="project"><a class="project-link" data-img="clippy" href="/clippy"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/clippy.png" width="600"></div><div class="line"></div><div class="caption"><strong>Clippy</strong>, a tool for making CSS clip paths</div></a></li><li class="project"><a class="project-link" data-img="antiweather" href="/antiweather"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/antiweather.png" width="600"></div><div class="line"></div><div class="caption"><strong>Antiweather</strong>, see what the weather is like on the other side of the world</div></a></li><li class="project"><a class="project-link" data-img="imageeffects" href="/image-effects"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/imageeffects.png" width="600"></div><div class="line"></div><div class="caption"><strong>

12CSS Image Effects</strong>, using blend modes for complex image effects</div></a></li><li class="project"><a class="project-link" data-img="gradients" href="/gradients"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/gradients.png" width="600"></div><div class="line"></div><div class="caption"><strong>CSS Gradients</strong>, using blend modes with background gradients</div></a></li><li class="project"><a class="project-link" data-img="flexplorer" href="/flexplorer"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/flexplorer.png" width="600"></div><div class="line"></div><div class="caption"><strong>Flexplorer</strong>, learn how flexbox works with lists</div></a></li><li class="project"><a class="project-link" data-img="cssscales" href="/scales"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/cssscales.png" width="600"></div><div class="line"></div><div class="caption"><strong>CSS Scales</strong>, accessible CSS gradients</div></a></li></ul></div><div class="container"><h2 class="outline"><span>Recent Work</span></h2><ul><li class="project"><a class="project-link" data-img="mapsfortheweb" href="https://www.w3.org/2020/maps/"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/mapsfortheweb.jpg" width="600"></div><div class="line"></div><div class="caption">Logo and graphics for <strong>Maps for the Web Workshop</strong>, for the W3C</div></a></li><li class="project"><a class="project-link" data-img="openbrainproject" href="https://openbrainproject.org"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/openbrainproject.png" width="600"></div><div class="line"></div><div class="caption"><strong>The Open Brain Project</strong>, at Carnegie Mellon University</div></a></li><li class="project"><a class="project-link" data-img="soteriaradar" href="https://soteriaradar.netlify.app/"><div class="screenshot-wrapper"><img alt="" class="screenshot" height="450" src="_img/screenshots/soteriaradar.jpg" width="600"></div><div class="line"></div><div class="caption"><strong>Soteria Radar</strong>

12, a website for a startup</div></a></li></ul></div></section></div><div class="contact-wrapper" id="contact"><section><div class="container"><h2 class="outline"><span>Contact</span></h2><ul class="contacts"><li class="contact"><label class="contact-link email-link" onclick="document.querySelector(&#39;.email-link input&#39;).select();"><strong>Email</strong> <input readonly="readonly" value="[email protected]"></label></li><li class="contact"><a class="contact-link" href="https://twitter.com/bennettfeely"><strong>Twitter</strong> @bennettfeely</a></li><li class="contact"><a class="contact-link" href="https://github.com/bennettfeely"><strong>GitHub</strong> @bennettfeely</a></li><li class="contact"><a class="contact-link" href="https://instagram.com/bennettfeely"><strong>Instagram</strong> @bennettfeely</a></li><li class="contact"><a class="contact-link" href="https://codepen.io/bennettfeely"><strong>CodePen</strong> /bennettfeely</a></li><li class="contact"><a class="contact-link" href="https://www.linkedin.com/in/bennettfeely/"><strong>LinkedIn</strong> /in/bennettfeely</a></li></ul></div></section></div><div class="footer-wrapper"><footer><div class="container"><p class="copyright">&copy 2021 Bennett Feely</p></div></footer></div><!-- GA -->

12<script async src="https://www.googletagmanager.com/gtag/js?id=

12UA-35724550-1

12"></script>

12<script>

12window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '

12UA-35724550-1

12');

12</script>

12</body></html>