Personalize Your Github Academic Website - 2

Note

In this tutorial, we continue to personalize our website, both content and style. If you are new to Github Academic Pages, and have not yet created your own repository on GitHub to host your website, please first read our Intro to Academic Pages and Personalize Your Github Academic Website-1 tutorials.

Publications, CV, and Portfolio pages.

Tutorial duration: 35 - 40 mins.

1 Editing Publications Page

Some of the things we will consider for our Publications page are:

• Linking our Google Scholar profile directly so they can explore more of our publications.

• Grouping our selected publications by year, status (preprint/published), or maybe even journal.

• Adding an abstract toggle so if people are interested, they could click on the toggle to read the abstract of each paper.

• Styling the text font, color, size etc.

When we are done, this is how it will appear on the website.

1.1 Content

To edit the content of our Publications page, we will work within the _publications/ sub-folder. Let’s begin with editing the .md files provided in this directory, so we can have a few of our papers highlighted on our Publications page.

Now, in [your repository]/_publications/, open the 2009-10-01-paper-title-number-1.md file, edit the header using the example code below:

---
title: "Your Manuscript Title"
authors: "<strong>Your Name</strong>, Your Co-Authors' Names"
collection: publications
category: manuscripts
year: "YEAR"
venue: 'Journal'
status: "Published"
abstract: >
    YOUR ABSTRACT OR SUMMARY
link: 'the/url/to/your/paper'
---

Here is a breakdown of all the changes we are implementing with this new header:

year: write down the year of this publication; helps you group your articles on the website by year (if you do this, you no longer need the date option, unless you want to keep the exact publication date in the meta-information).

status: note down the current status of your manuscript -especially if you want to include this information in the meta-information for the manuscript, or better yet if you instead want to group your articles by status (e.g., preprint, published, or conference paper).

abstract: add your entire abstract here, or maybe a brief summary if you will. Again, this is optional! Instead of the excerpt (i.e., remove it from the header), we preferred to include a collapsible abstract toggle so the page does not look too crowded (plus we are having detailed project explanations under the Portfolio for the projects we want to additionally highlight).

link: makes the Paper Title a clickable object, which when clicked takes the viewer to the manuscript. As you can see, the template gives us multiple options for adding the publication link, or even the option to directly download the paper (e.g., slidesurl, paperurl, bibtexurl), but we don’t need all of those.

Finally, if you don’t want to give each paper their own URL on the website, you can remove the permalink as well as any other options from the default, like the citation.

On your own time, create as many paper .md files as you like, as long as they are properly formatted, they will all be listed on your Publications page. Note that this includes properly renaming each .md file. By default, the naming convention is: YYYY-MM-DD-paper-title-number-1.md - the number in the name is only needed for the ordering of each article on the website, unless you use some other grouping argument like Year or Status, which we will cover in more detail in the next section.

1.2 Styling

_pages/publications.html is where we will do the styling for our Publications page.

1. First, if you have a Google Scholar page (highly recommended for academics!), let’s begin with adding your Google Scholar link. If you have already provided your Google Scholar link on the config.yml file, your publications.html file will already have this part customized for you right after the {% include base_path %}:

{% if site.author.googlescholar %}
  <div class="pub-intro">You can find the full list of my published work on 
    <a class="gs-link" href="{{ site.author.googlescholar }}">my Google Scholar profile</a>.
  </div>
{% endif %}

Note the href="{{ site.author.googlescholar }} argument, which directly uses your Google Scholar link in your config.yml file. Alternatively, you could add a direct URL to this argument.

2. Now, let’s customize the style and appearance. Copy and paste the following style arguments into your publications.html file, after the custom Google Scholar code. Feel free to play with the color, font etc on your own time to further customize the appearance of each publication.

<style>
  /* Customize the style for manuscript title, text, meta-info etc. */
  .pub-intro {
    font-size: 0.95rem;
    color: #06091c;  
    margin-bottom: 1rem;
  }
  .pub-title {
    font-size: 1rem;   
    font-weight: 500;    
    color: #06091c;      
    text-decoration: none;
  }
  .pub-title:hover {
    text-decoration: underline;
    color: #030d24;     
  }
  .publication-entry p {
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .pub-meta {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: #787b7def; 
  }
  /* Customize the style for manuscript link. */
  .gs-link { 
    color: #160797; 
    text-decoration: none;
    font-weight: 500;
  }
  .gs-link:hover {
    text-decoration: underline;
    color: #92400e; 
  }
  /* Customize the style for abstract toggle. */
  .abstract-toggle {
    cursor: pointer;
    color: #8b4c1c;
    font-weight: 500;
  }
  .abstract-content {
    display: none;
    margin-top: 0.5em;
    font-size: 0.8rem;  
  }
</style>

3. Next, let’s make sure our abstract toggle is a clickable element. Add the following code into the publications.html, right after the style arguments we added in step 2.

<script>
document.addEventListener("DOMContentLoaded", function() {
  const toggles = document.querySelectorAll(".abstract-toggle");
  toggles.forEach(function(toggle) {
    toggle.addEventListener("click", function() {
      const content = this.nextElementSibling;
      content.style.display = content.style.display === "block" ? "none" : "block";
    });
  });
});
</script>

4. Finally, we’ll edit how the text should be rendered - e.g., grouping of the papers by year, adding the abstract toggle and so on. Now there is already some custom code in this html file that makes the Publications page appear as below (with paper details you provided, of course):

code

output

Let’s all replace this code with the following to make sure our edits appear properly:

<!-- Group by year or custom category like "pre-print" -->
{% assign grouped = site.publications | group_by: "year" %}
{% for group in grouped reversed %}
  <h2>{{ group.name }}</h2>
  <hr />
  {% for post in group.items %}
    <div class="publication-entry">
      <p>
        <strong><a class="pub-title" href="{{ post.link | default: post.url }}">{{ post.title }}</a></strong>
      </p>
      
      <!-- lets gather all the meta-info we want to show for each publication -->
      <p class="pub-meta"> 
        {{ post.authors }}. <em>{{ post.venue }}</em>{% if post.status %}, {{ post.status }}{% endif %}.
      </p>
      
      <!-- lets configure our abstract toggle -->
      {% if post.abstract %}
        <div class="abstract-toggle">[Abstract]</div> <!-- call it what you want: summary/abstract etc -->
        <div class="abstract-content">{{ post.abstract }}</div>
      {% endif %}

      {% if post.pdf or post.slides %}
        <p>
          {% if post.pdf %}<a href="{{ post.pdf }}">Download Paper</a>{% endif %}
          {% if post.pdf and post.slides %} | {% endif %}
          <!-- If you want to show slides, add the next line as well. -->
          {% if post.slides %}<a href="{{ post.slides }}">Download Slides</a>{% endif %} 
        </p>
      {% endif %}
    </div>
  {% endfor %}
{% endfor %}

2 Editing CV Page

Next, we want to edit the CV page. Here, we can directly upload a pdf of our current CV, highlight the most essential career steps on the website directly, or do both!

2.1 Easy Upload:

If you prefer to just upload a pdf of your CV (the easiest!), follow the steps below.

1. Add a pdf of your CV to the files/ directory.

2. Open _data/navigation.yml, and update the CV header under main as below:

  - title: "CV"
    #url: /cv/
    url: /files/yourcurrentCV.pdf 

Now, on your website, when you click on the CV page on your website, you will see that it takes you to the pdf directly.

While this is functional, it’s not the most ideal way to present your CV. For one, you will likely continue to update your CV as you move up in your career, but it’s taxing to come back and upload a new version all the time. You may want to provide a link to a live document instead.

Additionally, you may want your visitors to immediately know certain things about you without having to scroll down a long CV. So it only makes sense to further customize this page to accommodate for these needs.

2.2 Customize

If you instead want to make your CV page display your efforts and transferable skills immediately, follow the steps below, which will make your CV page appear like this.

2.2.1 Content

Note, there is a cv.md and cv-json.md files under the _pages/ directory, which we can edit directly. And then we can edit the cv-template.html file under the _layouts/ directory for customizing the page style.

That said, we have run into issues using these defaults setting for the particular two-columns layout and related style arguments. It is also more intuitive to have a separate _cv folder to put all our content for this page in one place, similar to the publications, portfolio and so on.

So, we’ll first create a new _cv/ folder first in our repository, and add a few new .md files in this directory for the content we’d like to display on our CV page.

For the example we are using, we will include Education, Awards, Certification, Skills, and Service, and we want to show it in two columns (instead of scrolling down the page). Therefore compiled bullet points for each of these parts in two .md documents, which live in our newly created _cv/ directory.

Below we provide the content of one of these .md files for you to use as a template (note the title in the header will become important when we are styling the html in the next section):

---
title: "CV_Left"
order: 1
---

## Education
* *Ph.D* in Cognitive Neuroscience, Temple University, 2024
  * Concentration in Quantitative Methods
* *M.A.* in Cognitive Psychology, Koç University, 2017
* *B.A.* in Psychology, İstanbul Şehir University, 2015


## Awards 
* CLA Dissertation Completion Grant, Temple University (2024); *$13,000*.
* Woodcock Institute Research Grant (Co-I), Texas Woman's University (2023-2024); *$15,000*.
* Kavli Summer Institute in Neuroscience Fellowship (2022)
* Statistics Training Award, Temple University (2021)
* Travel and Education Award, Jacobs Foundation (2016)


## Service
* Ad-Hoc Reviewer: PLOS One

2.2.2 Styling

Similar to the Publications page, we can directly edit an html file specific to our CV page to implement the style changes we like, such as organizing the content on the CV page in two columns, as well as changing the text size, color, and font.

The Academic Pages template includes a cv-template.html under the _includes/ sub-folder with predefined arguments for the html. Instead of using this as is, let’s move that file into the _pages/ folder instead, and rename it as cv.html.

1. This file comes with a set of custom code for organizing the CV page, but we will actually not use these settings. Instead, let’s delete all the content in this, and add the following at the top.

---
layout: archive
title: ""
permalink: /cv/
author_profile: true
---

{% include base_path %}

2. The first thing we can do is add our live CV document, which in this example is a Google Drive document, on top of this html file so our most up-to-date CV is always one click away! So copy and paste this next code chunk right after the {% include base_path %}:

<div class="cv-intro">
  You can view a more detailed version of my CV 
  <a class="cv-link" href="https://docs.google.com/document/d/1s_vZSrSwSo0xHxydI3zV18izKrJ4vi_W/edit?usp=sharing&ouid=104875499393245640958&rtpof=true&sd=true" target="_blank">here</a>.
</div>

3. Next, let’s again add some custom style arguments:

<style>
/* Costumize the style for the header */
.cv-header-nav {
  padding: 1rem 0;
  text-align: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid #f2f2f2;
}

.cv-header-nav .home-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #2a7ae2;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.cv-header-nav .home-button:hover {
  background-color: #1756a9;
}

/* Keep the following if you want your sidebar to be visible on CV page still */
.sidebar {
  flex: 0 0 250px;
  min-width: 200px;
}

/* Main container */
.cv-container {
  max-width: 1200px;
  margin: 0 auto;
  flex: 1;
}

/* Content styling */
.cv-content {
  font-size: 0.9rem !important;
  line-height: 1.5;
}

/* Customize Section Headings */
.cv-container h1,
.cv-container h2,
.cv-container h3 {
  font-size: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Two-column CV section */
.cv-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem;
  margin-top: 0.5rem;
}

.cv-left-column,
.cv-right-column {
  flex: 1;
  min-width: 300px;
}

.cv-right-column {
  padding-left: 1rem;
}

/* Customize the Download links */
.cv-download-links {
  margin-top: 1rem;
  text-align: center;
  padding: 1rem;
  border-top: 1px solid #f2f2f2;
}
  
.cv-intro {
  font-size: 0.95rem;
  color: #06091c;
  margin-bottom: 0.5rem;
}

.cv-link {
  color: #160797;
  text-decoration: none;
  font-weight: 500;
}

.cv-link:hover {
  text-decoration: underline;
  color: #92400e;
}

</style>

4. We also want to add some custom code for accessing the content in our .md files. This next code chunk is crucial to include because we want to read from multiple .md files. This is also where the order: argument in the header will be utilized.

{% assign cv_sections = site.cv | sort: "order" %}
<div class="cv-container cv-content">
  ...
</div>

5. Finally, we can add the following custom code so the content in our .md files will be organized in left/right columns.

{% assign cv_sections = site.cv | sort: "order" %}
<div class="cv-container cv-content">
  <div class="cv-columns">
    <div class="cv-left-column">
      {% for section in cv_sections %}
        {% unless section.title == "CV_Right" %}
          <div class="cv-section">
            {{ section.content | markdownify }}
          </div>
        {% endunless %}
      {% endfor %}
    </div>

    <div class="cv-right-column">
      {% for section in cv_sections %}
        {% if section.title == "CV_Right" %}
          <div class="cv-section">
            {{ section.content | markdownify }}
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

And voila! Now you should have a CV page that displays your content in two columns, along with a longer more detailed version of your CV as a link.

Note: Since we have created our custom _cv folder and cv.html file, we no longer need the files like _pages/cv.md or _pages/cv-json.md provided in the Academic Pages template, in fact it is best to delete them to avoid any file conflicts as we render our website.

3 Editing Projects/Portfolio Page

In addition to Publications and CV, you may want a separate place to showcase the projects you’ve been working on. Now let’s create a new section (call it “Projects” or “Portfolio”, whichever you prefer) for that purpose!

A second goal of this section is to show another approach to define and designate customized styling to a specific page type – different from what we’ve shown above. Feel free to choose one that makes the most sense to you when you make further edits!

There are a ton of ways to customize the appearance of your Projects page, and you are welcome to explore them based on your demands. Here, we will highlight some tips and tricks using my own page as an example. I’d like a the page to contain NO links for each single entry. Instead, a brief description and an (optional) image is displayed for each project, and the details can be toggled on/off. Of course, more features may come along the development of the website.

We will start by setting up the required files and directory structure.

1. Go to _config.yml. Under collections, add a field projects. output: false makes sure that each entry does not have its own page. Under defaults, add a section for _projects. We will create a new layout called “projects”. (If you’d rather use other existing layouts, change layout accordingly, and ignore steps 3 and 4).

2. Add projects to navigation.yml.

3. Create a new layout file at _layouts/projects.html (change the content if you’d like a different layout!). This file calls on customized styles defined in _sass/_custom.scss.

---
layout: default
---

{% include base_path %}
<div id="main" role="main">
  {% include sidebar.html %} # to ensure author-profile can be displayed, if turned on
  <div class="archive">
    {% if page.title %}
      <h1 id="page-title" class="page__title">{{ page.title }}</h1>
    {% endif %}

    <div class="page__content">
      <div class="projects-list">
        {% for project in site.projects %}
        <div class="project-entry">
          <div class="project-text">
            <h2>{{ project.title }}</h2>
            <p>{{ project.short_description }}</p>
            <details>
              <summary>Read more</summary>
              {{ project.content | markdownify }}
            </details>
          </div>
          <div class="project-image">
            {% if project.image %}
              <img src="{{ project.image }}" alt="{{ project.title }}">
            {% endif %}
            {% if project.caption %}
              <p class="project-caption">{{ project.caption }}</p>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

4. In _sass/_custom.scss (create the file if it does not exist), add the following (change the parameters to your preference):

/* Styles for the projects page */
.projects-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.project-entry {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: start;
  gap: 1.5rem;
  font-size: $type-size-5;
}

.project-image img {
  max-width: 90%;
  border-radius: 8px;
}

.page__content .projects-list .project-entry .project-image .project-caption {
  font-size: 0.6rem;
  font-style: italic;
  color: var(--global-fig-caption-color);
  margin-top: 0.3rem;
  text-align: left;
}

/* Project entry title */
.projects-list .project-text h2 {
  font-size: 1.1rem;
  font-weight: 700; 
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  color: var(--global-text-color);
}

/* Short description text */
.projects-list .project-text > p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
  color: var(--global-text-color-light);
}

/* "Read more" toggled content */
.projects-list details {
  font-size: 0.7rem; 
  line-height: 1.6;
  color: var(--global-text-color);
}

.projects-list details summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--link-color);
}

.projects-list details[open] summary {
  color: var(--link-color-hover);
}


/* Increase side margins for Projects page only */
.projects-page {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem; /* more white space left */
  padding-right: 4rem; /* more white space right */
}

/* Keep text-image layout still working inside */
.projects-page .project-entry {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
}

5. Create the project homepage by _pages/projects.md with the following content:

---
layout: projects
title: "Projects"
permalink: /projects/
---

6. Create a directory _projects in the root folder to host webpages for projects. To add an project entry, create a markdown file _projects/project-name.md. Edit the following:

---
title: "Your Project Title"
short_description: "A short description."
image: /images/project-image.png
caption: Optional image caption.
---

Enter a longer description to be displayed in the toggle bar.

Remember to upload the corresponding image to images/.

Tada! By now, you should have finished setting up a single entry for the Projects page. It might feel hard to keep track of all the files being edited the first time, but fear not – the more attempts you make, the more comfortable you will become with it!

Take a look by bundle exec jekyll serve -l -H localhost. If everything looks correct, go ahead and enter more entries simply by adding more markdown files under _projects/!

4 Resources to Just Keep Editing

• Rob William’s guide to academic websites

• Elizabeth McDaniel’s guide to editing your website