466 lines
17 KiB
HTML
466 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="3D/Motion/Graphics">
|
|
<title>MARK HARTMANN | 3D/MOTION/GRAPHICS</title>
|
|
<link rel="stylesheet" href="style/style.css">
|
|
<link rel="stylesheet" href="style/menu.css">
|
|
<link rel="icon" href="img/logos/brikk-rocks-white.png" type="image/png">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<!-- Matomo -->
|
|
<script>
|
|
var _paq = window._paq = window._paq || [];
|
|
_paq.push(['setVisitorCookieTimeout', 3600]); // Besucher-Cookie auf 1 Stunde begrenzen
|
|
_paq.push(['setSessionCookieTimeout', 1800]); // Sitzungscookie auf 30 Minuten begrenzen
|
|
_paq.push(['setReferralCookieTimeout', 3600]); // Referrer-Cookie auf 1 Stunde begrenzen
|
|
|
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
_paq.push(['setDocumentTitle', document.title]);
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//analytikks.brikk.rocks/";
|
|
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
|
_paq.push(['setSiteId', '2']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
<!-- End Matomo Code -->
|
|
</head>
|
|
<body>
|
|
<!-- Topleiste -->
|
|
<header>
|
|
<div id="logo" onclick="location.reload();">BRIKK.ROCKS</div>
|
|
</header>
|
|
|
|
|
|
|
|
<section id="hero">
|
|
<div class="logo">
|
|
<img src="img/logos/brikk-rocks-white.png" alt="">
|
|
</div>
|
|
<div class="name-and-profession">
|
|
<h1>MARK HARTMANN</h1>
|
|
<h2>3D/Motion/Graphics</h2>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Intro Bereich mit Play-Button -->
|
|
|
|
|
|
<!-- Spotlite Bereich (Projekte) -->
|
|
<section id="spotlite">
|
|
|
|
|
|
|
|
<div class="torchlight-container">
|
|
<img src="img/sketches/torch.png" alt="">
|
|
</div>
|
|
|
|
<a class="spotlite-item" href="eyeye.html">
|
|
<div class="image-container">
|
|
<video src="video/reel-eyeye-lowres.mp4" autoplay muted loop alt="">
|
|
</div>
|
|
<div class="bottomline">
|
|
<div class="logo"><img src="img/logos/eyeye.png" alt=""></div>
|
|
<div class="projektname"><p>SUMMER<br>2025</p></div>
|
|
|
|
|
|
</div>
|
|
</a>
|
|
|
|
<a class="spotlite-item" href="gc-universe.html">
|
|
|
|
<div class="image-container">
|
|
<div class="foreground-items">
|
|
<img src="img/thumbnails/gc universe items/crystal.png" alt="" id="crystal">
|
|
<img src="img/thumbnails/gc universe items/helium2.png" alt="" id="he1">
|
|
<img src="img/thumbnails/gc universe items/helium3.png" alt="" id="he2">
|
|
<img src="img/thumbnails/gc universe items/helium4.png" alt="" id="he3">
|
|
<img src="img/thumbnails/gc universe items/hydrogen1.png" alt="" id="hy1">
|
|
<img src="img/thumbnails/gc universe items/hydrogen2.png" alt="" id="hy2">
|
|
</div>
|
|
<img src="img/thumbnails/unverse.png" alt="">
|
|
</div>
|
|
<div class="bottomline">
|
|
<div class="logo"><img src="img/logos/gcu.png" alt=""></div>
|
|
<div class="projektname"><p>GC<br>UNIVERSE <br>DESIGNS</p></div>
|
|
|
|
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<a class="spotlite-item" href="youre.html">
|
|
|
|
<div class="image-container">
|
|
<video src="video/gamescom.mp4" autoplay muted loop alt="">
|
|
</div>
|
|
<div class="bottomline">
|
|
<div class="logo"><img src="img/logos/YOURE-secondary.png" alt=""></div>
|
|
<div class="projektname"><p>GAMESCOM<br>DOCUMENTATION<br>2024</p></div>
|
|
|
|
|
|
</div>
|
|
|
|
</a>
|
|
</div>
|
|
|
|
<a class="spotlite-item" href="gamescoin.html">
|
|
<div class="image-container">
|
|
<video src="video/play-create-own.mp4" autoplay muted loop alt="">
|
|
</div>
|
|
<div class="bottomline">
|
|
<div class="logo"><img src="img/logos/gamescoin.png" alt=""></div>
|
|
<div class="projektname"><p>TOKEN <br>GENERATION <br>EVENT</p></div>
|
|
|
|
|
|
</div>
|
|
</a>
|
|
</section>
|
|
|
|
<!-- Projekte aus The YOURE Cosmos -->
|
|
|
|
|
|
<section id="cosmos">
|
|
<h3>MORE PROJECTS:</h3>
|
|
|
|
<div class="cosmos-item-box">
|
|
<a class="cosmos-item" href="eyeye.html"><img src="img/logos/eyeye.png" alt=""></a>
|
|
<a class="cosmos-item" href="youre.html"><img src="img/logos/youre.png" alt=""></a>
|
|
<a class="cosmos-item" href="gamescoin.html"><img src="img/logos/gamescoin.png" alt=""></a>
|
|
<a class="cosmos-item" href="gc-universe.html"><img src="img/logos/gcu.png" alt=""></a>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Me Bereich -->
|
|
<section id="me">
|
|
|
|
<div class="opener">
|
|
<p>ALSO KNOWN AS</p>
|
|
<div class="names">
|
|
<h3>MARK <br>HARTMANN</h3>
|
|
<div class="brikk-container">
|
|
<h4>BRIKK</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="title-and-picture">
|
|
<div class="left">
|
|
<h5>MEDIA<br>DESIGNER<br><span>@YOURE<br>GAMES</span></h5>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="right"><video autoplay loop muted src="img/me/me.mp4"></video></div>
|
|
|
|
</div>
|
|
<div class="description">
|
|
<p>I work on crazy, unseen projects with creative professionals since 2020.</p>
|
|
<p>Continuously learning and adapting to ensure
|
|
state of art quality,
|
|
integrity and zeitgeist.</p>
|
|
</div>
|
|
|
|
</section>
|
|
<div class="me-links-box">
|
|
<div class="me-links">
|
|
<div class="left">
|
|
<a href="https://www.linkedin.com/in/mark-hartmann-siegen/">LinkedIn</a>
|
|
<a href="https://www.instagram.com/markdemacco/">Instagram</a>
|
|
</div>
|
|
<div class="right">
|
|
|
|
<a href="tel:+491609658365">+49 160 965 58 365</a>
|
|
<a href="mailto:mark@brikk.rocks">mark@brikk.rocks</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="skillset">
|
|
<div class="left">
|
|
<h5>SWISS KNIFE <br>SKILLSET</h5>
|
|
<p>3D/Motion/Graphics</p>
|
|
<div class="breaker"></div>
|
|
<p>Definitely NOT an expert in: </p>
|
|
<ul>
|
|
<li>AFTER EFFECTS</li>
|
|
<li>BLENDER</li>
|
|
<br>
|
|
<li>UNREAL ENGINE</li>
|
|
<li>UNITY</li>
|
|
<br>
|
|
<li>ILLUSTRATOR</li>
|
|
<li>PHOTOSHOP</li>
|
|
<li>INDESIGN</li>
|
|
<li>LIGHTROOM</li>
|
|
<br>
|
|
<li>FIGMA</li>
|
|
</ul>
|
|
</div>
|
|
<div class="right"><img src="img/sketches/swissknife.png" alt=""></div>
|
|
</div>
|
|
|
|
<section>
|
|
<div class="timeline">
|
|
|
|
<div class="table">
|
|
|
|
<div class="row-orange">
|
|
<div class="cell company"><span>Scriptflow</span>
|
|
</div>
|
|
<div class="cell position"><span>Werkstudent Digital Design</span></div>
|
|
<div class="cell tasks"><span>Social Media<br>Motion Design<br>3D Art<br>Web Design<br>Content</span></div>
|
|
<div class="cell date"><span>Nov 2025 - NOW</span></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="cell company">eyeye Studio</div>
|
|
<div class="cell position">AI Video Producer</div>
|
|
<div class="cell tasks">Generative AI<br>Motion Design<br>Videography<br>Social Media</div>
|
|
<div class="cell date">Apr 2025 - Jun 2025</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="cell company">YOURE Games
|
|
<p class="subdivisions">MASSIVE LINX / LOOTBOY / GAMESCOIN <br>GC UNIVERSE / AIGHT</p>
|
|
|
|
</div>
|
|
<div class="cell position">Media Designer</div>
|
|
<div class="cell tasks">Branding<br>Motion Design<br>3D Art<br>Videography<br>Web Design<br>Concept</div>
|
|
<div class="cell date">Sep 2023 - Jun 2025</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="cell company">Kollektiv+</div>
|
|
<div class="cell position">Web Designer</div>
|
|
<div class="cell tasks">UI/UX-Design<br>Wordpress</div>
|
|
<div class="cell date">Nov 2024 - Feb 2025</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="cell company">Studioline<br>Photography</div>
|
|
<div class="cell position">Photographer</div>
|
|
<div class="cell tasks">Photography<br>Lighting Setup<br>Print Technology<br>Studio Management</div>
|
|
<div class="cell date">Jun 2023 - Aug 2023</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="cell company">Invers GmbH</div>
|
|
<div class="cell position">Media Designer</div>
|
|
<div class="cell tasks">Motion Design<br>3D Art<br>Videography<br>Concept</div>
|
|
<div class="cell date">Oct 2022 - Feb 2023</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="cell company">hype.media <br>Marketing Gruppe</div>
|
|
<div class="cell position">Media Designer</div>
|
|
<div class="cell tasks">Google Ads<br>Motion Design<br>3D Art<br>Videography<br>Web Design<br>Concept</div>
|
|
<div class="cell date">Aug 2020 - Aug 2022</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<h3>QUALIFICATIONS</h3>
|
|
<ul>
|
|
<li>Media Designer Digital / Print</li>
|
|
<li>Gestaltungstechnischer Assistent</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<div class="mindset">
|
|
<div class="top">
|
|
<h2><span>THE ART OF<br></span>REMAINING<br>BALANCE<span> .. </span>
|
|
</h2>
|
|
<p>Ratios<span>.</span><br>Blank Space<span>.</span><br>Timing<span>.</span><br>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bottom">
|
|
<p>Identity<span>.</span><br>Boldness<span>.</span><br>Money<span>.</span><br><br>
|
|
|
|
</p>
|
|
<h2> <span> .. WHILE<br></span>BREAKING
|
|
<br> <span> THE </span>RULES<span>.</span></h3>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Friends of BRIKK -->
|
|
<section id="friends">
|
|
<h3>Friends of BRIKK</h3>
|
|
<p>Explore my network of great creatives.</p>
|
|
|
|
<div class="friend-list">
|
|
<a class="friend" href="https://www.linkedin.com/in/fynn-böttcher-426880236/" target="_blank" >
|
|
<div class="profile-picture">
|
|
<img src="img/friends/fynn-boettcher.jpg" alt="">
|
|
</div>
|
|
<div class="details">
|
|
<p class="name">FYNN BOETTCHER</p>
|
|
<p class="job">Photography / E-Commerce</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="friend" href="https://www.linkedin.com/in/bryan-reinsch-175569203/" target="_blank">
|
|
|
|
<div class="profile-picture">
|
|
</div>
|
|
|
|
<div class="details">
|
|
<p class="name">BRYAN REINSCH</p>
|
|
<p class="job">Art Director / Photography / Cinema</p>
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<a class="friend" href="https://www.kollektiv-plus.de/" target="_blank">
|
|
|
|
<div class="profile-picture">
|
|
<img src="img/friends/kollektiv+icon.png" alt="">
|
|
</div>
|
|
|
|
<div class="details">
|
|
<p class="name">KOLLEKTIV +</p>
|
|
<p class="job">Art Collective</p>
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<a class="friend" href="https://www.instagram.com/fetteschelle/" target="_blank">
|
|
|
|
<div class="profile-picture">
|
|
<img src="img/friends/justus-jonas.jpg" alt="">
|
|
</div>
|
|
|
|
<div class="details">
|
|
<p class="name">JUSTUS PECH</p>
|
|
<p class="job">Branding / Visual Communication</p>
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<a class="friend" target="_blank">
|
|
<div class="profile-picture">
|
|
<img src="img/friends/paul-reh.jpg" alt="">
|
|
</div>
|
|
<div class="details">
|
|
<p class="name">PAUL REH</p>
|
|
<p class="job">Cinema / Design / Animation</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="friend" target="_blank" href="https://www.kollektiv-plus.de/artist/adem-yildirmaz/">
|
|
<div class="profile-picture">
|
|
<img src="img/friends/adem-yildirmaz.jpg" alt="">
|
|
</div>
|
|
<div class="details">
|
|
<p class="name">ADEM YILDIRMAZ</p>
|
|
<p class="job">Creative Activist / Painting / Sculpting</p>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<a href="imprint.html">Imprint</a>
|
|
</footer>
|
|
|
|
<!-- Soundwave-Button für Fullscreen-Menü -->
|
|
<div id="soundwaveButton">
|
|
|
|
<div class="wave-line"></div>
|
|
<div class="wave-line"></div>
|
|
<div class="wave-line"></div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Fullscreen-Menü -->
|
|
<div id="menu">
|
|
|
|
|
|
<div class="menu-header">
|
|
|
|
<div class="first-block"></div>
|
|
<div class="logo"><img src="img/logos/brikk-rocks-black.png" alt=""></div>
|
|
<div class="second-block"></div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="menu-center">
|
|
<div class="first-block"></div>
|
|
<nav>
|
|
<div class="sitelinks">
|
|
<a href="index.html">HOME</a>
|
|
<a href="index.html#spotlite">SPOTLITE</a>
|
|
<a href="index.html#me">MARK</a>
|
|
|
|
<a href="index.html#friends">FRIENDS</a>
|
|
</div>
|
|
|
|
|
|
<div class="webshop-container">
|
|
<p id="coming-soon">COMING SOON!</p>
|
|
<a id="webshop-link" href="">WEBSHOP</a>
|
|
<div class="logo-and-claim">
|
|
<p id="stoned-rocks-1">STONED<br>ROKKS</p>
|
|
<div class="sr-logo">
|
|
<img src="img/logos/stoned-rocks.png" alt="">
|
|
</div>
|
|
<p>ART THAT<br>HITS HARD</p>
|
|
</div>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
<div class="second-block"></div>
|
|
</div>
|
|
|
|
<div class="lower-part">
|
|
<div class="contact-links">
|
|
<div class="left">
|
|
<a href="https://www.linkedin.com/in/mark-hartmann-siegen/">LinkedIn</a>
|
|
<a href="https://www.instagram.com/markdemacco/">Instagram</a>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<a href="tel:+4916096558365">+49 160 965 58 365</a>
|
|
<a href="mailto:mark@brikk.rocks">mark@brikk.rocks</a>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="imprint">
|
|
<a href="imprint.html">Imprint</a>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script src="scripts/script.js"></script>
|
|
</body>
|
|
</html> |