Updated Bootstrap, removed FontAwesome, improved favicon and more she…

…nanigans I don't remember

README.md

@@ -1,14 +1,18 @@
 # AndreaTerenz.github.io
 
 <p align="center">
-  <img src="static/icons/favicon2.svg" width=80 alt="site favicon"/>
+  <img src="static/icons/new/favicon-base.png" alt="site favicon"/>
 </p>
 
 Welcome to my personal portfolio website.
 
 ## Tools used
 
-- standard JS/CSS/HTML (duh)
+### Client side
+
 - [Bootstrap 5](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
 - [Less](https://lesscss.org/)
-- [Font Awesome](https://fontawesome.com/icons/) icons
+
+### Server side
+
+Just a simple [Flask](https://flask.palletsprojects.com/en/3.0.x/) server

app.py

@@ -2,7 +2,7 @@
 from datetime import date
 
 import flask
-from flask import Flask
+from flask import Flask, send_from_directory, request
 
 app = Flask(__name__)
 
@@ -23,7 +23,6 @@ class Contact:
     name: str
     icon: str = ""
     social: str = ""
-    brand: bool = True
 
 
 def calculateAge(birthDate):
@@ -32,12 +31,24 @@ def calculateAge(birthDate):
 
     return age
 
+@app.route("/static/icons/new/<path:filename>")
+def newicons(filename):
+    return send_from_directory(app.static_folder, f"icons/new/{filename}")
+
+@app.route("/static/scripts/<path:filename>")
+def scripts(filename):
+    return send_from_directory(app.static_folder, f"scripts/{filename}")
+
+@app.route("/static/styles/<path:filename>")
+def styles(filename):
+    return send_from_directory(app.static_folder, f"styles/{filename}")
+
 @app.route('/')
 def index():
     share_socials = [
-        ShareSocial("facebook", "https://www.facebook.com/sharer/sharer.php?u=http://terenz.dev/"),
-        ShareSocial("twitter", "https://twitter.com/intent/tweet?url=http://terenz.dev/&text="),
-        ShareSocial("linkedin", "https://www.linkedin.com/shareArticle?mini=true&url=http://terenz.dev/"),
+        ShareSocial("facebook", f"https://www.facebook.com/sharer/sharer.php?u={request.url}"),
+        ShareSocial("twitter", f"https://twitter.com/intent/tweet?url={request.url}&text="),
+        ShareSocial("linkedin", f"https://www.linkedin.com/shareArticle?mini=true&url={request.url}"),
     ]
 
     about_logos = [
@@ -52,19 +63,19 @@ def index():
         Repo("AoC 2020", "Some of my solutions for the 2020 Advent of Code challenges", "Advent-of-Code-2020"),
         Repo("p5 Pong", "Pong clone made with p5.js and Node.js", "p5-pong"),
         Repo("GodotMaze", "A demonstration of some maze generation algorithms made with Godot", "GodotMaze"),
-        Repo("This very website", "This portfolio website, made with Bootstrap 5 and Less", "AndreaTerenz.github.io"),
+        Repo("This very website", "This portfolio website, made with Bootstrap 5 and Less", "Portfolio"),
     ]
 
     contacts = [
-        Contact("mailto:contact.me@terenz.dev", "Email", icon="envelope", brand=False, social="google"),
+        Contact("mailto:contact.me@terenz.dev", "Email", icon="envelope", social="google"),
         Contact("https://www.linkedin.com/in/andrea-terenz/", "Linkedin"),
         Contact("https://www.github.com/AndreaTerenz", "Github"),
-        Contact("https://www.twitter.com/AtTerenziani", "Twitter", icon="x-twitter"),
+        Contact("https://www.twitter.com/AtTerenziani", "Twitter", icon="twitter-x"),
     ]
 
     age = calculateAge(date(1999, 10, 30))
 
-    return flask.render_template("better-index.html",
+    return flask.render_template("index.html",
                                  age=age,
                                  share_socials=share_socials,
                                  about_logos=about_logos,

static/icons/new/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

static/icons/new/site.webmanifest

@@ -0,0 +1,14 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-144x144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#656565",
+    "background_color": "#656565",
+    "display": "standalone"
+}

static/styles/style.less

@@ -38,6 +38,9 @@ a.anchor {
     background-color: royalblue;
     color: white;
     font-size: 22px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
     border: transparent 3px solid;
 
     &:hover, &:focus {

templates/better-index.html → templates/index.html

@@ -1,5 +1,5 @@
-{% set PARAGRAPH_CLASSES = "py-3 px-0 px-sm-3 mx-auto mx-md-5" %}
-{% set FAVICON = url_for('static', filename='icons/favicon2.svg') %}
+{% set PARAGRAPH_CLASSES = "row section-div py-3 px-0 px-sm-3 mx-auto mx-md-5 shadow-lg animateOnLoad" %}
+{% set FAVICON = url_for('newicons', filename='favicon-base.png') %}
 
 <!DOCTYPE html>
 <html lang="en">
@@ -9,15 +9,21 @@
     <meta content="black" media="(prefers-color-scheme: dark)" name="theme-color">
     <meta content="width=device-width, initial-scale=1" name="viewport">
 
-    <link href="{{ FAVICON }}" rel="icon" type="image/svg">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <link rel="manifest" href="{{ url_for('newicons', filename='site.webmanifest') }}">
+    <link rel="mask-icon" color="#5bbad5"
+          href="{{ url_for('newicons', filename='safari-pinned-tab.svg') }}">
+    <link rel="apple-touch-icon" sizes="152x152"
+          href="{{ url_for('newicons', filename='apple-touch-icon.png') }}">
+    <link rel="icon" type="image/png" sizes="32x32"
+          href="{{ url_for('newicons', filename='favicon-32x32.png') }}">
+    <link rel="icon" type="image/png" sizes="16x16"
+          href="{{ url_for('newicons', filename='favicon-16x16.png') }}">
 
     <!--Bootstrap-->
-    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
-          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css" rel="stylesheet">
-    <script crossorigin="anonymous"
-            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
     <!--Fonts-->
     <link href="https://fonts.googleapis.com" rel="preconnect">
@@ -27,14 +33,12 @@
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
 
     <!--Local styles-->
-    <link href="{{ url_for('static', filename='styles/style.less') }}" rel="stylesheet/less" type="text/css"/>
-    <link href="{{ url_for('static', filename='styles/bootstrap-social.css') }}" rel="stylesheet">
+    <link href="{{ url_for('styles', filename='style.less') }}" rel="stylesheet/less" type="text/css"/>
+    <link href="{{ url_for('styles', filename='bootstrap-social.css') }}" rel="stylesheet">
 
     <!--Misc js-->
-    <script src="https://kit.fontawesome.com/bac47486c5.js" crossorigin="anonymous"></script>
-    <script src="{{ url_for('static', filename='scripts/main.js') }}"></script>
+    <script src="{{ url_for('scripts', filename='main.js') }}"></script>
     <script src="{{ url_for('static', filename='scripts/repo-cards-better.js') }}"></script>
-    {#<script src="../static/scripts/contact-button.js"></script>#}
 
     <!--Less interpreter-->
     <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
@@ -45,7 +49,7 @@
 <nav class="autohide-nav navbar navbar-expand-md navbar-dark bg-dark fixed-top border-bottom border-2 border-white shadow">
     <div class="container-fluid">
         <a class="navbar-brand me-2 ms-1" href="{{ request.url }}">
-            <img class="py-auto" height="30" src="{{ FAVICON }}" width="30">
+            <img class="py-auto" height="30" src="{{ url_for("newicons", filename="favicon-base.png") }}" width="30">
         </a>
         <button aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"
                 class="navbar-toggler"
@@ -63,14 +67,16 @@
                     <div class="dropdown">
                         <a aria-expanded="false" class="nav-link" data-bs-toggle="dropdown" href="#"
                            id="share_dropdown" role="button">
-                            <i class="fa fa-share-nodes pe-2"></i> Share
+                            <i class="bi bi-share-fill pe-2"></i> Share
                         </a>
 
                         <ul aria-labelledby="share_dropdown" class="dropdown-menu px-3 py-2">
                             <li>
                                 <a class="dropdown-item share_btn_social rounded"
                                    onclick="navigator.clipboard.writeText('{{ request.url }}')"
-                                   target="_blank"><i class="fa fa-copy p-2 w-100 text-center"></i></a>
+                                   target="_blank">
+                                    <i class="bi bi-copy w-100 text-center"></i>
+                                </a>
                             </li>
                             {% for social in share_socials %}
                             <li>
@@ -79,7 +85,9 @@
                             <li>
                                 <a class="dropdown-item share_btn_social rounded"
                                    href="{{ social.link }}"
-                                   target="_blank"><i class="fa fa-{{ social.name }} w-100 text-center"></i></a>
+                                   target="_blank">
+                                    <i class="bi bi-{{ social.name }} w-100 text-center"></i>
+                                </a>
                             </li>
                             {% endfor %}
                         </ul>
@@ -97,7 +105,7 @@ <h1 class="typewriter header" id="nameHeader">Andrea Terenziani</h1>
     </div>
 </div>
 <div class="container-xl px-0 px-md-auto">
-    <div class="row animateOnLoad section-div {{ PARAGRAPH_CLASSES }} shadow-lg">
+    <div class="{{ PARAGRAPH_CLASSES }}">
         <a class="anchor" id="About"></a>
         <h2 class="row m-auto pb-3 paragraph_title">About me</h2>
         <div class="row m-auto">
@@ -125,26 +133,24 @@ <h2 class="row m-auto pb-3 paragraph_title">About me</h2>
         </div>
     </div>
 
-    <div class="row animateOnLoad section-div {{ PARAGRAPH_CLASSES }} shadow-lg">
+    <div class="{{ PARAGRAPH_CLASSES }}">
         <a class="anchor" id="Projects"></a>
         <h2 class="row m-auto pb-3 paragraph_title">My favorite projects</h2>
         <div class="row m-auto h-100">
-            <div class="carousel slide carousel-fade col-12 col-lg-6 mx-auto" data-bs-interval="false"
-                 data-bs-ride="carousel"
+            <div class="carousel slide carousel-fade col-12 col-lg-6 mx-auto"
+                 data-bs-interval="false"
                  id="reposCarousel">
-                <div class="carousel-indicators" id="carousel-indicators-parent">
+                <div class="carousel-indicators">
                     {% for i in range(repos | length) %}
                         <button aria-label="Slide {{ i }}"
                                 data-bs-slide-to="{{ i }}"
                                 data-bs-target="#reposCarousel"
-                                {% if i == 0%}
-                                class="active"
-                                {% endif %}
+                                class="{{ 'active' if loop.index0 == 0 }}"
                                 type="button"></button>
                     {% endfor %}
                 </div>
                 <div class="row">
-                    <div class="carousel-inner" id="repo-card-inner">
+                    <div class="carousel-inner">
                         {% for repo in repos %}
                         <div class="carousel-item repo-card {{ 'active' if loop.index0 == 0 }}"
                              data-theme="dark-theme"
@@ -155,14 +161,16 @@ <h2 class="row m-auto pb-3 paragraph_title">My favorite projects</h2>
                         {% endfor %}
                     </div>
 
-                    <button class="carousel-control carousel-control-prev" data-bs-slide="prev"
+                    <button class="carousel-control carousel-control-prev"
+                            data-bs-slide="prev"
                             data-bs-target="#reposCarousel"
                             type="button">
                         <span aria-hidden="true" class="carousel-control-prev-icon"></span>
                         <span class="visually-hidden">Previous</span>
                     </button>
 
-                    <button class="carousel-control carousel-control-next" data-bs-slide="next"
+                    <button class="carousel-control carousel-control-next"
+                            data-bs-slide="next"
                             data-bs-target="#reposCarousel"
                             type="button">
                         <span aria-hidden="true" class="carousel-control-next-icon"></span>
@@ -173,23 +181,27 @@ <h2 class="row m-auto pb-3 paragraph_title">My favorite projects</h2>
         </div>
     </div>
 
-    <div class="row animateOnLoad section-div {{ PARAGRAPH_CLASSES }} shadow-lg">
+    <div class="{{ PARAGRAPH_CLASSES }}">
         <a class="anchor" id="Contacts"></a>
         <h2 class="row m-auto pb-3 paragraph_title">Contacts</h2>
         <div class="row m-auto text-center fs-5 gy-2 justify-content-around row-cols-1 row-cols-sm-2 row-cols-lg-auto">
             {% for contact in contacts %}
             <div class="col">
                 <a class="btn btn-lg btn-block btn-social text-left fw-bold btn-{{ contact.social if contact.social != "" else contact.name | lower }}"
                    href="{{contact.link}}">
-                    <span class="fa {{ 'fa-brands' if contact.brand }} fa-{{ contact.icon if contact.icon != "" else contact.name | lower }}"></span>
+                    <span class="bi bi-{{ contact.icon if contact.icon != "" else contact.name | lower }}"></span>
                     {{ contact.name }}
                 </a>
             </div>
             {% endfor %}
         </div>
     </div>
 </div>
-
+{# HAS TO BE HERE #}
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
+  </body>
 </body>
 
 </html>