wad/index.html at main · r-b-1/wad · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Jack Oien — CS student at UMD building native apps, mobile experiences, and systems software.">
    <title>Jack Oien</title>
    <link rel="stylesheet" href="index.css">
    <script>
            // Console easter egg
            console.log("%cHey there! 👋", "font-size: 20px; font-weight: bold;");
            console.log("%cI see you're curious about how things work. Me too!", "font-size: 14px;");
            console.log("%cFeel free to poke around. The code is plain vanilla HTML/CSS/JS.", "font-size: 12px; color: #666;");
            console.log("%cWant to reach out? oiendjack@gmail.com", "font-size: 12px; font-style: italic;");

            // Clock functionality
            function updateClock() {
                var now = new Date();
                var currentTimeString = now.toLocaleTimeString();
                document.getElementById("live-clock").textContent = currentTimeString;
            }

            // Fade-in on scroll
            function setupFadeIn() {
                const fadeElements = document.querySelectorAll('.fade-in');
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            entry.target.classList.add('visible');
                        }
                    });
                }, { threshold: 0.1 });
                fadeElements.forEach(el => observer.observe(el));
            }

            window.onload = function() {
                updateClock();
                setupFadeIn();
            }

            setInterval(updateClock, 1000);
    </script>
</head>

<body>
    <div id="content">
        <p class="align-right"><span id="live-clock"></span></p>

        <p class="fade-in">Hi, my name is Jack. I'm a computer science student at the University of Minnesota Duluth, graduating May 2027. I'm best reached via <a href="mailto:oiendjack@gmail.com">email</a>.</p>

        <p class="fade-in">I spend most of my time figuring out how things work — whether that's diving into someone's codebase, taking apart an idea to see what's underneath, or building something from scratch just to understand every piece of it.</p>

        <p class="fade-in">Right now I'm building Sup Rec, a supplement ranking website in React and Supabase focused on cleaner product comparisons and community-submitted updates. I'm also actively looking for a summer 2026 internship where I can contribute real work from day one.</p>

        <img alt="A lake on a sunny day, with reeds and lily pads in the foreground." src="lake_photo_1.jpeg" class="center-image fade-in">

        <p class="fade-in">A photo I took on the 4th of July.</p>

        <div class="landing-links-container">
            <a href="index.html">about me</a>
            <a href="current-projects.html">projects</a>
            <a href="personal-hobbies.html">hobbies</a>
            <a href="resume.html">resume</a>
        </div>

        <div class="footer-links">
            <a href="mailto:oiendjack@gmail.com">email</a>
            <a href="https://github.com/r-b-1" target="_blank" rel="noopener">github</a>
            <a href="https://linkedin.com/in/jack-oien-93aa43369" target="_blank" rel="noopener">linkedin</a>
        </div>
    </div>
</body>
</html>