website/about.html at main · uiucjfo/website · 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <!-- SEO Meta Tags -->
    <title>About the Jasmine Field Orchestra (JFO) | Our Story & Mission</title>
    <meta content="Learn about the Jasmine Field Orchestra (JFO) at UIUC. Discover our history since 2012, our mission to unite cultures through music, and our diverse Symphonic, Modern Chinese Orchestra, Choir, and Live Bands divisions."
          name="description">
    <meta content="JFO history, JFO mission, UIUC music clubs, Jasmine Field Orchestra story, student musicians, cultural harmony, diversity in music"
          name="keywords">
    <meta content="Jasmine Field Orchestra" name="author">
    <link href="https://jfouiuc.org/about.html" rel="canonical">
    <meta content="index, follow" name="robots">

    <!-- Open Graph / Facebook -->
    <meta content="article" property="og:type">
    <meta content="https://jfouiuc.org/about.html" property="og:url">
    <meta content="About the Jasmine Field Orchestra (JFO) | Our Story & Mission" property="og:title">
    <meta content="From a passionate student group in 2012 to a symphony of cultures at UIUC, explore the journey and vision of the Jasmine Field Orchestra."
          property="og:description">
    <meta content="https://jfouiuc.org/assets/images/about-banner.png"
          property="og:image">

    <!-- Twitter -->
    <meta content="summary_large_image" name="twitter:card">
    <meta content="https://jfouiuc.org/about.html" name="twitter:url">
    <meta content="About the Jasmine Field Orchestra (JFO) | Our Story & Mission" name="twitter:title">
    <meta content="From a passionate student group in 2012 to a symphony of cultures at UIUC, explore the journey and vision of the Jasmine Field Orchestra."
          name="twitter:description">
    <meta content="https://jfouiuc.org/assets/images/about-banner.png"
          name="twitter:image">

    <!-- Tailwind CSS -->
    <link href="assets/css/tailwind.css" rel="stylesheet">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com" rel="preconnect">
    <link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Open+Sans:wght@400;500&display=swap"
          rel="stylesheet">

    <!-- Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "AboutPage",
        "name": "About the Jasmine Field Orchestra",
        "url": "https://jfouiuc.org/about.html",
        "mainEntity": {
            "@type": "Organization",
            "name": "Jasmine Field Orchestra",
            "alternateName": "JFO",
            "url": "https://jfouiuc.org/",
            "logo": "https://jfouiuc.org/assets/images/logo-square.png",
            "description": "A vibrant, student-led music community at the University of Illinois Urbana-Champaign, celebrating a fusion of musical genres and cultures.",
            "email": "hello@jfouiuc.com",
            "foundingDate": "2012",
            "sameAs": [
                "https://www.instagram.com/jfouiuc",
                "https://www.youtube.com/@jfouiuc",
                "https://www.facebook.com/jfouiuc"
            ]
        }
    }
    </script>

    <!-- Favicon -->
    <link href="assets/images/cropped-jfo-favicon-32x32.png"
          rel="icon"
          sizes="32x32">

    <style>
        body {
            font-family: 'Open Sans', sans-serif;
        }

        h1, h2, h3, h4 {
            font-family: 'Lato', sans-serif;
            font-weight: 700;
        }

        .page-header {
            background-image: url('assets/images/about-banner.png');
            background-size: cover;
            background-position: center;
        }

        .header-overlay {
            background-color: rgba(0, 0, 0, 0.6);
        }

        /* Style for scrolled header */
        .header-scrolled {
            background-color: rgba(17, 24, 39, 0.8);
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body class="bg-gray-900 text-white">

<!-- Skip to Content (Accessibility) -->
<a class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-pink-500 focus:text-white focus:py-2 focus:px-4 focus:rounded"
   href="#main-content">Skip to content</a>

<!-- Header & Navigation -->
<header class="fixed top-0 left-0 w-full z-50 transition-all duration-300" id="header">
    <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
        <a class="text-2xl font-bold" href="index.html">
            <img alt="JFO Logo"
                 class="h-10 transition-transform duration-300 hover:scale-105"
                 src="assets/images/full-logo-h-white-colored.png">
        </a>
        <div class="hidden xl:flex items-center space-x-8 text-lg">
            <a class="flex items-center space-x-2 hover:text-pink-400 transition-colors" href="index.html">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
                </svg>
                <span>Home</span>
            </a>
            <a class="flex items-center space-x-2 text-pink-400 transition-colors" href="about.html">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path clip-rule="evenodd"
                          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                          fill-rule="evenodd"/>
                </svg>
                <span>About</span>
            </a>
            <a class="flex items-center space-x-2 hover:text-pink-400 transition-colors" href="membership.html">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/>
                    <path clip-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" fill-rule="evenodd"/>
                </svg>
                <span>Membership</span>
            </a>
            <a class="flex items-center space-x-2 hover:text-pink-400 transition-colors"
               href="https://news.jfouiuc.org/" rel="noopener noreferrer"
               target="_blank">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path clip-rule="evenodd"
                          d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h10a1 1 0 010 2H5a1 1 0 010-2zm0 4h10a1 1 0 010 2H5a1 1 0 010-2zm0 4h6a1 1 0 010 2H5a1 1 0 010-2z"
                          fill-rule="evenodd"/>
                </svg>
                <span>News & Announcements</span>
            </a>
        </div>
        <button class="xl:hidden text-2xl z-50" id="mobile-menu-button">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path d="M4 6h16M4 12h16m-7 6h7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
            </svg>
        </button>
    </nav>
    <!-- Mobile Menu -->
    <div class="hidden xl:hidden bg-gray-800" id="mobile-menu">
        <a class="block py-3 px-4 text-sm hover:bg-gray-700" href="index.html">Home</a>
        <a class="block py-3 px-4 text-sm hover:bg-gray-700 text-pink-400" href="about.html">About</a>
        <a class="block py-3 px-4 text-sm hover:bg-gray-700" href="membership.html">Membership</a>
        <a class="block py-3 px-4 text-sm hover:bg-gray-700" href="https://news.jfouiuc.org/" rel="noopener noreferrer"
           target="_blank">News & Announcements</a>
    </div>
</header>

<main id="main-content">
    <!-- Page Header -->
    <section class="page-header relative py-32">
        <div class="absolute inset-0 header-overlay"></div>
        <div class="container mx-auto px-6 text-center relative z-10">
            <h1 class="text-5xl md:text-6xl font-bold mb-4">About JFO</h1>
            <p class="text-xl md:text-2xl text-gray-300">Our Story, Our Music, Our Community</p>
        </div>
    </section>

    <!-- Our Story Section -->
    <section class="py-20 bg-gray-800">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-4xl font-bold mb-6">From a Humble Ensemble to a Symphony of Cultures</h2>
                <p class="text-lg text-gray-300 leading-relaxed mb-4">
                    In the heart of the University of Illinois at Urbana-Champaign, the Jasmine Field Orchestra (JFO)
                    began its journey in 2012. Founded by a small group of passionate international students, JFO was
                    born from a shared vision: to create a vibrant community where music transcends cultural barriers
                    and fosters a universal sense of belonging.
                </p>
                <p class="text-lg text-gray-300 leading-relaxed">
                    From our earliest rehearsals, we believed in the power of music to unite people. As we've grown from
                    a small ensemble to a multifaceted organization with four distinct divisions, our core mission has
                    remained the same. Today, JFO stands as a proud testament to how every chord, every note, and every
                    voice can weave together a rich tapestry of diverse melodies and shared passions.
                </p>
            </div>
        </div>
    </section>

    <!-- Core Values Section -->
    <section class="py-20">
        <div class="container mx-auto px-6">
            <h2 class="text-4xl font-bold text-center mb-12">Our Core Values</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 text-center">
                <div class="bg-gray-800 p-6 rounded-lg">
                    <h3 class="text-2xl font-bold mb-2 text-pink-400">Passion</h3>
                    <p class="text-gray-400">A shared enthusiasm for music is the driving force behind everything we
                        do.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-lg">
                    <h3 class="text-2xl font-bold mb-2 text-pink-400">Diversity</h3>
                    <p class="text-gray-400">We celebrate all music genres, cultural backgrounds, and individual
                        experiences.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-lg">
                    <h3 class="text-2xl font-bold mb-2 text-pink-400">Growth</h3>
                    <p class="text-gray-400">We are committed to continuous learning and artistic development for all
                        our members.</p>
                </div>
            </div>
            <div class="grid md:grid-cols-2 gap-8 text-center mt-8 max-w-2xl mx-auto">
                <div class="bg-gray-800 p-6 rounded-lg">
                    <h3 class="text-2xl font-bold mb-2 text-pink-400">Respect</h3>
                    <p class="text-gray-400">We cultivate an environment where every member's contribution is valued and
                        heard.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-lg">
                    <h3 class="text-2xl font-bold mb-2 text-pink-400">Unity</h3>
                    <p class="text-gray-400">We believe in the power of music to build meaningful connections and create
                        harmony.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Organization Section -->
    <section class="py-20 bg-gray-800">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-4xl font-bold mb-6">Behind the Music: Our Organization</h2>
                <p class="text-lg text-gray-300 leading-relaxed">
                    While our musicians create the magic on stage, the Jasmine Field Orchestra is powered by a dedicated
                    Operations Management Team. This student-run team works tirelessly behind the scenes to ensure our
                    success. Comprised of several specialized departments—including Public Relations, Marketing,
                    Technology, Finance, and Human Resources—they handle everything from event planning and promotion to
                    financial oversight and member coordination. This essential structure is the backbone of JFO,
                    allowing our musical community to thrive and flourish.
                </p>
            </div>
        </div>
    </section>

    <!-- Our Music Divisions Section -->
    <section class="py-20" id="music">
        <div class="container mx-auto px-6">
            <h2 class="text-4xl font-bold text-center mb-12">Our Music Divisions</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="bg-gray-900 p-6 rounded-lg text-center transform transition-all duration-300 hover:scale-105 hover:bg-gray-700 hover:cursor-pointer">
                    <h3 class="text-2xl font-bold mb-2 text-pink-400">Symphonic Division</h3>
                    <p class="text-gray-400">Exploring the richness of the symphonic world, from classical masterpieces
                        to contemporary works.</p>
                </div>
                <div class="bg-gray-900 p-6 rounded-lg text-center transform transition-all duration-300 hover:scale-105 hover:bg-gray-700 hover:cursor-pointer">
                    <h3 class="text-2xl font-bold mb-2 text-pink-400">Modern Chinese Orchestra</h3>
                    <p class="text-gray-400">Bringing Chinese musical heritage to the modern stage through a full
                        orchestral ensemble of traditional instruments and contemporary arrangements.</p>
                </div>
                <div class="bg-gray-900 p-6 rounded-lg text-center transform transition-all duration-300 hover:scale-105 hover:bg-gray-700 hover:cursor-pointer">
                    <h3 class="text-2xl font-bold mb-2 text-pink-400">Choir Division</h3>
                    <p class="text-gray-400">Uniting voices across genres — from traditional choral works and a cappella
                        harmonies to pop vocal arrangements.</p>
                </div>
                <div class="bg-gray-900 p-6 rounded-lg text-center transform transition-all duration-300 hover:scale-105 hover:bg-gray-700 hover:cursor-pointer">
                    <h3 class="text-2xl font-bold mb-2 text-pink-400">Live Bands Division</h3>
                    <p class="text-gray-400">Feeling the pulse of modern music with high-energy pop, rock, and
                        contemporary performances.</p>
                </div>
            </div>
        </div>
    </section>

</main>

<!-- Footer -->
<footer class="bg-black py-10">
    <div class="container mx-auto px-6 text-center text-gray-400">
        <p class="mb-4">COPYRIGHT © 2012 - 2026 JFO. ALL RIGHTS RESERVED.</p>
        <p>Email: <a class="hover:text-pink-400" href="mailto:hello@jfouiuc.com">hello@jfouiuc.com</a></p>
    </div>
</footer>

<script>
  // Mobile menu toggle
  const mobileMenuButton = document.getElementById('mobile-menu-button')
  const mobileMenu = document.getElementById('mobile-menu')
  mobileMenuButton.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden')
  })

  // Close mobile menu when a link is clicked
  const mobileMenuLinks = mobileMenu.querySelectorAll('#mobile-menu a')
  mobileMenuLinks.forEach(link => {
    link.addEventListener('click', () => {
      mobileMenu.classList.add('hidden')
    })
  })

  // Change header background on scroll
  const header = document.getElementById('header')
  window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
      header.classList.add('header-scrolled')
    } else {
      header.classList.remove('header-scrolled')
    }
  })
</script>
</body>
</html>