Colin Rey - Portfolio

I’ll design a comprehensive directory structure for a portfolio repository on GitHub Pages that follows industry best practices. This structure will be modular, scalable, and easy to maintain.

Portfolio Repository Structure

portfolio/
├── .github/
│   ├── workflows/
│   │   ├── deploy.yml
│   │   └── tests.yml
│   └── ISSUE_TEMPLATE/
│       ├── bug_report.md
│       └── feature_request.md
│
├── _data/
│   ├── navigation.yml
│   ├── skills.yml
│   ├── experience.yml
│   ├── education.yml
│   └── social.yml
│
├── _includes/
│   ├── components/
│   │   ├── card.html
│   │   ├── button.html
│   │   ├── modal.html
│   │   └── timeline.html
│   ├── sections/
│   │   ├── header.html
│   │   ├── footer.html
│   │   ├── hero.html
│   │   ├── about.html
│   │   ├── skills.html
│   │   └── contact.html
│   └── head.html
│
├── _layouts/
│   ├── default.html
│   ├── page.html
│   ├── post.html
│   └── project.html
│
├── _posts/
│   ├── 2024-01-15-first-blog-post.md
│   ├── 2024-02-20-learning-react.md
│   └── 2024-03-10-my-development-journey.md
│
├── _projects/
│   ├── 2023-ecommerce-platform.md
│   ├── 2023-weather-app.md
│   ├── 2024-task-manager.md
│   └── 2024-portfolio-redesign.md
│
├── _sass/
│   ├── abstracts/
│   │   ├── _variables.scss
│   │   ├── _mixins.scss
│   │   ├── _functions.scss
│   │   └── _placeholders.scss
│   ├── base/
│   │   ├── _reset.scss
│   │   ├── _typography.scss
│   │   └── _base.scss
│   ├── components/
│   │   ├── _buttons.scss
│   │   ├── _cards.scss
│   │   ├── _forms.scss
│   │   └── _navigation.scss
│   ├── layout/
│   │   ├── _header.scss
│   │   ├── _footer.scss
│   │   ├── _sidebar.scss
│   │   └── _grid.scss
│   ├── pages/
│   │   ├── _home.scss
│   │   ├── _about.scss
│   │   ├── _projects.scss
│   │   └── _blog.scss
│   └── main.scss
│
├── assets/
│   ├── css/
│   │   └── main.css
│   ├── js/
│   │   ├── main.js
│   │   ├── animations.js
│   │   ├── theme-switcher.js
│   │   └── lazy-load.js
│   ├── images/
│   │   ├── profile/
│   │   │   ├── avatar.jpg
│   │   │   └── avatar-thumbnail.jpg
│   │   ├── projects/
│   │   │   ├── ecommerce/
│   │   │   │   ├── screenshot-1.png
│   │   │   │   ├── screenshot-2.png
│   │   │   │   └── thumbnail.png
│   │   │   ├── weather-app/
│   │   │   │   ├── demo.gif
│   │   │   │   └── thumbnail.png
│   │   │   └── task-manager/
│   │   │       ├── features.png
│   │   │       └── thumbnail.png
│   │   ├── blog/
│   │   │   ├── 2024-01-15/
│   │   │   │   └── cover.jpg
│   │   │   └── 2024-02-20/
│   │   │       └── diagram.png
│   │   └── icons/
│   │       ├── favicon.ico
│   │       ├── apple-touch-icon.png
│   │       └── social/
│   │           ├── github.svg
│   │           ├── linkedin.svg
│   │           └── twitter.svg
│   └── downloads/
│       ├── resume.pdf
│       └── cv.pdf
│
├── pages/
│   ├── about.md
│   ├── projects.html
│   ├── blog.html
│   ├── contact.md
│   └── 404.html
│
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.html
├── sitemap.xml
├── robots.txt
├── README.md
├── LICENSE
├── .gitignore
├── .editorconfig
└── package.json

Directory Explanations

Core Directories

`_data/`

Stores structured data files (YAML/JSON) that can be accessed site-wide:

# _data/skills.yml
- category: Frontend
  items:
    - name: React
      level: 90
    - name: Vue.js
      level: 75

`_includes/`

Reusable HTML snippets and components:

<!-- _includes/components/card.html -->
<div class="card">
  <img src="" alt="">
  <h3></h3>
  <p></p>
</div>

`_layouts/`

Page templates that define the structure:

<!-- _layouts/project.html -->
---
layout: default
---
<article class="project">
  <header>
    <h1></h1>
    <time></time>
  </header>
  <article class="page">
  <header class="page-header">
    <h1 class="page-title">Playground Testing Checklist</h1>
    
  </header>
  
  <div class="page-content">
    <h1 id="playground-testing-checklist">Playground Testing Checklist</h1>

<h2 id="manual-testing-steps">Manual Testing Steps</h2>

<h3 id="1-basic-site-load">1. Basic Site Load</h3>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Site loads at http://localhost:4000</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />No JavaScript errors in console</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Playground section is visible</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />All 9 playground items are present</li>
</ul>

<h3 id="2-magic-8-ball-test">2. Magic 8-Ball Test</h3>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Click the Magic 8-Ball</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Animation plays (shake effect)</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Answer appears after ~1 second</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Answer text makes sense (developer wisdom)</li>
</ul>

<h3 id="3-color-symphony-test">3. Color Symphony Test</h3>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Colored notes are visible</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Click different notes</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Audio plays (if supported)</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Visual feedback on click</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Different notes produce different sounds</li>
</ul>

<h3 id="4-gravity-simulator-test">4. Gravity Simulator Test</h3>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Canvas is visible</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Initial planets/objects are present</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Click on canvas to add new objects</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Objects move/animate with physics</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Objects interact with each other</li>
</ul>

<h3 id="5-emoji-rain-test">5. Emoji Rain Test</h3>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Emoji selector buttons are visible</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Click different emoji buttons</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Rain effect starts</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Different emojis fall from top</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Rain can be stopped/changed</li>
</ul>

<h3 id="6-dna-helix-test">6. DNA Helix Test</h3>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />DNA structure is visible and rotating</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Rainbow button is present</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Click rainbow button</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Colors change to rainbow effect</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Animation continues smoothly</li>
</ul>

<h3 id="7-fireworks-test">7. Fireworks Test</h3>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Canvas area is visible</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Click anywhere on canvas</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Firework explosion occurs at click point</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Particles spread out realistically</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Multiple clicks create multiple fireworks</li>
</ul>

<h3 id="8-shape-shifter-test">8. Shape Shifter Test</h3>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Initial shape is visible</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Shape control buttons are present</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Click different shape buttons</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Shape morphs smoothly between forms</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />All shapes (circle, square, triangle, star) work</li>
</ul>

<h3 id="9-wave-generator-test">9. Wave Generator Test</h3>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Wave canvas is visible</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Control buttons are present</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Wave animation plays by default</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Frequency/amplitude controls work</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Wave responds to mouse movement</li>
</ul>

<h3 id="10-text-glitcher-test">10. Text Glitcher Test</h3>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Text element is visible</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Preset text buttons are present</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Click different text options</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Glitch effect plays</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Text changes and glitches correctly</li>
</ul>

<h2 id="browser-console-tests">Browser Console Tests</h2>

<p>Run the comprehensive test script in browser console:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Copy and paste the content of test-playground.js into browser console</span>
</code></pre></div></div>

<h2 id="performance-tests">Performance Tests</h2>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Animations are smooth (60fps)</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />No memory leaks during extended use</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Mobile responsiveness works</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Touch events work on mobile devices</li>
</ul>

<h2 id="audio-tests-if-supported">Audio Tests (if supported)</h2>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Audio context works</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />No audio errors in console</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Volume is appropriate</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Audio doesn’t block other page functionality</li>
</ul>

<h2 id="error-checking">Error Checking</h2>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />No JavaScript errors in console</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />No 404 errors for assets</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />No CSS errors</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />All images/icons load correctly</li>
</ul>

<h2 id="cross-browser-testing">Cross-Browser Testing</h2>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Chrome/Chromium</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Firefox</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Safari (if on macOS)</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Mobile browsers</li>
</ul>

<h2 id="accessibility-testing">Accessibility Testing</h2>
<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />All interactive elements are keyboard accessible</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Proper ARIA labels where needed</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Color contrast is sufficient</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />No flashing content that could trigger seizures</li>
</ul>

  </div>
</article>

</article>

`_posts/` & `_projects/`

Collections for blog posts and portfolio projects:

---
layout: project
title: "E-commerce Platform"
date: 2024-01-15
categories: [web, fullstack]
technologies: [React, Node.js, MongoDB]
featured: true
thumbnail: /assets/images/projects/ecommerce/thumbnail.png
---

Asset Organization

`assets/images/`

Organized by content type with consistent naming:

images/
├── projects/
│   └── [project-name]/
│       ├── thumbnail.png (800x600)
│       ├── screenshot-*.png
│       └── demo.gif

`_sass/`

Modular SCSS architecture following the 7-1 pattern:

// _sass/abstracts/_variables.scss
$primary-color: #007bff;
$font-stack: 'Inter', -apple-system, sans-serif;
$breakpoints: (
  'small': 480px,
  'medium': 768px,
  'large': 1024px
);

Configuration Files

`_config.yml`

title: Your Name - Portfolio
description: Full-stack developer portfolio
url: https://yourusername.github.io
baseurl: ""

# Build settings
markdown: kramdown
plugins:
  - jekyll-feed
  - jekyll-sitemap
  - jekyll-seo-tag

# Collections
collections:
  projects:
    output: true
    permalink: /projects/:name/

# Defaults
defaults:
  - scope:
      path: ""
      type: "projects"
    values:
      layout: "project"

Best Practices Implemented

Separation of Concerns: Content, styling, and functionality are clearly separated
Scalability: Easy to add new projects, posts, or pages
Performance: Images organized for lazy loading and optimization
SEO-Ready: Includes sitemap.xml and structured data support
Maintainable: Clear naming conventions and modular structure
Version Control: .gitignore configured for Jekyll/GitHub Pages

Additional Features Structure

Multi-language Support

portfolio/
├── _i18n/
│   ├── en/
│   │   ├── about.md
│   │   └── projects/
│   └── fr/
│       ├── about.md
│       └── projects/

API/Dynamic Content

portfolio/
├── api/
│   ├── contact.js
│   └── analytics.js
├── _plugins/
│   └── custom-generators.rb

This structure provides a solid foundation that can grow with your portfolio while maintaining clean organization and following industry standards for Jekyll-based GitHub Pages sites.

Portfolio Repository Structure

Directory Explanations

Core Directories

_data/

_includes/

_layouts/

_posts/ & _projects/