Organizing Portfolio Content with External Resources

Courses

Author

Sangeetha Nandakumar

Download Materials

Hugo portfolios can display rich content through markdown formatting, static resources, and shortcodes. Markdown provides structure with headings, lists, and links. Static resources include images, documents, and downloadable files. Shortcodes enable advanced features like galleries, and video embeds.

Here we will see:

how to organize content with markdown
how to add and manage static resources
how to use Hugo shortcodes

Section 1: Organizing Sections in Markdown

Background

A portfolio needs clear structure to present information effectively. Markdown provides headings to organize content into sections, lists to present items, and links to connect to external resources. These basic formatting tools make the portfolio easier to navigate and understand.

Exercises

This section covers adding structural elements to organize portfolio content, including headings for sections, lists for presenting information, links for external resources, and anchor links for in-page navigation.

Markdown Syntax	Description
`## Heading`	Level 2 heading (section title)
`### Heading`	Level 3 heading (subsection title)
`- Item`	Unordered (bullet) list item
`1. Item`	Ordered (numbered) list item
`[text](url)`	Link with display text
`[text](#anchor)`	Link to heading on same page

Headings divide content into logical sections. Level 2 headings (##) create main sections like About Me, Projects, and Contact. Level 3 headings (###) create subsections within those main sections.

Hugo automatically generates anchor links for headings, which enables in-page navigation. The anchor is created from the heading text with spaces replaced by hyphens and converted to lowercase.

Example Add a section heading to start organizing the portfolio. In content/_index.md, add the About Me section:

## About Me

I am a researcher working on interesting problems in data science and machine learning.

Exercise: Add three more Level 2 headings for Skills, Projects, and Publications with a paragraph of content under each heading.

Solution

## About Me

I am a researcher working on interesting problems in data science and machine learning.

## Skills

My technical expertise includes Python programming, statistical analysis, machine learning, and data visualization. I specialize in developing scalable data pipelines and predictive models.

## Projects

I am currently investigating novel approaches to deep learning for genomic sequence analysis. This work focuses on developing transformer-based models for predicting gene expression patterns.
    
    
## Publications

List of my published research papers and conference presentations.

Exercise: Add a Level 3 subsection Current Research under the Projects section with a paragraph about your current work.

Solution

## Projects

### Current Research

I am currently investigating novel approaches to deep learning for genomic sequence analysis. This work focuses on developing transformer-based models for predicting gene expression patterns.

Exercise: Add a Level 2 heading for Contacts with your email and office address

Solution

## Contact

Email: jane.smith@university.edu
Office: Building 42, Room 301

Lists present multiple items in an organized way. Unordered lists use hyphens (-) for bullet points. Ordered lists use numbers (1.) for sequential items.

Each list item should be on its own line. Blank lines separate lists from other content.

Example Add an unordered list of programming languages to the Skills section

## Skills

Technical skills include:

- Python
- R
- Javascript
- SQL

Exercise: Add a new unordered list under the Publications section with three placeholder publication titles.

Solution

## Publications

- Machine Learning Methods for Protein Structure Prediction
- Deep Learning for Genomic Sequence Analysis
- Statistical Approaches to Multi-Omics Data Integration

Exercise: Convert the programming languages list to an ordered list by replacing the hyphens with numbers

Solution

## Skills

Technical skills include:

1. Python
2. R
3. JavaScript
4. SQL

Exercise: Under the Projects section, create an ordered list of your three most important projects.

Solution

## Projects

My most significant projects:

1. Genomic Data Analysis Pipeline
2. Protein Structure Prediction Tool
3. Multi-Omics Integration Framework

Links connect portfolio content to external resources. Links use square brackets for display text and parentheses for the URL. The display text should be descriptive and indicate where the link leads.

Links can point to external websites, academic profiles, code repositories, or any other online resource. Email links use mailto: before the email address.

Example Add links to the Contact section

## Contact

Email me at [your.email@example.com](mailto:your.email@example.com)

Find me on [GitHub](https://github.com/yourusername)

Exercise: Add a link to your LinkedIn profile in the Contact section.

Solution

Connect with me on [LinkedIn](https://www.linkedin.com/in/yourprofile)

Exercise Add a link to your university or institution homepage in the About Me section.

Solution

## About Me

I am a researcher at [Stanford University](https://www.stanford.edu) working on computational biology.

(Optional) Exercise In the Publications section, add a link labeled “View on Google Scholar” that points to your Google Scholar profile.

Solution

## Publications

[View on Google Scholar](https://scholar.google.com/citations?user=YOURID)

Anchor links allow navigation between sections on the same page. Hugo automatically creates anchors from heading text. The anchor name is the heading text in lowercase with spaces replaced by hyphens.

A table of contents at the top of the page can link to each section, making it easy to jump directly to relevant information.

Example Add a table of contents at the top of the page that links to each section.

+++
title: "Home"
date: 2025-01-10T12:00:00+01:00
draft: false
+++

[About Me](#about-me) | [Projects](#projects)

## About Me

Content here...

Exercise: Add Skills, Publications and Contact sections to the Quick Navigation.

Solution

+++
title: "Home"
date: 2025-01-10T12:00:00+01:00
draft: false
+++

[About Me](#about-me) | [Skills](#skills) | [Projects](#projects) | [Publications](#publications) | [Contact](#contact)

## About Me

Content here...

Exercise: Add a “Back to top” link at the end of last section which links to the first section.

Solution

## Contact 
...

[Back to top](#about-me)

Exercise: Add a “Scroll to bottom” link at the end of last section which links to the first section.

Solution

[Scroll to bottom](#contact)

## About Me

Section 2: Adding Resources

Background

Hugo serves static files like images and documents from the static directory. These resources are copied directly to the website without modification. Organizing resources into subdirectories makes them easier to find and maintain. Different file types serve different purposes in a research portfolio.

Exercises

This section covers adding images with descriptive alt text, organizing the static directory structure, linking to different file types, using SVG images, and adding badges.

Directory	Usage
`static/images/`	Photos, diagrams, figures
`static/documents/`	PDFs, papers, CV
`static/data/`	CSV files, datasets
`static/code/`	Source files, scripts
`[![DOI](https://img.shields.io/badge/DOI-10.1038%2Fs41586--024--12345-blue)]`	DOI badge
`[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)]`	MIT License badge
`[![Status](https://img.shields.io/badge/Status-Published-green.svg)]`	Success status
`[text](url)`	Link with display text

The static directory holds files that Hugo copies directly to the website. Images placed in static/images/ are referenced in markdown as /images/filename.jpg. The leading slash tells Hugo to look from the site root.

Markdown image syntax uses square brackets for alt text and parentheses for the file path. Alt text describes an image for people who cannot see it and displays when an image fails to load. Good alt text describes the image content concisely.

SVG images are vector graphics that scale without losing quality. They work well for diagrams, charts, and technical illustrations. SVG files are referenced exactly like other image formats.

Example Create the images directory and add a profile photo. Then add the image to your About Me section.

## About Me

![Researcher examining data visualizations in the laboratory](images/profile.png)

I am a researcher working on data science and machine learning.

Exercise: Add a profile photo to static/images/profile.png with your own descriptive alt text (not just “Profile Photo”). On the browser, right-click the image and select “Inspect” to verify your alt text appears in the HTML alt attribute.

Solution

## About Me

![Dr. Jane Smith analyzing genomic data at her workstation](images/profile.png)

I am a computational biologist specializing in genomic data analysis.

Exercise: Test by changing the filename in _index.md to /images/missing.jpg to see the alt text appear. Then change it back to the correct filename.

Solution

## About Me

![Researcher examining data visualizations in the laboratory](images/missing.jpg)

I am a researcher working on data science and machine learning.

Subdirectories within static organize different resource types. Images go in one directory, documents in another. Hugo preserves this directory structure when serving files. A file at static/documents/cv.pdf becomes available at /documents/cv.pdf on the website.

Hugo serves any file type from static without processing. Research portfolios often need PDFs for papers, BibTeX files for citations, CSV files for data, and code files. Each file type serves a specific purpose and should be organized appropriately.

Example Create a documents directory and add a CV. Then link to it in the Contact section

## Contact

[Download my CV](/documents/cv.pdf)

Exercise Add research statement to the documents directory and add it to appropriate section.

Solution

## About Me

I am a computational biologist specializing in genomic data analysis. [Read my research statement](/documents/research-statement.pdf) for more details about my work.

(Optional) Exercise: Add data.csv with sample data and link it to projects.

Solution

## About Me

I am a computational biologist specializing in genomic data analysis. [Read my research statement](/documents/research-statement.pdf) for more details about my work.

## Projects

Download the [research dataset](/data/results.csv) used in this analysis.

(Optional) Exercise: Create a BibTeX file at static/documents/publications.bib with sample citation data. Link to it in the Publications section with text “Download BibTeX citations”.

Solution

Create a file `static/documents/publications.bib` with content:

```bibtex
@article{smith2024ml,
  title={Machine Learning for Genomics},
  author={Smith, Jane and Doe, John},
  journal={Nature},
  year={2024},
  volume={123},
  pages={456--789}
}

Section 3: Publications

Download BibTeX citations

Badges display project information like licenses, build status, DOI links, or version numbers. Badges combine an image and a link, using standard markdown syntax. Many badge services like shields.io generate badges automatically.

Badges are typically placed near project titles or at the top of sections. They provide quick visual information about project status or credentials.

Example Add a DOI badge to a publication

## Publications

**Machine Learning for Genomics** (2024)

[![DOI](https://img.shields.io/badge/DOI-10.1038%2Fs41586--024--12345-blue)](https://doi.org/10.1038/s41586-024-12345-6)

Exercise: Add a license badge to one of your projects using shields.io format: [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT).

Solution

## Projects

### Genomic Analysis Pipeline

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

A comprehensive pipeline for analyzing genomic sequencing data.

Exercise: Add a “Published” badge to your most recent publication using: [![Status](https://img.shields.io/badge/Status-Published-green.svg)](#).

Solution

## Publications

**Machine Learning for Genomics** (2024)

[![Status](https://img.shields.io/badge/Status-Published-green.svg)](#)
[![DOI](https://img.shields.io/badge/DOI-10.1038%2Fs41586--024--12345-blue)](https://doi.org/10.1038/s41586-024-12345-6)

You can create custom badges using shields.io by changing the text in the URL (![Research](https://img.shields.io/badge/Research-Data_Science-blue)) to whatever label, message, and color you want. Just replace Research, Data_Science, and blue in the link with your own text and color, and use the generated URL as an image in your README or website.

(Optional) Exercise: Create a custom badge for your research area using shields.io’s static badge format.

Solution

## About Me

![Research](https://img.shields.io/badge/Research-Computational_Biology-blue)
![Focus](https://img.shields.io/badge/Focus-Machine_Learning-green)

I am a computational biologist specializing in applying machine learning to genomic data analysis.

Section 4: Hugo Shortcodes

Background

Hugo provides shortcodes for common content patterns. Shortcodes generate HTML from simple parameters without requiring manual HTML. The Beautiful Hugo theme includes additional shortcodes for galleries, columns, and collapsible sections. Shortcodes work directly in markdown files.

Exercises

This section introduces shortcodes for displaying images with captions, embedding videos and code, creating image galleries, arranging content in columns, and making collapsible sections.

Code	Description
{{< shortcode >}}	Self-closing shortcode
{{< shortcode >}}content{{< /shortcode >}}`	Shortcode with content
{{< figure src=“path/to/image” alt=“alt text” caption=“Your caption” width=“100px” height=“100px” >}}	Adding figure
{{< youtube VIDEO_ID >}}	Embed Youtube video where the video ID from the URL is the part after `v=`
{{< gist USERNAME GIST_ID >}}	The URL will be `gist.github.com/username/abc123def456` where `abc123def456` is the gist ID
{{< gallery >}} … {{< /gallery >}}	Create a gallery by putting figure shortcode within
{{< columns >}} {{< column >}} … {{< column >}} … {{< endcolumns >}}	opening “{{< columns >}}” and closing {{< endcolumn >}} tags with {{< column >}} to separate the columns

The figure shortcode creates images with captions, alt text, and sizing attributes. It generates semantic HTML that displays images more professionally than plain markdown. The shortcode accepts parameters like src, alt, caption, and width.

Figure shortcodes are useful for research images that need explanatory captions.

Example Replace a markdown image with the figure shortcode

{{< figure src="/images/profile.png" alt=“Researcher in laboratory” caption=“Dr. Smith conducting analysis” width=“300px” >}}

Exercise: Change the width to a larger value.

Solution

{{< figure src="/images/profile.png" alt=“Dr. Jane Smith in the laboratory” caption=“Dr. Jane Smith - Computational Biologist” width=“500px” >}}

Exercise: Change the caption text to something different and also width to an appropriate width or height value.

Solution

{{< figure src="/images/profile.png" alt=“Dr. Jane Smith in the laboratory” caption=“Principal Investigator, Genomics Lab” width=“700px” >}}

The youtube shortcode embeds YouTube videos using their video ID. The video ID is the string after v= in a YouTube URL. For example, in https://www.youtube.com/watch?v=dQw4w9WgXcQ, the ID is dQw4w9WgXcQ.

Hugo generates the iframe HTML needed for embedding automatically. The syntax is: {{< youtube VIDEO_ID >}}

The gallery shortcode displays multiple images in a grid

Example Create a gallery of research images under Projects

Exercise: Add two more images to the gallary.

Solution

{{< figure src="/images/stock3.jpg" caption=“Final Celebration” >}}

Example Create a two-column comparison in your Projects section showing two different research methods or approaches. Include a heading and description in each column.

Solution

Comparing Approaches

Statistical Methods

Interpretable results
Requires domain knowledge
Works with small datasets
Established theory base

Deep Learning

High accuracy on complex patterns
Automated feature learning
Requires large datasets
Black box models

Exercise Add images to each column using the figure shortcode.

Solution

Traditional Pipeline

{{< figure src="/images/traditional-pipeline.svg" caption=“Statistical analysis workflow” >}}

Uses established statistical methods for data analysis.

ML Pipeline

{{< figure src="/images/ml-pipeline.svg" caption=“Machine learning workflow” >}}

Automated feature extraction and pattern recognition.

The gist shortcode embeds GitHub Gists using the username and gist ID. GitHub Gists are simple code snippet repositories. Each Gist has a unique ID that appears in its URL.

To create a Gist: go to gist.github.com, paste code, add a filename (extension determines syntax highlighting), and click “Create public gist”.

(Optional) Exercise: Create a GitHub Gist with sample code from your research at gist.github.com. Add the gist shortcode to your Projects section using both values.

Solution

Data Analysis Pipeline

This Python script demonstrates our data preprocessing pipeline for genomic sequences.

(Optional) Exercise: Edit your Gist on GitHub (add a comment or modify the code). Reload your portfolio page and verify the updated content appears automatically.

Solution

1. Go to your Gist URL on GitHub
2. Click "Edit"
3. Add a comment like `# Updated on 2025-01-10`
4. Save
5. Reload your portfolio - the changes should appear