daisyland/side-projects.html at main · daisyb3ll/daisyland · 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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
<!-- side projects.html hehe -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>daisy's projects</title>

    <link rel="icon" type="image/png" href="assets/contact_assets/daisy-nav-hero.svg" sizes="32x32">
    <link rel="stylesheet" href="cleancss-projects.css">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://use.typekit.net/ldr5vzi.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bungee+Tint&family=Chokokutai&family=Comfortaa:wght@300..700&family=Coral+Pixels&family=Darumadrop+One&family=Dongle&family=DotGothic16&family=Doto:wght@100..900&family=East+Sea+Dokdo&family=Gaegu&family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IM+Fell+Double+Pica:ital@0;1&family=Jersey+15&family=Kirang+Haerang&family=Lacquer&family=Lexend+Deca:wght@100..900&family=Pixelify+Sans:wght@400..700&family=Playwrite+VN+Guides&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik+Dirt&family=Schoolbell&family=Silkscreen:wght@400;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Special+Elite&family=Syne+Mono&family=Tiny5&family=Yomogi&display=swap');
    </style>
    <script src="https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js">
        (function (d) {
            var config = {
                kitId: 'gdf0bga',
                scriptTimeout: 3000,
                async: true
            },
                h = d.documentElement, t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive"; }, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a; h.className += " wf-loading"; tk.src = 'https://use.typekit.net/' + config.kitId + '.js'; tk.async = true; tk.onload = tk.onreadystatechange = function () { a = this.readyState; if (f || a && a != "complete" && a != "loaded") return; f = true; clearTimeout(t); try { Typekit.load(config) } catch (e) { } }; s.parentNode.insertBefore(tk, s)
        })(document);
    </script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />

</head>

<header class="video-header">
    <video autoplay muted loop playsinline class="bg-video">
        <source src="../projects/DAISY-DOES-GRAPHIC-DESIGN/IMG_0487.mp4" type="video/mp4" />
        Your browser does not support the video tag.
    </video>

    <nav class="navbar">
        <a href="index.html">
            <div class="logo">
                <img src="/assets/contact_assets/SVG/daisy-logo-white.svg" alt="Daisy Logo" class="logo" />
            </div>
        </a>

        <div class="nav-links">
            <a href="/aboutme.html">about me</a>
            <a href="/side-projects.html">side projects</a>
            <a href="https://daisycandraw.my.canva.site/proofdaisydraws/">my art</a>
        </div>
    </nav>

    <div class="overlay-text">
        <h1>side projects</h1>
        <h2 class="typewriter">designing for fun :)</h2>
    </div>
</header>

<body>

    <section class="starting-background">
        <!-- Optional spacer to reveal torn edge if needed -->
        <div style="height: 100px;"></div>
    </section>

    <section class="pattern-bgrnd ">
        <div class="container">

            <!-- pedrito the panther -->
            <section class="featured-project Pedrito">
                <div class="project-image" data-aos="fade-left" data-aos-duration="800">
                    <img src="projects/pedrito-assets/og-pete.png" alt="Pedtrito the Panther thumbnail" />
                </div>
                <div class="project-text" data-aos="fade-right" data-aos-duration="800">
                    <p class="project-role">illustration · Graphic design</p>
                        <h2 class="project-title">
                            <span class="pedrito">PEDRITO</span>
                            <span class="thepanther">the panther</span>
                        </h2>
                    <span class="status-chip unready"> !!!under construction!!!</span>

                    <p class="project-description">
                    Originally created as a redesign exercise for my uni's mascot, Pedrito the Panther (dubbed "the nicer pete" by students)
                    is my own rendition of our school's mascot- prideful in his school and community, and as such involves himself in all
                    aspects of student life at Chapman University.
                    </p>
                    <a href="side-projects.html" class="project-link"> miau! 😼</a>
                </div>
                <!-- <iframe allowfullscreen="allowfullscreen" allow="clipboard-write" scrolling="no" class="fp-iframe" style="border: 0px; width: 100%; height: 488px;" src="https://heyzine.com/flip-book/9048561a3b.html"></iframe> -->
                <!-- DOODLEOVERLAYS!!!  -->
                <!-- <div class="doodle-overlay">
                    <img src="/assets/doodle-overlays/Untitled_Artwork 38.png" alt="stars" />
                    <img src="/projects/lamp-assets/storyboarding.png" alt="lamp storyaboarding illustrations" />
                </div> -->
            </section>


            <!-- THEBIGO -->
            <section class="featured-project THEBIGO reverse">
                <div class="project-image" data-aos="fade-left" data-aos-duration="800">
                    <img src="assets/thebigo/losing-page.png" alt="Listen: Album and Museum Portfoluio Thumbnail" />
                </div>
                <div class="project-text" data-aos="fade-right" data-aos-duration="800">
                    <p class="project-role">UI/UX DESIGN · Sprite Art · Hackathon </p>
                    <h2 class="project-title">The Big O!; Data Structures Simulator</h2>

                    <span class="status-chip unready"> !!!under construction!!!</span>
                    <p class="project-description">
                    Intro to Data Structures Simulator! Earn the degree- or else!!
                    <br></br>
                    Data Structures Simulator, is a project my best friend/ roommate/ peer/ classmate/ teammate Sarah Yoon and I
                    worked on as a part of our submission for TreeHacks.
                    As game enthusiasts (Sarah- game development minor, Daisy- video game enjoyer), we were very excited about our project-
                    which we created as a part of the education track of the event.
                    In our game- you get to be a part of our school's data structure class, and embark on your own journey to learning data
                    structures runtimes. Taught by our very own professor,Rene (hello prof.rene if you see this please don't fail me
                    please *edit july 2025 too late I graduated.).

                    <br></br>
                    Created for Stanford's Treehacks'23.
                    </p>
                    <a href="https://devpost.com/software/the-big-o-data-structures-simulator-game?ref_content=my-projects-tab&ref_feature=my_projects" class="project-link"> Tree Hacks Submission on Devpost</a>
                </div>
            </section>


            <!-- RUNCORGIRUN -->
            <section class="featured-project runcorgirun">
                <div class="project-image" data-aos="fade-left" data-aos-duration="800">
                    <img src="projects/runcorgirun/corgi-f2.png" alt="Run Corgi Run" />
                </div>
                <div class="project-text" data-aos="fade-right" data-aos-duration="800">
                    <p class="project-role">UI/UX DESIGN · Unity Programming · Game Art</p>
                    <h2 class="project-title">Run Corgi Run</h2>
                                        <span class="status-chip unready"> !!!under construction!!!</span>

                    <p class="project-description">
                        "Run Corgi Run!", is the name of my first student-designed game using the Unity game engine. I worked with my classmates
                        Apple Sheng and Nate Carnahan. I worked primarily on sprite animation, sprite art, asset layering, & concept design.
                    </p>
                    <a href="inprogress.html" class="project-link"> Assets, Project Diary, & Retrospective</a>
                </div>
            </section>


            <!-- PRINCIPLESOFOOP -->
            <section class="featured-project OOP reverse">
                <div class="project-image" data-aos="fade-left" data-aos-duration="800">
                    <img src="projects/intro2oop/coverpage.png" alt="Principles of Object Oriented Programming" />
                </div>
                <div class="project-text" data-aos="fade-right" data-aos-duration="800">
                    <p class="project-role">illustration· doodling</p>
                    <h2 class="project-title">Principles of Object Oriented Programming</h2>
                                        <span class="status-chip unready"> !!!under construction!!!</span>
                    <p class="project-description">
                    I did this as a part of an extra credit assignment that was well past the due date- but I completed anyway because it seemed fun.
                    Created for note revision in my CPSC 231, Intro to Java & Principles of Object Oriented Programming (I did end up getting extra credit for the project thank u Prof.Studebaker).
                    </p>
                    <a href="inprogress.html" class="project-link"> I wanna learn the Principles of O.O.P! </a>
                </div>
            </section>


        <!-- HALLOWEEN DESIGN -->
        <section class="featured-project dragon">
            <div class="project-image " data-aos="fade-left" data-aos-duration="800">
                <img src="assets/dragon_design_1.png" alt="Dragon Project Thumbnail" />
            </div>
            <div class="project-text" data-aos="fade-right" data-aos-duration="800">
                <p class="project-role"> Lead Designer · Fabrication Prototyping· Project Management · Youth Advocate </p>
                <h2 class="project-title"> Halloween with Higher Ground</h2>
                <span class="status-chip unready"> !!!under construction!!!</span>

                <p class="project-description">
                    <bold>What do you want to be for Halloween?</bold>
                    I Led the engineering design and fabrication of a life-size dragon costume for a local youth
                    organization. For this
                    project, I utilized a combination of 3D modeling, 3D printing, and traditional fabrication
                    techniques to create a
                    functional and stylish halloween costume. I collaborated with a cross-functional team to ensure
                    the costume was safe,
                    comfortable, and durable- through this we brought a child's imagination to life by designing and
                    building a custom
                    dragon costume. Combined artistic vision with technical expertise to create a unique and
                    captivating piece. Successfully
                    integrated electronics and mechanics into the costume to enhance the overall experience.
                </p>
                <a href="inprogress.html" class="project-link"> show me more!</a>
            </div>
        </section>


            <!-- Zac Can't Have Peanuts
            <section class="featured-project Zac">
                <div class="project-image" data-aos="fade-left" data-aos-duration="800">
                    <img src="projects/cant-have-peanuts-assets/CantHavePeanutsCover copy.png"
                        alt="Zac Can't Have Peanuts Thumbnail" />
                </div>
                <div class="project-text" data-aos="fade-right" data-aos-duration="800">
                    <p class="project-role">Game UI Design · Narritive Lead </p>
                    <h2 class="project-title">Zac Can't Have Peanuts!</h2>
                    <p class="project-description">
                        Join Zac on his first day of third grade hes been excited all summer, but this time he has a
                        brand new announcement!
                        What will his class think? Can he still hang out with his friends - and what will everyone think
                        about
                        his new rules ?
                    </p>
                    <a href="your-project-link.html" class="project-link"> read what happens next! </a>
                </div>
            </section> -->

            <!-- Covalent Therapy
            <section class="featured-project covalent reverse">
                <div class="project-image" data-aos="fade-left" data-aos-duration="800">
                    <img src="assets/covalenttheray_cards.png" alt="Covalent Therapy thumbnail" />
                </div>
                <div class="project-text" data-aos="fade-right" data-aos-duration="800">
                    <p class="project-role"> Creative Direction · Graphic Design </p>
                    <h2 class="project-title">Covalent Therapy</h2>
                    <p class="project-description">
                        Covalent Therapy is a freelance graphic design and branding project I completed for a client
                        launching a private
                        marriage and family therapy practice.
                        My task was to create a cohesive brand identity and promotional materials that reflected the
                        core values of the
                        practice. I chose a risograph-inspired visual style — complimentary, layered, and textured— to
                        echo the practice’s
                        namesake and philosophy.
                    </p>
                    <a href="your-project-link.html" class="project-link"> oo la la! </a>
                </div>
            </section> -->

            <!-- Dragon Project!
            <section class="featured-project dragon">
                <div class="project-image" data-aos="fade-left" data-aos-duration="800">
                    <img src="assets/dragon_design_1.png" alt="Dragon Project Thumbnail" />
                </div>
                <div class="project-text" data-aos="fade-right" data-aos-duration="800">
                    <p class="project-role"> Lead Designer · Fabrication Prototyping· Project Management · Youth
                        Advocate </p>
                    <h2 class="project-title"> Halloween with Higher Ground</h2>
                    <p class="project-description">
                        <bold>What do you want to be for Halloween?</bold>
                        I Led the engineering design and fabrication of a life-size dragon costume for a local youth
                        organization. For this
                        project, I utilized a combination of 3D modeling, 3D printing, and traditional fabrication
                        techniques to create a
                        functional and stylish halloween costume. I collaborated with a cross-functional team to ensure
                        the costume was safe,
                        comfortable, and durable- through this we brought a child's imagination to life by designing and
                        building a custom
                        dragon costume. Combined artistic vision with technical expertise to create a unique and
                        captivating piece. Successfully
                        integrated electronics and mechanics into the costume to enhance the overall experience.
                    </p>
                    <a href="your-project-link.html" class="project-link"> show me more!</a>
                </div>
            </section> -->
        </div>
    </section>

    <section class="penultimate-section">
        <!-- Optional spacer to reveal the torn edge -->
        <div style="height: 100px;"></div>
    </section>


    <!-- animatin things mueheh -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>

    <script>
        (function (d) {
            var config = {
                kitId: 'gdf0bga',
                scriptTimeout: 3000,
                async: true
            },
                h = d.documentElement, t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive"; }, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a; h.className += " wf-loading"; tk.src = 'https://use.typekit.net/' + config.kitId + '.js'; tk.async = true; tk.onload = tk.onreadystatechange = function () { a = this.readyState; if (f || a && a != "complete" && a != "loaded") return; f = true; clearTimeout(t); try { Typekit.load(config) } catch (e) { } }; s.parentNode.insertBefore(tk, s)
        })(document);
    </script>


    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const el = document.querySelector("h2.typewriter"); // target specific header
            const txt = el.textContent; // get its text
            el.textContent = ""; // clear it out so we can "type" it in

            let i = 0;
            const speed = 90;

            function typeWriter() {
                if (i < txt.length) {
                    el.textContent += txt.charAt(i);
                    i++;
                    setTimeout(typeWriter, speed);
                }
            }
            typeWriter();
        });


        document.addEventListener("DOMContentLoaded", () => {
                const body = document.body;

                // trigger fade in
                requestAnimationFrame(() => {
                    body.classList.add("fade-in");
                });

                // handle fade out on link clicks
                document.querySelectorAll("a").forEach(link => {
                    link.addEventListener("click", e => {
                        if (
                            link.hostname === window.location.hostname &&
                            link.pathname !== window.location.pathname
                        ) {
                            e.preventDefault();
                            body.classList.remove("fade-in");
                            body.classList.add("fade-out");
                            setTimeout(() => {
                                window.location = link.href;
                            }, 400); // matches CSS duration
                        }
                    });
                });
            });

    </script>

    <!--
    <script>
        // Prompt on load
        const password = prompt("This project is password protected! Sorry for the trouble!");
        // Set your secret password here
        if (password !== "UIdeas03!coolcraig") {
            alert("Sorry! PLease contact Daisy for updated login info!");
            window.location.href = "index.html"; // Redirect to homepage
        }
    </script> -->

</body>

<footer class="minimal-footer">
    <div class="footer-left">
        <p>thanks for checking out my projects!</p>
        <p>crafted with curiosity & creativity. hosted with love on github pages </p>
        <p class="footer-update">© 2025 daisyland all rights reserved</p>
        <p class="footer-update">Last updated: July 2025</p>
    </div>

    <div class="footer-right">
        <a href="https://github.com/daisyb3ll" target="_blank">github</a>
        <a href="https://docs.google.com/document/d/1k9xpl2AOD8KjBLynts9rQQgqLKHwTG_Pfv17IkuoJVs/edit?tab=t.8sxrkt6rhluq"
            target="_blank">resume</a>        <a href="https://www.linkedin.com/in/daisyfernandezreyes/" target="_blank">linkedin</a>
        <a href="art.html">art</a>
    </div>
</footer>

</html>