feat: add some meta data and README

README.md

@@ -1,57 +1,36 @@
+# Le futuriste's portfolio 2022 version
+
 ## Credits
 
-https://tabler-icons.io/
+- [Tabler icons](https://tabler-icons.io)
+- [Libre Baskerville](https://github.com/impallari/Libre-Baskerville)
+- [Axios](https://axios-http.com/)
 
-## Structure
+## Current structure
 
+- Quick facts about me (Intro)
 - Tech wall
 - Pro projects
 - Side projects
-- Find me on
+- Find me on (Links)
-- Volunteering
+<!-- - Volunteering -->
 - Contact form
-- Reading list
+<!-- - Reading list -->
 
+## Another structure to try: tabbed structure
 
-## Technology walls
+The main page: quick facts and the nav bar would be on the left instead of at the top
 
-Mosaic of squared technologies logos
+## Todo
 
-- PHP
+- Add a little bit more style for the project page
-- Composer
+- Compress images for the projects slide show
-- Symfony
+- Add some URL redirection
-- Api platform
+- Improve accessibility
-- Laraval
+- Add HTML for the semantic web
-- PhpUnit
+- Add link to blog and various links to specifics articles (for example about a particular project or about my computing setup)
 
-- HTML 5
+## Technical issues or comments
-- Webpack
-- CSS 3
-- Sass
-- Bootstrap
 
-- JavaScript
+If you have any comments on this website, please reach to me via [email](mailto:mail@matthieubessat.fr)
-- Jquery
-- Yarn
-- Node.js
-- TypeScript
-- Mocha
-- Express
-- Vue.js
-- Vuetify
 
-- GoLang
-
-- MySQL
-- Elastic Search
-- MongoDB
-- Redis
-
-- GNU/Linux
-- Docker
-- Nginx
-- Varnish
-- Caddy
-
-- Python
-- Gunicorn

assets/locales/en.yaml

@@ -11,6 +11,8 @@ about-website: "About this website"
 
 page:
   title: Matthieu Bessat
+  portfolio: Portfolio
+  description: My portfolio as a full-stack freelance web developer.
 
 profile:
   main: Hi, I'm Matthieu!

assets/locales/fr.yaml

@@ -11,6 +11,8 @@ about-website: A propos de ce site
 
 page:
   title: Matthieu Bessat
+  portfolio: Portfolio
+  description: Développeur freelance full-stack, je vous présente mon portfolio.
 
 profile:
   main: Salut, je m'appelle Matthieu !

assets/styles/components/intro.scss

@@ -10,6 +10,7 @@
 
 .intro-items {
     border: 1px dashed gray;
+    border-radius: 3px;
     padding: 1em;
     .intro-item {
         display: flex;

assets/styles/components/links.scss

@@ -15,6 +15,10 @@
         justify-content: center;
         align-items: center;
         min-width: 10em;
+        transition: all 0.1s;
+        &:hover {
+            transform: scale(1.1);
+        }
     }
 
     .link-card-title {
@@ -54,4 +58,4 @@
             min-width: 6em;
         }
     }
-}
+}

assets/styles/components/technologies.scss

@@ -1,6 +1,7 @@
 @use "sass:math";
 
 .tech-mosaic {
+    border-radius: 3px;
     display: flex;
     flex-wrap: wrap;
     overflow: hidden;

assets/styles/components/typography.scss

@@ -26,6 +26,9 @@ h3 {
   font-size: large;
 }
 
+em {
+  font-style: italic;
+}
 
 .section-title {
   display: grid;

src/Controller/HomeController.php

@@ -42,7 +42,7 @@ class HomeController extends AbstractController
         return $this->container->get(Twig::class)->render(
             $response, 'about.html.twig',
             [
-                'email' => $this->container->get('misc')['email']
+                'email' => $this->container->get('intro')['email']
             ]
         );
     }

templates/about.html.twig

@@ -33,7 +33,7 @@
 
         <h2>Retours et question</h2>
         <p>
-        Si vous avez n'importe quel retours à faire sur mon site web que ça soit en positif ou en négatif ou que vous ayez des questions, n'hésitez pas à me contacter soit en utilisant le formulaire de contact ou en me contactant à <a href="mailto:bonjour@matthieubessat.fr">bonjour@matthieubessat.fr</a> j'essairaie de faire le maximum pour répondre à vos remarques et questions !
+        Si vous avez n'importe quel retours à faire sur mon site web que ça soit en positif ou en négatif ou que vous ayez des questions, n'hésitez pas à me contacter soit en utilisant le formulaire de contact ou en me contactant à <a href="mailto:{{ email }}">{{ email }}</a> j'essairai de faire le maximum pour répondre à vos remarques et questions !
         </p>
         {% endif %}
         {% if getLocale() == 'en' %}
@@ -63,7 +63,7 @@
 
         <h2>Feedback</h2>
         <p>
-        Feel free to contact me if you have any remarks, issues or feedbacks by using the contact form or mail to <a href="mailto:bonjour@matthieubessat.fr">bonjour@matthieubessat.fr</a>.
+        Feel free to contact me if you have any remarks, issues or feedbacks by using the contact form or mail to <a href="mailto:{{ email }}">{{ email }}</a>.
         </p>
         {% endif %}
     </div>

templates/home/home.html.twig

@@ -1,4 +1,6 @@
 {% extends 'layout.html.twig' %}
+{% block title %}{{ getLocalizedStr('page.portfolio') }} - {% endblock %}
+{% block description %}{{ getLocalizedStr('page.description') }}{% endblock %}
 {% block content %}
     {% include('home/profile.html.twig') %}
     {% include('home/intro.html.twig') %}

templates/home/intro.html.twig

@@ -5,9 +5,7 @@
         </div>
         <div class="intro">
             <div class="intro-text">
-                <p>
                     {{ getLocalizedStr('intro.description') | formatMd | raw }}
-                </p>
                 <div class="intro-interests chips">
                     <div class="intro-interests-header">
                     <p>

templates/layout.html.twig

@@ -10,13 +10,15 @@
   <meta name=theme-color content=#2c7730>
   <meta name=msapplication-TileColor content=#2c7730>
   
-  <meta property=og:type content=website>
+  <meta property=og:type content="website">
-  <meta property=og:title content="Le_Futuriste, Matthieu Bessat, Web developer full-stack &amp; freelance">
+  <meta property=og:title content="{{ block('title') }}{{ getLocalizedStr('page.title') }}">
+  <meta property=og:description content="{% block description %}{% endblock %}">
   <meta property=og:image content="/img/lefuturiste.jpg">
-  <meta property=og:url content="https://lefuturiste.fr/">
+  <meta property=og:url content="https://lefuturiste.fr/{{ current_url() }}">
   <meta property=og:locale content="{{ getLocale() }}">
 
   <title>{% block title %}{% endblock %}{{ getLocalizedStr('page.title') }}</title>
+
   <link href="/dist/app.min.css" rel="stylesheet">
   <link rel="icon" type="image/png" href="/imgs/favicon.png">
 </head>