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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>On-Premise to Cloud Transfer: Humans mating habits research Model</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/On_Premise_to_Cloud_Transfer</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">Humans_mating_habits_research_model.exe</h1>
            <div class="bar"></div>

            <!-- Description Panel -->
            <section class="panel">
                <div class="label">&gt; Description:</div>
                <p>Streamlined research processes by migrating on-premise models
                    to AWS by utilizing Cloudformation, Lambda, and EC2.</p>
            </section>

            <!-- Technologies Panel -->
            <section class="panel">
                <div class="label">&gt; Technologies:</div>
                <div class="tags">
                    <span>Cloudformation</span>
                    <span>Lambda</span>
                    <span>EC2</span>
                    <span>S3</span>
                    <span>SNS</span>
                    <span>IAM</span>
                    <span>Secret Manager</span>
                    <span>Bash</span>
                </div>
            </section>

            <!-- Features Panel -->
            <section class="panel">
                <div class="label">&gt; How it works:</div>
                <ul class="features">
                    <li>Cloudformation template 1 creates the basic resources needed</li>
                    <li>Cloudformation template 2 is triggered by an S3 input and creates an EC2 instance to run the
                        researchers script

                    </li>
                    <li>When everything is finished running, the researcher is alerted through email</li>
                    <li>Output CSV or error.txt can be accesed in output 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/1LVb6nIOa9RNFSZ8NllT2aepJWMUF3Nn0kkt_LqYF2p8/embed?start=false&loop=false"
                        frameborder="0" allowfullscreen>
                    </iframe>
                    <a href="https://docs.google.com/presentation/d/1LVb6nIOa9RNFSZ8NllT2aepJWMUF3Nn0kkt_LqYF2p8/view"
                        class="mobile-slide-link" target="_blank">
                        View Slideshow
                    </a>
                </div>
            </section>

        </div>
    </div>

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

</html>