cwportfolio/about.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body class="aboutpage">
    <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">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" class="current">About</a>
        </div>
    </nav>
    <main>
        <article>
            <div class="section-title">CONTACT/LINKS</div>
            <div class="im">
                <p><a href="mailto:caitlin.wheeless@gmail.com">caitlin.wheeless@gmail.com</a></p>
                <p><a href="https://github.com/caitlinwheeless" target="_blank">Github</a></p>

            </div>

            <div class="section-title">ABOUT ME</div>

            <div class="im">
                <p>I am very fond of my pet hamsters. I also have a dog who spends 90% of his day napping and the remaining 10% searching for mud puddles to roll in. </p>
                <p>My favorite holiday is whatever day I go to the Minnesota State Fair.</p>


                <p>My favorite hobbies are bead weaving, painting "abstract" (read: unrecognizable) watercolors, never running anywhere if I can help it, befriending the neighborhood squirrels, and following pet pigs on Instagram.</p>

                <p>I live in Duluth, MN. Here I enjoy eating cheese curds by Lake Superior, walking my dog through an abandoned golf course, complaining about the humidity in the summer, and complaining about the cold in the winter.</p>

                <p>I grew up in a small town in northern Wyoming. I am truly confident that someday I will be known as one of the greatest Technical Writers to have ever come from Wyoming.</p>


            </div>

            <div class="im fi">
                <div class="ham">
                    <img alt="Caitlin" title="So Dreamy" src="images/Caitlin.jpg">
                    <div class="image-cap"><span>Moi</span></div>
                </div>

                <div class="ham">
                    <img alt="Muddy Paws and Derp" title="Muddy Paws and Derp" src="images/Sprig.jpg">
                    <div class="image-cap"><span>Sprig</span></div>
                </div>

                <div class="ham">
                    <img alt="Lil Cutie" title="Lil Cutie" src="images/Tony.jpg">
                    <div class="image-cap"><span>Tony Hamsteroni</span></div>
                </div>


            </div>

            <div class="im" style="font-size: 14px; padding-top: 4rem;"><p>Please hire me so I can continue to support Tony's broccoli addiction.</p></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>