Academic Portfolio
Academic Portfolio

An awesome academic portfolio template for GitHub Pages!

Contributors Forks Stars Issues License Version

HTML5 License License

View Demo β€’ Report Bug β€’ Request Feature


Key Features

  • πŸŽ“ Academic: Perfect for students and academics.
  • πŸ“¦ Easy to Use: Just fork, edit and deploy!
  • πŸš€ Blazingly Fast: Built with performance in mind.
  • 🌍 Multi-Language: Add multi-language support with ease.
  • πŸ“± Responsive: Works on all devices.
  • πŸŒ™ Dark Mode: Toggle between light and dark mode.
  • πŸ“° BibTeX: Add citations effortlessly and provide an easy way to copy it.
  • 🎨 Customizable: Easily change the theme colors and add your own touch.
  • πŸ“Š Insights: Connect your portfolio to Google Analytics to get insights.
  • 🌐 SPA: Single Page Application for a seamless experience.
  • πŸ› οΈ Maintenance: Regular updates and improvements.
  • πŸ“š Documentation: Detailed documentation to help you get started.

How To Use

  1. Fork this repository here.
  2. Go to the settings of your forked repository and rename it to
  3. Create a new branch called gh-pages.
  4. Go to the settings of your repository and enable GitHub Pages.
  5. Select the gh-pages branch as the source.
  6. Consider giving this repository a star if you found it useful 🀍.

Now you can access your very own portfolio at πŸš€.


ΒΏWant to add multi-language support? It's easy! Just follow these steps:

  1. Add your language to the assets/js/languages.json file, according to ISO 3166 alpha-2 standard. For example, for english and spanish:
"en": {
  "flag": ""
"es": {
  "flag": ""
  1. Add the class 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 -->
  1. Enjoy your blazingly fast multi-language portfolio! 🌍

Add a New Section

Let's say you want to add a new section to your portfolio, called Photos. Here's how you can do it:

  1. Update the Navigation Bar: Add a new list item 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">
  1. Create the Section Content: Insert a new 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">
  1. Implement Navigation Interaction: Ensure that when the "Photos" navigation item is clicked, the corresponding content is displayed correctly, while other sections are hidden:
  $('#photosContent').hide(); // Initially hide the Photos section

  $('#photos').click(function(e) {
    if(!$('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="#" 


  1. Go to Google Analytics and create a new account.
  2. Once looged in, on the left sidebar, look for the Manage button.
  3. Under Property Settings, look for Data collection and modification > Data flows > Add flow, and select Web.
  4. Fill in the required fields (Website URL and Name) and click on Create flow.
  5. Copy the Measurement ID (should look like G-XXXXXXXXXX) to assets/js/config.json.
  6. Eventually, you will be able to see your portfolio's insights on Google Analytics.


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.

License Β© 2023 by Nicolas Meseguer is licensed under Creative Commons Attribution-ShareAlike 4.0 International License.

jekyll logo

Want a Jekyll website built?

Hire a Jekyll developer