Untitled, 36” x 24”, 2025. Acrylic, plastic (polyethylene), & adhesive on canvas

Notes

This is index.qmd or rather the intro page. Currently looking to add:

• full width

• nice minimalist font, black, sharper contrast.. maybe bolded

  • font-family: helvetica

  • font-weight: normal, bold,

  • font-style:italic, normal

• grid spacing using page-layout: custom (Bootstrap CSS grid layout system 5.1), essentially wrapping whatever qmd page in a 3 column .grid (div I think). See gemini code below. Index.qmd will likely remain a large singular photo if I have the guts/ photos to make it that haha. Then the additional .qmd files will be:

  • Digital art

  • Nacotitlan

  • Old photography

  • Writings

::: {.grid} ::: {.g-col-12 .g-col-md-3} ### My Portfolio 

This is where your Ten Toes “Sidebar” content goes. - [Home](index.qmd) - [About](about.qmd) - [Archive](archive.qmd) :::

::: {.g-col-12 .g-col-md-9} ## My Work — listing: contents: posts type: grid columns: 3 — ::: :::

• g-col-12 s

• lots of images

• left side bar, not top nav bar, sidebar should be

  Notes on .scss/ .css files

• Sass uses the $ symbol, followed by a name, to declare variables:

  • Sass Variable Syntax: $variablename: value;

NOTES

• the content of my website is essentially a collection of qmd documents

  • I wonder if in this I can support large image files… shouldnt be an issue

• To add a CSS stylesheet to your document, just provide the css option. For example:

  format:
    html: 
      css: styles.css

  Using the css option works well for simple tweaks to document appearance. If you want to do more extensive customization see the documentation on HTML Themes.

• a big chunk of my protfolios apearance will be in customzing the css (font and positioning of images.. grids, etc.) and the sidebar

includes

If you want to include additional content in your document from another file, you can use the include-in-*options:

Option	Description
include-in-header	Include contents of file, verbatim, at the end of the header. This can be used, for example, to include special CSS or JavaScript in HTML documents or to inject commands into the LaTeX preamble.

Summary of where things go:

• CSS Styles: All the design rules go into styles.css.: visual polish, colors, specific spacing, effects, etc.

• Layout/ Site-wide Structure: This is handled by _quarto.yml… i.e.: (Navigation, Sidebars, Themes).

• The Content: Your actual images and posts go into individual .qmd files (e.g., in a /posts folder), which the “Listing” feature will automatically pull into the grid.

• KEY: my website setting MUST BE GLOBAL, so write most of my setting in quarto.yml. alternatively treat every portfolio page somewhat differently, in which case,

• The .qmd file is for Content & Page-Specific Layout. (Markdown + Bootstrap Classes).

• The .css file is for Visual Polish. (Colors, specific spacing, hover effects).

Achieving the ten toes look

CSS Grid

If you are using page-layout: custom, you’ll likely want to utilize the Bootstrap CSS Grid layout system (which is available by default in Quarto documents) for creating more sophisticated layouts.

For example, here’s a simple 2-column grid:

::: {.grid}

::: {.g-col-4}
This column takes 1/3 of the page
:::

::: {.g-col-8}
This column takes 2/3 of the page
:::

:::

Bootstrap’s CSS Grid system includes facilities for responsiveness, wrapping, nesting, and fine grained customization of column behavior.

Note that this isn’t the traditional Bootstrap grid used in older versions of Bootstrap – rather, it’s a brand new layout system introduced in Bootstrap 5.1 based on the CSS Grid standard. Quarto uses this newer system because it has more sophisticated layout capabilities akin to what LaTeX offers for print documents.

See the Bootstrap CSS Grid documentation for additionals details.