SewonKim/index.html at master · SewonKim0/SewonKim · 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
<!DOCTYPE html>

<html>
    <head>
        <title> SewonKim's Website </title>
        <meta charset="utf-8">

        <link rel="stylesheet" href="styles/main.css">
        <link rel="stylesheet" href="styles/index.css">
    </head>

    <body style="background-image:url(images/piano1double.jpg); background-size:100%; display:flex; flex-direction:column; align-items:center;">
        <!-- Notice: New Website Link -->
        <h2> This page has been moved. Click <a href="https://sewonkim0.github.io/portfolio/"> here </a> to visit the new page. </h2>

        <div id="top" class="floating">
            <h1 style="margin-left:10%;"> SewonKim </h1>

            <div id="top-buttons">
                <a style="margin-right:10px;" href="https://www.youtube.com/channel/UCOkuvvVxC3kBF26IcPeJk9g"> <button>Youtube</button> </a>

                <a href="https://github.com/SewonKim0"> <button>Github</button> </a>
            </div>
        </div>

        <div id="about-me" class="floating">
            <div style="margin-left:10%">
                <h2> About Me </h2>

                <p>
                    I am a computer programmer and musician. <br>
                    I express my inspirations through art and technology. <br>
                </p>

                <ul>
                    <li> Favorite Hobbies: Developing applications, composing music, practicing piano </li>
                    <li> Instruments: Piano, Clarinet, Oboe, Saxophone </li>
                </ul>
            </div>

            <div style="margin-right:10%">
                <img src="images/me.jpg" width="150" height="200" alt="Picture of me playing piano" style="margin-top:5%; margin-bottom:5%;">
            </div>
        </div>

        <div id="music" class="floating">
            <div id="music-list" style="margin-left:10%">
                <h2> My Music </h2>

                <div class="music-entry">
                    <div style="width:50%">
                        <a href="music-sample.html"> Album 6 Preview </a>

                        <p> First song of upcoming album </p>
                    </div>

                    <div class="album-images" direction="margin-right">
                        <img src="images/icons/album5-1.jpg" width="150px" height="90px" alt="Cover for album 5-1">
                        <img src="images/icons/album5-2.jpg" width="150px" height="90px" alt="Cover for album 5-2">
                    </div>
                </div>

                <div class="music-entry">
                    <div style="width:50%">
                        <a href="https://www.youtube.com/watch?v=j29N75wq6hM&list=PLK8AjScya4-uJSXUlQTUrLZeGUgXQM4SD"> Album 5 </a>

                        <p> 12 compositions inspired by New York, made in first semester </p>
                    </div>

                    <div class="album-images" direction="margin-right">
                        <img src="images/icons/album5-1.jpg" width="150px" height="90px" alt="Cover for album 5-1">
                        <img src="images/icons/album5-2.jpg" width="150px" height="90px" alt="Cover for album 5-2">
                    </div>
                </div>

                <div class="music-entry">
                    <div>
                        <a href="https://www.youtube.com/watch?v=LtnMJPLGSS0&list=PLK8AjScya4-v90D2kJvJrOKSnn28sQi5v"> Album 4 </a>

                        <p> My longest album, inspired by New Jersey's summer </p>
                    </div>

                    <div class="album-images" direction="margin-right">
                        <img src="images/icons/album4-1.jpg" width="150px" height="90px" alt="Cover for album 4-1">
                        <img src="images/icons/album4-2.jpg" width="150px" height="90px" alt="Cover for album 4-2">
                    </div>
                </div>

                <div class="music-entry">
                    <div>
                        <a href="https://www.youtube.com/watch?v=K9tgXfkRb_Y&list=PLK8AjScya4-sfvhO4_feOI2DEynbh5Vvc"> Album 3 </a>

                        <p> The first album that I am willing to share publicly, made during my senior year in high school </p>
                    </div>

                    <div class="album-images" direction="margin-right">
                        <img src="images/icons/album3-1.jpg" width="150px" height="90px" alt="Cover for album 3-1">
                    </div>
                </div>
            </div>
        </div>

        <div id="projects" class="floating">
            <h2 style="margin-left:10%"> Recent Projects </h2>

            <div style="border-top:1px solid white; margin-left:10%; margin-bottom:5%; margin-right:10%;">
                <div style="display:flex; justify-content:space-between;">
                    <a style="margin-top:2%;" href="https://sewonkim0.github.io/MemoryTrainer/"> Memory Trainer </a>

                    <p style="margin-top:2%;"> February 2023 </p>
                </div>

                <p> Experimental web application for improving memory retention and efficiency, inspired by vocabulary memorization strategies </p>
            </div>

            <div style="border-top:1px solid white; margin-left:10%; margin-bottom:5%; margin-right:10%;">
                <div style="display:flex; justify-content:space-between;">
                    <a style="margin-top:2%;" href="https://github.com/SewonKim0/QuickNotes"> QuickNotes </a>

                    <p style="margin-top:2%;"> January 2023 </p>
                </div>

                <p> Lightweight notetaking application made in C# windows forms <br>
                    (Note: This application is not up to date, expect buggy performance) </p>
            </div>
        </div>

        <div id="upcoming" class="floating">
            <div style="margin-left:10%">
                <h2> Upcoming Content </h2>

                <p> - March 2023: Quizlet Autofiller </p>
                <p style="margin-left:10%"> Create quizlet study sets automatically with this C# windows forms application! </p>

                <p> - April 2023: Album 6 </p>
                <p style="margin-left:10%"> This album will be made in inspiration to the winter season! </p>
            </div>
        </div>

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