initial commit

This commit is contained in:
2026-04-27 19:17:22 +02:00
commit b22bfcf15b
65 changed files with 2758 additions and 0 deletions
+200
View File
@@ -0,0 +1,200 @@
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="../../assets/img/favicon.png">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio Website - A. Reimann</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/main.css">
<link rel="stylesheet" href="../../assets/stylesheets/pages/homepage.css">
</head>
<body>
<!-- Background -->
<?php echo file_get_contents('../../assets/components/animated_triplet_element_darkgray_red.php'); ?>
<!-- Header -->
<?php echo file_get_contents('../../assets/components/headerEN.php'); ?>
<style>
#desktop_nav_main li:nth-child(1) a, #mobile_nav_main li:nth-child(1) a {
background: rgba(150,0,0,0.2);
pointer-events: none;
}
</style>
<!-- Contents -->
<main>
<!-- Main Header Image -->
<section id="main1">
<img class="main1_Banner" src="../../assets/img/big_pictures/mainBanner.png">
<img class="main1_Selfie" src="../../assets/img/self_pictures/front_1.png">
<h2 class="main1_Hey">Hey, i am</h2>
<h1 class="main1_Name">Andreas</h1>
<div class="main1_animatedTextContainer">
<div class="main1_animatedText"></div>
</div>
</section>
<!-- Sektion 2 - Übersicht -->
<section id="main2">
<h1 class="main2_Header">Overview</h1>
<div class="main2_menuContainer">
<div class="main2_MenuPoint" onclick="smoothScrollTo('main3')">
<img src="../../assets/img/overview/aboutme.png" alt="Bild 1" class="main2_menuPointImage">
<p class="main2_menuPointText">About Me</p>
</div>
<div class="main2_MenuPoint" onclick="smoothScrollTo('main4')">
<img src="../../assets/img/overview/skills.png" alt="Bild 2" class="main2_menuPointImage">
<p class="main2_menuPointText">Skills</p>
</div>
<div class="main2_MenuPoint" onclick="smoothScrollTo('main5')">
<img src="../../assets/img/overview/projects.png" alt="Bild 3" class="main2_menuPointImage">
<p class="main2_menuPointText">Projekts</p>
</div>
<div class="main2_MenuPoint" onclick="smoothScrollTo('main6')">
<img src="../../assets/img/overview/contact.png" alt="Bild 4" class="main2_menuPointImage">
<p class="main2_menuPointText">Contact</p>
</div>
<div class="main2_MenuPoint" onclick="navigateToPage('pages/cv.php')">
<img src="../../assets/img/overview/cv.png" alt="Bild 5" class="main2_menuPointImage">
<p class="main2_menuPointText">Personal Resume</p>
</div>
</div>
</section>
<!-- Sektion 3 - Über Mich -->
<section id="main3">
<h1 class="main3_Header">About Me</h1>
<div class="main3_AboutMe">
<img class="main3_Selfie" src="../../assets/img/self_pictures/front_1_transparent.png">
<div class="main3_Text">
<p>
I am Andreas Reimann, a versatile video editor with a wide range of skills, particularly in video production.
I work with software like DaVinci Resolve and OBS to create high-quality content.
I plan to produce my own small films to visually bring my creative ideas to life and further develop my storytelling abilities.
</p>
<p>
In addition to my work as a video editor, I am also a musician and producer.
I use DAWs like FL Studio, Audacity, and Adobe Audition, and I play the piano to develop creative audio productions and bring joy to others.
</p>
<p>
Furthermore, I am a versatile web developer focusing on frontend development, but I also have skills in backend development and server administration.
I use this knowledge to create and maintain engaging web applications.
</p>
<p>
Additionally, I have completed an apprenticeship as an electronics technician for energy and building technology (08.2016 - 02.2020).
This technical foundation supports my career and enables me to solve complex problems effectively.
</p>
<p>
I also have experience in live streaming and use platforms like TikTok and YouTube to share gaming content and creative projects with my community.
</p>
<p>
Currently, I am also planning to start podcasting to train my effective narration voice and further develop my storytelling skills.
</p>
<p>
I look forward to presenting my projects and work to you.
For more information, please visit the relevant sections of my website.
</p>
</div>
</div>
</section>
<!-- Sektion 4 - Fähigkeiten -->
<section id="main4">
<h1 class="main4_Header">Skills</h1>
<div class="skills-container">
<div class="skill">
<img src="../../assets/img/icons/skills/editing.png" alt="Video Editing Icon" class="skill-icon">
<div class="skill-info">
<span>Video Editing und Content Creation</span>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 80%;"></div>
</div>
</div>
</div>
<div class="skill">
<img src="../../assets/img/icons/skills/streaming.png" alt="Video Editing Icon" class="skill-icon">
<div class="skill-info">
<span>LIVE Streaming</span>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 65%;"></div>
</div>
</div>
</div>
<div class="skill">
<img src="../../assets/img/icons/skills/music.png" alt="Video Editing Icon" class="skill-icon">
<div class="skill-info">
<span>Musikproduction</span>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 60%;"></div>
</div>
</div>
</div>
<div class="skill">
<img src="../../assets/img/icons/skills/electrician.png" alt="Video Editing Icon" class="skill-icon">
<div class="skill-info">
<span>Electronics engineer for energy and building technology</span>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 60%;"></div>
</div>
</div>
</div>
<div class="skill">
<img src="../../assets/img/icons/skills/development.png" alt="Video Editing Icon" class="skill-icon">
<div class="skill-info">
<span>Web development (frontend (partly backend))</span>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 55%;"></div>
</div>
</div>
</div>
<div class="skill">
<img src="../../assets/img/icons/skills/podcast.png" alt="Video Editing Icon" class="skill-icon">
<div class="skill-info">
<span>Podcasting</span>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 25%;"></div>
</div>
</div>
</div>
<div class="skill">
<img src="../../assets/img/icons/skills/movie.png" alt="Video Editing Icon" class="skill-icon">
<div class="skill-info">
<span>Moviemaking</span>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 20%;"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Sektion 5 - aktuelle Projekte -->
<section id="main5">
<h1 class="main5_Header">Projects</h1>
<div class="projects-container" id="projects-container"></div>
</section>
<!-- Sektion 6 - Kontakt -->
<section id="main6">
<h1 class="main6_Header">Contact (WIP)</h1>
<div class="main6_Container">
<div class="main6_Form">WIP</div>
</div>
</section>
</main>
<!-- Footer -->
<?php echo file_get_contents('../../assets/components/footerEN.php'); ?>
<script src="../../assets/scripts/pages/homepageEN.js"></script>
</body>
</html>