cwportfolio/restructure.html at main · caitlinwheeless/cwportfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<!Doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Caitlin Wheeless Portfolio</title>
    <link href="portfolio.css" type="text/css" rel="stylesheet">
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
</head>
<body>
    <nav>
        <a href="index.html" class="nav-name">Caitlin Wheeless</a>
        <div class="nav-links">
            <a href="basic.html">Basic User</a>
            <a href="advanced.html">Advanced User</a>
            <a href="restructure.html" class="current">Content Structures</a>
            <a href="visual.html">Visual Aids</a>
            <a href="misc.html">Miscellaneous</a>
            <a href="cv.html">CV</a>
            <a href="about.html">About</a>
        </div>
    </nav>
    <main>
        <article class="shrink">
            <div class="intro-content-rs">
            <p>Technical documentation is typically pieced together over the years by various authors and editors. As a result, we're often left with a disorganized content structure. </p>

            <p>One of the first things I do when assuming responsibility for new content is to evaluate its TOC and determine what I can do to make it easier to navigate.</p>
                </div>

            <div class="image-wrap">
                <div>
                    <div class="img-title">Before</div>
                    <img alt="Search Before" src="images/SearchBefore.png">
                </div>
                <div>
                    <div class="img-title">After</div>
                    <img alt="Search After" src="images/SearchAfter.png">
                </div>

            </div>

            <div class="image-wrap" style="margin-top:3em">
                <div>
                    <div class="img-title">Before</div>
                    <img alt="Interop Before" src="images/InteropBefore.png">
                </div>
                <div>
                    <div class="img-title">After</div>
                    <img alt="Interop After" src="images/InteropAfter.png">
                </div>

            </div>


        </article>
    </main>

    <footer>
        <span>© 2026 Caitlin Wheeless</span>
        <div class="footer-links">
            <a href="https://github.com/caitlinwheeless" target="_blank" rel="noopener">GitHub</a>
            <a href="cv.html">CV</a>
            <a href="about.html">About</a>
        </div>
    </footer>

<!-- 🐹 HAMSTER EASTER EGG -->
<svg class="hamster-egg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-label="You found the hamster!">
  <ellipse cx="50" cy="62" rx="28" ry="24" fill="#f5c088"/>
  <ellipse cx="50" cy="68" rx="18" ry="15" fill="#fde8c9"/>
  <circle cx="50" cy="38" r="20" fill="#f5c088"/>
  <ellipse cx="34" cy="24" rx="8" ry="10" fill="#f5c088"/>
  <ellipse cx="34" cy="24" rx="5" ry="7" fill="#f2a6a6"/>
  <ellipse cx="66" cy="24" rx="8" ry="10" fill="#f5c088"/>
  <ellipse cx="66" cy="24" rx="5" ry="7" fill="#f2a6a6"/>
  <circle cx="42" cy="36" r="3.5" fill="#1c1917"/>
  <circle cx="43" cy="35" r="1.2" fill="#fff"/>
  <circle cx="58" cy="36" r="3.5" fill="#1c1917"/>
  <circle cx="59" cy="35" r="1.2" fill="#fff"/>
  <ellipse cx="50" cy="42" rx="2.5" ry="2" fill="#d4826a"/>
  <circle cx="38" cy="43" r="5" fill="#f7b8a0" opacity="0.6"/>
  <circle cx="62" cy="43" r="5" fill="#f7b8a0" opacity="0.6"/>
  <path d="M47 45 Q50 48 53 45" fill="none" stroke="#d4826a" stroke-width="1" stroke-linecap="round"/>
  <ellipse cx="36" cy="82" rx="7" ry="4" fill="#f5c088"/>
  <ellipse cx="64" cy="82" rx="7" ry="4" fill="#f5c088"/>
  <line x1="28" y1="41" x2="40" y2="43" stroke="#d4a574" stroke-width="0.6"/>
  <line x1="27" y1="44" x2="39" y2="44" stroke="#d4a574" stroke-width="0.6"/>
  <line x1="72" y1="41" x2="60" y2="43" stroke="#d4a574" stroke-width="0.6"/>
  <line x1="73" y1="44" x2="61" y2="44" stroke="#d4a574" stroke-width="0.6"/>
</svg>
<div class="hamster-tooltip">🐹 You found me!</div>

<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry, i) => {
      if (entry.isIntersecting) {
        setTimeout(() => entry.target.classList.add('visible'), i * 70);
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.12 });
  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
  const hamsterEgg = document.querySelector('.hamster-egg');
  if (hamsterEgg) {
    hamsterEgg.addEventListener('click', function() {
      this.style.transition = 'transform 0.3s';
      this.style.transform = 'scale(1.5) rotate(360deg)';
      setTimeout(() => { this.style.transform = 'scale(1.3) rotate(-8deg)'; }, 400);
    });
  }
</script>

</body>

</html>