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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Infrastructure setup for hydro-ecological simulation</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;
        }
        .panel {
            background: #27252d;
            border-color: #7E22CE;
            color: #f3d9ff;
        }
    `;
                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">~/projects/Infra_setup_hydro_sim</div>
            <button id="toggle-theme">🌙</button>
        </div>

        <!-- Terminal Body -->
        <div class="terminal-body project-page">
            <!-- Back link -->
            <a href="index.html" class="back">← cd ..</a>

            <!-- Project Title -->
            <h1 class="project-title">Infrastructure_setup_for_hydro-ecological_simulation.exe</h1>
            <div class="bar"></div>

            <!-- Description Panel -->
            <section class="panel">
                <div class="label">&gt; Description:</div>
                <p>Utilized AWS ParallelCluster with horizontal scaling and optimized SLURM configurations to
                    significantly
                    reduce the runtime of an R script executed within a Singularity container for UCSB researchers.</p>
            </section>

            <!-- Technologies Panel -->
            <section class="panel">
                <div class="label">&gt; Technologies:</div>
                <div class="tags">
                    <span>ParallelCluster</span>
                    <span>EC2</span>
                    <span>S3</span>
                    <span>Bash</span>
                    <span>SLURM</span>
                </div>
            </section>

            <!-- Features Panel -->
            <section class="panel">
                <div class="label">&gt; How it works:</div>
                <ul class="features">
                    <li>Setup ParallelCluster</li>
                    <li>Create clusters and download scripts and inputs from your S3 bucket</li>
                    <li>Clusters run our startup scripts and then run simulationt with given inputs</li>
                    <li>Run script I made to consolidate files from all parallel runs in one place and concatenate them.
                        The script also uploads output to the S3 bucket</li>
                </ul>
            </section>

            <section class="panel">
                <div class="label">&gt; Slideshow:</div>
                <div class="slideshow-wrapper">
                    <iframe
                        src="https://docs.google.com/presentation/d/1lIdFIkV50hqLHUhcgUz6KwGfhMNKCEd7EvTscwnX-ZY/embed?start=false&loop=false"
                        frameborder="0" allowfullscreen>
                    </iframe>

                    <!-- Mobile view link -->
                    <a href="https://docs.google.com/presentation/d/1lIdFIkV50hqLHUhcgUz6KwGfhMNKCEd7EvTscwnX-ZY/view"
                        class="mobile-slide-link" target="_blank">
                        View Slideshow
                    </a>
                </div>
            </section>

            <div class="actions">
                <a href="https://docs.google.com/document/d/1Vj01AfhNBDBuQEw_xoeylrtGsXwnXhBkOQEe7t23Tm4/edit?tab=t.0#heading=h.rds5mo41rdtd"
                    class="btn primary" target="_blank" rel="noopener noreferrer">View Documentation</a>
                <a href="https://docs.google.com/spreadsheets/d/1BSdONUcn6s1hF93TsOUPnrxGuzTbdEhD88MYMRkd5pY/edit?gid=0#gid=0"
                    class="btn" target="_blank" rel="noopener noreferrer">View Cost Analysis</a>
            </div>
        </div>
    </div>

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

</html>