CINXE.COM

<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta name="theme-color" content="#07071c"><meta name="generator" content="Astro v5.1.1"><link rel="icon" type="image/png" href="/favicon.png"><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"><link rel="apple-touch-icon" href="/logo-192.png"><title>Angelos Chalaris - Full Stack Engineer</title><meta name="description" content="Angelos Chalaris (chalarangelo) is a web developer from Greece."><meta name="author" content="Angelos Chalaris (chalarangelo)"><meta property="og:title" content="Angelos Chalaris (chalarangelo)"><meta property="og:type" content="website"><meta property="og:description" content="Angelos Chalaris (chalarangelo) is a web developer from Greece."><meta property="og:image" content="https://avatars2.githubusercontent.com/u/8281875?v=4"><link rel="stylesheet" href="/print.css" media="print"><style>:root{--color-background: hsl(240, 61%, 7%);--color-background-light: hsl(240, 39%, 14%);--color-text: hsl(240, 10%, 90%);--color-text-light: hsl(240, 10%, 80%);--color-text-lighter: hsl(240, 10%, 70%);--color-text-darker: hsl(240, 10%, 98%);--color-primary: hsl(217, 98%, 66%);--color-primary-light: hsl(217, 98%, 77%);--color-border: hsl(235, 25%, 27%);--color-scrollbar-knob: hsl(240, 35%, 17%);--color-scrollbar-knob-active: hsl(240, 30%, 23%);--color-selection-background: hsl(230, 98%, 58%);--font-xs: .8125rem;--font-sm: 1rem;--font-md: 1.125rem;--font-lg: 1.3125rem;--font-xl: 1.625rem;--font-x2: 2rem;--font-x3: 2.25rem;--font-x4: 3rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-strong: 600;--line-height-loose: 1.75;--line-height-normal: 1.5;--line-height-tight: 1.25;--spacing-1: 2px;--spacing-2: 4px;--spacing-4: 8px;--spacing-6: 12px;--spacing-8: 16px;--spacing-10: 20px;--spacing-12: 24px;--spacing-16: 32px;--spacing-20: 40px;--spacing-24: 48px;--border-radius-small: 2px;--border-radius-medium: 4px;--border-radius-large: 8px;--border-width-hairline: .5px;--border-width-thin: 1px;--border-width-medium: 2px;--border-width-thick: 4px;--animation-duration-short: .2s;--animation-duration-medium: .3s;--animation-duration-long: .45s}@media (prefers-reduced-motion: reduce){:root{--animation-duration-short: .15s;--animation-duration-medium: .15s;--animation-duration-long: .15s}}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid}*{margin:0}html,body{height:100%}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;background:var(--color-background);color:var(--color-text);-webkit-font-smoothing:antialiased}[hidden]{display:none}:focus-visible{outline-color:var(--color-primary)}::selection{background-color:var(--color-selection-background);color:var(--color-text)}::backdrop{--color-dialog-backdrop: hsla(0, 0%, 0%, .6);background:var(--color-dialog-backdrop)}@font-face{font-family:Inter;font-weight:100 1000;font-display:swap;src:local("Inter Var"),local("Inter Variable"),local("Inter-Variable"),url(/Inter.var.woff2) format("woff2 supports variations"),url(/Inter.var.woff2) format("woff2-variations")}html{font-family:Inter,Helvetica,sans-serif}body{line-height:var(--line-height-loose);font-weight:var(--font-weight-normal)}strong{font-weight:var(--font-weight-strong)}em{font-variation-settings:"slnt" -10;font-style:normal}h1,h2,h3,h4{font-weight:var(--font-weight-strong);overflow-wrap:break-word;hyphens:auto;text-wrap:pretty}h1,h2,h3{line-height:var(--line-height-tight)}h4,h5,h6{line-height:var(--line-height-normal)}h1{font-size:clamp(var(--font-x2),3vw + 1rem,var(--font-x3))}h2{font-size:clamp(var(--font-xl),2vw + 1rem,var(--font-x2))}h3{font-size:clamp(var(--font-lg),1vw + 1rem,var(--font-xl))}h4{font-size:var(--font-lg)}h5,h6{font-size:var(--font-md)}small{font-size:80%}sub{bottom:-.25em}sup{top:-.5em}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}p,ul,ol,table,blockquote{font-size:var(--font-md)}p,li{text-wrap:pretty}ol,ul{list-style:none;padding:0}main>section :is(ol,ul){list-style:revert;padding-inline-start:var(--spacing-10)}main>section :is(ol,ul) li{padding-block:0 var(--spacing-2);margin-block:var(--spacing-2)}:not(:is(code,kbd,pre)){font-feature-settings:"frac","cv05","cv11","calt","kern"}a{--link_color-underline: var(--color-primary);box-shadow:0 1px 0 var(--link_color-underline);transition:box-shadow var(--animation-duration-medium) ease}a:any-link{text-decoration:none;color:inherit}@media (hover: hover){a:is(:hover,:focus){box-shadow:0 2px 0 var(--link_color-underline)}}html{--layout-main-column-width: 800px;--layout-bleed-width: 24px;--layout-row-spacing: var(--spacing-12);--layout-area-spacing: calc(2 * var(--layout-row-spacing));--layout-border-radius: var(--border-radius-medium);scroll-padding-top:var(--layout-row-spacing)}@media (max-width: 50rem){html{--layout-border-radius: 0;--layout-row-spacing: var(--spacing-8)}}body{display:grid;grid-template-columns:minmax(0,1fr) minmax(auto,var(--layout-main-column-width)) minmax(0,1fr);grid-template-areas:"header header header" "left center right" "footer footer footer";row-gap:var(--layout-area-spacing)}main{grid-area:center}main>section{display:grid;grid-template-columns:var(--layout-bleed-width) 1fr var(--layout-bleed-width);row-gap:var(--layout-row-spacing)}main>section>*{grid-column:2}main>section+section{margin-block-start:var(--layout-area-spacing)}::-webkit-scrollbar{background-color:transparent;width:var(--scrollbar_size, 8px);height:var(--scrollbar_size, 8px)}::-webkit-scrollbar-track{margin:var(--scrollbar_margin, 0)}::-webkit-scrollbar-thumb{background-color:var(--scrollbar_color-knob, var(--color-scrollbar-knob));border-radius:var(--scrollbar_size);border:var(--scrollbar_border, none)}@media (hover: hover){::-webkit-scrollbar-thumb:hover{background-color:var(-scrollbar_color-knob-active, var(--color-scrollbar-knob-active))}}body{scrollbar-gutter:stable both-edges;--scrollbar_size: 12px;--scrollbar_border: 2px solid var(--color-background)}main>section{--section-image-size: 52px}@media screen and (max-width: 25rem){main>section{--section-image-size: 48px}}main>section section{display:flex;flex-flow:row wrap;justify-content:end;gap:var(--spacing-6)}main>section section img{width:var(--section-image-size);height:var(--section-image-size);aspect-ratio:1/1;border-radius:var(--border-radius-small)}main>section section h3{flex-grow:1;text-wrap-style:balance}main>section section h3 a{--link_color-underline: transparent;transition:color var(--animation-duration-medium) ease}@media (hover: hover){main>section section h3 a:is(:hover,:focus){color:var(--color-primary)}}main>section section h3 small{display:block;font-size:var(--font-xs);color:var(--color-text-light);font-weight:var(--font-weight-normal);margin-block-start:var(--spacing-2);text-wrap-style:initial}main>section section h3 small span{display:inline-block;margin-block-start:var(--spacing-2)}main>section section h3,main>section section p,main>section section ul{flex-basis:calc(100% - var(--section-image-size) - var(--spacing-6))}@media screen and (max-width: 30rem){main>section section{margin-block-end:var(--layout-row-spacing)}main>section section p{flex-basis:100%}}header{--header-height: 60dvh;--header-blur-height: 10dvh;max-width:100%;height:var(--header-height);overflow-x:hidden;display:flex;justify-content:center;grid-area:header}@media screen and (min-width: 23rem) and (max-width: 25rem){header{--header-height: 62.5dvh}}@media screen and (max-height: 32rem){header{--header-height: 54vh;--header-blur-height: 8dvh}}header>img{position:absolute;top:0;left:0;height:var(--header-height);width:100%;object-fit:cover;filter:blur(.5px) grayscale(12%) brightness(62.5%)}@media (hover: hover) and (prefers-reduced-motion: no-preference){header>img{transition:filter 1.5s ease;transition-delay:1.5s}header>img:hover{filter:blur(0px) grayscale(12%) brightness(75%) saturate(200%)}}header>img+div{display:block;position:absolute;top:calc(var(--header-height) - var(--header-blur-height) + 2px);left:0;height:var(--header-blur-height);width:100%}header>img+div:after{content:"";position:absolute;bottom:0;left:0;display:block;height:var(--header-blur-height);width:100%;background:linear-gradient(to bottom,transparent,33%,var(--color-background),66%,var(--color-background))}header>div:last-child{z-index:5;align-self:center;text-align:center}header>div:last-child h1{font-size:var(--font-x2);text-shadow:1px 2px 6px #212121;line-height:var(--line-height-tight);color:var(--color-text-darker)}@media screen and (min-width: 30rem){header>div:last-child h1{font-size:var(--font-x3)}}@media screen and (min-width: 32rem){header>div:last-child h1{font-size:var(--font-x4)}}header>div:last-child h1 small{display:block;margin-block-start:var(--spacing-6);font-size:var(--font-md)}@media screen and (min-width: 30rem){header>div:last-child h1 small{margin-block-start:var(--spacing-8);font-size:var(--font-lg)}}header>div:last-child img{transform:scale(.7);height:10rem;margin-block-end:calc(0 - var(--spacing-8))}@media screen and (max-height: 32rem){header>div:last-child img{display:none}}@media screen and (min-width: 20rem){header>div:last-child img{transform:scale(.85);margin-block-end:var(--spacing-2)}}@media screen and (min-width: 48rem){header>div:last-child img{transform:scale(1);height:180px;margin-block:var(--spacing-8) var(--spacing-6)}}footer{grid-area:footer;display:grid;grid-template-columns:minmax(var(--layout-bleed-width),1fr) min(var(--layout-main-column-width),100% - 2 * var(--layout-bleed-width)) minmax(var(--layout-bleed-width),1fr);padding-block:var(--spacing-8) var(--spacing-20)}footer div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--spacing-16) var(--spacing-24)}footer p{grid-column:2;text-wrap:pretty;font-size:var(--font-xs);color:var(--color-text-lighter);text-align:center;padding-block-start:var(--spacing-12);border-block-start:var(--border-width-hairline) solid var(--color-border)}footer a{--link_color-underline: transparent;transition:color var(--animation-duration-medium) ease}@media (hover: hover){footer a:is(:hover,:focus){color:var(--color-text)}}main>section:first-child{padding-block-end:var(--layout-row-spacing)}main>section:first-child>div{display:flex;flex-wrap:wrap;column-gap:var(--spacing-12)}@media (max-width: 30rem){main>section:first-child>div{justify-content:center;row-gap:var(--spacing-8)}}main>section:first-child>div>div{display:flex;flex-direction:column;gap:var(--spacing-8)}main>section:first-child>div>div>div{display:flex;gap:var(--spacing-6)}@media (max-width: 30rem){main>section:first-child>div>div>div{justify-content:center}}main>section:first-child img{width:120px;height:120px;aspect-ratio:1/1;border-radius:var(--border-radius-medium)}main>section:first-child h1>small{display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-sm);color:var(--color-text-lighter);font-weight:var(--font-weight-medium);margin-block-start:var(--spacing-4)}@media (max-width: 30rem){main>section:first-child h1>small{justify-content:center}}main>section:first-child a{--link_color-underline: transparent;transition:color var(--animation-duration-medium) ease}@media (hover: hover){main>section:first-child a:is(:hover,:focus){color:var(--color-primary)}}.wave{cursor:default;display:inline-block;transform-origin:75% 80%;will-change:transform}@media (hover: hover) and (prefers-reduced-motion: no-preference){.wave:is(:hover,:focus){animation:wave var(--animation-duration-long) infinite alternate ease-in-out}}@keyframes wave{0%{transform:rotate(-5deg)}to{transform:rotate(15deg)}} </style></head> <body> <header> <img src="/splash.jpg" alt=""> <div></div> <div> <img src="laptop.svg" alt=""> <h1>Chalarangelo <small>Full Stack Engineer</small> </h1> </div> </header> <main> <section> <div> <img src="https://avatars2.githubusercontent.com/u/8281875?v=4" alt="Angelos Chalaris"> <div> <h1>Angelos Chalaris <small> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg> Athens, Greece </small> </h1> <div> <a href="mailto:chalarangelo@gmail.com" target="_blank" title="Email" rel="noopener noreferrer"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg> </a><a href="https://github.com/Chalarangelo" target="_blank" title="GitHub" rel="noopener noreferrer"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> </a><a href="https://www.linkedin.com/in/angelos-chalaris-b0933314a/" target="_blank" title="LinkedIn" rel="noopener noreferrer"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg> </a><a href="https://stackoverflow.com/users/1650200/angelos-chalaris?tab=profile" target="_blank" title="Stack Overflow" rel="noopener noreferrer"> <svg viewBox="0 0 511.627 511.627" fill="currentColor" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><path d="M324.907 344.893l-200.994-18.559-3.997 42.828 201.281 18.555zM320.055 399.996l-201.853.287v43.106l201.853-.278zM363.734 239.255L189.865 136.471l-21.982 37.115L341.751 276.37zM338.329 288.361l-195.002-52.249-11.136 41.686 195.002 52.249z"></path><path d="M354.594 477.651H89.649V301.212H55.104V511.34h.287l9.995.287h323.187v-.287l.287-9.993V301.212h-34.266zM421.98 0l-42.544 7.423 34.553 198.998 42.534-7.422zM256.958 66.522L370.873 233.26l35.409-24.267L292.643 41.971z"></path></svg> </a><a href="https://codepen.io/chalarangelo" target="_blank" title="Codepen" rel="noopener noreferrer"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon><line x1="12" y1="22" x2="12" y2="15.5"></line><polyline points="22 8.5 12 15.5 2 8.5"></polyline><polyline points="2 15.5 12 8.5 22 15.5"></polyline><line x1="12" y1="2" x2="12" y2="8.5"></line></svg> </a> </div> </div> </div> <p>Hi! <span class="wave">馃憢</span> I'm Angelos Chalaris, a <strong>Full Stack Software Engineer</strong> from <strong>Athens, Greece</strong>.</p> <p>I've been coding since 2011, making it my career path and longest-standing hobby to date. I love programming, system design, and problem-solving, and I'm always looking for new challenges to tackle. My main focus is on <strong>web development</strong>, but I've also worked with various other technologies in the past.</p> <p>I have a <strong>BSc in Computer Science</strong> and a <strong>MSc in Advanced Information Systems & Software Development Technologies</strong>. I currently work as a <strong>Senior Full Stack Software Engineer</strong> for <strong>Skroutz</strong>, a leading e-commerce platform in Greece.</p> <p><strong>Skills:</strong> HTML, CSS, JavaScript, React, Ruby, Ruby on Rails, MariaDB, Git, Figma</p> </section> <section> <h2>Work Experience</h2> <section> <img src="/assets/skroutz.jpeg" alt="Senior Full Stack Engineer"> <h3> Senior Full Stack Engineer <small>Skroutz S.A. · <span>Jan 2023 - Present</span></small></small> </h3> <p>Senior software engineering role focused on JavaScript and Ruby on Rails. Part of a <strong>cross-functional team</strong>, responsible for the rapid development of new features, products and systems, tackling hard problems and improving the shopping experience of millions of customers.</p><p>In my day to day, I collaborate with experienced engineers, designers and product managers to research, build, maintain, test and optimize <strong>reusable full-stack software solutions</strong>, while ensuring high performance, code quality, best practices and effective <strong>knowledge sharing</strong> within the team.</p> </section><section> <img src="/assets/skroutz.jpeg" alt="Full Stack Engineer"> <h3> Full Stack Engineer <small>Skroutz S.A. · <span>Sep 2019 - Dec 2022</span></small></small> </h3> <p>Software engineering role focused on <strong>JavaScript, ReactJS and Ruby on Rails</strong>. An example of my everyday work and how I contributed to the team can be found in <a href="https://engineering.skroutz.gr/blog/handling-inertial-scroll-in-combination-with-scroll-snapping/" target="_blank" rel="noopener noreferrer">this blog post</a>.</p> </section><section> <img src="/assets/gcr.jpg" alt="IT Officer (Software Engineer)"> <h3> IT Officer (Software Engineer) <small>Greek Council for Refugees · <span>Mar 2018 - Aug 2019</span></small></small> </h3> <p>Part of a team responsible for hardware and software infrastructure, including content management & website administration (Joomla), Windows Server and database (MySQL/MariaDB) administration, as well as <strong>full stack development</strong>, using Node.js, Express, MariaDB and React.</p> </section> </section><section> <h2>Projects & Open Source</h2> <section> <img src="/assets/30-seconds-of-code.png" alt="30 seconds of code"> <h3> 30 seconds of code <a href="https://30secondsofcode.org/" target="_blank" rel="noopener noreferrer"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> </a> <small>JavaScript, Astro, Node.js, HTML · <span>Dec 2017 - Present</span></small></small> </h3> <p>I am the creator of <strong>30 seconds of code</strong>, a curated blog of <strong>over 500 modern web development articles</strong>, containing brief explanations and code snipetts for a wide variety of topics, such as JavaScript, CSS, React, Node.js, HTML and Git.</p><p>The website is custom-made in Astro, hosted on Netlify and its source code and content are <strong>open source</strong>, supported by a community of over <strong>300 contributors</strong> and over <strong>120k stars on GitHub</strong>. For this project, I've taken the roles of content creator, designer, developer and maintainer, as well as community manager.</p> </section><section> <img src="/assets/code.svg" alt="jsiqle"> <h3> jsiqle <a href="https://github.com/Chalarangelo/jsiqle" target="_blank" rel="noopener noreferrer"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> </a> <small>JavaScript, Node.js · <span>Oct 2021 - Mar 2022</span></small></small> </h3> <p>I am the creator of <strong>jsiqle</strong>, a JavaScript library that mimcs ActiveModel models, collections and queries. The library was developed as part of the infrastructure used to power the <strong>30 seconds of code website</strong>.</p><p>It is currently in hiatus, but it is still maintained and updated occasionally.</p> </section><section> <img src="/assets/minicss.png" alt="mini.css"> <h3> mini.css <a href="https://minicss.org/" target="_blank" rel="noopener noreferrer"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> </a> <small>CSS, Sass/SCSS, HTML · <span>Aug 2016 - Oct 2018</span></small></small> </h3> <p>I am the creator of <strong>mini.css</strong>, a minimal, responsive and easily customizable alternative to popular CSS frameworks like Bootstrap. It utilizes modern techniques and design patterns, taking full advantage of <strong>modern CSS capabilities</strong> without the need for any JavaScript code.</p><p>It was also the basis for my <strong>Master's Dissertation</strong>, which explored the application of UI/UX design principles in web interface design.</p><p>The project is currently archived.</p> </section><section> <img src="/assets/code.svg" alt="Demos & Smaller Projects"> <h3> Demos & Smaller Projects <a href="https://github.com/Chalarangelo?utf8=%E2%9C%93&tab=repositories&q=&type=source&language=" target="_blank" rel="noopener noreferrer"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> </a> <small>JavaScript, Node.js, React, HTML, CSS, Sass/SCSS · <span>Jun 2016 - Present</span></small></small> </h3> <p>I have built various demos and toy projects over the years, mostly in JavaScript.</p><p>When I started learning React, I built <a href="https://github.com/Chalarangelo/reactor" target="_blank">Reactor</a> for kickstarting React projects, as well as the <a href="https://github.com/Chalarangelo/combine-class-names" target="_blank">combine-class-names</a> utility to tidy up messy class names in JSX, and <a href="https://furl.netlify.app/">furl</a>, a functional library of components, utilizing React hooks.</p><p>I developed <a href="https://github.com/Chalarangelo/fixture-factory" target="_blank">Fixture Factory</a>, a FactoryBot-inspired library for fixture generation.</p><p>I built <a href="https://chalarangelo.github.io/mocka/" target="_blank">Mocka</a>, a simple, yet elegant content placeholder to enhance UX.</p><p>I've tinkered with progressive web apps for a long time, producing a handful of demos, such as <a href="https://chalarangelo.github.io/mock-pwa/" target="_blank">Mock PWA</a>, <a href="https://github.com/Chalarangelo/autumn-pwa" target="_blank">Autumn Blog</a> and <a href="https://github.com/Chalarangelo/pwapp-demo" target="_blank">PWApp Demo</a>.</p><p>While exploring HTML5, I put together <a href="https://chalarangelo.github.io/htmltemplategenerator/" target="_blank">HTML5 Template Generator</a>, a replacement tool for commonly-found HTML5 boilerplates.</p><p>In the static site generator realm, I created <a href="https://github.com/Chalarangelo/node-static-page-generator" target="_blank">Node Static Page Generator</a>, which supports Markdown content and JSON metadata injection.</p><p>I've tried my hand at simple interpreters and parsers, producing <a href="https://github.com/Chalarangelo/parse-md-js" target="_blank">Parse-MD.js</a> for Markdown and <a href="https://gist.github.com/Chalarangelo/576773ef989ff9229f2befde57c82043" target="_blank">brainsource.js</a> for brainf**k, both written in JavaScript.</p> </section> </section><section> <h2>Education</h2> <section> <img src="/assets/unipi.png" alt="BSc Computer Science"> <h3> BSc Computer Science <small>University of Piraeus · <span>2011 - 2016</span></small></small> </h3> <p>I studied core concepts of programming and computer science, such as algorithms, network architecture, programming languages and artificial intelligence, while my focus was on <strong>Software Technologies & Intelligent Systems</strong>.</p><p>During this time, I learnt to code in various different languages, developing small projects and applications, oftentimes integrating SQL databases. My thesis was on <strong>Business Process Intelligence, Process Mining and the ProM Framework</strong> (available <a href="https://github.com/Chalarangelo/thesis" title="Bachelor's Thesis" target="_blank">here</a> in Greek).</p> </section><section> <img src="/assets/unipi.png" alt="MSc Advanced Information Systems"> <h3> MSc Advanced Information Systems <small>University of Piraeus · <span>2016 - 2018</span></small></small> </h3> <p>I studied <strong>Advanced Software Development Technologies</strong>, familiarizing with some more advanced programming and architecture concepts, especially ones that are used in modern web development, UI/UX.</p><p>During this time, I became more fluent in JavaScript and CSS and had a chance to work with cloud platforms and databases more in depth. My dissertation was titled <strong>Design, Development and Application of Advanced User Interface Software for Web Applications</strong> (available <a href="http://dione.lib.unipi.gr/xmlui/bitstream/handle/unipi/11830/Chalaris_MPSP16035.pdf?sequence=1&isAllowed=y" title="Master's Thesis" target="_blank">here</a> in Greek).</p> </section><section> <img src="/assets/freecodecamp.png" alt="Full-Stack Certification"> <h3> Full-Stack Certification <small>freeCodeCamp · <span>2017 - 2019</span></small></small> </h3> <p>I have completed freeCodeCamp's <a href="https://www.freecodecamp.org/certification/chalarangelo/full-stack" target="_blank">Full-Stack developer certification</a>, earning all 6 of the required certifications and learning essential skills for developing websites and web applications, using HTML, CSS, JavaScript and popular tools, such as React, Bootstrap and Express.</p> </section><section> <img src="/assets/gorails.png" alt="Advanced Ruby: Behind the Magic"> <h3> Advanced Ruby: Behind the Magic <small>Go Rails · <span>2024</span></small></small> </h3> <p>I have completed the <a href="https://courses.gorails.com/advanced-ruby-for-rails-devs" target="_blank">Advanced Ruby: Behind the Magic</a> course by Go Rails, covering advanced Ruby topics, such as blocks, procs & lambdas, requiring files & autoloaders, metaprogramming and domain-specific languages (DSLs). You can find my certificate <a href="./assets/Advanced-Ruby-Behind-the-Magic.pdf" target="_blank">here</a>.</p> </section><section> <img src="/assets/comeau-courses.png" alt="CSS for JavaScript Developers"> <h3> CSS for JavaScript Developers <small>Josh W. Comeau · <span>2023</span></small></small> </h3> <p>I have completed Josh W. Comeau's <a href="https://css-for-js.dev/" target="_blank">CSS for JavaScript Developers</a> course, refreshing and further expanding my knowledge of CSS. The course covers various CSS topics, such as fundamentals, rendering logic, modern component architecture, flexbox, grid, responsive & behavioral CSS, typography, animations and much more. You can find my certificate <a href="./assets/CSS-for-JS-devs.pdf" target="_blank">here</a>.</p> </section><section> <img src="/assets/google.png" alt="The Fundamentals of Digital Marketing"> <h3> The Fundamentals of Digital Marketing <small>Google Digital Workshop · <span>2022</span></small></small> </h3> <p>I have completed Google's <a href="https://learndigital.withgoogle.com/digitalgarage/course/digital-marketing" target="_blank">Fundamentals of Digital Marketing</a> course, learning the basics of digital marketing. More specifically, I was introduced to concepts such as digital marketing strategy, SEO, display advertising, social media, email and mobile marketing, and analytics. You can find my certificate <a href="./assets/digital-marketing.pdf" target="_blank">here</a>.</p> </section><section> <img src="/assets/techtalentschool.png" alt="Tech Talent School Certifications"> <h3> Tech Talent School Certifications <small>Found.ation · <span>2017 - 2018</span></small></small> </h3> <p>I have earned some of Tech Talent School's certifications, improving upon already acquired programming skills (JavaScript, PHP, WordPress), as well as learning some soft skills which are essential for a developer's career.</p> </section> </section><section> <h2>Community contributions</h2> <section> <img src="/assets/stackoverflow.png" alt="Stack Overflow"> <h3> Stack Overflow <a href="https://stackoverflow.com/users/1650200/angelos-chalaris?tab=profile" target="_blank" rel="noopener noreferrer"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> </a> <small>Sep 2012 - Present</small> </h3> <p>I actively participate in the Q&A site Stack Overflow and I currently have <strong>over 6000 reputation points</strong> and a <strong>bronze tag badge in JavaScript</strong>. Most of my questions and answers are in the JavaScript, HTML, jQuery and CSS tags.</p> </section><section> <img src="/assets/codewars.png" alt="Codewars"> <h3> Codewars <a href="https://www.codewars.com/users/Chalarangelo" target="_blank" rel="noopener noreferrer"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-line-join="round" stroke="currentColor" class="icon"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> </a> <small>Nov 2017 - Present</small> </h3> <p>I actively participate in the coding challenge website Codewars and I currently have <strong>over 2500 honour points (3kyu)</strong>. Most of my Kata solutions are written in JavaScript and Node.js.</p> </section> </section> </main> <footer class="col-full container"> <p>Powered by <a href="https://www.netlify.com/" rel="noopener noreferrer nofollow" target="_blank">Netlify</a>, <a href="https://astro.build/" rel="noopener noreferrer nofollow" target="_blank">Astro</a> & <a href="https://github.com/" rel="noopener noreferrer nofollow" target="_blank">GitHub</a> <br> © 2017-2024 Angelos Chalaris. All rights reserved.</p> </footer> </body></html>