diff --git a/anims/Adobe After Effects Auto-Speichern/anims-workfiles Auto-Speichern 1.aep b/anims/Adobe After Effects Auto-Speichern/anims-workfiles Auto-Speichern 1.aep new file mode 100644 index 0000000..5abe56a Binary files /dev/null and b/anims/Adobe After Effects Auto-Speichern/anims-workfiles Auto-Speichern 1.aep differ diff --git a/anims/anims-workfiles.aep b/anims/anims-workfiles.aep new file mode 100644 index 0000000..2a81fbf Binary files /dev/null and b/anims/anims-workfiles.aep differ diff --git a/anims/smil/soundwave-orange.svg b/anims/smil/soundwave-orange.svg new file mode 100644 index 0000000..fb2fb4a --- /dev/null +++ b/anims/smil/soundwave-orange.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/anims/soundwave.svg b/anims/soundwave.svg new file mode 100644 index 0000000..94eb03d --- /dev/null +++ b/anims/soundwave.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/audio/bounce_launcher.mp3 b/audio/bounce_launcher.mp3 new file mode 100644 index 0000000..ce287e4 Binary files /dev/null and b/audio/bounce_launcher.mp3 differ diff --git a/audio/corrupted_filez.mp3 b/audio/corrupted_filez.mp3 new file mode 100644 index 0000000..e7dcec0 Binary files /dev/null and b/audio/corrupted_filez.mp3 differ diff --git a/audio/creepy_old_textures.mp3 b/audio/creepy_old_textures.mp3 new file mode 100644 index 0000000..7747b0f Binary files /dev/null and b/audio/creepy_old_textures.mp3 differ diff --git a/audio/usb_keylog_device.mp3 b/audio/usb_keylog_device.mp3 new file mode 100644 index 0000000..b1921b7 Binary files /dev/null and b/audio/usb_keylog_device.mp3 differ diff --git a/eyeye.html b/eyeye.html new file mode 100644 index 0000000..9e7d4ba --- /dev/null +++ b/eyeye.html @@ -0,0 +1,180 @@ + + + + + + GC Universe Projects + + + + + + + + + +
+ +
+ +

eyeye Studio

+ +
+ +

An evolving marketing agency specialized in generative AI. More to find at eyeye.studio

+
+

I work closely together with:

+ +
+ +
+
+
eyeye SUMMER 2025
+

05/2025 / FFM

+

Strong animated cases and concepts for the upcoming summer! ☀

+ +
+ +
+ + +

REEL

+
+
+ + +
+
+
FOREVER
+

04/2025 / FFM

+

Can an AI-generated film make you smell a fragrance? We did have a go at it.

+ +
+ +
+ + +

CAMPAIGN FILM

+
+
+ +
+
+
Electric Root
+

04/2025 / FFM

+

eyeye sowed seeds and harvested flowers.

+ +
+ +
+ + +

REEL

+
+
+ + + + + + +
+ +
+
+
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/fonts/Geist-Black.ttf b/fonts/Geist-Black.ttf new file mode 100644 index 0000000..1e12d25 Binary files /dev/null and b/fonts/Geist-Black.ttf differ diff --git a/fonts/Geist-Bold.ttf b/fonts/Geist-Bold.ttf new file mode 100644 index 0000000..5625c00 Binary files /dev/null and b/fonts/Geist-Bold.ttf differ diff --git a/fonts/Geist-Light.ttf b/fonts/Geist-Light.ttf new file mode 100644 index 0000000..21adca0 Binary files /dev/null and b/fonts/Geist-Light.ttf differ diff --git a/fonts/Geist-Medium.ttf b/fonts/Geist-Medium.ttf new file mode 100644 index 0000000..90d2c71 Binary files /dev/null and b/fonts/Geist-Medium.ttf differ diff --git a/fonts/Geist-Regular.ttf b/fonts/Geist-Regular.ttf new file mode 100644 index 0000000..a10d58a Binary files /dev/null and b/fonts/Geist-Regular.ttf differ diff --git a/fonts/Geist-SemiBold.ttf b/fonts/Geist-SemiBold.ttf new file mode 100644 index 0000000..5732da7 Binary files /dev/null and b/fonts/Geist-SemiBold.ttf differ diff --git a/fonts/Geist-Thin.ttf b/fonts/Geist-Thin.ttf new file mode 100644 index 0000000..adf7db7 Binary files /dev/null and b/fonts/Geist-Thin.ttf differ diff --git a/fonts/Geist-UltraBlack.ttf b/fonts/Geist-UltraBlack.ttf new file mode 100644 index 0000000..2320b8a Binary files /dev/null and b/fonts/Geist-UltraBlack.ttf differ diff --git a/fonts/Geist-UltraLight.ttf b/fonts/Geist-UltraLight.ttf new file mode 100644 index 0000000..208a1ff Binary files /dev/null and b/fonts/Geist-UltraLight.ttf differ diff --git a/fonts/Hermarkkita.ttf b/fonts/Hermarkkita.ttf new file mode 100644 index 0000000..a95c396 Binary files /dev/null and b/fonts/Hermarkkita.ttf differ diff --git a/gamescoin.html b/gamescoin.html new file mode 100644 index 0000000..57a2d39 --- /dev/null +++ b/gamescoin.html @@ -0,0 +1,225 @@ + + + + + + Gamescoin Projects + + + + + + + + + +
+ +
+ +

GAMESCOIN

+ +
+

I worked closely together with:

+ +
+ +
+
+

TOKEN GENERATION EVENT

+

11/2023 / DUBAI

+

The long-awaited Gamescoin crypto token - launched and celebrated with a big bang party at Mandarin Oriental Dubai. ✨

+ +
+ +
+ + +

DOCUMENTARY

+ +
+
+ +
+ +
+
KEYVISUAL
+

Had the chance to play a central role in the development of the keyvisual. Made in Blender.

+ +
+ +
+ + +
+
+ +
+
+
"ROCKETLAUNCH"
PORTAL REVEAL
+

The final launch.

+
+ +
+ +
+
+ +
+
+
PRESSWALL
+

Keyvisual with partner logos. Wall print. +

+
+ + + + +
+
+ + + +
+
+
EVENT CONCEPT
+

Theme: "Space Disco".
Featuring keyvisual-shaped ice cubes and entertainment from another planet.

+
+ +
+ + + +
+ +
+ + +
+ + +
+
+ +
+
+ +
+
+ +
+
+
CORPORATE DESIGN
ANIMATION
+

Animated design and style showcase.

+
+ +
+ +
+
+ + + + + +
+ +
+
+
+ +
+ + + + + + + + \ No newline at end of file diff --git a/gc-universe.html b/gc-universe.html new file mode 100644 index 0000000..c5f56c0 --- /dev/null +++ b/gc-universe.html @@ -0,0 +1,238 @@ + + + + + + GC Universe Projects + + + + + + + + + +
+ +
+ +

GC UNIVERSE

+ +
+ +

Digital Web 3.0 experience.

+
+

I worked closely together with:

+ +
+ +
+
+
WEBSITE DESIGN
+

04/2024 / FFM

+

Animated website showcase. Was involved in the concept, design and realisation from start to finish.

+ +
+ +
+ + + +
+
+ +
+ +
+
ELEMENTS
+

Elements are the stakable foundation of the GC Universe. Made in Blender.

+
+ +
+ + +
+
+ +
+
+
STARS
+

Digital NFT Products, serving as an exclusive early access to the G2G economy.
Made in Blender.

+
+ +
+ +
+
+ +
+
+
ICONS
+

Voxel icons

+
+
+ +
+ +

Logo

+
+
+ +

Flavicon

+
+ +
+
+ + + +
+
+
STAR MAP
+

Graphics for interactive space adventures. 🚀
Assisted the development of a playable prototype which was presented at Gamescom 2024.

+
+ +
+ +
+ +
+ + +

PROTOTYPE DEMO

+
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ + + + + + + +
+ +
+
+
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/img/bureau.png b/img/bureau.png new file mode 100644 index 0000000..dec7020 Binary files /dev/null and b/img/bureau.png differ diff --git a/img/electronicz-for-kidz/cover.png b/img/electronicz-for-kidz/cover.png new file mode 100644 index 0000000..a19c988 Binary files /dev/null and b/img/electronicz-for-kidz/cover.png differ diff --git a/img/friends/adem-yildirmaz.jpg b/img/friends/adem-yildirmaz.jpg new file mode 100644 index 0000000..57c957e Binary files /dev/null and b/img/friends/adem-yildirmaz.jpg differ diff --git a/img/friends/fynn-boettcher.jpg b/img/friends/fynn-boettcher.jpg new file mode 100644 index 0000000..23265af Binary files /dev/null and b/img/friends/fynn-boettcher.jpg differ diff --git a/img/friends/justus-jonas.jpg b/img/friends/justus-jonas.jpg new file mode 100644 index 0000000..3cda764 Binary files /dev/null and b/img/friends/justus-jonas.jpg differ diff --git a/img/friends/kollektiv+icon.png b/img/friends/kollektiv+icon.png new file mode 100644 index 0000000..2822c60 Binary files /dev/null and b/img/friends/kollektiv+icon.png differ diff --git a/img/friends/paul-reh.jpg b/img/friends/paul-reh.jpg new file mode 100644 index 0000000..5e4dc50 Binary files /dev/null and b/img/friends/paul-reh.jpg differ diff --git a/img/gamescoin/keymodel1.png b/img/gamescoin/keymodel1.png new file mode 100644 index 0000000..c08a7f8 Binary files /dev/null and b/img/gamescoin/keymodel1.png differ diff --git a/img/gamescoin/keymodel2.png b/img/gamescoin/keymodel2.png new file mode 100644 index 0000000..5baccdd Binary files /dev/null and b/img/gamescoin/keymodel2.png differ diff --git a/img/gamescoin/keyvisual variants/blue_on_white.jpg b/img/gamescoin/keyvisual variants/blue_on_white.jpg new file mode 100644 index 0000000..100eb98 Binary files /dev/null and b/img/gamescoin/keyvisual variants/blue_on_white.jpg differ diff --git a/img/gamescoin/keyvisual variants/keyvisual.png b/img/gamescoin/keyvisual variants/keyvisual.png new file mode 100644 index 0000000..88de245 Binary files /dev/null and b/img/gamescoin/keyvisual variants/keyvisual.png differ diff --git a/img/gamescoin/keyvisual variants/weiß_auf_glitter.jpg b/img/gamescoin/keyvisual variants/weiß_auf_glitter.jpg new file mode 100644 index 0000000..c7d243a Binary files /dev/null and b/img/gamescoin/keyvisual variants/weiß_auf_glitter.jpg differ diff --git a/img/gamescoin/keyvisual variants/white.jpg b/img/gamescoin/keyvisual variants/white.jpg new file mode 100644 index 0000000..1b7b50b Binary files /dev/null and b/img/gamescoin/keyvisual variants/white.jpg differ diff --git a/img/gamescoin/keyvisual variants/white_on_blue.jpg b/img/gamescoin/keyvisual variants/white_on_blue.jpg new file mode 100644 index 0000000..a7855c1 Binary files /dev/null and b/img/gamescoin/keyvisual variants/white_on_blue.jpg differ diff --git a/img/gamescoin/keyvisual.jpg b/img/gamescoin/keyvisual.jpg new file mode 100644 index 0000000..c2a827d Binary files /dev/null and b/img/gamescoin/keyvisual.jpg differ diff --git a/img/gamescoin/lobster.png b/img/gamescoin/lobster.png new file mode 100644 index 0000000..49389dc Binary files /dev/null and b/img/gamescoin/lobster.png differ diff --git a/img/gamescoin/presswall_tge.jpg b/img/gamescoin/presswall_tge.jpg new file mode 100644 index 0000000..7ff7ee2 Binary files /dev/null and b/img/gamescoin/presswall_tge.jpg differ diff --git a/img/gcu/flavicon.png b/img/gcu/flavicon.png new file mode 100644 index 0000000..783a9d9 Binary files /dev/null and b/img/gcu/flavicon.png differ diff --git a/img/gcu/gcu.png b/img/gcu/gcu.png new file mode 100644 index 0000000..2adf1d4 Binary files /dev/null and b/img/gcu/gcu.png differ diff --git a/img/gcu/star-map/Desktop_01-1.jpg b/img/gcu/star-map/Desktop_01-1.jpg new file mode 100644 index 0000000..d6cf060 Binary files /dev/null and b/img/gcu/star-map/Desktop_01-1.jpg differ diff --git a/img/gcu/star-map/Desktop_01-1.png b/img/gcu/star-map/Desktop_01-1.png new file mode 100644 index 0000000..1200d8b Binary files /dev/null and b/img/gcu/star-map/Desktop_01-1.png differ diff --git a/img/gcu/star-map/Desktop_01-2.jpg b/img/gcu/star-map/Desktop_01-2.jpg new file mode 100644 index 0000000..462ea65 Binary files /dev/null and b/img/gcu/star-map/Desktop_01-2.jpg differ diff --git a/img/gcu/star-map/Desktop_01-2.png b/img/gcu/star-map/Desktop_01-2.png new file mode 100644 index 0000000..3daac3d Binary files /dev/null and b/img/gcu/star-map/Desktop_01-2.png differ diff --git a/img/gcu/star-map/Desktop_01.jpg b/img/gcu/star-map/Desktop_01.jpg new file mode 100644 index 0000000..9b09d21 Binary files /dev/null and b/img/gcu/star-map/Desktop_01.jpg differ diff --git a/img/gcu/star-map/Desktop_01.png b/img/gcu/star-map/Desktop_01.png new file mode 100644 index 0000000..df1d754 Binary files /dev/null and b/img/gcu/star-map/Desktop_01.png differ diff --git a/img/gcu/star-map/Desktop_Galaxy-1.jpg b/img/gcu/star-map/Desktop_Galaxy-1.jpg new file mode 100644 index 0000000..c8378d9 Binary files /dev/null and b/img/gcu/star-map/Desktop_Galaxy-1.jpg differ diff --git a/img/gcu/star-map/Desktop_Galaxy-1.png b/img/gcu/star-map/Desktop_Galaxy-1.png new file mode 100644 index 0000000..22c13e1 Binary files /dev/null and b/img/gcu/star-map/Desktop_Galaxy-1.png differ diff --git a/img/gcu/star-map/Desktop_Galaxy.jpg b/img/gcu/star-map/Desktop_Galaxy.jpg new file mode 100644 index 0000000..a689488 Binary files /dev/null and b/img/gcu/star-map/Desktop_Galaxy.jpg differ diff --git a/img/gcu/star-map/Desktop_Galaxy.png b/img/gcu/star-map/Desktop_Galaxy.png new file mode 100644 index 0000000..aee91da Binary files /dev/null and b/img/gcu/star-map/Desktop_Galaxy.png differ diff --git a/img/gcu/star-map/Galaxy_vs02.jpg b/img/gcu/star-map/Galaxy_vs02.jpg new file mode 100644 index 0000000..3345ead Binary files /dev/null and b/img/gcu/star-map/Galaxy_vs02.jpg differ diff --git a/img/gcu/star-map/Galaxy_vs02.png b/img/gcu/star-map/Galaxy_vs02.png new file mode 100644 index 0000000..bba637b Binary files /dev/null and b/img/gcu/star-map/Galaxy_vs02.png differ diff --git a/img/gcu/star-map/My_Planet.jpg b/img/gcu/star-map/My_Planet.jpg new file mode 100644 index 0000000..b998b67 Binary files /dev/null and b/img/gcu/star-map/My_Planet.jpg differ diff --git a/img/gcu/star-map/My_Planet.png b/img/gcu/star-map/My_Planet.png new file mode 100644 index 0000000..4e74499 Binary files /dev/null and b/img/gcu/star-map/My_Planet.png differ diff --git a/img/gcu/star-map/Solorsystem_Planet.jpg b/img/gcu/star-map/Solorsystem_Planet.jpg new file mode 100644 index 0000000..0d300e1 Binary files /dev/null and b/img/gcu/star-map/Solorsystem_Planet.jpg differ diff --git a/img/gcu/star-map/Solorsystem_Planet.png b/img/gcu/star-map/Solorsystem_Planet.png new file mode 100644 index 0000000..41057d5 Binary files /dev/null and b/img/gcu/star-map/Solorsystem_Planet.png differ diff --git a/img/gcu/stars.png b/img/gcu/stars.png new file mode 100644 index 0000000..7156106 Binary files /dev/null and b/img/gcu/stars.png differ diff --git a/img/icons/pause.png b/img/icons/pause.png new file mode 100644 index 0000000..2f03c5a Binary files /dev/null and b/img/icons/pause.png differ diff --git a/img/icons/play.png b/img/icons/play.png new file mode 100644 index 0000000..3597f99 Binary files /dev/null and b/img/icons/play.png differ diff --git a/img/logos/YOURE-secondary.png b/img/logos/YOURE-secondary.png new file mode 100644 index 0000000..681fa2e Binary files /dev/null and b/img/logos/YOURE-secondary.png differ diff --git a/img/logos/brikk-rocks-black.png b/img/logos/brikk-rocks-black.png new file mode 100644 index 0000000..53a63d1 Binary files /dev/null and b/img/logos/brikk-rocks-black.png differ diff --git a/img/logos/brikk-rocks-white.png b/img/logos/brikk-rocks-white.png new file mode 100644 index 0000000..c943ba6 Binary files /dev/null and b/img/logos/brikk-rocks-white.png differ diff --git a/img/logos/eyeye.png b/img/logos/eyeye.png new file mode 100644 index 0000000..fe5eaa2 Binary files /dev/null and b/img/logos/eyeye.png differ diff --git a/img/logos/gamescoin.png b/img/logos/gamescoin.png new file mode 100644 index 0000000..82266c1 Binary files /dev/null and b/img/logos/gamescoin.png differ diff --git a/img/logos/gcu.png b/img/logos/gcu.png new file mode 100644 index 0000000..9b897f0 Binary files /dev/null and b/img/logos/gcu.png differ diff --git a/img/logos/stoned-rocks.png b/img/logos/stoned-rocks.png new file mode 100644 index 0000000..aa977fa Binary files /dev/null and b/img/logos/stoned-rocks.png differ diff --git a/img/logos/youre.png b/img/logos/youre.png new file mode 100644 index 0000000..8d4df0f Binary files /dev/null and b/img/logos/youre.png differ diff --git a/img/me/me-header-unc.jpg b/img/me/me-header-unc.jpg new file mode 100644 index 0000000..791693b Binary files /dev/null and b/img/me/me-header-unc.jpg differ diff --git a/img/me/me-header.jpg b/img/me/me-header.jpg new file mode 100644 index 0000000..e97a12b Binary files /dev/null and b/img/me/me-header.jpg differ diff --git a/img/me/me.jpg b/img/me/me.jpg new file mode 100644 index 0000000..5109496 Binary files /dev/null and b/img/me/me.jpg differ diff --git a/img/me/me.mp4 b/img/me/me.mp4 new file mode 100644 index 0000000..55e0fd7 Binary files /dev/null and b/img/me/me.mp4 differ diff --git a/img/sketches/bureau.png b/img/sketches/bureau.png new file mode 100644 index 0000000..6b8acb9 Binary files /dev/null and b/img/sketches/bureau.png differ diff --git a/img/sketches/chain.png b/img/sketches/chain.png new file mode 100644 index 0000000..30f6129 Binary files /dev/null and b/img/sketches/chain.png differ diff --git a/img/sketches/swissknife.png b/img/sketches/swissknife.png new file mode 100644 index 0000000..8339236 Binary files /dev/null and b/img/sketches/swissknife.png differ diff --git a/img/sketches/torch.png b/img/sketches/torch.png new file mode 100644 index 0000000..5bc7b57 Binary files /dev/null and b/img/sketches/torch.png differ diff --git a/img/thumbnails/gc universe items/crystal.png b/img/thumbnails/gc universe items/crystal.png new file mode 100644 index 0000000..f6fb8ce Binary files /dev/null and b/img/thumbnails/gc universe items/crystal.png differ diff --git a/img/thumbnails/gc universe items/helium2.png b/img/thumbnails/gc universe items/helium2.png new file mode 100644 index 0000000..6da5741 Binary files /dev/null and b/img/thumbnails/gc universe items/helium2.png differ diff --git a/img/thumbnails/gc universe items/helium3.png b/img/thumbnails/gc universe items/helium3.png new file mode 100644 index 0000000..bfe152a Binary files /dev/null and b/img/thumbnails/gc universe items/helium3.png differ diff --git a/img/thumbnails/gc universe items/helium4.png b/img/thumbnails/gc universe items/helium4.png new file mode 100644 index 0000000..1b5e5bf Binary files /dev/null and b/img/thumbnails/gc universe items/helium4.png differ diff --git a/img/thumbnails/gc universe items/hydrogen1.png b/img/thumbnails/gc universe items/hydrogen1.png new file mode 100644 index 0000000..5526b2d Binary files /dev/null and b/img/thumbnails/gc universe items/hydrogen1.png differ diff --git a/img/thumbnails/gc universe items/hydrogen2.png b/img/thumbnails/gc universe items/hydrogen2.png new file mode 100644 index 0000000..f444f9c Binary files /dev/null and b/img/thumbnails/gc universe items/hydrogen2.png differ diff --git a/img/thumbnails/unverse.png b/img/thumbnails/unverse.png new file mode 100644 index 0000000..784489e Binary files /dev/null and b/img/thumbnails/unverse.png differ diff --git a/img/youre/11.jpg b/img/youre/11.jpg new file mode 100644 index 0000000..0103256 Binary files /dev/null and b/img/youre/11.jpg differ diff --git a/img/youre/11.png b/img/youre/11.png new file mode 100644 index 0000000..a2cf554 Binary files /dev/null and b/img/youre/11.png differ diff --git a/img/youre/SaturnRakete.jpg b/img/youre/SaturnRakete.jpg new file mode 100644 index 0000000..48976a1 Binary files /dev/null and b/img/youre/SaturnRakete.jpg differ diff --git a/img/youre/aeroplane.jpg b/img/youre/aeroplane.jpg new file mode 100644 index 0000000..b3894eb Binary files /dev/null and b/img/youre/aeroplane.jpg differ diff --git a/img/youre/arrangement_space_casino.jpg b/img/youre/arrangement_space_casino.jpg new file mode 100644 index 0000000..317ced1 Binary files /dev/null and b/img/youre/arrangement_space_casino.jpg differ diff --git a/img/youre/flame_sprite5.gif b/img/youre/flame_sprite5.gif new file mode 100644 index 0000000..a9b28f6 Binary files /dev/null and b/img/youre/flame_sprite5.gif differ diff --git a/img/youre/flame_sprite6.gif b/img/youre/flame_sprite6.gif new file mode 100644 index 0000000..87c2b57 Binary files /dev/null and b/img/youre/flame_sprite6.gif differ diff --git a/img/youre/pixel-revolution_final.jpg b/img/youre/pixel-revolution_final.jpg new file mode 100644 index 0000000..e2c4bbc Binary files /dev/null and b/img/youre/pixel-revolution_final.jpg differ diff --git a/img/youre/space-ship.png b/img/youre/space-ship.png new file mode 100644 index 0000000..6cafd9a Binary files /dev/null and b/img/youre/space-ship.png differ diff --git a/img/youre/space_skating_iss_groß.png b/img/youre/space_skating_iss_groß.png new file mode 100644 index 0000000..3bb2092 Binary files /dev/null and b/img/youre/space_skating_iss_groß.png differ diff --git a/imprint.html b/imprint.html new file mode 100644 index 0000000..4295093 --- /dev/null +++ b/imprint.html @@ -0,0 +1,122 @@ + + + + + + Imprint + + + + + + + + + + +
+

Impressum / Legal Notice

+

Angaben gemäß § 5 TMG / Information pursuant to § 5 TMG

+

Mark Hartmann

+

Rensbachstr. 3f / 57080 Siegen
mark@brikk.rocks

+

Haftungsausschluss / Disclaimer

+
+

Diese Seite dient ausschließlich der Präsentation persönlicher Projekte. Sie verfolgt keine kommerziellen Zwecke.

+

This website is solely for showcasing personal projects. It has no commercial intent.

+ BACK TO MAIN PAGE + +
+
+ +
+
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..bc1c780 --- /dev/null +++ b/index.html @@ -0,0 +1,466 @@ + + + + + + + MARK HARTMANN | 3D/MOTION/GRAPHICS + + + + + + + + + + + +
+ +
+ + + +
+ +
+

MARK HARTMANN

+

3D/Motion/Graphics

+
+
+ + + + + +
+ + + +
+ +
+ + +
+
+
+ +

SUMMER
2025

+ + +
+ + + + +
+
+ + + + + + +
+ +
+
+ +

GC
UNIVERSE
DESIGNS

+ + +
+ + + + +
+
+
+ +

GAMESCOM
DOCUMENTATION
2024

+ + +
+ + + + + +
+
+
+ +

TOKEN
GENERATION
EVENT

+ + +
+ +
+ + + + +
+

MORE PROJECTS:

+ +
+ + + + +
+
+ + + +
+ +
+

ALSO KNOWN AS

+
+

MARK
HARTMANN

+
+

BRIKK

+
+
+
+
+
+
MEDIA
DESIGNER
@YOURE
GAMES
+ + +
+ +
+ +
+
+

I work on crazy, unseen projects with creative professionals since 2020.

+

Continuously learning and adapting to ensure + state of art quality, + integrity and zeitgeist.

+
+ +
+
+
+
+ LinkedIn + Instagram +
+
+ + +49 160 965 58 365 + mark@brikk.rocks +
+
+
+ + + +
+
+
SWISS KNIFE
SKILLSET
+

3D/Motion/Graphics

+
+

Definitely NOT an expert in:

+ +
+
+
+ +
+
+ +
+ +
+
Scriptflow +
+
Werkstudent Digital Design
+
Social Media
Motion Design
3D Art
Web Design
Content
+
Nov 2025 - NOW
+
+ +
+
eyeye Studio
+
AI Video Producer
+
Generative AI
Motion Design
Videography
Social Media
+
Apr 2025 - Jun 2025
+
+ +
+
YOURE Games +

MASSIVE LINX / LOOTBOY / GAMESCOIN
GC UNIVERSE / AIGHT

+ +
+
Media Designer
+
Branding
Motion Design
3D Art
Videography
Web Design
Concept
+
Sep 2023 - Jun 2025
+
+ + +
+
Kollektiv+
+
Web Designer
+
UI/UX-Design
Wordpress
+
Nov 2024 - Feb 2025
+
+ +
+
Studioline
Photography
+
Photographer
+
Photography
Lighting Setup
Print Technology
Studio Management
+
Jun 2023 - Aug 2023
+
+ +
+
Invers GmbH
+
Media Designer
+
Motion Design
3D Art
Videography
Concept
+
Oct 2022 - Feb 2023
+
+ +
+
hype.media
Marketing Gruppe
+
Media Designer
+
Google Ads
Motion Design
3D Art
Videography
Web Design
Concept
+
Aug 2020 - Aug 2022
+
+
+ + + +

QUALIFICATIONS

+ + + +
+
+ + + +
+
+

THE ART OF
REMAINING
BALANCE .. +

+

Ratios.
Blank Space.
Timing.
+

+
+ +
+

Identity.
Boldness.
Money.

+ +

+

.. WHILE
BREAKING +
THE RULES.

+
+ +
+ + + +
+

Friends of BRIKK

+

Explore my network of great creatives.

+ +
+ +
+ +
+
+

FYNN BOETTCHER

+

Photography / E-Commerce

+
+ + + + +
+
+ +
+

BRYAN REINSCH

+

Art Director / Photography / Cinema

+
+ + + + + +
+ +
+ +
+

KOLLEKTIV +

+

Art Collective

+
+ + + + + +
+ +
+ +
+

JUSTUS PECH

+

Branding / Visual Communication

+
+ + + + +
+ +
+
+

PAUL REH

+

Cinema / Design / Animation

+
+ + + +
+ +
+
+

ADEM YILDIRMAZ

+

Creative Activist / Painting / Sculpting

+
+ + + +
+
+ + + + + +
+ +
+
+
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js new file mode 100644 index 0000000..2708dc8 --- /dev/null +++ b/scripts/script.js @@ -0,0 +1,228 @@ +console.log("script.js wurde geladen!"); + +document.addEventListener("DOMContentLoaded", () => { + let audioPlayer = document.getElementById("audioPlayer"); + + // Falls das Audio-Element nicht existiert (z. B. auf Unterseiten), erstelle es dynamisch + if (!audioPlayer) { + audioPlayer = document.createElement("audio"); + audioPlayer.id = "audioPlayer"; + document.body.appendChild(audioPlayer); + } + + const playMusicButton = document.getElementById("playMusic"); + const menuPlayPauseButton = document.getElementById("menuPlayPause"); + const soundwaveButton = document.getElementById("soundwaveButton"); + const menu = document.getElementById("menu"); + const progressSlider = document.getElementById("progressSlider"); + const trackButtons = document.querySelectorAll(".track"); + const playPauseButton = document.querySelector(".play-pause"); + const prevButton = document.querySelector(".prev"); + const nextButton = document.querySelector(".next"); + const header = document.querySelector("header"); + + let currentIndex = 0; + let dotInterval; + + /** 🎵 MUSIK SPEICHERN & WIEDERHERSTELLEN **/ + if (sessionStorage.getItem("audioSrc")) { + audioPlayer.src = sessionStorage.getItem("audioSrc"); + audioPlayer.currentTime = parseFloat(sessionStorage.getItem("audioTime")) || 0; + if (sessionStorage.getItem("audioPlaying") === "true") { + audioPlayer.play(); + } + } else if (!audioPlayer.src) { + audioPlayer.src = "audio/bounce_launcher.mp3"; // Standard-Track nur setzen, wenn kein Track gespeichert ist + } + + audioPlayer.addEventListener("timeupdate", () => { + sessionStorage.setItem("audioTime", audioPlayer.currentTime); + }); + + audioPlayer.addEventListener("play", () => { + sessionStorage.setItem("audioSrc", audioPlayer.src); + sessionStorage.setItem("audioPlaying", "true"); + }); + + audioPlayer.addEventListener("pause", () => { + sessionStorage.setItem("audioPlaying", "false"); + }); + + /** 🎚️ Fortschrittsleiste **/ + if (progressSlider) { + audioPlayer.addEventListener("timeupdate", () => { + if (audioPlayer.duration) { + let progressPercent = (audioPlayer.currentTime / audioPlayer.duration) * 100; + progressSlider.value = progressPercent; + progressSlider.style.background = `linear-gradient(to right, var(--secondary-color) ${progressPercent}%, #555 ${progressPercent}%)`; + } + }); + + progressSlider.addEventListener("input", () => { + let seekTime = (progressSlider.value / 100) * audioPlayer.duration; + audioPlayer.currentTime = seekTime; + }); + } + + /** 🎛️ Play/Pause-Icons aktualisieren **/ + function updatePlayPauseIcon() { + let playIcon = "img/icons/play.png"; + let pauseIcon = "img/icons/pause.png"; + + let playImg = `Play`; + let pauseImg = `Pause`; + + if (!audioPlayer) return; + + if (audioPlayer.paused) { + if (playPauseButton) playPauseButton.innerHTML = ''; + if (menuPlayPauseButton) menuPlayPauseButton.innerHTML = playImg; + if (playMusicButton) playMusicButton.innerHTML = playImg; + if (soundwaveButton) soundwaveButton.classList.remove("playing"); + } else { + if (playPauseButton) playPauseButton.innerHTML = ''; + if (menuPlayPauseButton) menuPlayPauseButton.innerHTML = pauseImg; + if (playMusicButton) playMusicButton.innerHTML = pauseImg; + if (soundwaveButton) soundwaveButton.classList.add("playing"); + } + } + + updatePlayPauseIcon(); + + if (audioPlayer && !audioPlayer.paused) { + if (soundwaveButton) soundwaveButton.classList.add("playing"); + } + + /** ▶️ / ⏸️ Play/Pause Funktion **/ + function playPauseToggle() { + if (audioPlayer.paused) { + audioPlayer.play(); + sessionStorage.setItem("audioPlaying", "true"); + } else { + audioPlayer.pause(); + sessionStorage.setItem("audioPlaying", "false"); + } + updatePlayPauseIcon(); + } + + /** 🖱️ EventListener für Play/Pause **/ + if (playPauseButton) playPauseButton.addEventListener("click", playPauseToggle); + if (menuPlayPauseButton) menuPlayPauseButton.addEventListener("click", playPauseToggle); + if (playMusicButton) playMusicButton.addEventListener("click", playPauseToggle); + + /** 📜 Menü öffnen & schließen **/ + function toggleMenu() { + if (!menu) return; + menu.classList.toggle("active"); + updateHeaderState(); // Header-Zustand sofort anpassen + } + + document.querySelectorAll("#menu nav a").forEach(link => { + link.addEventListener("click", () => { + closeMenu(); // Menü schließen, wenn ein Link geklickt wird + }); + }); + + + function updateHeaderState() { + if (menu && menu.classList.contains("active")) { + // Menü ist geöffnet → Schrift schwarz, transparenter Hintergrund, kein Blur + header.classList.add("menu-open"); + + } else { + // Menü ist geschlossen → Schrift weiß, dunkler transparenter Hintergrund mit Blur + header.classList.remove("menu-open"); + + } + } + + + + function closeMenu() { + if (!menu) return; + menu.classList.remove("active"); + updateHeaderState(); + } + + if (soundwaveButton) soundwaveButton.addEventListener("click", toggleMenu); + if (menu) { + menu.addEventListener("click", (e) => { + if (e.target === menu) closeMenu(); + }); + } + + + + /** 🔥 Markiert den aktuellen Track **/ + function updateTrackHighlight(activeButton) { + trackButtons.forEach(btn => { + btn.classList.remove("playing"); + btn.querySelector(".track-dots").innerText = ""; + }); + activeButton.classList.add("playing"); + animateDots(); + } + + /** 💡 Punkt-Animation **/ + function animateDots() { + clearInterval(dotInterval); + let playingTrack = document.querySelector(".track.playing .track-dots"); + if (!playingTrack) return; + let dots = [".", "..", "...", ".....", "........"]; + let dotIndex = 0; + dotInterval = setInterval(() => { + if (!document.querySelector(".track.playing") || audioPlayer.paused) { + clearInterval(dotInterval); + if (playingTrack) playingTrack.innerText = ""; + return; + } + playingTrack.innerText = dots[dotIndex]; + dotIndex = (dotIndex + 1) % dots.length; + }, 50); + } + + /** 🎵 EventListener für Track-Klick **/ + trackButtons.forEach(button => button.addEventListener("click", (event) => { + let clickedButton = event.currentTarget; + let trackSrc = clickedButton.dataset.src; + if (audioPlayer.src !== trackSrc) { + audioPlayer.src = trackSrc; + audioPlayer.play(); + updateTrackHighlight(clickedButton); + } else { + playPauseToggle(); + } + updatePlayPauseIcon(); + })); + + + /** ⏩ Nächster Track **/ +function playNextTrack() { + currentIndex = (currentIndex + 1) % trackButtons.length; + let nextTrack = trackButtons[currentIndex]; + audioPlayer.src = nextTrack.dataset.src; + audioPlayer.play(); + updateTrackHighlight(nextTrack); + updatePlayPauseIcon(); +} + +/** ⏪ Vorheriger Track **/ +function playPreviousTrack() { + currentIndex = (currentIndex - 1 + trackButtons.length) % trackButtons.length; + let prevTrack = trackButtons[currentIndex]; + audioPlayer.src = prevTrack.dataset.src; + audioPlayer.play(); + updateTrackHighlight(prevTrack); + updatePlayPauseIcon(); +} + +/** 🖱️ EventListener für Prev/Nächster Button **/ +if (nextButton) nextButton.addEventListener("click", playNextTrack); +if (prevButton) prevButton.addEventListener("click", playPreviousTrack); + + +audioPlayer.addEventListener("ended", () => { + playNextTrack(); + updateTrackHighlight(trackButtons[currentIndex]); // Markierung für den neuen Track setzen +}); +}); diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000..5e8646e --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,39 @@ + + + + https://brikk.rocks/ + 2024-03-06 + weekly + 1.0 + + + https://brikk.rocks/spotlite + 2024-03-06 + monthly + 0.9 + + + https://brikk.rocks/about + 2024-03-06 + yearly + 0.8 + + + https://brikk.rocks/music + 2024-03-06 + monthly + 0.8 + + + https://brikk.rocks/friends + 2024-03-06 + yearly + 0.7 + + + https://brikk.rocks/impressum + 2024-03-06 + yearly + 0.5 + + diff --git a/style/imprint-style.css b/style/imprint-style.css new file mode 100644 index 0000000..e173dfb --- /dev/null +++ b/style/imprint-style.css @@ -0,0 +1,77 @@ +:root { + --secondary-color: #ff6700 /* Rot */ + } + + + + + +@font-face { + font-family: Geist-Bold; + src: url(/fonts/Geist-Bold.ttf); +} + +@font-face { + font-family: Geist-Medium; + src: url(/fonts/Geist-Medium.ttf); +} + +*{ + margin: 0; + padding: 0; + font-family: Geist-Bold; + font-weight: 100; + color: white; +} + +::selection { + background: transparent; + color: #8D19FF; + text-shadow: none !important; + animation: none !important; + transition: none !important; + +} + +body{ + background-color: black; +} + +.imprint{ + width: 94%; + max-width: 1500px; + margin: auto; + margin-top: 20vh; + + height: 100%; +} + +.imprint p.big{ + font-size: 1.5em; +} + +h2{ + font-size: 3em; + line-height: 83%; + padding-bottom: 1%; +} + +h3{ + padding-bottom: 5%; +} + +h4{ + padding-top: 5%; + font-size: 2em; + padding-bottom: 1%; +} + +.text{ + padding-bottom: 20%; +} + +a#back-home{ + font-size: 2em; + text-decoration: none; + +} \ No newline at end of file diff --git a/style/menu.css b/style/menu.css new file mode 100644 index 0000000..574ff42 --- /dev/null +++ b/style/menu.css @@ -0,0 +1,424 @@ +/* Fullscreen-Menü */ + +:root { + --secondary-color: #ff6700 /* Rot */ + } + + + + + +@font-face { + font-family: Geist-Bold; + src: url(/fonts/Geist-Bold.ttf); +} + +@font-face { + font-family: Geist-Medium; + src: url(/fonts/Geist-Medium.ttf); +} + + +html.menu-open, body.menu-open { + overflow: hidden; + height: 100dvh; + position: fixed; + width: 100%; + touch-action: none; +} + + + + +#menu { + display: flex; /* Stelle sicher, dass es nicht 'none' ist */ + flex-direction: column; + visibility: hidden; + opacity: 0; + transform: translateY(-100%); + transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out; + height: 100%; + width: 100%; + position: fixed; /* Setzt das Menü über den gesamten Bildschirm */ + top: 0; + left: 0; + background-color: #00000090; + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + + + + justify-content: flex-end; + align-items: space-between; + gap: 10px; + z-index: 10; /* Stellt sicher, dass es über allem liegt */ + +} + +#menu.active { + visibility: visible; + opacity: 1; + transform: translateY(0); +} + + +#menu .menu-header .logo{ + position: absolute; + width: 100%; + height: 17dvh; + display: flex; + justify-content: center; + align-items: flex-end; + padding-bottom: 3dvh; + +} + +#menu .menu-header .logo img{ + height: 40%; +} + + +#menu .menu-header{ + display: flex; + justify-content: space-between; + flex-direction: row; + height: 20dvh; + width: 100%; + gap: 10px; +} + +#menu .menu-header .first-block{ + width: 97%; + height: 100%; + background-color: var(--secondary-color); +} + +#menu .menu-header .second-block{ + width: 3%; + height: 100%; + background-color: var(--secondary-color); +} + +#menu .menu-center{ + display: flex; + justify-content: space-between; + flex-direction: row; + height: 50dvh; + width: 100%; + gap: 10px; +} + + +#menu .menu-center .first-block{ + width: 3%; + height: 100%; + background-color: var(--secondary-color); +} + +#menu .menu-center .second-block{ + width: 97%; + height: 100%; + background-color: var(--secondary-color); +} + + + +#menu nav { + width: 94%; + height: 44dvh; + position: absolute; + right: 0; + display: flex; + justify-content: center; + gap: 1.5%; + align-items: flex-end; + flex-direction: column; + padding: 3%; + + + +} + + +#menu a { + color: black; + text-decoration: none; + font-size: clamp(1.2rem, 7.5dvh, 14dvw); + line-height: 83%; + text-align: right; + cursor: pointer; + + +} + + +#menu nav .sitelinks{ + display: flex; + flex-direction: column; + width: 100%; + +} + +#menu nav .webshop-container{ + width: min-content; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +#menu nav .webshop-container a{ + + color: white; + + +} + + +#coming-soon{ + color: #8D19FF; + position: absolute; + align-self: center; + rotate: -30deg; + font-size: clamp(1rem, 5vh, 5vw); + font-weight: bold; +} + + +#menu .webshop-container .logo-and-claim{ + width: min-content; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; +} + +#menu .webshop-container .logo-and-claim .sr-logo{ + height: 100%; + display: flex; + justify-content: center; + align-items: center; + margin-left: 1%; + margin-right: 1%; + +} + +#menu .webshop-container .logo-and-claim .sr-logo img{ + width: auto; + height: clamp(1rem, 7vh, 7vw); + +} + + +#menu .webshop-container .logo-and-claim p{ + text-align: right; + color: white; + font-size: clamp(1.5rem, 3vh, 3vw); + line-height: 83%; + white-space: nowrap; +} + +#menu .webshop-container .logo-and-claim #stoned-rocks-1{ + text-align: left; +} + + + + + + +#menu .imprint{ + display: flex; + justify-content: flex-end; + padding-right: 3%; +} +#menu .imprint a{ + color: white; + font-family: Geist-Medium; + font-weight: 100; + font-size: clamp(1rem, 2vh, 2vw); +} + +#menu .lower-part{ + height: 30vh; +} + +#menu .contact-links{ + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 3%; + +} + +#menu .contact-links a{ + line-height: 100%; + color: white; + font-size: clamp(1.4rem, 3vh, 3vw); + font-family: Geist-Medium; + font-weight: 100; +} + +#menu .contact-links .left{ + height: 6vh; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; +} + +#menu .contact-links .right{ + display: flex; + justify-content: space-between; + height: 6vh; + flex-direction: column; + align-items: flex-end; +} + +#menuPlayPause { + background: none; + border: none; +} + + +#menuPlayPause img { + background:none; + border: none; /* Entfernt den grauen Hintergrund */ + width: 40px; /* Passe die Größe an */ + height: auto; + display: block; +} + +.menu-music-control{ + width: 100%; + display: flex; + justify-content: center; + padding-top: 5vh; + padding-bottom: 5vh; +} + +/* Soundwave-Button */ +#soundwaveButton { + + position: fixed; + bottom: 20px; + right: 20px; + width: 70px; + height: 70px; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + z-index: 30; + + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + + box-shadow: 0px 0px 20px 0px rgba(255,255,255,1); + border-radius: 50%; + +} + +.wave-line { + width: 45px; + height: 5px; + background-color: white; + + transition: all 0.3s ease-in-out; +} + +/* Weichere, harmonische Wellenbewegung */ +@keyframes waveMotion { + 0%, 100% { transform: translateY(0) scaleY(1); } + 25% { transform: translateY(-4px) scaleY(1.15); } + 50% { transform: translateY(3px) scaleY(0.95); } + 75% { transform: translateY(-2px) scaleY(1.1); } +} + +/* Linien bewegen sich leicht zeitversetzt */ +#soundwaveButton.playing .wave-line:nth-child(1) { + animation: waveMotion 1.2s infinite ease-in-out alternate; +} + +#soundwaveButton.playing .wave-line:nth-child(2) { + animation: waveMotion 1.2s infinite ease-in-out alternate; + animation-delay: 0.2s; +} + +#soundwaveButton.playing .wave-line:nth-child(3) { + animation: waveMotion 1.2s infinite ease-in-out alternate; + animation-delay: 0.4s; +} + + +@media (min-width: 1000px){ + + #menu nav{ + + flex-direction: row-reverse; + justify-content: space-between; + + align-items: center; + width: 94vw; + padding: 0; + padding-right: 3%; + padding-left: 3%; + height: 49vh; + + } + + #menu nav .sitelinks{ + width: 50%; + } + #menu nav .webshop-container{ + margin-left: 6%; + width: 35%; + align-items: center; + } + + #menu nav .webshop-container a{ + font-size: clamp(2rem, 8vh, 8vw); + + } + + #menu .webshop-container .logo-and-claim{ + justify-content: center; + + } + + + + #menu a{ + font-size: clamp(2rem, 10vh, 10vw); + + } + + + + #menu a:hover{ + color: white; + } + + #menu #imprint{ + + text-align: right; + } + + #menu #webshop-link:hover{ + color: yellow; + } + + + + + + + #menu .contact-links a:hover{ + color: var(--secondary-color); + } + + + +} diff --git a/style/style copy.css b/style/style copy.css new file mode 100644 index 0000000..d80135a --- /dev/null +++ b/style/style copy.css @@ -0,0 +1,1179 @@ +:root { + --secondary-color: #ff6700 /* Rot */ + } + + +@font-face { + font-family: Geist-Bold; + src: url(/fonts/Geist-Bold.ttf); +} + +@font-face { + font-family: Geist-Medium; + src: url(/fonts/Geist-Medium.ttf); +} + + + + +*{ + margin: 0; + padding: 0; + font-family: Geist-Bold; + font-weight: 100; +} + +body{ + background-color: black; +} + + + + + +header{ + color: white; + width: 100%; + height: 5vh; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + z-index: 40; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + transition: background-color 0.3s ease-in-out; + +} + +header.hero { + color: white; +} + +/* Menü aktiv: Transparent mit schwarzem Text */ +header.menu-open { + backdrop-filter:none; + color: black; +} + + + +header #logo{ + font-size: 1em; + cursor: pointer; +} + + +#hero{ + background-color: aqua; + height: 95vh; + padding-top: 5vh; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + z-index: 10; +} + +#hero .logo{ + display: flex; + justify-content: center; + height: auto; +} + +#hero .logo img{ + width: 30vw; + margin-top: 15vh; +} + +#hero .name-and-profession{ + margin-top: 40vh; + color: white; +} + +#hero h1{ + font-size: 3em; + line-height: 83%; + padding-left: 3%; +} + +#hero h2{ + font-size: 2em; + text-align: end; + padding-right: 3%; +} + +#intro{ + background-color: black; + height: 100vh; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 3%; + padding-right: 3%; +} + +#intro button{ + background: none; + color: white; + border: none; + width: 100%; + height: 20vh; + +} + +#playMusic img { + width: auto; /* Größe anpassen */ + height: 10vh; +} +#intro h3{ + font-size: 3em; + line-height: 83%; +} + +#intro p{ + font-size: 1.5em; + line-height: 83%; +} + +#intro .top{ + margin-top: 5vh; +} + +#intro .bottom{ + text-align: end; +} + +#spotlite{ + + height: 100%; +} + +#spotlite a{ + text-decoration: none; +} + + +#spotlite h3{ + margin-bottom: 2em; + font-size: 3em; + color: white; + margin-left: 3%; +} + +/* Spotlite-Items */ +.spotlite-item { + cursor: pointer; + background-color: black; + color: white; + text-align: center; + +} + + + +.foreground-items{ + position: absolute; + width: 100%; + height: 300px; +} + +@keyframes idleFloat { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); + } +} + +#crystal{ + position: absolute; + left: 30%; + top: 15%; + width: 200px; + animation: idleFloat 8s ease-in-out infinite; + animation-delay: 0.4s; + filter: drop-shadow(5px 5px 10px #000000); +} + +#he1{ + position: absolute; + left: 10%; + top: 20%; + animation: idleFloat 3s ease-in-out infinite; + animation-delay: 0.9s; + width: 70px; + filter: drop-shadow(5px 5px 10px #000000); +} + +#he2{ + position: absolute; + left: 70%; + top: 30%; + animation: idleFloat 4s ease-in-out infinite; + animation-delay: 0.7s; + filter: drop-shadow(5px 5px 10px #000000); +} + +#he3{ + position: absolute; + left: 70%; + top: 75%; + animation: idleFloat 3s ease-in-out infinite; + width: 70px; + filter: drop-shadow(5px 5px 10px #000000); +} + +#hy1{ + position: absolute; + left: 30; + top: 40%; + width: 110px; + animation: idleFloat 7s ease-in-out infinite; + filter: drop-shadow(5px 5px 10px #000000); + animation-delay: 0.3s; +} + +#hy2{ + top: 50%; + position: absolute; + left: 20%; + animation: idleFloat 3s ease-in-out infinite; + width: 40px; + filter: drop-shadow(5px 5px 10px #000000); +} + +.image-container{ + display: flex; + flex-direction: column; + justify-content: center; +} + +.image-container .foreground-items img{ + width: 100px; +} + +.image-container img{ + width: 100%; +} + +.image-container video{ + width: 100%; +} + +.bottomline{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-size: 2em; + text-align: left; + padding: 3%; + height: 100%; + margin-bottom: 10vh; + +} + +.bottomline .logo{ + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +.bottomline .logo img{ + width: 60px; + height: 60px; + object-fit: contain; +} + +.bottomline .projektname{ + + display: flex; + align-items: center; + text-align: right; +} + +.bottomline .projektname p{ + font-size: 0.8em; + line-height: 83%; +} + +/*COSMOS SECTION */ + + + +#cosmos{ + + background-color: black; + color: white; +} + +#cosmos h3{ + font-size: 3em; + line-height: 83%; + margin-bottom: 5vh; + padding-left: 3%; +} + +.cosmos-item-box{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + margin-bottom: 5vh; + +} + +.cosmos-item{ + + width: 95%; + height: 100px; + background-color: black; + border-radius: 20px; + border: 1px solid #333; + color: white; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 5px; + text-decoration: none; + transition:all 0.3s ease-in-out; +} +.cosmos-item img{ + height: 70px; + width: 70px; + object-fit: contain; +} + +.bureau{ + width: 100%; + height: 300px; + display: flex; + justify-content: center; + + overflow: hidden; +} + +.bureau img{ + width: 100%; + object-fit: cover; +} + + + +#me{ + background-color: black; + +} + +.opener{ + padding-top: 5vh; + +} + +.opener p{ + text-align: end; + color: var(--secondary-color); + line-height: 83%; + padding-right: 3%; +} + +.opener .names{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + padding-bottom: 3vh; + width: 100%; +} + +.opener .names h3{ + font-size: 3em; + color: white; + line-height: 83%; + padding-left: 3%; +} + +.opener .names h4{ + transform: translateX(-3%); + position: absolute; + text-align: end; + width: 100%; + line-height: 83%; + font-size: 1.75em; + color: var(--secondary-color); +} + + + +.title-and-picture{ + display: flex; + flex-direction: row; + justify-content: space-between; + + padding-left: 3%; + padding-right: 3%; +} + +.title-and-picture .left{ + color: white; + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.title-and-picture .left h5{ + font-size: 2em; + line-height: 83%; +} + +.title-and-picture .left span{ + color: var(--secondary-color); +} + + +.title-and-picture .right{ + display: flex; + justify-content: flex-end; + width: 100%; + height: 30vh; + object-fit: cover; + overflow: hidden; + +} + +.title-and-picture .right img{ + height: 100%; + width: auto; + + +} + +#me .description{ + padding-top: 5vh; + padding-bottom: 5vh; + color: white; + padding-right: 3%; + padding-left: 10%; + font-size: 1.5em; + line-height: 95%; +} + +#me .description p{ + font-family: Geist-Medium; + padding-bottom: 5%; + text-align: right; +} + +#me .links{ + background-color: white; + padding: 3%; + + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + + +} + +#me .links a{ + font-size: 1.5em; + line-height: 100%; + color: black; + text-decoration: none; + font-family: Geist-Medium; + font-weight: 100; + transition: all 0.3s ease-in-out; +} + +#me .links a:hover{ + color: var(--secondary-color); +} + +#me .links .left{ + + display: flex; + flex-direction: column; +} + +#me .links .right{ + display: flex; + flex-direction: column; + text-align: end; +} + +.skillset{ + color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 10%; + margin-bottom: 10vh; + +} + +.skillset p{ + padding-bottom: 5%; + font-family: Geist-Medium; + font-weight: 100; +} + +.skillset .breaker{ + height: 3vh; +} + +.skillset h5{ + font-size: 2em; + line-height: 83%; +} + +.skillset .left{ + height: 100%; + width: 50%; + padding-left: 3%; + +} +.skillset .left ul{ + list-style: none; +} + +.skillset .left li{ + font-size: 1.3em; + line-height: 90%; +} + +.skillset .right{ + width: 50%; + overflow: hidden; +} + +.skillset .right img{ + transform: translateX(10px); + height:350px; + +} + +.mindset{ + color: white; + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100vw; +} + + + +.mindset p{ + font-family: Geist-Medium; + font-weight: 100; + font-size: 1.5em; + line-height: 95%; +} + +.mindset h2{ + font-size: 3em; + line-height: 83%; + padding-bottom: 2vh; +} + +.mindset .top{ + text-align: end; + padding-right: 3%; + padding-left: 10%; +} + +.mindset .top span{ + color: var(--secondary-color); +} + +.mindset .img-box{ + width: 100vw; + position: absolute; + height: 100%; +} + +.mindset .img-box img{ + width: 100%; + margin-top: 24vh; + +} + +.mindset .bottom{ + text-align: start; + margin-top: 40vh; + padding-left: 3%; + padding-right: 10%; +} + +.mindset .bottom h3{ + padding-top: 2vh; + font-size: 3em; + line-height: 83%; +} + + + + + + + +#sideprojects{ + padding-top: 10%; + + color: white; + height: 100%; + background: linear-gradient(0deg, #141414, black); + display: flex; + flex-direction: column; + +} + +#sideprojects h2{ + font-size: 1.5em; + padding-left: 3%; +} + +#sideprojects #music h4{ + font-size: 1.5em; + + +} + +#music{ + display: flex; + justify-content: space-around; + flex-direction: column; + height: 60vh; + padding-top: 5vh; + padding-left: 3%; + padding-right: 3% +} + +#music a{ + font-size: 0.8em; + color: yellow; + line-height: 83%; + text-decoration: none; + padding-left: 5%; +} + +#music h3{ + font-size: 3em; + margin-bottom: 1vh; +} + + +.cover-and-title{ + display: flex; + flex-direction: row; + justify-content: space-between; + height: 45.5vw; + +} + + + +.cover{ + width: 45.5vw; +} + + +.cover img{ + width: 100%; +} + +.title{ + width: 45.5vw; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-start; + margin-left: 3%; +} + +.title h4{ + + line-height: 83%; +} + +#tracklist{ + display: flex; + flex-direction: column; + justify-content: space-around; + height: 25vh; +} + +.track { + font-size: 1.15em; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + border: none; + background: none; + color: white; + text-align: start; + cursor: pointer; +} + +.track-title { + flex-grow: 1; +} + +.track-dots { + display: inline-block; + margin-left: 5px; + color: var(--secondary-color); + font-weight: bold; + min-width: 15px;} + + +.track-duration { + font-size: 0.9rem; + color: gray; +} + +.track.playing { + color: var(--secondary-color); +} + +.track.playing .track-dots { + display: flex; + animation: dotsAnimation 1s infinite; +} + + + + + +.controls{ + + background-color: black; + height: 15vh; + + border-radius: 20px 20px 0px 0px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + + +} + +.control-buttons button{ + width: 50px; + height: 50px; + border-radius: 50%; + border: 2px solid ; + background-color: black; + color: white; +} + +.control-buttons{ + margin-top: 5vh; + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: space-between; + +} + +#progressSlider { + margin-top: 3vh; + width: 94vw; + -webkit-appearance: none; + appearance: none; + height: 4px; + background: #555; + outline: none; + cursor: pointer; + border-radius: 2px; + + + +} + +#progressSlider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 12px; + height: 12px; + background: var(--secondary-color); + border-radius: 50%; + cursor: pointer; + position: relative; + z-index: 2; +} + + + + + +#friends{ + padding-left: 3%; + padding-top: 10vh; + background-color: black; + color: white; +} + +.friend{ + width: 100%; + + display: flex; + flex-direction: row; + align-items: center; +} + +.friend .profile-picture{ + height: 100px; + width: 100px; + border-radius: 50%; + background-color: var(--secondary-color); + margin: 5%; +} + + + + + +footer { + height: 20vh; + background-color: black; + display: flex; + justify-content: center; + align-items: center; + +} + +footer a{ + color: white; + text-decoration: none; +} + + + + + + + + + + +@media (min-width: 800px) { + #hero .logo img{ + width: 200px; + margin-top: 10vh; + } + + #hero .name-and-profession{ + padding-top: 0vh; + color: white; + max-width: 600px; + } + + #hero{ + align-items: center; + } + + #hero h1{ + font-size: 5em; + } + + + + + #intro{ + width: 60vw; + margin: auto; + } + + #intro h3{ + font-size: 5em; + } + + #spotlite{ + width: 60vw; + margin: auto; + } + + #spotlite h3{ + font-size: 5em; + padding: 0; + margin-bottom: 2%; + } + + .foreground-items{ + width: 60vw; + } + + .bottomline{ + margin-bottom: 5vh; + } + + .bottomline{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-size: 2em; + text-align: left; + padding-left: 0%; + padding-right: 0%; + height: 100%; + + + } + + #cosmos{ + + width: 60vw; + margin: auto; + + } + + #cosmos h3{ + font-size: 5em; + padding: 0; + } + + .cosmos-item-box{ + display: grid; + grid-template-columns: 1fr 1fr; + } + + .cosmos-item{ + height: 300px; + width: 98%; + } + + .cosmos-item:hover{ + background-color: #111; + border: 1px solid var(--secondary-color); + } + + .cosmos-item img{ + height: 140px; + width: 140px; + + } + + .bureau{ + height: 100%; + width: 80%; + margin: auto; + } + + + .opener{ + width: 60vw; + margin: auto; + } + + .opener p{ + font-size: 1.5em; + padding:0; + + } + + .opener .names h3{ + font-size: 5em; + padding:0; + } + + .opener .names h4{ + font-size: 4.5em; + width: 60vw; + + + } + .title-and-picture{ + width: 60vw; + margin: auto; + padding-left: 0%; + padding-right: 0%; + } + + #me .description{ + padding-top: 6vh; + padding-bottom: 4vh; + width: 60vw; + margin: auto; + } + + #me .description p{ + font-size: 2em; + line-height: 85%; + padding-bottom: 2%; + } + + .title-and-picture .left h5{ + font-size: 3em; + } + + .title-and-picture .right{ + height: 40vh; + } + + + + #me .links{ + justify-content: space-between; + font-size: 1.5em; + padding: 1% 20%; + } + + .skillset{ + width: 60vw; + margin: auto; + margin-top: 5vh; + margin-bottom: 10vh; + } + + .skillset .left{ + padding-left: 0; + width: 100%; + } + + .skillset .right{ + display: flex; + width: 100%; + justify-content: flex-end; + + } + + .skillset h5{ + font-size: 5em; + padding-bottom: 1%; + } + + .skillset p, .skillset .left ul li{ + font-size: 1.5em; + } + + .mindset{ + width: 60vw; + margin: auto; + } + + .mindset .top{ + z-index: 1; + display: flex; + flex-direction: column; + align-items: flex-end; + padding: 0; + } + + + .mindset .top p{ + width: 50%; + + } + + .mindset .bottom{ + padding: 0; + z-index: 1; + width: 40%; + } + + .mindset p{ + filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5)); } + + .mindset h2{ + font-size: 5em; + filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5)); } + + + .mindset h3{ + font-size: 5em; + filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5)); + + } + + .mindset .img-box{ + width:60vw; + height: 50vh; + overflow: visible; + z-index: 0; + } + + .mindset .img-box img{ + width: 100%; + margin-top: 13vh; + + } + + #sideprojects{ + width: 60vw; + margin: auto; + background: none; + background-color: #000000; + } + + #sideprojects h2{ + font-size: 5em; + padding-left: 0; + } + + #music{ + height: 100%; + padding-left: 0; + padding-right: 0; + } + + #music a{ + padding-left: 0%; + } + + .cover-and-title{ + height: 100%; + width: 100%; + align-items: space-between; + } + + .cover{ + width: 20vw; + + } + + .title{ + width: 100%; + font-size: 2.5em; + } + + #progressSlider{ + width: 60vw; + } + + #friends{ + width: 60vw; + margin: auto; + padding-left: 0; + } + + #friends h2{ + font-size: 5em; + } + + #friends p{ + font-size: 2em; + } + + #friends .friend p{ + font-size: 2em; + } + + +} + diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..6f69be2 --- /dev/null +++ b/style/style.css @@ -0,0 +1,1364 @@ +:root { + --secondary-color: #ff6700 /* Rot */ + } + + + + + +@font-face { + font-family: Geist-Bold; + src: url(/fonts/Geist-Bold.ttf); +} + +@font-face { + font-family: Geist-Medium; + src: url(/fonts/Geist-Medium.ttf); +} + +*{ + margin: 0; + padding: 0; + font-family: Geist-Bold; + font-weight: 100; +} + +::selection { + background: transparent; + color: #8D19FF; + text-shadow: none !important; + animation: none !important; + transition: none !important; + +} + +body{ + background-color: black; +} + + +header{ + color: white; + width: 100%; + height: 5vh; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + z-index: 40; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + transition: background-color 0.3s ease-in-out; + +} + +header.hero { + color: white; +} + +/* Menü aktiv: Transparent mit schwarzem Text */ +header.menu-open { + backdrop-filter:none; + -webkit-backdrop-filter: none; + color: black; +} + + + +header #logo{ + font-size: 1em; + cursor: pointer; +} + + +#hero{ + background-color: black; + background-image: url(../img/me/me-header.jpg); + background-size: cover; + background-repeat: repeat; + background-position: top center; + height: 95dvh; + width: 100%; + max-width: 1000px; + margin: auto; + padding-top: 5vh; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + z-index: 10; +} + +#hero .logo{ + display: flex; + justify-content: center; + height: auto; +} + +#hero .logo img{ + width: min(20vw, 250px); +} + +#hero .name-and-profession{ + color: white; + +} + +#hero h1{ + font-size: clamp(3rem, 10vw, 6rem); + line-height: 83%; + padding-left: 3%; + animation: text-shadow-animation 2s ease-in-out infinite; +} + +#hero h2{ + animation: text-shadow-animation 2s ease-in-out infinite; + font-size: clamp(2rem, 5vw, 3rem); + text-align: end; + padding-right: 3%; +} + +@keyframes text-shadow-animation { + 0% { + text-shadow: 0px 0px 8px white; + + } + 20% { + text-shadow: 0px 0px 15px white; + } + + 50% { + text-shadow: 0px 0px 10px white; + } + 80% { + text-shadow: 0px 0px 15px white; + } + 90% { + text-shadow: 0px 0px 10px white; + } + 100% { + text-shadow: 0px 0px 12px white; + + } +} + +@keyframes text-shadow-animation-orange { + 0% { + text-shadow: 0px 0px 8px var(--secondary-color); + + } + 20% { + text-shadow: 0px 0px 15px var(--secondary-color); + } + + 50% { + text-shadow: 0px 0px 10px var(--secondary-color); + } + 80% { + text-shadow: 0px 0px 15px var(--secondary-color); + } + 90% { + text-shadow: 0px 0px 10px var(--secondary-color); + } + 100% { + text-shadow: 0px 0px 12px var(--secondary-color); + } +} + +@keyframes text-shadow-animation-black { + 0% { + text-shadow: 0px 0px 8px black; + + } + 20% { + text-shadow: 0px 0px 15px black; + } + + 50% { + text-shadow: 0px 0px 10px black; + } + 80% { + text-shadow: 0px 0px 15px black; + } + 90% { + text-shadow: 0px 0px 10px black; + } + 100% { + text-shadow: 0px 0px 12px black; + } +} + +#intro{ + background-color: black; + height: 100dvh; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + margin-left: auto; + margin-right: auto; + max-width: 1500px; +} + +#intro button{ + background: none; + color: white; + border: none; + width: 100%; + height: 20vh; + +} + +#playMusic img { + width: auto; /* Größe anpassen */ + height: 10vh; + transition: all 0.4s ease-in-out; +} + +#playMusic img:hover{ + scale: 1.1; +} + +#intro h3{ + animation: text-shadow-animation 2s ease-in-out infinite; + font-size: clamp(2rem, 6vw, 5rem); + line-height: 83%; + padding-left: 3%; + padding-right: 3%; + +} + +#intro p{ + animation: text-shadow-animation 2s ease-in-out infinite; + padding-left: 3%; + padding-right: 3%; + font-size: 1.5em; + line-height: 83%; +} + +#intro .top{ + margin-top: 5vh; +} + +#intro .bottom{ + text-align: end; +} + +#spotlite{ + margin-left: auto; + margin-right: auto; + max-width: 1500px; + height: 100%; +} + +#spotlite .torchlight-container{ + width: 100%; + margin-top: 7vh; + max-width: 1500px; + height: 15vh; + overflow:hidden; + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: center; +} + +#spotlite .torchlight-container img{ + width: max(200px, 70vw); + max-width: 600px; + position: absolute; + +} + +#spotlite a{ + text-decoration: none; +} + + +#spotlite h3{ + animation: text-shadow-animation 2s ease-in-out infinite; + font-size: clamp(2rem, 6vw, 5rem); + color: white; + padding-left: 3%; + margin-top: 10vh; +} + +/* Spotlite-Items */ +.spotlite-item { + cursor: pointer; + color: white; + text-align: center; +} + + + +.foreground-items{ + position: absolute; + width: 100%; + max-width: 1500px; + height: 50vw; +} + +@keyframes idleFloat { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); + } +} + +.foreground-items #crystal{ + position: absolute; + left: 30%; + top: 20%; + width:clamp(200px, 40vw, 500px); + animation: idleFloat 8s ease-in-out infinite; + animation-delay: 0.4s; + filter: drop-shadow(0px 0px 80px #fff); +} + +.foreground-items #he1{ + position: absolute; + left: 10%; + top: 30%; + animation: idleFloat 3s ease-in-out infinite; + animation-delay: 0.9s; + width:clamp(70px, 10vw, 300px); + filter: drop-shadow(0px 0px 10px #000000); +} + +.foreground-items #he2{ + position: absolute; + left: 80%; + top: 30%; + width:clamp(70px, 15vw, 400px); + animation: idleFloat 4s ease-in-out infinite; + animation-delay: 0.7s; + filter: drop-shadow(0px 0px 10px #000000); +} + +.foreground-items #he3{ + position: absolute; + left: 60%; + top: 35%; + animation: idleFloat 3s ease-in-out infinite; + width:clamp(70px, 8vw, 200px); + filter: drop-shadow(0px 0px 10px #000000); +} + +.foreground-items #hy1{ + position: absolute; + left: 70%; + top: 60%; + width:clamp(100px, 10vw, 400px); + animation: idleFloat 7s ease-in-out infinite; + filter: drop-shadow(0px 0px 10px #000000); + animation-delay: 0.3s; +} + +.foreground-items #hy2{ + top: 50%; + position: absolute; + left: 35%; + animation: idleFloat 3s ease-in-out infinite; + width:clamp(70px, 15vw, 400px); + filter: drop-shadow(0px 0px 10px #000000); +} + +.image-container{ + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; +} + + + +.image-container img{ + width: 100%; +} + +.image-container video{ + width: 100%; +} + +.bottomline{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + text-align: left; + padding: 3%; + height: 100%; + margin-bottom: 10vh; + +} + +.bottomline .logo{ + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +.bottomline .logo img{ + width: 60px; + height: 60px; + object-fit: contain; +} + +.bottomline .projektname{ + + display: flex; + align-items: center; + text-align: right; +} + +.bottomline .projektname p{ + animation: text-shadow-animation 2s ease-in-out infinite; + + line-height: 83%; + font-size: 1.7rem; + +} + +/*COSMOS SECTION */ + + + +#cosmos{ + max-width: 1500px; + margin: auto; + color: white; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +#cosmos h3{ + animation: text-shadow-animation 2s ease-in-out infinite; + + font-size: clamp(2rem, 6vw, 5rem); + line-height: 83%; + margin-bottom: 5vh; + padding-left: 3%; +} + +.cosmos-item-box{ + margin-left: auto; + margin-right: auto; + width: 94%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 5vh; + +} + +.cosmos-item{ + + width: 100%; + height: 200px; + background-color: black; + border-radius: 20px; + border: 1px solid #333; + color: white; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 5px; + text-decoration: none; + transition:all 0.3s ease-in-out; +} +.cosmos-item img{ + height: 90px; + width: 90px; + object-fit: contain; +} + +.bureau{ + width: 100%; + height: auto; + max-width: 1500px; + margin: auto; + display: flex; + justify-content: center; + overflow: hidden; +} + +.bureau img{ + width: 150%; + object-fit: cover; +} + + + +#me{ + background-color: black; + max-width: 1500px; + margin: auto; + +} + +.opener{ + padding-top: 5vh; + padding-left: 3%; + padding-right: 3%; + width: 94%; + max-width: 1500px; + +} + +.opener p{ + font-size: clamp(1rem, 4vw, 2rem); + padding-right: 3%; + text-align: end; + color: var(--secondary-color); + line-height: 83%; + animation: text-shadow-animation-orange 2s ease-in-out infinite; + +} + +.opener .names{ + display: flex; + flex-direction: row; + padding-bottom: 3vh; + width: 100%; + + +} + +.opener .names h3{ + animation: text-shadow-animation 2s ease-in-out infinite; + width: 50%; + + font-size: clamp(3rem, 10vw, 6rem); + color: white; + line-height: 83%; + +} + +.opener .names .brikk-container{ + width: 50%; + display: flex; + justify-content: flex-end; +} + +.opener .names .brikk-container h4{ + + position: absolute; + text-align: end; + line-height: 83%; + font-size: clamp(2rem, 9vw, 5rem); + color: var(--secondary-color); + animation: text-shadow-animation-orange 2s ease-in-out infinite; + +} + + + +.title-and-picture{ + display: flex; + flex-direction: row; + justify-content: space-between; + + padding-left: 3%; + padding-right: 3%; +} + +.title-and-picture .left{ + color: white; + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.title-and-picture .left h5{ + + font-size: clamp(2rem, 7vw, 3rem); + line-height: 83%; + animation: text-shadow-animation 2s ease-in-out infinite; + +} + +.title-and-picture .left span{ + color: var(--secondary-color); + animation: text-shadow-animation-orange 2s ease-in-out infinite; + +} + + +.title-and-picture .right{ + display: flex; + justify-content: flex-end; + width: 100%; + height: 30vh; + object-fit: cover; + overflow: hidden; + +} + +.title-and-picture .right video{ + height: 100%; + width: auto; + + +} + +#me .description{ + padding-top: 5vh; + padding-bottom: 5vh; + color: white; + padding-right: 3%; + padding-left: 10%; + font-size: clamp(1.5rem, 7vw, 3rem); + line-height: 95%; +} + +#me .description p{ + animation: text-shadow-animation 2s ease-in-out infinite; + + font-family: Geist-Medium; + padding-bottom: 5%; + text-align: right; +} + +.me-links-box{ + width: 100%; + background-color: white; + padding-top: 3%; + padding-bottom: 3%; +} + + +.me-links{ + + width: 100%; + + display: flex; + justify-content: center; + align-items: center; + + +} + + +.me-links a{ + + cursor: pointer; + text-wrap: nowrap; + font-size: clamp(1.5rem, 4vw, 3rem); + line-height: 100%; + color: black; + text-decoration: none; + font-family: Geist-Medium; + font-weight: 100; + transition: all 0.3s ease-in-out; +} + +.me-links a:hover{ + color: var(--secondary-color); +} + +.me-links .left{ + max-width: 420px; + width: 27%; + display: flex; + flex-direction: column; + +} + +.me-links .right{ + max-width: 1020px; + width: 67%; + + display: flex; + flex-direction: column; + text-align: end; +} + +.skillset{ + min-height: 90vh; + width: 100%; + max-width: 1500px; + color: white; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin: auto; + +} + +.skillset p{ + animation: text-shadow-animation 2s ease-in-out infinite; + + padding-bottom: 5%; + font-family: Geist-Medium; + font-weight: 100; + font-size: clamp(1.5rem, 5vw, 3rem); + line-height: 83%; + +} + +.skillset .breaker{ + height: 3vh; +} + +.skillset h5{ + font-size: clamp(2rem, 10vw, 6rem); + animation: text-shadow-animation 2s ease-in-out infinite; + + line-height: 83%; + padding-bottom: 0.5vh; +} + +.skillset .left{ + height: 100%; + padding-left: 3%; + +} +.skillset .left ul{ + list-style: none; +} + +.skillset .left li{ + font-size: clamp(1.5rem, 5vw, 2rem); + line-height: 90%; + animation: text-shadow-animation 2s ease-in-out infinite; + +} + +.skillset .right{ +width: max-content; + overflow: hidden; +} + +.skillset .right img{ + height:50vh; + +} + +.timeline{ + min-height: 90vh; + width: 94%; + max-width: 1500px; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin: auto; +} + +.timeline h2{ + font-size: clamp(2rem, 10vw, 6rem); + animation: text-shadow-animation 2s ease-in-out infinite; + +} + +.timeline h3{ + font-size: clamp(1.8rem, 6vw, 5rem); + margin-top: 5vh; + margin-bottom: 1vh; + animation: text-shadow-animation 2s ease-in-out infinite; + +} + +.timeline ul{ + list-style: none; + margin-bottom: 5vh; + +} +.timeline ul li{ + font-size: clamp(1rem, 5vw, 2rem); + animation: text-shadow-animation 2s ease-in-out infinite; + line-height: 83%; + padding-bottom: 2%; +} + +.timeline span{ + color: var(--secondary-color); +} + +.timeline .table .orange{ + border-color: var(--secondary-color); +} + +.timeline .table { + display: flex; + flex-direction: column; + margin-top: 10%; + +} + +.timeline .row { + display: flex; + flex-direction: column; /* Stellt alle Infos einer Firma untereinander */ + align-items: flex-start; + padding-left: 3%; + animation: text-shadow-animation 2s ease-in-out infinite; + + margin-left: 15px; + border-left: 5px solid; + margin-bottom: 5%; + +} +.timeline .row-orange{ + animation: text-shadow-animation-orange 2s ease-in-out infinite; + + display: flex; + flex-direction: column; /* Stellt alle Infos einer Firma untereinander */ + align-items: flex-start; + margin-bottom: 5%; + padding-left: 3%; + border-left: 20px solid var(--secondary-color); + +} + +.timeline .cell { + width: 100%; /* Volle Breite */ + + text-align: left; + padding: 5px 0; + font-size: 1em; + line-height: 83%; +} + +.timeline p.subdivisions{ + padding-top: 2%; + margin-right: 10%; + padding-bottom: 5%; + display: flex; + justify-content: flex-start; + font-size: 0.5em; + line-height: 100%; + color: white; +} + +.timeline .tasks{ + font-size: 1.5em; + line-height: 100%; +} + +.timeline .company{ + font-size: 2.5em; + +} + + +.mindset{ + + margin: auto; + height: 80vh; + margin-top: 5vh; + margin-bottom: 5vh; + color: white; + display: flex; + flex-direction: column; + justify-content: space-around; + width: 94%; + max-width: 1500px; + + background-image: url("../img/sketches/chain.png"); + background-repeat: no-repeat; + background-position:left ; + background-size: contain; +} + + + +.mindset p{ + font-family: Geist-Medium; + font-weight: 100; + font-size: clamp(1.5rem, 5vw, 2rem); + line-height: 95%; + animation: text-shadow-animation 2s ease-in-out infinite; + +} + +.mindset h2{ + font-size: clamp(2rem, 10vw, 6rem); + line-height: 83%; + padding-bottom: 2vh; + animation: text-shadow-animation 2s ease-in-out infinite; +} + +.mindset .top{ + text-align: end; + +} + +.mindset span{ + color: var(--secondary-color); + animation: text-shadow-animation-orange 2s ease-in-out infinite; + +} + + + + + +.mindset .bottom{ + text-align: start; + + +} + + + + + + +#sideprojects{ + + max-width: 1500px; + width:94%; + padding-left: 3%; + padding-right: 3%; + padding-top: 10%; + padding-bottom: 10%; + color: white; + display: flex; + flex-direction: column; +} + +#sideprojects h2{ + font-size: clamp(2rem, 10vw, 6rem); + animation: text-shadow-animation 2s ease-in-out infinite; + +} + +#sideprojects #music h4{ + font-size: clamp(2rem, 4vw, 4rem); + line-height: 83%; + animation: text-shadow-animation 2s ease-in-out infinite; + + +} + +#music{ + display: flex; + justify-content: center; + flex-direction: column; + margin-top: 5vh; + min-height: 60vh; +} + +#music a{ + font-size: clamp(1rem, 4vw, 2rem); + color: white; + background-color: var(--secondary-color); + animation: text-shadow-animation 2s ease-in-out infinite; + box-shadow: var(--secondary-color) 0px 0px 20px; + padding:1.2%; + border-radius: 1em; + line-height: 90%; + text-decoration: none; + text-align: center; + transition: all 0.2s ease-in-out; + +} + + + + + + + + +.cover-and-title{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 2vh; +} + + + +.cover{ + height: 45.5vw; + max-height: 250px; + position: relative; + box-shadow: 0px 0px 400px var(--secondary-color); +} + + +.cover img{ + height: 100%; + width: auto; +} + +.title{ + + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-bottom: 3vh; +} + + +#tracklist{ + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} + +.track { + animation: text-shadow-animation 2s ease-in-out infinite; + + font-size: clamp(1rem, 5vw, 2rem); + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + height: 5vh; + border: none; + background: none; + color: white; + text-align: start; + cursor: pointer; + transition: all 0.2s ease-in-out; +} + + + + +.track-dots { + display: inline-block; + margin-left: 5px; + color: var(--secondary-color); + font-weight: bold; + min-width: 15px;} + + + + +.track-duration { + font-size: 0.9rem; + color: gray; +} + +.track.playing { + color: var(--secondary-color); + animation: text-shadow-animation-orange 2s ease-in-out infinite; + +} + +.track.playing .track-dots { + display: flex; + animation: dotsAnimation 1s infinite; +} + + + + + +.controls{ + height: 15vh; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + max-width: 1500px; + +} + +.control-buttons button{ + width: 100px; + height: 100px; + border-radius: 50%; + border: 2px solid ; + background-color: white; + color: black; + transition: all 0.2s ease-in-out; + +} + + + +.control-buttons{ + margin-top: 5vh; + width: 100%; + + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: space-between; + +} + +#progressSlider { + margin-top: 3vh; + width: 100%; + -webkit-appearance: none; + appearance: none; + height: 4px; + background: #555; + outline: none; + cursor: pointer; + border-radius: 2px; + + + +} + +#progressSlider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 30px; + height: 30px; + background: var(--secondary-color); + border-radius: 50%; + cursor: pointer; + position: relative; + z-index: 2; +} + + + + + +#friends{ + + padding-top: 10vh; + width: 94%; + margin: auto; + max-width: 1500px; + background-color: black; + color: white; +} + +#friends h3{ + font-size: clamp(2rem, 6vw, 5rem); + animation: text-shadow-animation 2s ease-in-out infinite; + + +} + +#friends p{ + font-size: clamp(1rem, 4vw, 1.5rem); + line-height: 120%; + animation: text-shadow-animation 2s ease-in-out infinite; + color: white; + text-decoration: none; + word-wrap: break-word; +} + + +#friends .name{ + font-size: clamp(1.5rem, 5vw, 2.5rem); +} + + +.friend-list{ + margin-top: 10vh; +} + +.friend{ + width: 100%; + text-decoration: none; + transition: all 0.2s ease-in-out; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + margin-top: 3%; +} + + +.friend .profile-picture{ + + height: 100px; + min-width: 100px; + border-radius: 50%; + background-color: var(--secondary-color); + + margin-right: 3%; +} + +.friend .profile-picture img{ + height: 100px; + width: 100px; + border-radius: 50%; + + object-fit: cover; + margin-right: 3%; +} + +.friend:hover{ + scale: 1.025; + +} + +footer { + height: 20vh; + background-color: black; + display: flex; + justify-content: center; + align-items: center; + +} + +footer a{ + animation: text-shadow-animation 2s ease-in-out infinite; + + color: white; + text-decoration: none; +} + + +@media (min-width: 1550px) { + + + + + #spotlite h3{ + padding-left: 0%; + } + + #spotlite .torchlight-container{ + margin-top: 0%; + } + + .bottomline{ + margin-bottom: 5vh; + padding-left: 0; + padding-right: 0; + + height: 100%; + + + } + + .bottomline .logo img{ + width: 100px; + height: 100px; + + } + + #cosmos h3{ + padding-left: 0; + } + + .cosmos-item-box{ + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1%; + width: 100%; + } + + .cosmos-item{ + height: 300px; + } + + .cosmos-item:hover{ + background-color: #111; + border: 1px solid var(--secondary-color); + } + + .cosmos-item img{ + height: 140px; + width: 140px; + + } + + .bureau img{ + width: 100%; + height: auto; + object-fit: contain; + } + + .me-links-box{ + + padding-top: 1%; + padding-bottom: 1%; + } + + .skillset{ + min-height: 100vh; + } + + + + .mindset{ + min-height: 100vh; + } + + .skillset .left{ + padding-left: 0; + } + + #sideprojects{ + margin: auto; + padding-left: 0; + padding-right: 0; + } + + #music a:hover{ + background-color: #8D19FF; + box-shadow: #8D19FF 0px 0px 20px; + + } + + + .timeline .table { + display: flex; + flex-direction: column; + width: 100%; + margin-top: 0%; + } + + .timeline .row { + display: flex; + flex-direction: row; /* Jede Firma bleibt in einer Zeile */ + justify-content: space-between; + align-items: flex-start; + width: 100%; + height: 150px; + border: none; + border-left: 5px solid; + margin-bottom: 1%; + + } + + .timeline .table .row-orange{ + display: flex; + flex-direction: row; /* Jede Firma bleibt in einer Zeile */ + justify-content: space-between; + align-items: flex-start; + width: 100%; + height: 150px; + margin-bottom: 1%; + + } + + .timeline .cell { + text-align: left; + min-width: max-content; + + } + + .timeline .company { + width: 200%; + } + + .timeline .tasks { + width: 110%; + } + + +} diff --git a/style/subpage-style.css b/style/subpage-style.css new file mode 100644 index 0000000..dcdb27d --- /dev/null +++ b/style/subpage-style.css @@ -0,0 +1,464 @@ +:root { + --secondary-color: #ff6700 /* Rot */ + } + + +@font-face { + font-family: Geist-Bold; + src: url(/fonts/Geist-Bold.ttf); +} + +@font-face { + font-family: Geist-Medium; + src: url(/fonts/Geist-Medium.ttf); +} + + + + +*{ + margin: 0; + padding: 0; + font-family: Geist-Bold; + font-weight: 100; +} + +body{ + background-color: black; + +} + + +header{ + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + color: white; + width: 100%; + height: 5vh; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + z-index: 40; + background-color: transparent; + transition: background-color 0.3s ease-in-out; +} + +header.menu-open { + backdrop-filter:none; + -webkit-backdrop-filter: none; + + color: black; +} + +header #logo{ + font-size: 1em; + cursor: pointer; +} + +h2{ + font-size: 3em; + margin-top: 10vh; + color: white; + padding-left: 3%; + padding-right: 3%; + margin-bottom: 3vh; + line-height: 83%; +} + +.partners{ + padding-left: 3%; + padding-right: 3%; + margin-bottom: 1vh; +} + +.partners p{ + color: white; + font-family: Geist-Medium; + font-weight: 100; + margin-bottom: 1vh; +} + +.partners a{ + text-decoration: none; + color: var(--secondary-color); +} + +.partners ul li{ + color: white; + list-style: none; +} + +.visual .subtitle{ + padding-left: 3%; + padding-right: 3%; + margin-top: 1vh; + text-align: end; +} + +.row{ + display: flex; + flex-direction: column; + width: 100%; + +} + +.text-box{ + color: white; + padding-left: 3%; + padding-right: 3%; + margin-bottom: 5vh; + margin-top: 10vh; +} + +.text-box h3{ + font-size: 2em; + line-height: 83%; + margin-bottom: 1vh; + +} + +.text-box h4{ + font-size: 1.2em; + margin-bottom: 2vh; + line-height: 83%; + font-family: Geist-Medium; + font-weight: 100; +} + +.text-box h5{ + line-height: 83%; + margin-bottom: 1vh; + + font-size: 2.5em; +} + +.text-box p{ + font-family: Geist-Medium; + font-weight: 100; +} + +.visual{ + height: 100%; + width: 100%; + margin: 0; + display: flex; + flex-direction: column; + margin-bottom: 2vh; +} + +.visual-stars-range{ + height: 100%; + width: 100%; + overflow: hidden; + display: flex; + flex-direction: column; + margin-bottom: 2vh; + +} +.visual-stars-range #stars-range{ + object-fit: contain; + + + width: 110%; + padding-left: 3%; + padding-right: 3%; + margin-bottom: 1vh; + margin-top: 1vh; +} + + +.visual video{ + width: 100%; +} + +#youre-id{ + width: 80%; + padding-left: 10%; + padding-right: 10%; + margin-bottom: 3vh; + +} + +.visual p{ + font-size: 1em; + color: white; + line-height: 83%; +} + + + +.visual img{ + height: 100%; + width: auto; + +} + +.visual-contain{ + object-fit: contain; + width: 100vw; + height: auto; +} + +.visual-contain img{ + width: 100%; +} + + +.double-visual{ + display: flex; + flex-direction: row; + justify-content: space-around; + width: 94%; + padding-left: 3%; + padding-right: 3%; +} + +.double-visual .dv-child{ + display: flex; + align-items: center; + justify-content: flex-end; + flex-direction: column; +} + +.double-visual .dv-child img{ + width: 20vw; +} + +.double-visual .dv-child p{ + font-family: Geist-Medium; + margin-top: 2vh; + margin-bottom: 5vh; + color: white; + text-align: end; +} + + +#tge-keyvisual{ + padding-left: 3%; + padding-right: 3%; + margin-bottom: 1vh; + margin-top: 1vh; +} + + + + + +.visual .visual-row{ + width: 100vw; + margin-bottom: 0.5vw; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.visual-row video{ + height: auto; + object-fit: cover; + width: 33vw; +} +.visual-row img{ + height: auto; + object-fit: cover; + width: 33vw; +} +.visual-row .cad-models{ + display: flex; + flex-direction: column; + justify-content: space-between; + width: 33vw; + +} + +.visual-row .cad-models img{ + width: 100%; + + object-fit: contain; +} + + + +footer { + height: 20vh; + background-color: black; + display: flex; + justify-content: center; + align-items: center; + +} + +footer a{ + color: white; + text-decoration: none; +} + + +@media (min-width: 1500px){ + + .row{ + max-width: 1500px; + margin: auto; + } + + h2{ + font-size: 8em; + max-width: 1500px; + margin: auto; + margin-bottom: 3vh; + margin-top: 10vh; + + + + } + + .visual .subtitle{ + padding-left: 0; + padding-right: 0; + margin-top: 1vh; + margin-bottom: 1vh; + font-size: 1.5em; + + } + + + + + + .text-box{ + padding-left: 0%; + } + + .text-box h3{ + font-size: 3em; + } + + .text-box h4{ + font-size: 1.8em; + } + + .text-box h5{ + font-size: 3em; + } + + .text-box p{ + font-size: 1.5em; + } + + .partners{ + padding-left: 0%; + padding-right: 0%; + margin-bottom: 1vh; + margin-left: auto; + margin-right: auto; + max-width: 1500px; + font-size: 1.5em; + } + + .partners p{ + color: white; + font-family: Geist-Medium; + font-weight: 100; + margin-bottom: 1vh; + } + + .partners ul li{ + color: white; + list-style: none; + } + + + #tge-visual-box{ + display: flex; + flex-direction: column; + margin-top: 5vh + } + + #tge-keyvisual{ + width: 30vw; + margin-left: auto; + margin-right: auto; + margin-top: 5vh; + } + + .visual-stars-range #stars-range{ + object-fit: contain; + + + width: 1470px; + padding-left: 3%; + padding-right: 3%; + margin-bottom: 1vh; + margin-top: 1vh; + } + + + + + .visual img, .visual video{ + object-fit: cover; + + max-height: 70vh; + } + + .visual-contain{ + width: 100%; + + max-height: 70vh; + margin: auto; + margin-bottom: 1vh; + } + + .visual-contain img{ + object-fit: contain; + max-height: 70vh; + } + + + + #youre-id{ + object-fit: contain; + } + + + + + #event-concept{ + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .visual .visual-row{ + width: 49.5%; + justify-content: space-between; + height: 100%; + object-fit: cover; + } + + .visual .visual-row video{ + width: 11vw; + height: 40vh; + object-fit: cover; + } + .visual .visual-row img{ + width: 11vw; + object-fit: cover; + height: 40vh; + } + + + + .visual .visual-row .cad-models{ + object-fit: cover; + width: 11vw; + + } + + .visual .visual-row .cad-models img{ + object-fit: cover; + height: 20vh; + } + +} \ No newline at end of file diff --git a/video/MAINCOMP_DS_1.mp4 b/video/MAINCOMP_DS_1.mp4 new file mode 100644 index 0000000..5a0787b Binary files /dev/null and b/video/MAINCOMP_DS_1.mp4 differ diff --git a/video/cookies.mp4 b/video/cookies.mp4 new file mode 100644 index 0000000..696852e Binary files /dev/null and b/video/cookies.mp4 differ diff --git a/video/dancer_girl.mp4 b/video/dancer_girl.mp4 new file mode 100644 index 0000000..264993b Binary files /dev/null and b/video/dancer_girl.mp4 differ diff --git a/video/drink_key.mp4 b/video/drink_key.mp4 new file mode 100644 index 0000000..37872a6 Binary files /dev/null and b/video/drink_key.mp4 differ diff --git a/video/einhorn.mp4 b/video/einhorn.mp4 new file mode 100644 index 0000000..19d76c5 Binary files /dev/null and b/video/einhorn.mp4 differ diff --git a/video/electric-root.mp4 b/video/electric-root.mp4 new file mode 100644 index 0000000..509b088 Binary files /dev/null and b/video/electric-root.mp4 differ diff --git a/video/forever-lowres.mp4 b/video/forever-lowres.mp4 new file mode 100644 index 0000000..68e66e7 Binary files /dev/null and b/video/forever-lowres.mp4 differ diff --git a/video/gamescoin-typo-anim.mp4 b/video/gamescoin-typo-anim.mp4 new file mode 100644 index 0000000..646fb85 Binary files /dev/null and b/video/gamescoin-typo-anim.mp4 differ diff --git a/video/gamescom.mp4 b/video/gamescom.mp4 new file mode 100644 index 0000000..d52a888 Binary files /dev/null and b/video/gamescom.mp4 differ diff --git a/video/gcu/elementfusion_cropped.mp4 b/video/gcu/elementfusion_cropped.mp4 new file mode 100644 index 0000000..72fdaed Binary files /dev/null and b/video/gcu/elementfusion_cropped.mp4 differ diff --git a/video/gcu/star-map-interface.mp4 b/video/gcu/star-map-interface.mp4 new file mode 100644 index 0000000..917055e Binary files /dev/null and b/video/gcu/star-map-interface.mp4 differ diff --git a/video/gcu/website-tour.mp4 b/video/gcu/website-tour.mp4 new file mode 100644 index 0000000..66d8cc1 Binary files /dev/null and b/video/gcu/website-tour.mp4 differ diff --git a/video/play-create-own.mp4 b/video/play-create-own.mp4 new file mode 100644 index 0000000..c95e671 Binary files /dev/null and b/video/play-create-own.mp4 differ diff --git a/video/presswall_dancers.mp4 b/video/presswall_dancers.mp4 new file mode 100644 index 0000000..b40d39d Binary files /dev/null and b/video/presswall_dancers.mp4 differ diff --git a/video/reel-eyeye-lowres.mp4 b/video/reel-eyeye-lowres.mp4 new file mode 100644 index 0000000..161d883 Binary files /dev/null and b/video/reel-eyeye-lowres.mp4 differ diff --git a/video/rocketlaunch.mp4 b/video/rocketlaunch.mp4 new file mode 100644 index 0000000..33eadfd Binary files /dev/null and b/video/rocketlaunch.mp4 differ diff --git a/video/tge-documentary.mp4 b/video/tge-documentary.mp4 new file mode 100644 index 0000000..c80cac9 Binary files /dev/null and b/video/tge-documentary.mp4 differ diff --git a/video/youre/YOURExSCS_Making_Of_highres.mp4 b/video/youre/YOURExSCS_Making_Of_highres.mp4 new file mode 100644 index 0000000..8bef096 Binary files /dev/null and b/video/youre/YOURExSCS_Making_Of_highres.mp4 differ diff --git a/video/youre/YOURExSCS_highres.mp4 b/video/youre/YOURExSCS_highres.mp4 new file mode 100644 index 0000000..374e141 Binary files /dev/null and b/video/youre/YOURExSCS_highres.mp4 differ diff --git a/video/youre/gamescom-loop_1.mp4 b/video/youre/gamescom-loop_1.mp4 new file mode 100644 index 0000000..0fdde09 Binary files /dev/null and b/video/youre/gamescom-loop_1.mp4 differ diff --git a/video/youre/massif games convention_v3.mp4 b/video/youre/massif games convention_v3.mp4 new file mode 100644 index 0000000..cef3f7d Binary files /dev/null and b/video/youre/massif games convention_v3.mp4 differ diff --git a/video/youre/secondary-logo.mp4 b/video/youre/secondary-logo.mp4 new file mode 100644 index 0000000..2c2ffec Binary files /dev/null and b/video/youre/secondary-logo.mp4 differ diff --git a/video/youre/youre-bet.mp4 b/video/youre/youre-bet.mp4 new file mode 100644 index 0000000..ee7ad69 Binary files /dev/null and b/video/youre/youre-bet.mp4 differ diff --git a/video/youre/youre-id.mp4 b/video/youre/youre-id.mp4 new file mode 100644 index 0000000..d311189 Binary files /dev/null and b/video/youre/youre-id.mp4 differ diff --git a/video/youre/youre-universe.mp4 b/video/youre/youre-universe.mp4 new file mode 100644 index 0000000..70d802d Binary files /dev/null and b/video/youre/youre-universe.mp4 differ diff --git a/youre.html b/youre.html new file mode 100644 index 0000000..7a17d0c --- /dev/null +++ b/youre.html @@ -0,0 +1,248 @@ + + + + + + YOURE Projects + + + + + + + + + +
+ +
+ +

YOURE

+ + +
+

I worked closely together with:

+ +
+ + +
+
+

GAMESCOM 2024

+

08/2024 / COLOGNE

+

Great people, good vibes!
Supervised a small film crew. 😎
Cut and animated the visual loop for our booth C061 - D070 in the Gamescom Business Area. + +

+
+ +
+ + +

DOCUMENTARY

+
+ +
+ + +

BOOTH LOOP

+
+
+ +
+
+

NEW LOOK
NEW STYLE

+

YOURE's new face.

+
+ +
+ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + +
+ +
+
+

YOURE X SCS
SPONSORING CAMPAIGN

+

05/2024 / KAISERSLAUTERN

+

What a blast! 💥 ⚽
Cinematic shots combined with the colorful visual identity of YOURE.
Created the Gaming VFX and BTS material.
Was also involved in concept and storyboard from start on.

+
+ +
+ + +

CAMPAIGN MOVIE

+ +
+
+ + +

BEHIND THE SCENES

+ +
+
+ +
+
+

PRODUCT
ANIMATIONS

+

12/2023 / COLOGNE

+

Motion Design for various YOURE projects. Made in After Effects

+
+ +
+ + +

YOURE.ID LOGIN

+ +
+
+ + +

UNIVERSE IDLE

+ +
+
+ + +

BET OPENER

+ +
+
+ + + + + + +
+ +
+
+
+ +
+ + + + + + + + \ No newline at end of file