Styles for mobile and small devices. Code cleanup.

Gemfile

@@ -38,7 +38,7 @@ group :development do
   gem 'web-console', '>= 4.1.0'
   # Display performance information such as SQL time and flame graphs for each request in your browser.
   # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
-  gem 'rack-mini-profiler', '~> 2.0'
+  #gem 'rack-mini-profiler', '~> 2.0'
   gem 'listen', '~> 3.3'
   # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
   gem 'spring'

app/assets/images/home.svg

@@ -1,80 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="500mm"
-   height="500mm"
-   viewBox="0 0 500 500"
-   version="1.1"
-   id="svg131"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)"
-   sodipodi:docname="home.svg">
-  <defs
-     id="defs125" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.175"
-     inkscape:cx="865.65656"
-     inkscape:cy="1130.6199"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="1680"
-     inkscape:window-height="964"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata128">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Capa 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,203)">
-    <rect
-       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.85208333;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect6097"
-       width="529.16669"
-       height="527.65479"
-       x="-12.095284"
-       y="-215.53572" />
-    <rect
-       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:13.22916667;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect133-2"
-       width="448.15552"
-       height="448.15549"
-       x="25.922247"
-       y="-177.07774"
-       ry="24.897526" />
-    <rect
-       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:11.70093155;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect133-2-8"
-       width="308.29907"
-       height="308.29907"
-       x="95.850464"
-       y="-107.14954"
-       ry="17.127728" />
-  </g>
-</svg>

app/assets/stylesheets/help.css

@@ -6,14 +6,30 @@ section{
     border-bottom-left-radius: 0.5em;
     transition: all .5s ease-in-out;
 }
+@media screen and (max-width : 800px){
+    section{
+        max-height: 2em;
+        width: 90%;
+    }
+}
 section.selected{
     max-height: 30em;
     border-bottom-right-radius: 1.5em;
     border-bottom-left-radius: 1.5em;
 }
+@media screen and (max-width : 800px){
+    section.selected{
+        max-height: 50em;
+    }
+}
 section h3{
     margin: 0;
 }
+@media screen and (max-width : 800px){
+    section h3{
+        margin: -0.8em -1em 0em -1em;
+    }
+}
 section h3 img.slider{
     width: 1em;
     height: 1em;
@@ -21,6 +37,12 @@ section h3 img.slider{
     float: left;
     margin-left: -2em;
 }
+@media screen and (max-width : 800px){
+    section h3 img.slider{
+        margin-left: 0;
+        margin-top: 0.1em;
+    }
+}
 section.selected h3 img.slider{
     transform: rotate(90deg);
 }

app/assets/stylesheets/main.css

@@ -12,15 +12,26 @@ section#profile{
     }
 }
 section#profile article img#profile_image{
-    display: inline-block;
-    vertical-align: top;
+    vertical-align: middle;
     width: 25%;
     height: 25%;
     border-radius: 50%;
     box-shadow: 0 0 0 0.1em #000000, 0 0 0 0.3em #66bf38, 0 0 0 0.4em #000000;
+    float: left;
+    margin-right: 1em;
+    margin-bottom: 1em;
+}
+section#profile article h4#tagline{
+    display: inline-block;
+    vertical-align: middle;
+}
+@media screen and (max-width : 800px){
+    section#profile article h4#tagline{
+        display: inline;
+        text-align: justify;
+    }
 }
 section#profile article div#profile_content{
-    width: 60%;
     padding: 0.5em 1.5em;
     display: inline-block;
     vertical-align: top;
@@ -30,6 +41,11 @@ section#profile article div.buttons{
     text-align: right;
     padding: 0.5em 2em 0 2em;
 }
+@media screen and (max-width : 800px){
+    section#profile article div.buttons{
+        padding: 0;
+    }
+}
 
 section#profile article div.buttons a.a_button img{
     filter: invert(1) brightness(1.4);
@@ -48,10 +64,15 @@ section#projects{
     section#projects{
         display: block;
         width: 90%;
-        margin: 2em auto auto auto;
+        margin: 2em auto 0 auto;
+    }
+}
+@media screen and (max-width : 800px){
+    section#projects article.project table td.icon{
+        vertical-align: top;
     }
 }
-section#projects article.project img.project_image{
+section#projects article.project table td.icon img.project_image{
     padding: 0.5em;
     width: 5em;
     height: 5em;
@@ -61,17 +82,31 @@ section#projects article.project img.project_image{
     border-radius: 1em;
 }
 @media screen and (max-width : 800px){
-    section#projects article.project img.project_image{
-        padding: 0.9em;
-        width: 10em;
-        height: 10em;
+    section#projects article.project table td.icon img.project_image{
+        padding: 0.2em;
+        width: 10vw;
+        height: 10vw;
     }
 }
 section#projects article.project td.project_details{
     vertical-align: top;
     padding-left: 1em;
 }
+@media screen and (max-width : 800px){
+    section#projects article.project td.project_details{
+        padding-left: 0.3em;
+    }
+    section#projects article.project td.project_details h4{
+        margin-bottom: 0.2em;
+    }
+}
 section#projects div.buttons{
     text-align: right;
     padding: 0.5em 2em 0 2em;
 }
+@media screen and (max-width : 800px){
+    section#projects div.buttons{
+        padding: 0;
+        margin: 0.4em 0.4em;
+    }
+}

app/assets/stylesheets/profile.css

@@ -7,7 +7,6 @@ section#info{
     display: inline-block;
     vertical-align: top;
     width: 30%;
-    margin: auto 2em auto auto;
 }
 @media screen and (max-width : 800px){
     section#info{
@@ -15,9 +14,6 @@ section#info{
         margin: auto;
         text-align: center;
     }
-    section#info h3{
-        text-align: left;
-    }
 }
 
 section#info img#profile_image{
@@ -37,6 +33,15 @@ section#info img#profile_image{
         max-height: 12em;
     }
 }
+section#info h5{
+    margin-top: 0;
+}
+section#info h5 span{
+    display: block;
+    text-align: center;
+    font-size: 110%;
+    padding: 0.5em;
+}
 section#info div#social{
     text-align: center;
     margin: auto;
@@ -45,7 +50,7 @@ section#info div#social{
     section#info div#social{
         display: inline-block;
         vertical-align: middle;
-        width: 40%;
+        width: 100%;
         margin: auto;
     }
 }
@@ -87,25 +92,35 @@ section#about p{
     margin: 2em 4em;
     color: #335333;
 }
+@media screen and (max-width : 800px){
+    section#about p{
+        font-style: initial;
+        text-indent: 0.7em;
+        color: initial;
+        margin: 0 0 1em 0;
+    }
+}
 section#about div#resume_download{
     text-align: center;
 }
 section#about div#resume_download a.a_button{
     display: inline-block;
     vertical-align: top;
-    margin: auto 3em 1.5em auto;
+    margin: auto 1.5em 1.5em auto;
 }
 section#about div#resume_download details{
     display: inline-block;
     vertical-align: top;
     font-style: italic;
     margin-top: 0.5em;
+    width: 15em;
 }
 section#about div#resume_download details summary{
     color: #777777;
     font-size: 90%;
+    text-align: left;
 }
 section#about div#resume_download details ul{
     text-align: left;
-    margin: 0.1em;
+    margin: 0.1em 0.1em 0.1em 0.1em;
 }

app/assets/stylesheets/project.css

@@ -1,39 +1,43 @@
 section{
-	text-align: center;
-	width: 90%;
-	margin: auto;
+    text-align: center;
+    width: 90%;
+    margin: auto;
 }
 section h3{
-	text-align: left;
+    text-align: left;
 }
 div#info_summary{
     display: inline-block;
-    width: 65%;
+    width: 72%;
     margin: 0;
     vertical-align: top;
-    padding: 1em 3em;
+    padding: 0;
     min-height: 13em;
     text-align: left;
 }
 @media screen and (max-width : 800px){
-	div#info_summary{
-	    display: block;
-	    width: 95%;
-	    margin: 1em auto;
-	    padding: 1em 2em;
-	}
+    div#info_summary{
+        display: block;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+    }
 }
 
 div#info_summary h4{
-    margin: 1em 2em 0 2em;
+    margin: 0.5em;
     font-style: italic;
 }
 
 div#info_summary p#text{
     margin: 2em;
 }
-
-div#info_summary p#text img#logo{
+@media screen and (max-width : 800px){
+    div#info_summary p#text{
+        margin: 0;
+    }
+}
+div#info_summary p#text img#project_image{
     padding: 0.5em;
     width: 7em;
     height: 7em;
@@ -44,6 +48,14 @@ div#info_summary p#text img#logo{
     float: left;
     margin: 0 2em 1em 0;
 }
+@media screen and (max-width : 800px){
+    div#info_summary p#text img#project_image{
+        margin: 0 2em 1em 0.4em;
+        padding: 0.2em;
+        width: 20vw;
+        height: 20vw;
+    }
+}
 
 div#info_details{
     display: inline-block;
@@ -52,52 +64,72 @@ div#info_details{
     margin: 0;
     border-left: 0.1em solid #aacaaa;
     border-right: 0.1em solid #aacaaa;
-    background: linear-gradient(to bottom, #e5f0e500 0%, #e5f0e5ff 20%, #e5f0e5ff 80%, #e5f0e500 100%);
+    /*background: linear-gradient(to bottom, #e5f0e500 0%, #e5f0e5ff 20%, #e5f0e5ff 80%, #e5f0e500 100%);*/
     padding: 1em;
     text-align: left;
 }
 @media screen and (max-width : 800px){
-	div#info_details{
-		text-align: center;
-	    display: block;
-	    width: 90%;
-	    margin: 1em auto;
-	    border-top: 0.1em solid #aacaaa;
-	    border-bottom: 0.1em solid #aacaaa;
-	    border-left: 0;
-	    border-right: 0;
-	    background: linear-gradient(to right, #e5f0e500 0%, #e5f0e5ff 20%, #e5f0e5ff 80%, #e5f0e500 100%);
-	    padding: 1em;
-	}
+    div#info_details{
+        text-align: center;
+        display: block;
+        width: auto;
+        margin: 0.5em auto;
+        border-left: 0;
+        border-right: 0;
+        /*background: linear-gradient(to right, #e5f0e500 0%, #e5f0e5ff 20%, #e5f0e5ff 80%, #e5f0e500 100%);*/
+        padding: 0.5em;
+    }
 }
 div#info_details div.details{
     margin: 0.5em 1.5em 0.5em 1.5em;
 }
+@media screen and (max-width : 800px){
+    div#info_details div.details{
+        margin: 0.5em 0;
+        text-align: left;
+    }
+}
 
 div#info_details div.details hr.details_separator{
     margin: 1em -0.5em 0.5em -0.5em;
 }
 
-div#info_details div#tags{
-    font-style: italic;
-    font-size: 90%;
+div#info_details div#links{
+    padding-top: 0.5em;
+    border-bottom: 0.1em solid #aacaaa;
+    text-align: center;
 }
 
 div#info_details div#links a.link{
     display: block;
     margin-bottom: 1em;
+    text-align: left;
+}
+@media screen and (max-width : 800px){
+    div#info_details div#links{
+        column-count: 2;
+        border-top: 0.1em solid #aacaaa;
+    }
 }
-
 div#info_details div#links a.link img.link{
     vertical-align: middle;
     width: 1.5em;
     height: 1.5em;
+    margin-right: 0.5em;
+}
+
+div#info_details div#technologies{
+    font-size: 90%;
+    border-bottom: 0.1em solid #aacaaa;
+    padding-bottom: 0.5em;
+    text-align: center;
 }
 
 div#info_details div#license img{
     max-width: 8em;
     max-height: 2em;
-    vertical-align: bottom;
+    vertical-align: middle;
+    text-align: center;
 }
 
 iframe#demo{

app/assets/stylesheets/projects.css

@@ -4,9 +4,6 @@ section{
     margin: auto;
     text-align: center;
 }
-section h3{
-    text-align: left;
-}
 
 section article.project{
     position: relative;
@@ -16,22 +13,27 @@ section article.project{
     margin: 2em 3%;
     padding: 1em;
     text-align: left;
-    border-left: 0.1em solid #aacaaa;
+    /*border-left: 0.1em solid #aacaaa;
     border-right: 0.1em solid #aacaaa;
-    background: linear-gradient(to bottom, #e5f0e500 0%, #e5f0e5ff 20%, #e5f0e5ff 80%, #e5f0e500 100%);
+    background: linear-gradient(to bottom, #e5f0e500 0%, #e5f0e5ff 20%, #e5f0e5ff 80%, #e5f0e500 100%);*/
 }
 @media screen and (max-width : 800px){
-	section article.project{
-	    width: 90%;
-	    margin: 1em auto;
-	}
+    section article.project{
+        width: 96%;
+        margin: 0.3em auto;
+        padding: 0.3em;
+    }
 }
 
 section article.project table{
     width: 100%;
 }
-
-section article.project table img.project_image{
+section article.project table td.logo{
+    text-align: center;
+    vertical-align: top;
+    width: 9em;
+}
+section article.project table td.logo img.project_image{
     padding: 0.5em;
     width: 7em;
     height: 7em;
@@ -40,12 +42,31 @@ section article.project table img.project_image{
     box-shadow: inset 0 0 0.5em #00220077;
     border-radius: 1em;
 }
-
-div#project_list article.project table td.project_details{
+@media screen and (max-width : 800px){
+    section article.project table td.logo{
+        width: 17vw;
+    }
+    section article.project table td.logo img.project_image{
+        padding: 0.3em;
+        width: 15vw;
+        height: 15vw;
+        border-radius: 0.5em;
+    }
+}
+section article.project table td.project_details{
     padding-left: 1.5em;
+    vertical-align: top;
+}
+@media screen and (max-width : 800px){
+    section article.project table td.project_details{
+        padding-left: 0.5em;
+    }
+    section article.project table td.project_details h4{
+        margin-bottom: 0.2em;
+    }
 }
 
-div#project_list article.project table span.project_tagline{
+section article.project table span.project_tagline{
     font-size: 80%;
     font-style: italic;
 }

app/assets/stylesheets/ui.css

@@ -40,13 +40,13 @@ body{
     background-color: #000000;
     font-size: 90%;
     min-height: 100vh;
-	flex-direction: column;
-	display: flex;
+    flex-direction: column;
+    display: flex;
 }
 @media screen and (max-width : 800px){
-	body{
-	    font-size: 100%;
-	}
+    body{
+        font-size: 100%;
+    }
 }
 
 /* Style for all links. */
@@ -111,7 +111,7 @@ header div#logo{
     font-family: 'Latin';
 }
 header nav{
-	width: 100%;
+    width: 100%;
 }
 header nav a{
     font-size: 1.5em;
@@ -144,13 +144,19 @@ header nav a img{
     vertical-align: bottom;
 }
 @media screen and (max-width : 800px){
+    header div#logo{
+        /* Adjusted for the text 'inigoValentin' */
+        font-size: 12vw;
+    }
     header nav{
         overflow: hidden;
         white-space: nowrap;
+        width: 95%;
+        margin: auto;
     }
     header nav a{
         display: inline-block;
-        width: 32%;
+        width: 30%;
         margin: 0;
         padding: 0.5em 0;
         text-align: center;
@@ -158,10 +164,13 @@ header nav a img{
         text-decoration: none;
         border: 0.1em solid #aaaaaa;
         background-color: #222222;
+        font-size: 4vw;
     }
     header nav a img{
-        height: 1.1em;
+        height: 1em;
+        width: 1em;
         vertical-align: middle;
+        margin-right: 0.2em;
     }
 }
 
@@ -175,12 +184,19 @@ footer{
     margin-left: auto;
     margin-right: auto;
     margin-top: 3em;
-    margin-bottom: 2em;
+    margin-bottom: 3.5em;
     color: #dddddd;
     bottom: 0;
     left: 0;
     padding: 1em 2em 3em 2em;
 }
+@media screen and (max-width : 800px){
+    footer{
+        padding: 1em 0;
+        margin-top: 1em;
+        margin-bottom: 7em;
+    }
+}
 
 /* A table containing all the elements in the footer */
 footer table#footer_table{
@@ -214,6 +230,13 @@ footer table#footer_table td#footer_left span#footer_follow{
     display: block;
     margin: 0 0 1em 0;
 }
+@media screen and (max-width : 800px){
+    /* It already has the class 'desktop', which usually hiddes elements */
+    /* for small devices, but I'm overriding the display property */
+    footer table#footer_table td#footer_left span#footer_follow{
+        display: none;
+    }
+}
 
 /* Icons for social media */
 footer table#footer_table td#footer_left img.footer_social_icon{
@@ -231,6 +254,12 @@ footer table#footer_table td#footer_center{
     text-align: center;
 }
 
+@media screen and (max-width : 800px){
+    footer table#footer_table td#footer_center{
+        display: none;
+    }
+}
+
 /* Right area of the footer */
 footer table#footer_table td#footer_right{
     width: 33%;
@@ -258,8 +287,8 @@ footer table#footer_table td#footer_right a.lang img:hover{
 }
 @media screen and (max-width : 800px){
     footer table#footer_table td#footer_right a.lang img{
-        height: 1.5em;
-        margin: 0.2em;
+        height: 1.2em;
+        margin: 0.1em;
         border-radius: 0.1em;
         border: 0.1em solid #555555;
         box-shadow: 0 0 0 #dde;
@@ -296,6 +325,7 @@ section{
 @media screen and (max-width : 800px){
     section{
         margin: 1em;
+        padding: 0.2em;
     }
 }
 
@@ -316,6 +346,13 @@ section h3:before {
     opacity: 0.3;
 }
 
+@media screen and (max-width : 800px){
+    section h3{
+        font-size: 120%;
+        padding: 1em 2em 0.2em 1.5em;
+    }
+}
+
 /* .entry is a style only class to show content. Must be allways children os a .lighted element */
 section article{
     border: 0.1em solid #aaffaa00;
@@ -324,6 +361,13 @@ section article{
     margin: 0.5em;
     transition: all .4s ease-in-out;
 }
+@media screen and (max-width : 800px){
+    section article{
+        border-radius: 0.3em;
+        padding: 0.2em;
+        margin: 0.2em;
+    }
+}
 section article h4{
     font-variant: small-caps;
     text-decoration: underline;
@@ -331,6 +375,11 @@ section article h4{
     font-size: 140%;
     margin: 0.2em auto 1em auto;
 }
+@media screen and (max-width : 800px){
+    section article h4{
+        font-size: 120%;
+    }
+}
 
 section section_list:hover{
     background-color: #efffef;
@@ -434,10 +483,10 @@ input[type=button]{
     text-transform: capitalize;
 }
 @media screen and (max-width : 800px){
-	input[type=button]{
-		font-size: 120%;	
-		padding: 0.9em 1.4em;
-	}
+    input[type=button]{
+        font-size: 120%;    
+        padding: 0.9em 1.4em;
+    }
 }
 input[type=button]::first-letter{
     color: #ffffff;
@@ -546,8 +595,8 @@ a.a_button{
 }
 @media screen and (max-width : 800px){
     a.a_button{
-        font-size: 120%;
-        padding: 0.9em 1.4em;
+        font-size: 100%;
+        padding: 0.3em 0.2em;
     }
 }
 a.a_button::first-letter{

app/models/license.rb

@@ -1,4 +1,4 @@
 class License < ApplicationRecord
     has_many :project
-  has_one_attached :logo
+    has_one_attached :logo
 end

app/models/mail_adress.rb

@@ -1,3 +1,3 @@
 class MailAdress < ApplicationRecord
-  belongs_to :user
+    belongs_to :user
 end

app/models/project_url.rb

@@ -1,4 +1,4 @@
 class ProjectUrl < ApplicationRecord
-  belongs_to :project
-  belongs_to :urlTarget
+      belongs_to :project
+      belongs_to :urlTarget
 end

app/models/resume.rb

@@ -1,4 +1,4 @@
 class Resume < ApplicationRecord
-  belongs_to :user
-  has_one_attached :file
+    belongs_to :user
+    has_one_attached :file
 end

app/models/text.rb

@@ -1,3 +1,3 @@
 class Text < ApplicationRecord
-  belongs_to :user
+    belongs_to :user
 end

app/views/help/index.html.erb

@@ -1,10 +1,10 @@
 <% content_for :head do %>
-    <%= stylesheet_link_tag 'help', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_include_tag 'help', 'data-turbolinks-track' => true  %>
+    <%= stylesheet_link_tag "help", media: "all", "data-turbolinks-track": "reload" %>
+    <%= javascript_include_tag "help", "data-turbolinks-track" => true  %>
 <% end %>
 <section id='about' class='help'>
     <h3 class='pointer' onClick='toggleHelp("about");'>
-        <%= image_tag("control/slid_r.svg", class: "slider") %>
+        <%= image_tag("control/slid_r.svg", class: "slider", alt: t("help.expand")) %>
         <%= t("help.about_title") %>
     </h3>
     <p>
@@ -13,7 +13,7 @@
 </section>
 <section id='privacy' class='help'>
     <h3 class='pointer' onClick='toggleHelp("privacy");'>
-        <%= image_tag("control/slid_r.svg", class: "slider") %>
+        <%= image_tag("control/slid_r.svg", class: "slider", alt: t("help.expand")) %>
         <%= t("help.privacy_title") %>
     </h3>
     <p>
@@ -22,7 +22,7 @@
 </section>
 <section id='cookies' class='help'>
     <h3 class='pointer' onClick='toggleHelp("cookies");'>
-        <%= image_tag("control/slid_r.svg", class: "slider") %>
+        <%= image_tag("control/slid_r.svg", class: "slider", alt: t("help.expand")) %>
         <%= t("help.cookies_title") %>
     </h3>
     <p>
@@ -31,7 +31,7 @@
 </section>
 <section id='license' class='help'>
     <h3 class='pointer' onClick='toggleHelp("license");'>
-        <%= image_tag("control/slid_r.svg", class: "slider") %>
+        <%= image_tag("control/slid_r.svg", class: "slider", alt: t("help.expand")) %>
         <%= t("help.license_title") %>
     </h3>
     <p>

app/views/layouts/_footer.html.erb

@@ -1,23 +1,27 @@
 <footer>
     <hr id='footer_separator'/>
-    <br/>
     <table id='footer_table'>
         <tr>
             <td id='footer_left'>
                 <span id='footer_follow' class='desktop'>
-                    <%= t('footer.follow') %>
+                    <%= t("footer.follow") %>
                 </span>
                 <% @user.user_social_links.each do |link| %>
-                <%= link_to(
-                    image_tag(link.social_link.logo, class: "footer_social_icon", alt: link.social_link.i18n_link_title, title: link.social_link.i18n_link_title),
-                    link.generate_link,
-                    target: "_blank",
-                    title: link.social_link.i18n_link_title
-                ) %>
+                <%=
+                    link_to(
+                        image_tag(
+                            link.social_link.logo,
+                            class: "footer_social_icon",
+                            alt: link.social_link.i18n_link_title),
+                        link.generate_link,
+                        target: "_blank",
+                        title: link.social_link.i18n_link_title
+                    )
+                %>
             <% end %>
             </td>
             <td id='footer_center'>
-                <%= t('footer.copy', name: @user.full_name, year: Date.today.year) %>
+                <%= t("footer.copy", name: @user.full_name, year: Date.today.year) %>
             </td>
             <td id='footer_right'>
                 <%= link_to(
@@ -34,12 +38,21 @@
                     end
                 %>
                 <% I18n.available_locales.each do |locale| %>
-                    <%= link_to(
-                        image_tag("lang/#{locale.to_s}.svg", alt: t("footer.lang_#{locale.to_s}"), title: t("footer.lang_#{locale.to_s}")),
-                        request.protocol + request.host_with_port + "/" + locale.to_s + path,
-                        class: "lang",
-                        title: t("footer.lang_#{locale.to_s}")
-                    ) %>
+                    <%=
+                        link_to(
+                            image_tag(
+                                "lang/#{locale.to_s}.svg",
+                                alt: t("footer.lang_#{locale.to_s}")
+                            ),
+                            request.protocol +
+                                request.host_with_port +
+                                "/" +
+                                locale.to_s +
+                                path,
+                            class: "lang",
+                            title: t("footer.lang_#{locale.to_s}")
+                        )
+                    %>
                 <% end %>
             </td>
         </tr>

app/views/layouts/_header.html.erb

@@ -3,17 +3,32 @@
         inigoValentin
     </div>
     <nav>
-        <%= link_to(
-            image_tag("icon/home.svg") + t('header.home'),
-            main_path()
-        ) %>
-        <%= link_to(
-            image_tag("icon/profile.svg") + t('header.profile'),
-            profile_path()
-        ) %>
-        <%= link_to(
-            image_tag("icon/project.svg") + t('header.projects'),
-            project_index_url()
-        ) %>
+        <%=
+            link_to(
+                image_tag(
+                    "icon/home.svg",
+                    alt: ""
+                ) + t('header.home'),
+                main_path()
+            )
+        %>
+        <%=
+            link_to(
+                image_tag(
+                    "icon/profile.svg",
+                    alt: ""
+                ) + t('header.profile'),
+                profile_path()
+            )
+        %>
+        <%=
+            link_to(
+                image_tag(
+                    "icon/project.svg",
+                    alt: ""
+                ) + t('header.projects'),
+                project_index_url()
+            )
+        %>
     </nav>
 </header>

app/views/layouts/application.html.erb

@@ -1,14 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html lang='<%=I18n.locale%>'>
     <head>
         <title>InigoValentin</title>
-        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <meta name='viewport' content='width=device-width,initial-scale=1'>
         <%= csrf_meta_tags %>
         <%= csp_meta_tag %>
 
-        <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-        <%= stylesheet_link_tag 'ui', media: 'all', 'data-turbolinks-track': 'reload' %>
-        <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+        <%= stylesheet_link_tag "ui", media: "all", "data-turbolinks-track": "reload" %>
         <%= yield(:head) %>
     </head>
 

app/views/main/index.html.erb

@@ -1,51 +1,70 @@
 <% content_for :head do %>
-    <%= stylesheet_link_tag 'main', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag "main", media: "all", "data-turbolinks-track": "reload" %>
 <% end %>
 <section id='profile'>
     <h3>
         <%= @user.full_name %>
     </h3>
     <article>
-        <%= image_tag(@user.picture[0], id: "profile_image")%>
-        <div id='profile_content'>
-            <h4 id='tagline'><%= @user.i18n_tagline %></h4>
-            <p id='bio'><%= @user.i18n_bio %></p>
-        </div>
+        <%= image_tag(@user.picture[0], id: "profile_image", alt: "")%>
+        <h4 id='tagline'>
+            <%= @user.i18n_tagline %>
+        </h4>
+        <p id='bio'>
+            <%= @user.i18n_bio %>
+        </p>
         <div class='buttons'>
-            <a class='a_button' title='eMail' href='mailto:<%=@user.mail_adresses[0].address%>'>
-                <%= image_tag (
-                        "social/email.svg"
-                    ),
-                    class: "footer_social_icon",
-                    alt: t('social.mail'),
-                    title: t('social.mail')
-                %>
-            </a>
-            <%= link_to(
-                t('index.profile_more'), profile_path(), class: "a_button"
-            ) %>
+            <%=
+                link_to(
+                    image_tag(
+                        "social/email.svg", 
+                        class: "footer_social_icon",
+                        alt: t("social.mail"),
+                        title: t("social.mail")
+                    ) + t("index.email"),
+                    "mailto:" + @user.mail_adresses[0].address,
+                    class: "a_button"
+                )
+            %>
+            <%=
+                link_to(
+                    t("index.profile_more"),
+                    profile_path(),
+                    class: "a_button"
+                )
+            %>
         </div>
     </article>
 </section>
 <section id='projects'>
     <h3>
-        <%= t('index.projects') %>
+        <%= t("index.projects") %>
     </h3>
     <% @projects.each do |project| %>
         <article class='project'>
             <table>
                 <tr>
-                    <td>
+                    <td class='icon'>
                         <% if project.logo.attached? %>
-                            <%= link_to(
-                                image_tag(project.logo, class: "project_image"),
-                                project_show_path(permalink: project.permalink)
+                            <%=
+                                link_to(
+                                    image_tag(
+                                        project.logo,
+                                        class: "project_image",
+                                        alt: project.i18n_title
+                                    ),
+                                    project_show_path(permalink: project.permalink)
                             ) %>
                         <% end %>
                     </td>
                     <td class='project_details'>
                         <h4 class='project_name'>
-                            <%= link_to(project.i18n_title, project_show_path(permalink: project.permalink)) %>
+                            <%=
+                                link_to(
+                                    project.i18n_title,
+                                    project_show_path(permalink: project.permalink)
+                                )
+                            %>
                         </h4>
                         <span>
                             <%= project.i18n_header %>
@@ -55,4 +74,13 @@
             </table>
         </article>
     <% end %>
+    <div class='buttons'>
+        <%=
+            link_to(
+                t("index.projects_all"),
+                project_index_url(),
+                class: "a_button"
+            )
+        %>
+    </div>
 </section>

app/views/profile/index.html.erb

@@ -1,12 +1,17 @@
 <% content_for :head do %>
-    <%= stylesheet_link_tag 'profile', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag "profile", media: "all", "data-turbolinks-track": "reload" %>
 <% end %>
 <section id='info'>
     <h3>
         <%= @user.full_name %>
     </h3>
     <article>
-        <%=image_tag(@user.picture[0], id: "profile_image")%>
+        <h5>
+            <%=image_tag(@user.picture[0], id: "profile_image", alt: "")%>
+            <span>
+                <%= @user.i18n_tagline %>
+            </span>
+        </h5>
         <div id='social'>
             <% @user.user_social_links.each do |link| %>
                 <%= link_to(
@@ -23,35 +28,37 @@
     <h3>
         <%= t("profile.description") %>
     </h3>
-    <p>
-        <%= @user.i18n_bio %>
-    </p>
-    <div id='resume_download'>
-        <%= link_to(
-            t("profile.resume"),
-            @resume_main.file,
-            target: "_blank",
-            title: t("profile.resume"),
-            class: "a_button"
-        ) %>
-        <% if @resume_languages.size > 0 %>
-            <details>
-                <summary class='pointer'>
-                    <%= t("profile.resume_lang") %>
-                </summary>
-                <ul>
-                    <% @resume_languages.each do |resume| %>
-                        <li>
-                            <%= link_to(
-                                t("profile.resume_" + resume.language),
-                                resume.file,
-                                target: "_blank",
-                                title: t("profile.resume_" + resume.language)
-                            ) %>
-                        </li>
-                    <% end%>
-                </ul>
-            </details>
-        <% end%>
-    </div>
+    <article>
+        <p>
+            <%= @user.i18n_bio %>
+        </p>
+        <div id='resume_download'>
+            <%= link_to(
+                t("profile.resume"),
+                @resume_main.file,
+                target: "_blank",
+                title: t("profile.resume"),
+                class: "a_button"
+            ) %>
+            <% if @resume_languages.size > 0 %>
+                <details>
+                    <summary class='pointer'>
+                        <%= t("profile.resume_lang") %>
+                    </summary>
+                    <ul>
+                        <% @resume_languages.each do |resume| %>
+                            <li>
+                                <%= link_to(
+                                    t("profile.resume_" + resume.language),
+                                    resume.file,
+                                    target: "_blank",
+                                    title: t("profile.resume_" + resume.language)
+                                ) %>
+                            </li>
+                        <% end%>
+                    </ul>
+                </details>
+            <% end%>
+        </div>
+    </article>
 </section>

app/views/projects/index.html.erb

@@ -1,5 +1,5 @@
 <% content_for :head do %>
-    <%= stylesheet_link_tag 'projects', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag "projects", media: "all", "data-turbolinks-track": "reload" %>
 <% end %>
 <section>
     <h3>
@@ -9,17 +9,28 @@
         <article class='project'>
             <table>
                 <tr>
-                    <td>
+                    <td class='logo'>
                         <% if project.logo.attached? %>
-                            <%= link_to(
-                                image_tag(project.logo, class: "project_image"),
-                                project_show_path(permalink: project.permalink)
-                            ) %>
+                            <%=
+                                link_to(
+                                    image_tag(
+                                        project.logo,
+                                        class: "project_image",
+                                        alt: project.i18n_title
+                                    ),
+                                    project_show_path(permalink: project.permalink)
+                                )
+                            %>
                         <% end %>
                     </td>
                     <td class='project_details'>
                         <h4 class='project_name'>
-                            <%= link_to(project.i18n_title, project_show_path(permalink: project.permalink)) %>
+                            <%=
+                                link_to(
+                                    project.i18n_title,
+                                    project_show_path(permalink: project.permalink)
+                                )
+                            %>
                         </h4>
                         <span>
                             <%= project.i18n_header %>

app/views/projects/show.html.erb

@@ -1,5 +1,5 @@
 <% content_for :head do %>
-    <%= stylesheet_link_tag 'project', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag "project", media: "all", "data-turbolinks-track": "reload" %>
 <% end %>
 <section>
     <h3>
@@ -12,7 +12,14 @@
             </h4>
             <p id='text'>
                 <% if @project.logo.attached? %>
-                    <%= image_tag(@project.logo, class: "project_image", id: "logo") %>
+                    <%=
+                        image_tag(
+                            @project.logo,
+                            class: "project_image",
+                            id: "project_image",
+                            alt: ""
+                        )
+                    %>
                 <% end %>
                 <%= @project.i18n_text.html_safe %>
             </p>
@@ -20,20 +27,25 @@
         <div id='info_details'>
             <div id='links' class='details'>
                 <% @project.projectUrls.each do |url| %>
-                    <%= link_to(
-                        image_tag(url.urlTarget.logo, class: "link", title: url.urlTarget.i18n_summary, alt: url.urlTarget.i18n_summary) + url.urlTarget.i18n_name,
-                        url.url,
-                        class: "link",
-                        target: "_blank",
-                        title: url.urlTarget.i18n_summary
+                    <%=
+                        link_to(
+                            image_tag(
+                                url.urlTarget.logo,
+                                class: "link",
+                                title: url.urlTarget.i18n_summary,
+                                alt: url.urlTarget.i18n_summary
+                            ) + url.urlTarget.i18n_name,
+                            url.url,
+                            class: "link",
+                            target: "_blank",
+                            title: url.urlTarget.i18n_summary
                     ) %>
                 <% end %>
             </div>
-            <hr class='details_separator'/>
             <div id='technologies' class='details'>
                 <% @project.technologies.each do |technology| %>
                     <span class='technology technology_<%=technology.nature%>'>
-                        <%= image_tag(technology.logo, class: "technology_logo") %>
+                        <%= image_tag(technology.logo, class: "technology_logo", alt: "") %>
                         <span class='technology_name'>
                             <%= technology.name %>
                         </span>
@@ -42,12 +54,18 @@
             </div>
             <div id='license' class='details'>
                 <%= t("project.license") %>:
-                <%= link_to(
-                    image_tag(@project.license.logo, title: @project.license.name, alt: @project.license.name),
-                    @project.license.url,
-                    target: "_blank",
-                    title: @project.license.name
-                ) %>
+                <%=
+                    link_to(
+                        image_tag(
+                            @project.license.logo,
+                            title: @project.license.name,
+                            alt: @project.license.name
+                        ),
+                        @project.license.url,
+                        target: "_blank",
+                        title: @project.license.name
+                    )
+                %>
             </div> <!-- #license -->
         </div> <!-- #info_details -->
     </article>

config/application.rb

@@ -20,6 +20,12 @@ module InigoValentin
     # config.eager_load_paths << Rails.root.join("extras")
     config.assets.paths << Rails.root.join("app", "assets", "images")
     
+    # Show assests without digest
+    config.assets.digest = false
+    
+    # Active storage prefix
+    config.active_storage.routes_prefix = '/content'
+    
     # Hack for allowing SVG files. While this hack is here, we should **not**
     # allow arbitrary SVG uploads. https://github.com/rails/rails/issues/34665
     

config/initializers/application_controller_renderer.rb

@@ -6,4 +6,4 @@
 #     https: false
 #   )
 # end
-I18n.enforce_available_locales = false
+I18n.enforce_available_locales = false

config/locales/en.yml

@@ -123,6 +123,7 @@ en:
         profile_cv: "Résumé"
         profile_more: "More about me"
         projects_all: "See all projects"
+        email: "Send me an e-mail"
     profile:
         resume: "Résumé"
         title: "Me"
@@ -180,6 +181,7 @@ en:
         sqlite: "SQLite"
         android: "Android"
     help:
+        expand: "Show text"
         about_title: "Sobre este sitio"
         about_text: "TODO"
         privace_title: "Privacidad"

config/locales/es.yml

@@ -123,6 +123,7 @@ es:
         profile_cv: "Currículo"
         profile_more: "Más sobre mí"
         projects_all: "Ver todos los proyectos"
+        email: "Escríbeme"
     profile:
         resume: "Currículo"
         title: "Yo"
@@ -180,6 +181,7 @@ es:
         sqlite: "SQLite"
         android: "Android"
     help:
+        expand: "Mostrar texto"
         about_title: "Sobre este sitio"
         about_text: "TODO"
         privacy_title: "Privacidad"

config/locales/eu.yml

@@ -123,6 +123,7 @@ eu:
         profile_cv: "Curriculum"
         profile_more: "Niri buruz gehiago"
         projects_all: "Proiektu denak ikusi"
+        email: "Idatzi iezadazu "
     profile:
         resume: "Curriculum"
         title: "Ni"
@@ -180,6 +181,7 @@ eu:
         sqlite: "SQLite"
         android: "Android"
     help:
+        expand: "Textua ikusi"
         about_title: "Webgune buruz"
         about_text: "TODO"
         privacy_title: "Priatutasuna"