diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7df593e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,354 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Projects made by avm99963</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Material Web Components -->
+    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="styles.css">
+    <script>
+    window.addEventListener("load", function() {
+      mdc.autoInit();
+    });
+    </script>
+  </head>
+  <body class="mdc-typography">
+    <header class="mdc-top-app-bar mdc-top-app-bar--fixed">
+      <div class="mdc-top-app-bar__row">
+        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+          <button class="mdc-icon-button material-icons mdc-top-app-bar__navigation-icon--unbounded">menu</button><span class="mdc-top-app-bar__title">Projects made by avm99963</span>
+        </section>
+      </div>
+    </header>
+    <main class="mdc-top-app-bar--fixed-adjust">
+
+      <h2 class="project-section-title"><i class="material-icons project-section-title__icon" style="color: #FFC400;">star</i> <span class="project-section-title__text">Featured projects</span></h2>
+
+      <div class="mdc-layout-grid projects">
+        <div class="mdc-layout-grid__inner">
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/covid_tracability_fme.png');"></div>
+              <div class="project-card__primary">
+                <h3 class="project-card__title mdc-typography mdc-typography--headline6">Covid Tracability tool for the FME</h3>
+                <h4 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Sep 2020 - Currently</h4>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">A team of students at the FME are currently developing a tool which helps students keep track of the places where they've sat throughout the day, in order to help the mathematics school trace the contacts of a positive case.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://github.com/delefme/covid-tracability" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Main Git repo
+                  </a>
+                  <a href="https://github.com/delefme/covid-tracability-backend" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Backend Git repo
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('https://covid-19.sandbox.avm99963.com/output/graph.png');"></div>
+              <div class="project-card__primary">
+                <h3 class="project-card__title mdc-typography mdc-typography--headline6">COVID-19 risk graphs generator</h3>
+                <h4 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">May 2020 - Currently</h4>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Open source project developed to generate daily graphs which show the risk factor of each health area in Catalonia, based on the data provided by the Catalan Government.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://gerrit.avm99963.com/plugins/gitiles/covid19/" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Gerrit repo
+                  </a>
+                  <a href="https://covid-19.sandbox.avm99963.com/" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Visit it
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/hores.png');"></div>
+              <div class="project-card__primary">
+                <h3 class="project-card__title mdc-typography mdc-typography--headline6"><i>Hores</i></h3>
+                <h4 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Jul 2019 - Dec 2019</h4>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Project I've profesionally developed for my previous high school so they can keep track of their workers' working hours, in order to comply with the new workers legislation in Spain.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://hores.sandbox.avm99963.com/" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Demo
+                  </a>
+                  <button disabled class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Closed source
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/graf.png');"></div>
+              <div class="project-card__primary">
+                <h3 class="project-card__title mdc-typography mdc-typography--headline6">The FME Graph</h3>
+                <h4 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Oct 2017 - Currently</h4>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Open source web app which displays <span class="help" title="The FME Graph is a graph which shows the hookups that have taken place between people in the FME. People are represented by vertices, and when two of them have hooked up, they are connected by an edge.">the FME Graph</span>. It also has a companion Google Assistant app.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://gerrit.avm99963.com/plugins/gitiles/graf/" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Gerrit repo
+                  </a>
+                  <a href="https://labs.avm99963.com/graf/" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Visit it
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/voting.png');"></div>
+              <div class="project-card__primary">
+                <h2 class="project-card__title mdc-typography mdc-typography--headline6">Voting</h2>
+                <h3 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Mar 2016 - Nov 2016</h3>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Open source web-based voting system, developed as part of my baccalaureate research project. I highly encourage you to read the research project document!</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://github.com/avm99963/voting" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> GitHub repo
+                  </a>
+                  <a href="img/bach_research_project.pdf" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Research project doc
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/translate_selected_text.png');"></div>
+              <div class="project-card__primary">
+                <h2 class="project-card__title mdc-typography mdc-typography--headline6">Translate Selected Text</h2>
+                <h3 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Jan 2014 - Currently</h3>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Open source Chrome extension which lets users translate parts of a website quicker and safer. It asks for the smallest subset of permissions possible, and currently has 130,000+ users.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://github.com/avm99963/translateselectedtext" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> GitHub repo
+                  </a>
+                  <a href="https://chrome.google.com/webstore/detail/translate-selected-text/fbimffnjoeobhjhochngikepgfejjmgj" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Install
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <h2 class="project-section-title"><i class="material-icons project-section-title__icon">build</i> <span class="project-section-title__text">Other projects</span></h2>
+
+      <div class="mdc-layout-grid projects">
+        <div class="mdc-layout-grid__inner">
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/twpowertools.png');"></div>
+              <div class="project-card__primary">
+                <h3 class="project-card__title mdc-typography mdc-typography--headline6">TW Power Tools</h3>
+                <h4 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">May 2020 - Currently</h4>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Open source Chrome/Firefox extension which adds several additional features to the Google Product Forums, which are helpful to many <a href="https://support.google.com/communities/answer/9138806" target="_blank" rel="noreferrer">Google Product Experts</a>.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://gerrit.avm99963.com/plugins/gitiles/infinitegforums/" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Gerrit repo
+                  </a>
+                  <a href="https://chrome.google.com/webstore/detail/tw-power-tools-formerly-i/hpgakoecmgibigdbnljgecablpipbajb" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Install
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/support.png');"></div>
+              <div class="project-card__primary">
+                <h2 class="project-card__title mdc-typography mdc-typography--headline6">support.avm99963.com</h2>
+                <h3 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Jan 2020 - Currently</h3>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Website powered by the open source tool <a href="https://www.mkdocs.org/" target="_blank" rel="noreferrer">mkdocs</a> which hosts several guides I've written in Spanish to help diagnose common problems with Google products such as Chrome.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://github.com/avm99963/support.avm99963.com" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> GitHub repo
+                  </a>
+                  <a href="https://support.avm99963.com/" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Visit it
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/playliststats.png');"></div>
+              <div class="project-card__primary">
+                <h2 class="project-card__title mdc-typography mdc-typography--headline6">Spotify Playlist Stats</h2>
+                <h3 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Jun 2018</h3>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Me and my friends used to argue because some of us added too many songs in our collaborative playlists. This tool helps solve this problem!</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://github.com/avm99963/playliststats" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> GitHub repo
+                  </a>
+                  <a href="https://labs.avm99963.com/playliststats/" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Use it
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/esglaona.png');"></div>
+              <div class="project-card__primary">
+                <h2 class="project-card__title mdc-typography mdc-typography--headline6"><i>Esglaona</i></h2>
+                <h3 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Nov 2017 - Jan 2018</h3>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Web app used to organize the first <span class="help" title="School of Mathematics and Statistics (in Catalan: Facultat de Matemàtiques i Estadística)">FME</span> Gaussian Elimination of Matrices Competition. It synced the match results with Challonge.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://github.com/avm99963/esglaona" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> GitHub repo
+                  </a>
+                  <a href="https://challonge.com/es/ESGLAONA" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Challonge diagram
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/forum.png');"></div>
+              <div class="project-card__primary">
+                <h2 class="project-card__title mdc-typography mdc-typography--headline6">Forum</h2>
+                <h3 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Jul 2015 - Feb 2020</h3>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Open source online forum platform based on the old Pistachio design made by Google around 2010.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://github.com/avm99963/forum" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> GitHub repo
+                  </a>
+                  <a href="https://forums.avm99963.com/" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Demo
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/codejam.png');"></div>
+              <div class="project-card__primary">
+                <h2 class="project-card__title mdc-typography mdc-typography--headline6">Code Jam</h2>
+                <h3 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Mar 2015 - Oct 2017</h3>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Open source website used to host coding competitions. It's designed to be an adaptation of the old Google Code Jam competition dashboard interface.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://github.com/avm99963/codejam" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> GitHub repo
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/metges.png');"></div>
+              <div class="project-card__primary">
+                <h2 class="project-card__title mdc-typography mdc-typography--headline6"><i>Metges</i></h2>
+                <h3 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Jan 2014 - May 2016</h3>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Web app built for my high school in my free time so teachers could reserve hours for the annual health checkup.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://github.com/avm99963/metge" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> GitHub repo
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('img/soundblow.png');"></div>
+              <div class="project-card__primary">
+                <h2 class="project-card__title mdc-typography mdc-typography--headline6">Soundblow</h2>
+                <h3 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Oct 2013 - 2015</h3>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Soundblow was the Green Leaf successor. Another social network built with my friends Hodaifa and Mario which enabled people to share their favorite music with their friends.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <button disabled class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> No longer available
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mdc-layout-grid__cell project-cell">
+            <div class="project-card mdc-card">
+              <div class="mdc-card__media mdc-card__media--16-9">
+                <iframe class="project-card__youtube-media" type="text/html" src="https://www.youtube-nocookie.com/embed/9kSEyUTUNMU" frameborder="0" allowfullscreen></iframe>
+              </div>
+              <div class="project-card__primary">
+                <h2 class="project-card__title mdc-typography mdc-typography--headline6">Green Leaf</h2>
+                <h3 class="project-card__subtitle mdc-typography mdc-typography--subtitle2">Oct 2012 - Oct 2013</h3>
+              </div>
+              <div class="project-card__secondary mdc-typography mdc-typography--body2">Green Leaf was my first real life project. My friends Hodaifa, Mario, and me as a team built this social network in order to connect with our high school friends.</div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <a href="https://www.facebook.com/greenleaf.social/" target="_blank" rel="noreferrer" class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> Facebook page
+                  </a>
+                  <button disabled class="mdc-button mdc-card__action mdc-card__action--button">
+                    <span class="mdc-button__ripple"></span> No longer available
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </main>
+  </body>
+</html>