Guillermo Orjuela Ramirez, PhD on Guillermo Orjuela-Ramirez

A first post

Fri, 01 Jan 2021 00:00:00 +0000

Hi, I'm the here-bot cat!

Use me to find your way in your website.

Here I am:: content/blog/spoonful-series/01-spoonful.md

To remove me, delete this line inside that file: {{< here >}}

My content section is:: blog

My layout is:: single-series

does this work?

or this?

Let’s start.

A second post

Sat, 02 Jan 2021 00:00:00 +0000

Hi, I'm the here-bot cat!

Use me to find your way in your website.

Here I am:: content/blog/spoonful-series/02-spoonful/index.md

To remove me, delete this line inside that file: {{< here >}}

My content section is:: blog

My layout is:: single-series

Images in this page bundle:: /blog/spoonful-series/02-spoonful/sidebar-inverse.jpg

part 2!

does this work?

now for some very cool things

get ready!

A third post

Sun, 03 Jan 2021 00:00:00 +0000

Hi, I'm the here-bot cat!

Use me to find your way in your website.

Here I am:: content/blog/spoonful-series/03-spoonful/index.markdown

Here is my R Markdown source file:: blog/spoonful-series/03-spoonful/index.Rmarkdown

To remove me, delete this line inside that file: {{< here >}}

My content section is:: blog

My layout is:: single-series

Images in this page bundle:: /blog/spoonful-series/03-spoonful/featured-photo.jpg

are you still here?

does this work?

final stretch!

Set up your social

Thu, 28 Jan 2021 00:00:00 +0000

There are five places where you can choose to show social icons. Here is the tl;dr:

site header (set in config.toml),
site footer (set in config.toml),
homepage (set in content/_index.md),
about page in the sidebar (set in content/about/sidebar/index.md), and
contact page (set in content/form/contact.md).

Read on to learn how to set up your social icons, and how to show/hide them.

Wherever you end up wanting to show your social icons, you’ll need to start by setting up the links in your site config.toml file. Open that up and scroll down to the [[params.social]] section. The start of it looks like this:

Style your site colors

Wed, 27 Jan 2021 00:00:00 +0000

You can totally customize your site’s theme colors within minutes of creating a new site. Read on to find out how, and decide which of the three options meets your needs.

Use a color theme

Hugo Apéro includes 8 built-in color themes that work “out of the box.” This means you can use a color theme to quickly customize the look of your site without needing to write any CSS. You can select the color theme in your config.toml file. Scroll down to find:

Style your site typography

Wed, 27 Jan 2021 00:00:00 +0000

As with color themes, you can completely customize your site’s fonts within minutes of creating a new site. How you do it depends on how much control and customization you need.

Embedded fonts

Hugo Apéro includes 6 embedded fonts that work “out of the box.” We selected 3 serif and 3 sans-serif options that we thought looked good with this theme, in our humble opinions. All embedded fonts include real italics so you may emphasize to your heart’s content :heart:! How to choose?

An evergreen post

Wed, 20 Jan 2021 00:00:00 +0000

Rendering mathematical equations

Examples from the mathjax demo. But they work with katex as well.

Rmarkdown

In .Rmarkdown documents, you can use either

A campfire

Tue, 12 Jan 2021 00:00:00 +0000

I’m really excited to give this talk! Stay tuned for video and slides.

Using panelsets

Sat, 02 Jan 2021 00:00:00 +0000

Courtesy of panelset.js by Garrick Aden-Buie, from his xaringanExtra package: https://pkg.garrickadenbuie.com/xaringanExtra/#/panelset

For example, this panelset:

Hello! 👋

hello

Goodbye 💨

goodbye

Was created by combining this theme’s panelset and panel shortcodes:

{{< panelset class="greetings" >}}
{{< panel name="Hello! :wave:" >}}
  hello
{{< /panel >}}
{{< panel name="Goodbye :dash:" >}}
  goodbye
{{< /panel >}}
{{< /panelset >}}

You could also revert to HTML as well. For example, this panelset:

Question

Which came first: the :chicken: or the :egg:?

Answer :hatching_chick:

Team :egg: FTW!

A seedling

Fri, 01 Jan 2021 14:15:59 -0600

An Rmarkdown post

Wed, 30 Dec 2020 00:00:00 +0000

Air quality

with(airquality, boxplot(Temp ~ Month))

with(airquality, plot(Ozone ~ Temp))

mlev <- levels(with(airquality, as.factor(Month)))
with(airquality, plot(Ozone ~ Temp, 
                      pch = as.numeric(mlev), 
                      col = mlev))

A seedling

Mon, 13 Jan 2020 14:15:59 -0600

Tachyons for Style

Wed, 03 Jul 2019 00:00:00 +0000

Tachyons is a design system that allows you to design gorgeous interfaces in the browser with little effort.

Because Speed

Building this static site generator theme was the first time I used an Atomic (or Functional) CSS system like Tachyons. It’s a design system that provides very small (which means fast) CSS modules that you can use in your HTML. So, rather than writing every line of CSS, you apply the style you need as you write your HTML with easy to understand shorthand class names. This makes for a very powerful way to style, in the browser, or while building a static site like this one – since you can see every change with every save. It’s a joy to use.

CSS Grid Scaffold

Tue, 02 Jul 2019 00:00:00 +0000

“Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.”

— Chris House, A Complete Guide to CSS Grid Layout ¹

Overview

Since I began building websites in Y2K, I’ve lost count how many times the phrase “…there’s got to be a better way to do this” has passed my lips. Most times, while fighting with floats and widths of content and sidebars or just basically trying to get something beside something else without using a stupid TABLE.

Palmer Penguins

Tue, 02 Jul 2019 00:00:00 +0000

“Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.”

— Chris House, A Complete Guide to CSS Grid Layout ¹

Bakeoff

Mon, 01 Jul 2019 00:00:00 +0000

Formspree makes it easy to receive submissions from HTML forms on your static website.

Functional Form

This theme has a form-to-email feature built in, thanks to the simple Formspree integration. All you need to activate the form is a valid recipient email address saved in the front matter of the form (/content/forms/contact.md). Of course, the example shown below (your@email.here) must not be used. Please use your actual email address.

Built-in Contact Form

Mon, 01 Jul 2019 00:00:00 +0000

Formspree makes it easy to receive submissions from HTML forms on your static website.

Functional Form

License: CC-BY-SA

Mon, 01 Jan 0001 00:00:00 +0000

My content is released under a Creative Commons Attribution-ShareAlike 4.0 International License.

Contact information

Mon, 01 Jan 0001 00:00:00 +0000

You can contact me through my corporate ( g.orjuela@cgiar.org) or personal email ( orjuelarguillermo@gmail.com)

Guillermo Orjuela Ramirez, PhD on Guillermo Orjuela-Ramirez

A first post

does this work?

or this?

A second post

part 2!

does this work?

now for some very cool things

more

get ready!

A third post

are you still here?

does this work?

final stretch!

Set up your social

Configure social

Style your site colors

Use a color theme

Style your site typography

Embedded fonts

An evergreen post

Rendering mathematical equations

Rmarkdown

A campfire

Using panelsets

A seedling

An Rmarkdown post

Air quality

A seedling

Tachyons for Style

Tachyons is a design system that allows you to design gorgeous interfaces in the browser with little effort.

Because Speed

CSS Grid Scaffold

“Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.”

Overview

Palmer Penguins

“Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.”

Bakeoff

Formspree makes it easy to receive submissions from HTML forms on your static website.

Functional Form

Built-in Contact Form

Formspree makes it easy to receive submissions from HTML forms on your static website.

Functional Form

License: CC-BY-SA

Contact information