Salmonman.github.io/index.html at main · Salmonman/Salmonman.github.io · 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Colin Ellis - Portfolio</title>
  <link rel="stylesheet" href="styles.css?v=1.2">
</head>
<body>
  <div class="container">
    <div class="content-wrapper">

      <h1 class="portfolio-title">Colin Ellis</h1>

      <div class="nav-wrapper">
        <div class="nav-link-wrapper active-nav-link">
          <a href="index.html">Portfolio</a>
        </div>
        <div class="nav-link-wrapper">
          <a href="about.html">About</a>
        </div>
      </div>

      <hr class="portfolio-title-hr">

      <address class="contact-info">
        <a href="mailto:cellis3985@yahoo.com">
          <img src="https://img.icons8.com/?size=100&id=124379&format=png&color=FFFFFF" alt="Email" class="contact-icon"> cellis3985@yahoo.com
        </a>

        <a href="tel:17603156154">
          <img src="https://img.icons8.com/?size=100&id=jShwZ2RCyPSO&format=png&color=FFFFFF" alt="Phone" class="contact-icon"> (760) 315-6154
        </a>

        <a href="https://discordapp.com/users/318590626209726474">
          <img src="https://img.icons8.com/?size=100&id=Q524h6svpboS&format=png&color=FFFFFF" alt="Discord" class="contact-icon"> Salmonman
        </a>
      </address>

      <hr class="portfolio-title-hr">
      <br>

      <div class="portfolio-items-wrapper">

        <div style="width: 48%; float: left;">
          <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background image-mouseout" style="background-image:url(https://images.squarespace-cdn.com/content/v1/5f5169d31c810e0faa346016/b109eb7b-7427-4680-b791-d680c9872414/U11_StorageLaborer.png); float: right; justify-content: right;">
              A PK staff member walking through the backstage area of a zoo
            </div>
            <div class="text-wrapper" style="float: right;">
              <div class="text-box" style="margin-right: 4px;"></div>
              <div class="text title-mouseout">Real-Time Simulation</div>
              <div class="text text-overlay text-mouseout">Developed from scratch, a staff management, dispatch, logistics, and behavior simulation. Staff navigate highly complex parks, operate buildings, transport resources, clean enclosures, and take breaks</div>
            </div>
          </div>
        </div>
        <div style="margin-left: 52%;">
          <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background image-mouseout" style="background-image:url(https://images.squarespace-cdn.com/content/v1/5f5169d31c810e0faa346016/d3569463-0efe-4772-9de2-ed56bb9e2e49/AnimalSetupWizard.png?format=2500w); float: left; justify-content: left;">
              Animal Setup Wizard for Prehistoric Kingdom
            </div>
            <div class="text-wrapper" style="float: left;">
              <div class="text-box" style="margin-right: -4px;"></div>
              <div class="text title-mouseout">Tools Programming</div>
              <div class="text text-overlay text-mouseout">This wizard has been one of my favorite things to work on, and it's saved the team hundreds of hours of tedious setup work. Batch processing functions use reflection to affect over 60 complex assets in a single click.</div>
            </div>
          </div>
        </div>

        <br><br>

        <div style="width: 48%; float: left;">
          <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background image-mouseout" style="background-image:url(https://i.imgur.com/Yh6kVsu.png); float: right; justify-content: right;">
              In-Game viewable Brain State UI
            </div>
            <div class="text-wrapper" style="float: right;">
              <div class="text-box" style="margin-right: 4px;"></div>
              <div class="text title-mouseout">Complex AI</div>
              <div class="text text-overlay text-mouseout">I designed a modular AI behavior system for the animals, allowing them to address their physical needs, navigate arbitrary worlds, form complex social groups, and care for their offspring</div>
            </div>
          </div>
        </div>
        <div style="margin-left: 52%;">
          <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background image-mouseout" style="background-image:url(https://i.imgur.com/s0ALexx.png); float: left; justify-content: left;">
              Node-Based Objective Graph made from scratch
            </div>
            <div class="text-wrapper" style="float: left;">
              <div class="text-box" style="margin-right: -4px;"></div>
              <div class="text title-mouseout">Data Driven</div>
              <div class="text text-overlay text-mouseout">Replaced brittle and bespoke mission scripts with a flexible custom node editor that drives runtime logic to observe and react to game states and display dynamic UI elements based on context gathered from the game world</div>
            </div>
          </div>
        </div>

		<br><br>

        <div style="width: 48%; float: left;">
          <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background image-mouseout" style="background-image:url(https://images.squarespace-cdn.com/content/v1/5f5169d31c810e0faa346016/ac6c0c55-11d6-46bb-b9bb-1c29ff91b502/Fence_5.gif?format=2500w); float: right; justify-content: right;">
              Displaying real-time fence modifications and intersections on circular arcs
            </div>
            <div class="text-wrapper" style="float: right;">
              <div class="text-box" style="margin-right: 4px;"></div>
              <div class="text title-mouseout">Dynamic Meshes</div>
              <div class="text text-overlay text-mouseout">Mesh instancing was used to draw thousands of fence segments, and a from-scratch implementation of a DCEL graph was required to detect which arbitrary fence layouts represented closed polygonal exhibits for animals</div>
            </div>
          </div>
        </div>
        <div style="margin-left: 52%;">
          <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background image-mouseout" style="background-image:url(https://i.imgur.com/oXhZRl6.gif); float: left; justify-content: left;">
              UGUI Multiplayer RPG Inventory Project
            </div>
            <div class="text-wrapper" style="float: left;">
              <div class="text-box" style="margin-right: -4px;"></div>
              <div class="text title-mouseout">User Interfacing</div>
              <div class="text text-overlay text-mouseout">Multiplayer-capable inventory system I made. Combines layout groups with component architecture to maximize functionality. Also includes random loot with stats that apply when equipped.</div>
            </div>
          </div>
        </div>

        <br><br>

        <div style="width: 48%; float: left;">
          <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background image-mouseout" style="background-image:url(https://i.imgur.com/SzRpQwP.png); float: right; justify-content: right;">
              Procedural RPG Project
            </div>
            <div class="text-wrapper" style="float: right;">
              <div class="text-box" style="margin-right: 4px;"></div>
              <div class="text title-mouseout">Procedural</div>
              <div class="text text-overlay text-mouseout">A much older project, this procedural island generation had a lot of potential, but I was mostly focused on the multiplayer combat prototyping</div>
            </div>
          </div>
        </div>
        <div style="margin-left: 52%;">
          <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background image-mouseout" style="background-image:url(https://i.imgur.com/S9tqr9P.png); float: left; justify-content: left;">
              Encapsulation and Observer Patterns
            </div>
            <div class="text-wrapper" style="float: left;">
              <div class="text-box" style="margin-right: -4px;"></div>
              <div class="text title-mouseout">Maintainable Code</div>
              <div class="text text-overlay text-mouseout">In all my projects I strive to maintain readable and principled coding practices. Doing it the right way first always saves the most time.</div>
            </div>
          </div>
        </div>

        <br><br>

        <div style="width: 48%; float: left;">
          <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background image-mouseout" style="background-image:url(https://i.imgur.com/c02nTdD.jpg); float: right; justify-content: right;">
              Height-Based Stylized Path Shader
            </div>
            <div class="text-wrapper" style="float: right;">
              <div class="text-box" style="margin-right: 4px;"></div>
              <div class="text title-mouseout">Shaders</div>
              <div class="text text-overlay text-mouseout">An example of a heightmap based transition between a cobblestone path and a grassy field, done with Shader Graph</div>
            </div>
          </div>
        </div>
        <div style="margin-left: 52%;">
          <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background image-mouseout" style="background-image:url(https://i.imgur.com/MgjBR0G.jpeg); float: left; justify-content: left;">
              Mech model made in blender, imported to Unity
            </div>
            <div class="text-wrapper" style="float: left;">
              <div class="text-box" style="margin-right: -4px;"></div>
              <div class="text title-mouseout">Hard Surface Modelling</div>
              <div class="text text-overlay text-mouseout">Made this model to rapid-prototype a mech walking and IK system</div>
            </div>
          </div>
        </div>

        <br><br>

      </div>
    </div>
  </div>
  <div id="imageModal" class="modal">
    <span class="close-btn">×</span>
    <img class="modal-content" id="modalImage" alt="Full-size portfolio image">
  </div>
  <script>
    // Hover functionality
    const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
    portfolioItems.forEach(portfolioItem => {
      portfolioItem.addEventListener('mouseover', () => {
        portfolioItem.childNodes[1].classList.add('image-mouseover');
        portfolioItem.childNodes[1].classList.remove('image-mouseout');
        portfolioItem.childNodes[3].childNodes[3].classList.add('title-mouseover');
        portfolioItem.childNodes[3].childNodes[3].classList.remove('title-mouseout');
        portfolioItem.childNodes[3].childNodes[5].classList.add('text-mouseover');
        portfolioItem.childNodes[3].childNodes[5].classList.remove('text-mouseout');
      });
      portfolioItem.addEventListener('mouseout', () => {
        portfolioItem.childNodes[1].classList.add('image-mouseout');
        portfolioItem.childNodes[1].classList.remove('image-mouseover');
        portfolioItem.childNodes[3].childNodes[3].classList.add('title-mouseout');
        portfolioItem.childNodes[3].childNodes[3].classList.remove('title-mouseover');
        portfolioItem.childNodes[3].childNodes[5].classList.add('text-mouseout');
        portfolioItem.childNodes[3].childNodes[5].classList.remove('text-mouseover');
      });
    });

    // Image preview functionality
    const modal = document.getElementById('imageModal');
    const modalImg = document.getElementById('modalImage');
    const closeBtn = document.querySelector('.close-btn');
    const images = document.querySelectorAll('.portfolio-img-background');

    images.forEach(image => {
      image.addEventListener('click', function() {
        const bgImage = window.getComputedStyle(image).backgroundImage;
        const imageUrl = bgImage.slice(5, -2).replace(/"/g, ''); // Extract URL
        modalImg.src = imageUrl; // Set modal image source
        modal.classList.add('show'); // Show modal with transition
      });
    });

    // Close modal on close button click
    closeBtn.addEventListener('click', () => {
      modal.classList.remove('show'); // Hide modal
    });

    // Close modal on background click
    modal.addEventListener('click', (e) => {
      if (e.target === modal) {
        modal.classList.remove('show');
      }
    });

    // Close modal on Escape key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && modal.classList.contains('show')) {
        modal.classList.remove('show');
      }
    });
  </script>
</body>
</html>