jchanDev.github.io/index.html at main · jchanDev/jchanDev.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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>~/home</title>
    <script>
        (function () {
            const theme = localStorage.getItem('theme');
            const isDark = theme === 'dark' || !theme; // default to dark if none set

            if (isDark) {
                document.documentElement.classList.add('dark');
                // Temporary inline style, but *removable*
                const tempStyle = document.createElement('style');
                tempStyle.textContent = `
      body {
        background: radial-gradient(circle at 30% 20%, #1a1a40, #000) !important;
        color: #ffffff !important;
      }
        .terminal {
            background: #211031 !important;
            border-color: #7E22CE !important;
            box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.4) !important;
        }
        .terminal-body {
            background: #1e1c22;
            color: #eee;
        }
    `;
                tempStyle.id = 'temp-dark-style';
                document.head.appendChild(tempStyle);
            }

            // Once the page fully loads, remove the temporary inline style
            window.addEventListener('DOMContentLoaded', () => {
                const temp = document.getElementById('temp-dark-style');
                if (temp) temp.remove();
            });
        })();
    </script>

    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="terminal">
        <!-- Terminal Header -->
        <div class="terminal-header">
            <div class="buttons">
                <span class="red"></span>
                <span class="yellow"></span>
                <span class="green"></span>
            </div>
            <div class="title">~/home</div>
            <button id="toggle-theme">🌙</button>
        </div>

        <!-- Terminal Body -->
        <div class="terminal-body">
            <p class="typing-line" data-text="> Hi! I'm Julia"></p>
            <p class="typing-line" data-text="> Engineer, cloud operations & support @ eGain"></p>
            <p class="typing-line" data-text="> Welcome to my portfolio!"></p>

            <!-- Fake terminal input -->
            <div class="input-line">
                <span class="prompt">&gt;</span>
                <span id="user-input" contenteditable="true"></span>
            </div>
            <!-- ASCII Cat -->
            <pre class="ascii-cat"></pre>
            <!-- Projects (initially hidden) -->
            <div class="projects">
                <div class="project-card" onclick="location.href='project1.html'">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path d="M2 8a1 1 0 0 1 1-1h6l2 2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8z"
                                stroke="#5c2a8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <div>
                        <div class="name">On_Premise_to_Cloud_Transfer</div>
                        <div class="desc">
                            Streamlined research processes by migrating on-premise models to AWS
                            using CloudFormation, Lambda, and EC2.
                        </div>
                    </div>
                </div>

                <div class="project-card" onclick="location.href='project2.html'">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path d="M2 8a1 1 0 0 1 1-1h6l2 2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8z"
                                stroke="#5c2a8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <div>
                        <div class="name">Infra_setup_hydro_sim/</div>
                        <div class="desc">
                            Utilized AWS ParallelCluster with horizontal scaling and optimized
                            SLURM configurations to significantly reduce runtime of a Singularity
                            container R script for UCSB researchers.
                        </div>
                    </div>
                </div>

                <div class="project-card" onclick="location.href='project3.html'">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path d="M2 8a1 1 0 0 1 1-1h6l2 2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8z"
                                stroke="#5c2a8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <div>
                        <div class="name">Sproutsense/</div>
                        <div class="desc">
                            A smart agriculture platform for real-time plant health monitoring and
                            AI-powered irrigation recommendations using environmental sensor data.
                        </div>
                    </div>
                </div>
            </div>

            <!-- About -->
            <section class="panel about-panel">
                <div class="label">&gt; About me:</div>
                <p>
                    I’m a Computer Engineering graduate from UC Santa Barbara, currently working
                    as an Engineer in Cloud Operations & Support at eGain. I’m passionate about
                    cloud computing and software engineering, and I enjoy applying my creativity
                    to solve complex technical problems. Outside of work, I explore hobbies like
                    crocheting, 3D origami, and baking — which inspire me to bring fresh
                    perspectives and innovative solutions to my projects.
                </p>
            </section>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>