Website/index.html at main · Stellution-Studios/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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stellution Studio</title>
    <link rel="icon" type="image/x-icon" href="src/content/favicon/stellution.ico">
    <link rel="stylesheet" href="src/code/style.css">
    <script defer src="src/code/app.js"></script>

</head>

<body>
    <div class="header-wrapper">
        <div class="background-top"></div>
        <nav class="hidden show-on-start">
            <div class="left">
                <a href="#">
                    <div class="hidden logo stellution-logo show-on-start"></div>
                </a>
            </div>
            <div class="right">
                <a href="https://github.com/Stellution-Studios" class="hidden logo github-logo show-on-start">
                    <img src="src/content/logos/githubLogo.png" alt="Github Logo"> Github
                </a>
                <a href="https://discord.gg/7XKw6YQa76" class="hidden logo discord-logo show-on-start">
                    <img src="src/content/logos/discordLogo.png" alt="Discord Logo"> Discord
                </a>
            </div>
        </nav>

        <div class="stellution-header">
            <div class="logo-parent">
                <img src="src/content/logos/stellutionLogo.png" class="hidden logo stellution-logo"
                    alt="Stellution Logo">
            </div>
            <div class="hidden header-text show-on-start">
                <h1>Welcome to Stellution Studios!</h1>
                <h3>A studio specializing in game engines, rendering frameworks, and more.</h3>
            </div>

            <a href="#projects" class="hidden basic-button show-on-start">
                <span class="text">Our Projects</span>
                <svg class="icon" width="54" height="54" viewBox="0 0 24 24" fill="lime"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2"
                        stroke-linecap="square" stroke-linejoin="round" />
                </svg>
            </a>

            <div class="header-images">
                <img src="src/content/img/carRender.png" class="hidden show-on-start" alt="carRender">
                <img src="src/content/img/testRender.png" class="hidden show-on-start" alt="testRender">
            </div>
        </div>
    </div>
    <div id="about-us">
        <h1>About Us</h1>
        <div class="content">
            <div class="text">
                <p>Welcome to Stellution Studios, a passionate and forward-thinking development studio dedicated to
                    creating modern technologies for game development.</p>
                <p>Our focus lies in C# and .NET – we design and build rendering frameworks, engines, and tools that
                    serve as the foundation for powerful, flexible, and creative game worlds. Our systems power our
                    in-house game Stellution, while also providing a platform for continuous innovation and
                    experimentation.</p>
                <p>
                    At Stellution Studios, we believe that great games are built upon great tools. Every project we
                    develop is created with a strong focus on performance, stability, and developer experience, enabling
                    creators to bring their visions to life efficiently and intuitively.</p>
            </div>
            <img src="src/content/img/playerFemale.png" alt="playerCharacter">
        </div>
    </div>

    <div id="projects">
        <h1 style="font-size: xx-large" class="our-projects-text">Our Projects</h1>

        <div id="bliss" class="project">
            <h1 class="title hidden">
                <img src="src/content/logos/blissLogo.png" alt="blissLogo" width="64px">
                <span class="title-text">Bliss</span>
            </h1>

            <div class="content">
                <div class="text">
                    <p>Bliss is a modern, high-performance rendering framework that runs seamlessly across multiple
                        graphics APIs, including Direct3D11, Vulkan, OpenGL, Metal, and OpenGL-ES.
                    </p>
                    <p>At its core, Bliss offers an optimized SpriteBatch system for efficient rendering of textures,
                        fonts, and shapes. Its integrated Camera2D and Camera3D systems provide intuitive and precise
                        control over perspective, while the unified input system simplifies the handling of keyboard,
                        mouse, and gamepads.
                    </p>
                    <p>With built-in window management powered by SDL3 and a robust audio engine, Bliss delivers a
                        stable, flexible foundation for all kinds of graphical applications.
                    </p>
                    <p>More than just a rendering framework, Bliss serves as the technical foundation for many of our
                        systems and projects — including our in-house game engine Sparkle.
                    </p>
                </div>
                <div class="images">
                    <img src="src/content/img/blissBackgroundCode.png" width="800" class="hidden"
                        alt="blissBackgroundCode">
                    <img src="src/content/img/blissScreenshot.png" width="800" class="hidden" alt="blissScreenshot">
                </div>
            </div>
            <a href="https://mrscauthd.github.io/Bliss" class="hidden basic-button">
                <span class="text">Getting Started</span>
                <svg class="icon" width="54" height="54" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2"
                        stroke-linecap="square" stroke-linejoin="round" />
                </svg>
            </a>
        </div>

        <div id="sparkle" class="project">
            <h1 class="title hidden">
                <img src="src/content/logos/sparkleLogo.png" alt="sparkleLogo" width="64px">
                <span class="title-text">Sparkle</span>
            </h1>
            <div class="content">
                <div class="text">
                    <p>Sparkle is a fast, cross-platform game engine built in .NET 9 and C# 13, developed on top of our
                        in-house rendering framework Bliss.
                    </p>
                    <p>While Bliss provides the low-level rendering and hardware systems, Sparkle expands upon it with
                        comprehensive layers for gameplay logic, scene management, resource handling, and overall engine
                        architecture. The result is a complete, modern development environment that’s both powerful and
                        approachable.
                    </p>
                    <p>Sparkle is designed to give developers maximum freedom and efficiency — from early prototypes to
                        full-scale production. It’s modular, extensible, and built to perform reliably across multiple
                        platforms.
                    </p>
                    <p>As the core technology behind our flagship game Stellution, Sparkle represents the culmination of
                        our passion and experience — combining performance, stability, and modern software design into
                        one cohesive and powerful framework.
                    </p>
                </div>
                <div class="images">
                    <img src="src/content/img/sparkleBackgroundCode.png" width="800" class="hidden"
                        alt="sparkleBackgroundCode">
                    <img src="src/content/img/sparkleScreenshot.png" width="800" class="hidden" alt="sparkleScreenshot">
                </div>

            </div>
            <a href="https://github.com/MrScautHD/Sparkle/wiki" class="hidden basic-button">
                <span class="text">Getting Started</span>
                <svg class="icon" width="54" height="54" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2"
                        stroke-linecap="square" stroke-linejoin="round" />
                </svg>
            </a>
        </div>
    </div>


    <footer class="bottom-bar">
        <!-- <div onclick='onInfoButtonClick("Privacy")' class="hoverable-div info-button">Privacy Policy</div> -->
        <div onclick='onInfoButtonClick("Imprint")' class="hoverable-div info-button">Imprint</div>
        <div onclick='onInfoButtonClick("About")' class="hoverable-div info-button">About</div>
    </footer>

    <div class="background-blur"></div>

    <div class="info-container">
        <div class="info imprint">
            <svg height="40" width="40" xmlns="http://www.w3.org/2000/svg" onclick='onInfoCloseButtonClick()'
                class="close-button">
                <line x1="10" y1="10" x2="30" y2="30" />
                <line x1="30" y1="10" x2="10" y2="30" />
            </svg>
            <div class="title">
                <h1>Imprint</h1>
            </div>

            <div class="category-marker">
                <h2>Service Provider</h2>
            </div>

            <div class="text-container">
                <p><span class="star-point">*</span>Elias Springer</p>
                <p><span class="star-point">*</span>Vornholz 7</p>
                <p><span class="star-point">*</span>4081 Hartkirchen</p>
                <p><span class="star-point">*</span>Austria</p>
            </div>

            <br>

            <div class="category-marker">
                <h2>Contact</h2>
            </div>

            <div class="text-container">
                <p><span class="star-point">*</span>E-mail: <a href="mailto:[email protected]">
                        [email protected]</a></p>
            </div>
        </div>
        <div class="info about">
            <svg height="40" width="40" xmlns="http://www.w3.org/2000/svg" onclick='onInfoCloseButtonClick()'
                class="close-button">
                <line x1="10" y1="10" x2="30" y2="30" />
                <line x1="30" y1="10" x2="10" y2="30" />
            </svg>
            <div class="title">
                <h1>About</h1>
            </div>

            <div class="category-marker">
                <h2>Website Developer</h2>
            </div>

            <div class="text-container">
                <p><span class="star-point">*</span>Elias Aad</p>
                <p><span class="star-point">*</span>Email: <a href="mailto:[email protected]">
                        [email protected]</a></p>
            </div>

        </div>
        <!-- <div class="info privacy-policy">
            <svg height="40" width="40" xmlns="http://www.w3.org/2000/svg" onclick='onInfoCloseButtonClick()'
                class="close-button">
                <line x1="10" y1="10" x2="30" y2="30" />
                <line x1="30" y1="10" x2="10" y2="30" />
            </svg>
            <div class="title">
                <h1>Privacy Policy</h1>
            </div>
        </div> -->
    </div>
</body>

</html>