import gradio as gr import spaces @spaces.GPU def _warmup(): # Placeholder so the Space is recognized as a ZeroGPU task. # This portfolio page is display-only and does not really use the GPU. return "ok" A = "assets/" # Each work is an ordered list of blocks rendered top-to-bottom. # Block types: ("md", text) | ("img", [paths]) | ("video", path) GRIS = [ ("md", "# Gris\n" "**Role:** Sound design · Sound synthesis · Composition · Music editing \n" "**Software:** Ableton Live, Pro Tools"), ("video", "gris.mp4"), ("md", "### Game & chapter overview\n" "*Gris* is a platform-adventure game. It follows a girl named Gris who wakes before a " "crumbling statue of a woman. She tries to sing but soon chokes up; the statue's hand " "falls apart, dropping her to the colorless land below. After landing, she keeps moving " "forward, meeting strange structures that seem to be powered by mysterious, star-like " "points of light. She can collect these lights to gain new abilities — such as turning " "into stone, or creating new constellation-like paths."), ("md", "### Opening cinematic — style design"), ("img", [A + "gris_1.png"]), ("md", "The opening cinematic uses a synth-piano timbre from Live. This timbre gives a sense of " "memory, drawing the listener into the world that follows. Compositionally it uses " "continuous, slightly irregular rhythms with a highly repetitive melody — light and " "dreamlike, tinged with a touch of melancholy."), ("md", "### Chapter 2 — Anger\n" "The second chapter, *Anger*, is one of the emotional climaxes of the story. Tempered by " "repeated sandstorms, the girl gradually grows stronger and bravely faces the challenges " "ahead."), ("img", [A + "gris_2.png", A + "gris_3.png"]), ("md", "**Visual style analysis:** The visuals are dreamy and beautiful, with fairly soft " "colors. Chapter 2's main tone is red, adding an atmosphere of struggle and tension. Most " "of the time the camera sits far from the scene. The most striking shift comes as the " "sandstorm arrives: red smoke-clouds engulf the whole scene and visibility drops rapidly."), ("md", "**Sound style design:** The overall design holds to a *\"simple but not simplistic\"* " "style — it must neither break the quiet, harmonious atmosphere nor lack detail and feel " "crude. This remake carries more contrast than the original. In everyday traversal the " "style is gentler and more dreamlike, while at moments of growth — the sandstorm, or " "obtaining the \"box\" ability — it becomes more deeply affecting.\n\n" "**(1) Footsteps:** Must suit different materials. Loudness fairly low, mid and high " "frequencies attenuated, reverb and delay added as appropriate to match the open, distant " "visuals. Indoor and outdoor handling differ — indoor footsteps slightly more prominent.\n\n" "**(2) Ambience:** Subtle point sources woven in, such as the fine friction of sand or " "tiny rock/metal drops (depending on the environment). In the temple, low frequencies are " "moderately boosted, and point sources shift accordingly — for example bell sounds that " "move continuously with the player's position.\n\n" "**(3) Effects:** Mainly synthesis-based. Because effect sounds are often tied to " "\"achievement,\" they need a clear sense of positive feedback, with chorus added to " "create a feeling of holiness.\n\n" "**\\* Sandstorm:** A clear \"negative-feedback\" effect, mainly synthesis-based, richly " "layered — randomly synthesized notes (mimicking the texture of sand) and extremely " "low-frequency wind. A whisper element is inserted, like the low murmur of a demon.\n\n" "*Keywords: brave, vast, contrast, quiet, dreamlike, beautiful, sacred.*"), ("md", "### Depression (Chapter 4)\n" "*Depression* is the fourth chapter of *Gris*. Its theme color is blue, symbolizing the " "saddest stage. In the first half the player collects stars; after gathering six, they " "place them into a shell — which is actually a sea turtle, now revived. The turtle dives " "into the dim abyss, and the light it emits becomes a guide for the player to follow. The " "player then falls into the plight of being chased by an eel; after the chase they quickly " "ascend and swim away, and are finally rescued by the turtle, swimming toward a new area — " "a storyline that pushes the emotion to its climax."), ("img", [A + "gris_4.png"]), ("md", "**Visual style analysis:** The overall palette is dark, and brightness varies markedly " "with water depth. Faint light sources dot the scene, like starlight. When rescued by the " "turtle, the palette turns dreamlike, and the scene shifts to an open area full of glowing " "jellyfish."), ("md", "**Sound style design:** This section draws on ambient-music composition, using " "synthesizers to build multiple atmospheric layers. As the visual colors shift between " "light and dark, the number of layers rises or falls, giving a distinctly varied " "experience. The darker the scene, the more low frequency, and the more pronounced the " "dissonant, conflicting, ominous atmosphere; effects and timbres lean unreal and surreal.\n\n" "The lighting's sound design is gentler, like twinkling starlight, forming a clear " "contrast with the background. The turtle's appearance is where emotion erupts — but not " "too violently; instead the sound's mass gently expands, giving a feeling of \"sudden " "clarity.\" Jellyfish and bubbles have a wide sound field with delay processing, and " "major-key chords with an orchestral-like timbre add drama and grandeur.\n\n" "For the eel, the focus is the \"bite\" — the very source of conflict in the story. The " "eel is moderate in size but still threatening, sitting in a vast body of water, so its " "sound is given large reverb with appropriately boosted low frequencies."), ] VALLEY = [ ("md", "# The Valley of Ancient\n" "**Role:** Sound design · Sound synthesis · Wwise engineering · Part of the UE5 audio " "hookup \n" "**Software:** Reaper, Ableton Live, Unreal Engine 5, Wwise"), ("video", "thevalleyofancient-002.mp4"), ("md", "## 1. Style design\n\n**Visual style:**"), ("img", [A + "valley_1.png", A + "valley_2.png"]), ("md", "The visuals split into two parts: before entering the portal, an ordinary valley scene; " "after entering, a dark \"Dark World\" scene. The visuals are grounded in an ancient " "valley with an epic, grand style, but most elements are real — only the Boss is entirely " "fictional. The player's ultimate mission is to overthrow the Boss, which is enormous, " "with red light glowing from its head and an explosive effect."), ("md", "**Sound style design:** The style should be realistic overall, adding non-realistic " "elements only when the story reaches specific states. Narratively, the sound should " "convey danger, drawing the player to immerse in this perilous environment; and since the " "setting is \"ancient,\" it should evoke a fairly primal atmosphere. The Boss is large " "with a hard body, so combat sound needs a clear sense of impact, forming a sharp " "contrast with the player. At the key moments of the Boss's appearance and defeat, " "synthesis-based ambient sounds are added to stir emotion and underscore the Boss's " "identity.\n\n" "*Time & place:* an ancient valley, fairly dry and lifeless. \n" "*Emotion:* shrouded in crisis — fear alongside a firm resolve to complete the mission. \n" "*Off-screen & living elements:* creatures suited to an \"ancient valley\" scene.\n\n" "**Sound interaction design:** When the Boss uses its fire-breathing skill, the position " "of the fire sound shifts accordingly as the player runs."), ("md", "## 2. Sound presentation & specifications\n\n" "**Sound field:** The target platform is a home-PC playback system, so only a stereo " "field is considered.\n\n" "**Ambience:**\n" "- *Background (BG):* fairly wide; reserves the two sides and the center of the field for " "3D sounds, limiting width and controlling Center.\n" "- *Ordinary 3D point sources:* appear in the mid/back ground, avoiding the center and " "both ends.\n" "- *Special 3D point sources:* appear at both ends of the field, with a certain height " "setting.\n\n" "**Skill & motion sounds:** mostly at the center of the field; some special effects (such " "as the fire-breath) change with the player's position.\n\n" "**Frequency response:**\n" "- *Ambience:* to preserve the impact of key skills, low-cut below 63Hz. The Dark World " "background sits around 125Hz; the ordinary environment around 200Hz. Point sources are " "more flexible, mainly mid-high above 500Hz, some reaching 3–5kHz.\n" "- *Footsteps:* characteristic band around 500Hz.\n" "- *Skill sounds:* wide bandwidth, emphasizing roughly 50–300Hz to strengthen impact.\n\n" "**Dynamic mixing:** In the two key animations — the Boss's entrance and defeat — " "sidechain compression is applied. As the scene switches to the dark world, the bands of " "wind and creature sounds descend to a degree."), ("img", [A + "valley_3.jpg", A + "valley_4.jpg", A + "valley_5.png"]), ] def render(blocks): for kind, payload in blocks: if kind == "md": gr.Markdown(payload) elif kind == "video": gr.Video(payload, show_label=False) elif kind == "img": if len(payload) == 1: gr.Image(payload[0], show_label=False) else: gr.Gallery(payload, show_label=False, columns=len(payload), height="auto", object_fit="contain") with gr.Blocks(title="Sound Design Portfolio") as demo: gr.Markdown("# 🎧 Sound Design Portfolio\nTwo game sound-design projects — full design " "documents with the original visuals.") with gr.Tabs(): with gr.Tab("Gris"): render(GRIS) with gr.Tab("The Valley of Ancient"): render(VALLEY) if __name__ == "__main__": demo.launch(theme=gr.themes.Soft())