✨readme file and single page split

CoopersDigitalProduction · Sep 12, 2024 · 4b0444a · 4b0444a
1 parent 86c8942
commit 4b0444a
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,84 @@
+# Bruno Mikoski Portfolio
+
+This README provides instructions for managing the portfolio content and structure.
+
+## Managing Works Items
+
+### Creating a New Portfolio Item
+1. Create a new subfolder in the `/content/works` directory
+2. Inside the new subfolder, create an `index.md` file
+3. Add project images to the subfolder:
+   - Thumbnail image must be named `thumb.jpg`, `thumb.png`, or `thumb.webp`
+   - All other images in this folder will be included in the project gallery (alphabetically sorted)
+4. In `index.md`, add the following parameters:
+   ```markdown
+   ---
+   title: "Project Title"
+   tags: ["tag1", "tag2"]
+   year: YYYY
+   role: "Your Role"
+   language: "Project Language(s)"
+   platforms: "Platform(s)"
+   youtube: "YouTube video link (if applicable)"
+   ---
+
+   Project description goes here.
+   ```
+
+### Updating a Works Item
+1. Navigate to the project's subfolder in `/content/works`
+2. Edit the `index.md` file to update text content or parameters
+3. Replace or add images as needed
+
+### Deleting a Works Item
+1. Remove the project's subfolder from `/content/works`
+
+## Key File Locations
+
+- Contact Page Content: `/content/contact.html`
+- Main Template Files: `/themes/bruno/layouts/`
+- Static Files (CSS, JS): `/themes/bruno/assets/`
+
+## Template Code Locations
+
+- Home Page (Works List): `/themes/bruno/layouts/_default/home.html`
+- Project Details: `/themes/bruno/layouts/works/single.html`
+- Generic Single Page: `/themes/bruno/layouts/_default/single.html`
+- Contact Page Wrapper: `/themes/bruno/layouts/_default/contact.html`
+
+## Creating New Pages
+
+1. Create a new Markdown file in the `/content/` directory (e.g., `newpage.md`)
+2. Add front matter to the file:
+   ```markdown
+   ---
+   title: "New Page Title"
+   layout: "page"
+   ---
+
+   Page content goes here.
+   ```
+3. Create a corresponding template in `/themes/bruno/layouts/_default/` if needed (e.g., `page.html`)
+4. The new page will be accessible at `/newpage/`
+
+## Project Structure
+
+- `/content/`: Contains all the content files (works, pages)
+- `/themes/bruno/`: Contains the theme files
+  - `/layouts/`: HTML templates
+    - `/_default/`: Default templates
+    - `/works/`: Work-specific templates
+  - `/assets/`: Static files (CSS, JS, images)
+
+## Additional Notes
+
+- The contact page can be edited in the `contact.html` file inside the `/content/` folder
+- Make sure to optimize images before adding them to the project to ensure fast loading times
+- The works single page template (`/themes/bruno/layouts/works/single.html`) includes:
+  - Project details
+  - YouTube video embedding (if applicable)
+  - Image gallery
+  - Related projects section (based on tags, filled with random projects if needed)
+- Regularly backup your content and theme files
+
+For any questions or issues, please refer to the project documentation or contact the maintainer.
diff --git a/themes/bruno/layouts/_default/single.html b/themes/bruno/layouts/_default/single.html
@@ -1,84 +1,6 @@
 {{ define "main" }}
-  <section class="project-details" aria-labelledby="project-title">
-    <h1 id="project-title">{{ .Title }}</h1>
-
+  <article>
+    <h1>{{ .Title }}</h1>
     {{ .Content }}
-
-    <!-- Display YouTube video if available -->
-    {{ if .Params.youtube }}
-    {{ $youtubeID := replaceRE "^.*youtu\\.be/(.*)$" "${1}" .Params.youtube }}
-    <div class="video-container">
-      <iframe width="560" height="315" src="https://www.youtube.com/embed/{{ $youtubeID }}" frameborder="0"
-        allowfullscreen title="Video of project {{ .Title }}"></iframe>
-    </div>
-    {{ end }}
-
-    <!-- Display project information if available -->
-    {{ if .Params.language }}
-      {{ if .Params.platforms }}
-    <div class="info" aria-label="Project information">
-      <p>Language: {{ .Params.language }}</p>
-      <p>Platforms: {{ .Params.platforms }}</p>
-    </div>
-      {{ end }}
-    {{ end }}
-  </section>
-
-  <!-- Project gallery section -->
-  <section class="project-gallery" aria-label="Project gallery">
-  <!-- Match all jpg, png, and webp images in the project's resource folder -->
-  {{ $jpgImages := .Resources.Match "*.jpg" }}
-  {{ $pngImages := .Resources.Match "*.png" }}
-  {{ $webpImages := .Resources.Match "*.webp" }}
-  {{ $images := union (union $jpgImages $pngImages) $webpImages }}
-  {{ if $images }}
-    {{ range $images }}
-    <!-- Check if the image is jpg, png, webp, or jpeg and not thumb.jpg, thumb.png, or thumb.webp -->
-    {{ $ext := path.Ext .Name }}
-    {{ if and (or (eq $ext ".jpg") (eq $ext ".png") (eq $ext ".webp") (eq $ext ".jpeg")) (not (hasPrefix .Name "thumb.")) }}
-    <a href="{{ .RelPermalink }}" data-gall="gallery-project" class="open-modal"><img src="{{ .RelPermalink }}"  alt="{{ $.Title }} - Image"></a>
-    {{ end }}
-    {{ end }}
-  {{ end }}
-  </section>
-
-  <!-- Related projects section -->
-  {{ $currentPage := . }}
-  <!-- Find 3 random works pages, excluding the current page -->
-  {{ $related := where (where .Site.RegularPages "Type" "works") "Permalink" "ne" .Permalink | shuffle | first 3 }}
-  {{ if $related }}
-  <section class="related-projects" aria-labelledby="related-projects-title">
-    <h3 id="related-projects-title">You may also like</h3>
-    <div class="related-projects-grid">
-      {{ range $index, $element := $related }}
-      <div class="related-project related-game{{ add $index 1 }}">
-        <a href="{{ .RelPermalink }}" aria-label="View project: {{ .Title }}">
-          <!-- Construct the path for the thumbnail image -->
-          {{ $thumbBase := path.Join .File.Dir "thumb" }}
-          {{ $jpgPath := printf "%s.jpg" $thumbBase }}
-          {{ $pngPath := printf "%s.png" $thumbBase }}
-          {{ $webpPath := printf "%s.webp" $thumbBase }}
-          <!-- Use WebP if it exists, then JPG, then PNG, fallback to a placeholder if none exist -->
-          {{ $thumbnailPath := "" }}
-          {{ if (fileExists $webpPath) }}
-            {{ $thumbnailPath = $webpPath }}
-          {{ else if (fileExists $jpgPath) }}
-            {{ $thumbnailPath = $jpgPath }}
-          {{ else if (fileExists $pngPath) }}
-            {{ $thumbnailPath = $pngPath }}
-          {{ else }}
-            {{ $thumbnailPath = "/images/placeholder.jpg" }}
-          {{ end }}
-          <img src="{{ $thumbnailPath | relURL }}" alt="Thumbnail of project {{ .Title }}">
-          <h4>{{ .Title }}</h4>
-          <!-- Display the year if available -->
-          {{ with .Params.year }}
-            <p>{{ . }}</p>
-          {{ end }}
-        </a>
-      </div>
-      {{ end }}
-    </div>
-  </section>
-  {{ end }}
+  </article>
 {{ end }}
diff --git a/themes/bruno/layouts/works/single.html b/themes/bruno/layouts/works/single.html
@@ -0,0 +1,104 @@
+{{ define "main" }}
+  <section class="project-details" aria-labelledby="project-title">
+    <h1 id="project-title">{{ .Title }}</h1>
+
+    {{ .Content }}
+
+    <!-- Display YouTube video if available -->
+    {{ if .Params.youtube }}
+    {{ $youtubeID := replaceRE "^.*youtu\\.be/(.*)$" "${1}" .Params.youtube }}
+    <div class="video-container">
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/{{ $youtubeID }}" frameborder="0"
+        allowfullscreen title="Video of project {{ .Title }}"></iframe>
+    </div>
+    {{ end }}
+
+    <!-- Display project information if available -->
+    {{ if .Params.language }}
+      {{ if .Params.platforms }}
+    <div class="info" aria-label="Project information">
+      <p>Language: {{ .Params.language }}</p>
+      <p>Platforms: {{ .Params.platforms }}</p>
+    </div>
+      {{ end }}
+    {{ end }}
+  </section>
+
+  <!-- Project gallery section -->
+  <section class="project-gallery" aria-label="Project gallery">
+  <!-- Match all jpg, png, and webp images in the project's resource folder -->
+  {{ $jpgImages := .Resources.Match "*.jpg" }}
+  {{ $pngImages := .Resources.Match "*.png" }}
+  {{ $webpImages := .Resources.Match "*.webp" }}
+  {{ $images := union (union $jpgImages $pngImages) $webpImages }}
+  {{ if $images }}
+    {{ range $images }}
+    <!-- Check if the image is jpg, png, webp, or jpeg and not thumb.jpg, thumb.png, or thumb.webp -->
+    {{ $ext := path.Ext .Name }}
+    {{ if and (or (eq $ext ".jpg") (eq $ext ".png") (eq $ext ".webp") (eq $ext ".jpeg")) (not (hasPrefix .Name "thumb.")) }}
+    <a href="{{ .RelPermalink }}" data-gall="gallery-project" class="open-modal"><img src="{{ .RelPermalink }}"  alt="{{ $.Title }} - Image"></a>
+    {{ end }}
+    {{ end }}
+  {{ end }}
+  </section>
+
+  <!-- Related projects section -->
+  {{ $currentPage := . }}
+  {{ $relatedProjects := slice }}
+
+  <!-- Find related projects based on tags -->
+  {{ range .Params.tags }}
+    {{ $tag := . }}
+    {{ $taggedProjects := where (where $currentPage.Site.RegularPages "Type" "works") "Params.tags" "intersect" (slice $tag) }}
+    {{ $relatedProjects = $relatedProjects | union $taggedProjects }}
+  {{ end }}
+
+  <!-- Remove the current page from related projects -->
+  {{ $relatedProjects = where $relatedProjects "Permalink" "ne" $currentPage.Permalink }}
+
+  <!-- Shuffle and limit to 3 -->
+  {{ $relatedProjects = $relatedProjects | shuffle | first 3 }}
+
+  <!-- If we don't have 3 related projects, fill with random projects -->
+  {{ $remainingCount := sub 3 (len $relatedProjects) }}
+  {{ if gt $remainingCount 0 }}
+    {{ $randomProjects := where (where .Site.RegularPages "Type" "works") "Permalink" "ne" $currentPage.Permalink | shuffle | first $remainingCount }}
+    {{ $relatedProjects = $relatedProjects | union $randomProjects }}
+  {{ end }}
+
+  {{ if $relatedProjects }}
+  <section class="related-projects" aria-labelledby="related-projects-title">
+    <h3 id="related-projects-title">You may also like</h3>
+    <div class="related-projects-grid">
+      {{ range $index, $element := $relatedProjects }}
+      <div class="related-project related-game{{ add $index 1 }}">
+        <a href="{{ .RelPermalink }}" aria-label="View project: {{ .Title }}">
+          <!-- Construct the path for the thumbnail image -->
+          {{ $thumbBase := path.Join .File.Dir "thumb" }}
+          {{ $jpgPath := printf "%s.jpg" $thumbBase }}
+          {{ $pngPath := printf "%s.png" $thumbBase }}
+          {{ $webpPath := printf "%s.webp" $thumbBase }}
+          <!-- Use WebP if it exists, then JPG, then PNG, fallback to a placeholder if none exist -->
+          {{ $thumbnailPath := "" }}
+          {{ if (fileExists $webpPath) }}
+            {{ $thumbnailPath = $webpPath }}
+          {{ else if (fileExists $jpgPath) }}
+            {{ $thumbnailPath = $jpgPath }}
+          {{ else if (fileExists $pngPath) }}
+            {{ $thumbnailPath = $pngPath }}
+          {{ else }}
+            {{ $thumbnailPath = "/images/placeholder.jpg" }}
+          {{ end }}
+          <img src="{{ $thumbnailPath | relURL }}" alt="Thumbnail of project {{ .Title }}">
+          <h4>{{ .Title }}</h4>
+          <!-- Display the year if available -->
+          {{ with .Params.year }}
+            <p>{{ . }}</p>
+          {{ end }}
+        </a>
+      </div>
+      {{ end }}
+    </div>
+  </section>
+  {{ end }}
+{{ end }}