View Demo β’ Report Bug β’ Request Feature
yourusername.github.io
.gh-pages
.gh-pages
branch as the source.Now you can access your very own portfolio at https://yourusername.github.io
π.
ΒΏWant to add multi-language support? It's easy! Just follow these steps:
assets/js/languages.json
file, according to ISO 3166 alpha-2 standard. For example, for english and spanish:"en": {
"flag": "https://flagcdn.com/w20/us.png"
},
"es": {
"flag": "https://flagcdn.com/w20/es.png"
}
language
to each <tag>
you would like to translate, and include the data-
attribute with the translation. For example, for a greeting in english and spanish:<tag class="language" data-en="Hello" data-es="Hola">
<!-- You can leave this empty -->
</tag>
Let's say you want to add a new section to your portfolio, called Photos
. Here's how you can do it:
li
to the navigation bar in your index.html
. This will serve as the link to your new section:<ul class="navbar-nav mx-auto language" id="navbarList">
...
<li class="nav-item">
<a
class="nav-link"
id="photos"
href="#"
data-en="Photos"
data-es="Fotos"
></a>
</li>
</ul>
div
within the section container id="section-content"
in index.html
, using the id
as the name followed by Content
:<div class="row content" id="section-content">
...
<!-- Photos -->
<div class="col-md-8 offset-md-1 mb-5" id="photosContent">
...
</div>
</div>
$(document).ready(function(){
$('#photosContent').hide(); // Initially hide the Photos section
$('#photos').click(function(e) {
if(!$(e.target).hasClass('active')) {
clearActiveLinks(); // Clear all active states from other nav-links
activateLink(e); // Set this link as active
clearActiveDivs(); // Hide all other content divs
activateDiv('#photosContent'); // Display the Photos section
}
});
});
Additionally, if you would like to hide a section, you can do so by adding the d-none
class to the nav-link
(or, following the example above in reverse order, removing everything related to Photos
):
<li class="nav-item">
<a class="nav-link d-none" id="photos" href="#"
data-es="Fotos"
data-en="Photos">
</a>
</li>
Manage
button.Property Settings
, look for Data collection and modification
> Data flows
> Add flow
, and select Web
.Create flow
.Measurement ID
(should look like G-XXXXXXXXXX
) to assets/js/config.json
.Feel free to contribute to this project. You can do so by forking the project and submitting a pull request. Find a list of issues/TODOs in the issues tab. Suggestions or feedback are well received.
nicolasmeseguer.github.io Β© 2023 by Nicolas Meseguer is licensed under Creative Commons Attribution-ShareAlike 4.0 International License.