CINXE.COM

<!DOCTYPE html><html class="no-js"><head><meta charset="UTF-8"><title>Xander Frangos - UI Designer & Programmer</title><link rel="canonical" href="https://xanderfrangos.com/" /><meta name="description" content="If a device has a screen on it, I probably want to make something for it. My programming philosopy is to use the right tool for the right job, but also as few tools as possible. An overuse of libraries and plugins is asking for trouble."/><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="theme-color" content="#414575"><meta property="og:title" content="Xander Frangos" /><meta property="og:description" content="UI Designer & Programmer" /><meta property="og:image" content="https://xanderfrangos.com/media/open-graph.jpg?60dae05"/><meta property="og:image:secure_url" content="https://xanderfrangos.com/media/open-graph.jpg?60dae05"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="1200"/><link rel="stylesheet" type="text/css" href="css/style.css?60dae05"><link href="https://fonts.googleapis.com/css?family=Poppins:700" rel="stylesheet"></head><body> <script>document.documentElement.className="js";</script><div class="sidebar"><div class="inner"><nav class="defer"> <a href="#me"><span>Me</span></a> <a href="#apps"><span>Apps</span></a> <a href="#web"><span>Web</span></a> <a href="#other"><span>Other</span></a></nav><div class="footer defer"><a href="https://github.com/xanderfrangos" target="_blank" rel="noopener"><span>GitHub Profile</span><span><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></span></a></div></div></div><div class="pages"><div id="me" class="page checkEnteredBottom" data-triggerEvent="setMenuItem" data-id="0"><div class="narrow-wrapper"><picture> <source srcset="media/me.webp" type="image/webp"> <source srcset="media/me.jpg" type="image/jpeg"> <img class="me anim d0" src="media/me.jpg" alt="Me" width="200" height="200"> </picture><h1 class="header-large text-center anim d1">Xander Frangos</h1><p class="text-center anim d2"><strong>Programmer, Designer, Creative</strong></p><div class="tags anim d3"> <span class="primary">WordPress</span> <span class="primary">Joomla</span> <span class="primary">Drupal</span> <span class="primary">React</span> <span class="primary">React Native</span> <span class="primary">Node.js</span> <span class="primary">Electron</span> <span class="secondary">JavaScript</span> <span class="secondary">PHP</span> <span class="secondary">HTML5</span> <span class="secondary">C#</span> <span>Design</span> <span>Photoshop</span> <span>After Effects</span></div><p class="anim d4">If a device has a screen on it, I probably want to make something for it. My programming philosopy is to use the right tool for the right job, but also as few tools as possible. An overuse of libraries and plugins is asking for trouble.</p><p class="anim d5">I am happily employed at <a href="http://greengroupstudio.com" target="_blank" rel="noopener noreferrer"><span>Green Group Studio</span></a>. If you'd like to contact me for freelance work, please reach out to them instead.</p><p class="find-me-on anim d6"><span>Find me on</span> <span><span class="title">GitHub</span><a href="https://github.com/xanderfrangos" target="_blank" rel="noopener" class="icon"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a></span> <span><span class="title">LinkedIn</span><a href="https://www.linkedin.com/in/alexander-frangos-11a66535/" target="_blank" rel="noopener" class="icon"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a></span></p></div></div><div id="apps" class="page defer checkEnteredBottom" data-offset="-650" data-triggerEvent="setMenuItem" data-untriggerEvent="unsetMenuItem" data-id="1"><div class="wrapper"><hr><h2 class="header-med text-center">Apps</h2><p class="text-center"><strong>Apps, games, and apps for games!</strong></p><div class="portfolio-list"><div class="portfolio-item"><div class="image"> <a href="https://crushee.app" target="_blank" rel="noopener"><picture> <source srcset="media/previews/webp/crushee.webp" type="image/webp"> <source srcset="media/previews/crushee.jpg" type="image/jpeg"> <img src="media/previews/crushee.jpg" alt="Crushee App" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>Crushee</h3><div class="tags"> <span class="primary">Electron App</span> <span class="primary">Node.js</span> <span class="secondary">JavaScript</span> <span>Design</span> <span>Personal Project</span></div><p>Optimization is important to me, but my workflow for optimizing images was not... optimal. It involved jumping between programs to resize/optimize multiple files. So I made <a href="https://crushee.app">Crushee</a> to take care of that for me.</p></div></div><div class="portfolio-item"><div class="image"> <a href="https://twinkletray.com" target="_blank" rel="noopener"><picture> <source srcset="media/previews/webp/twinkle-tray.webp" type="image/webp"> <source srcset="media/previews/twinkle-tray.jpg" type="image/jpeg"> <img src="media/previews/twinkle-tray.jpg" alt="Twinkle Tray App" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>Twinkle Tray</h3><div class="tags"> <span class="primary">Electron App</span> <span class="primary">Node.js</span> <span class="secondary">JavaScript</span> <span>Design</span> <span>Personal Project</span></div><p>As someone who uses multiple monitors at 2AM, being able to easily adjust their brightness is important to me. There are a few options for doing so in Windows, but they lack features and are... ugly. <a href="https://twinkletray.com">Twinkle Tray</a> was created to be both pretty <em>and</em> functional.</p></div></div><div class="portfolio-item"><div class="image"> <a href="https://github.com/xanderfrangos/electron-game-launcher" target="_blank" rel="noopener"><picture> <source srcset="media/previews/webp/den.webp" type="image/webp"> <source srcset="media/previews/den.jpg" type="image/jpeg"> <img src="media/previews/den.jpg" alt="Den Game Launcher Screenshot" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>Den Game Launcher</h3><div class="tags"> <span class="primary">Electron App</span> <span class="secondary">React</span> <span>Design</span> <span>Personal Project</span></div><p>I wasn't happy with the <a href="https://store.steampowered.com/bigpicture" target="_blank" rel="noopener noreferrer"><span>Steam's Big Picture</span></a> interface, so I decided to make my own. It's heavily a work-in-progress, but I'm happy with the progress so far. Even if I never finish it, it's been an excellent excercise in building an interface for gamepads.</p></div></div><div class="portfolio-item"><div class="image"> <a href="https://itunes.apple.com/us/app/myvendorcenter/id1257129048" target="_blank" rel="noopener noreferrer"><picture> <source srcset="media/previews/webp/myvc-app.webp" type="image/webp"> <source srcset="media/previews/myvc-app.jpg" type="image/jpeg"> <img src="media/previews/myvc-app.jpg" alt="MyVendorCenter App" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>MyVendorCenter Mobile App</h3><div class="tags"> <span class="primary">Mobile App</span> <span class="secondary">React Native</span> <span>Design</span></div><p>The companion app for <a href="https://myvendorcenter.com/" target="_blank" rel="noopener noreferrer">MyVendorCenter</a>, available for both <a href="https://itunes.apple.com/us/app/myvendorcenter/id1257129048" target="_blank" rel="noopener noreferrer">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.myvendorcenter.myvcvendormanagement" target="_blank" rel="noopener noreferrer">Android</a>. This app allows managers to review, add, and edit this vendor lists on the go.</p></div></div><div class="portfolio-item"><div class="image"> <a href="https://xanderfrangos.com/rei-adventure/" target="_blank" rel="noopener"><picture> <source srcset="media/previews/webp/rei-adventure.webp" type="image/webp"> <source srcset="media/previews/rei-adventure.jpg" type="image/jpeg"> <img src="media/previews/rei-adventure.jpg" alt="Rei Adventure Screenshot" width="1020" height="573" loading="lazy" /></picture> </a></div><div class="text"><h3>Rei Adventure</h3><div class="tags"> <span class="primary">Game</span> <span class="secondary">HTML5</span> <span class="secondary">JavaScript</span> <span>Personal Project</span></div><p>As any nerdy boyfriend would do, I made my girlfriend a game for her birthday. She loved it. 馃槉<br>The JavaScript-based game engine was written from scratch, with minor use of jQuery. Warning, inside jokes.</p></div></div><div class="portfolio-item"><div class="image"> <a href="https://github.com/xanderfrangos/willowtree" target="_blank" rel="noopener"><picture> <source srcset="media/previews/webp/willowtree.webp" type="image/webp"> <source srcset="media/previews/willowtree.jpg" type="image/jpeg"> <img src="media/previews/willowtree.jpg" alt="WillowTree# Screenshot" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>WillowTree#</h3><div class="tags"> <span class="primary">Desktop App</span> <span class="secondary">C#</span> <span>Personal Project</span></div><p>Built for the game <a href="https://en.wikipedia.org/wiki/Borderlands_(video_game)" target="_blank" rel="noopener noreferrer">Borderlands</a>, this save editor lets you modify your save data from Xbox, PS3, and PC. Edit character stats, progress, weapons, and more. WillowTree# has been downloaded by users <a href="https://sourceforge.net/projects/willowtree/files/stats/timeline?dates=2010-01-17+to+2019-04-17" target="_blank" rel="noopener noreferrer">over 1 million times</a>.</p></div></div></div></div></div><div id="web" class="page defer checkEnteredBottom" data-offset="-650" data-triggerEvent="setMenuItem" data-untriggerEvent="unsetMenuItem" data-id="2"><div class="wrapper"><hr><h2 class="header-med text-center">Web</h2><p class="text-center"><strong>A few highlights from over the years.</strong></p><div class="portfolio-list"> <div class="portfolio-item"><div class="image"> <a href="https://myvendorcenter.com/" target="_blank" rel="noopener noreferrer"><picture> <source srcset="media/previews/webp/myvendorcenter.webp" type="image/webp"> <source srcset="media/previews/myvendorcenter.jpg" type="image/jpeg"> <img src="media/previews/myvendorcenter.jpg" alt="MyVendorCenter Website" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>MyVendorCenter</h3><div class="tags"> <span class="primary">Proprietary System</span> <span class="secondary">PHP</span> <span class="secondary">JavaScript</span> <span>Design</span></div><p>I was given the opportunity to overhaul the public-facing pages of <a href="https://myvendorcenter.com/" target="_blank" rel="noopener noreferrer">MyVendorCenter.com</a>. I've also made minor edits/fixes to the back-end, along with managing their GitHub repository. For reference, <a href="https://web.archive.org/web/20171016112718/https://myvendorcenter.com/" target="_blank" rel="noopener noreferrer">here's</a> the old home page.</p></div></div><div class="portfolio-item"><div class="image"> <a href="https://nostalgicamerica.com/" target="_blank" rel="noopener noreferrer"><picture> <source srcset="media/previews/webp/nostalgicamerica.webp" type="image/webp"> <source srcset="media/previews/nostalgicamerica.jpg" type="image/jpeg"> <img src="media/previews/nostalgicamerica.jpg" alt="Nostalgic America Website" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>Nostalgic America</h3><div class="tags"> <span class="primary">Drupal 7</span> <span class="secondary">PHP</span> <span class="secondary">JavaScript</span> <span>Design</span></div><p>Every day offers a whole new look at history. Leveraging Drupal 7 to manage the content, I coded a custom layout and caching system. Despite housing thousands of pieces of unique content, those custom coded systems make the site load instantly.</p></div></div><div class="portfolio-item"><div class="image"> <a href="http://samsimonpresents.com" target="_blank" rel="noopener noreferrer"><picture> <source srcset="media/previews/webp/samsimonpresents.webp" type="image/webp"> <source srcset="media/previews/samsimonpresents.jpg" type="image/jpeg"> <img src="media/previews/samsimonpresents.jpg" alt="Sam Simon Website" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>Sam Simon Presents</h3><div class="tags"> <span class="primary">Static Website</span> <span class="secondary">JavaScript</span> <span>Design</span></div><p>A showman deserves a showman's website. This fun, animated site was made to delightfully inform and sell visitors on Sam Simon's services.</p></div></div><div class="portfolio-item"><div class="image"> <a href="https://wantsack.com/" target="_blank" rel="noopener noreferrer"><picture> <source srcset="media/previews/webp/wantsack.webp" type="image/webp"> <source srcset="media/previews/wantsack.jpg" type="image/jpeg"> <img src="media/previews/wantsack.jpg" alt="WantSack Website" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>WantSack</h3><div class="tags"> <span class="primary">WordPress</span> <span class="secondary">JavaScript</span> <span>Design</span> <span>Personal Project</span></div><p>Everyone always asks me: "Xander, what do you want for Christmas". Since "I don't know" isn't an acceptable answer, and I'm not a fan of WunderList, I made <a href="https://wantsack.com" target="_blank" rel="noopener">my own wishlist website</a>. (The <a href="https://alexanderfrangos.com/wishlist/index2.html" target="_blank" rel="noopener noreferrer">old version</a> of this site is pretty fun too!) New accounts are invite only, sorry.</p></div></div><div class="portfolio-item"><div class="image"> <a href="https://wasteadvantagemag.com/" target="_blank" rel="noopener noreferrer"><picture> <source srcset="media/previews/webp/wasteadvantagemag.webp" type="image/webp"> <source srcset="media/previews/wasteadvantagemag.jpg" type="image/jpeg"> <img src="media/previews/wasteadvantagemag.jpg" alt="Waste Advantage Website" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>Waste Advantage Magazine</h3><div class="tags"> <span class="primary">WordPress</span> <span class="secondary">PHP</span> <span class="secondary">JavaScript</span> <span>Design</span></div><p>Looking to pass up their competition, <a href="https://wasteadvantagemag.com/" target="_blank" rel="noopener noreferrer">Waste Advantage Magazine</a> wanted a redesign of their website. In addition to redesigning the website <a href="https://web.archive.org/web/20180310054053/https://wasteadvantagemag.com/" target="_blank" rel="noopener noreferrer">(old website design)</a>, a new ad management system was implemented, and the entire back-end of their MarketPlace was rewritten with streamlined functionality.</p></div></div></div></div></div><div id="other" class="page defer checkEnteredBottom" data-offset="-650" data-triggerEvent="setMenuItem" data-untriggerEvent="unsetMenuItem" data-id="3"><div class="wrapper"><hr><h2 class="header-med text-center">Other</h2><p class="text-center"><strong>Things that don't involve programming.</strong></p><div class="portfolio-list"><div class="portfolio-item"><div class="image"> <a href="https://www.youtube.com/watch?v=wV5tGO8ik8A" target="_blank" rel="noopener noreferrer"><picture> <source srcset="media/previews/webp/fcb-vid.webp" type="image/webp"> <source srcset="media/previews/fcb-vid.jpg" type="image/jpeg"> <img src="media/previews/fcb-vid.jpg" alt="FCB Video Screenshot" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>FCB Refer-A-Friend Video</h3><div class="tags"> <span class="primary">Video</span> <span class="secondary">Editing</span> <span class="secondary">Motion Graphics</span> <span>After Effects</span></div><p>Created for <a href="https://www.floridacommunitybank.com/" target="_blank" rel="noopener noreferrer">Florida Community Bank's</a> Refer-A-Friend program, this video was a team effort. Other's provided the graphical assets, while I assembled, edited, and animated the video itself.</p></div></div><div class="portfolio-item"><div class="image"> <a href="https://www.youtube.com/watch?v=Ng4fZV09PPw" target="_blank" rel="noopener noreferrer"><picture> <source srcset="media/previews/webp/myvc-video.webp" type="image/webp"> <source srcset="media/previews/myvc-video.jpg" type="image/jpeg"> <img src="media/previews/myvc-video.jpg" alt="MyVC Video Screenshot" width="1020" height="573" loading="lazy" /> </picture> </a></div><div class="text"><h3>MyVendorCenter Manager Video</h3><div class="tags"> <span class="primary">Video</span> <span class="secondary">Editing</span> <span class="secondary">Motion Graphics</span> <span>After Effects</span></div><p><a href="https://myvendorcenter.com/" target="_blank" rel="noopener noreferrer">MyVendorCenter</a> needed a video to educate managers on why vendor compliance is critical. For this video, I handled most of the design, and all of the editing/animation.</p></div></div></div></div></div><div id="footer" class="page checkEnteredBottom" data-offset="-650" data-triggerEvent="setMenuItem" data-untriggerEvent="unsetMenuItem" data-id="4"><div class="wrapper"><hr><p class="text-center">© 2020 Alexander "Xander" Frangos. Website built with HTML, CSS, Sass, JavaScript, and Google Fonts. <a class="ver" href="https://github.com/xanderfrangos/xanderfrangos.github.io" target="_blank" rel="noopener">master-60dae05</a></p></div></div></div><script src="js/main.merged.min.js?60dae05"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-54899063-1"></script> <script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-54899063-1');</script></body></html>