initial commit
This commit is contained in:
Executable
+4
@@ -0,0 +1,4 @@
|
|||||||
|
*.log
|
||||||
|
logs/
|
||||||
|
desktop.ini
|
||||||
|
node_modules/
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
# Portfolio Website 2 (Node.js)
|
||||||
|
|
||||||
|
This is my second — but first fully completed — portfolio project, finished on April 14, 2025.
|
||||||
|
It’s a multilingual Node.js website featuring five main pages and several legal pages. The site includes automatic language redirection based on the user's system language.
|
||||||
|
|
||||||
|
All content is rendered dynamically via a single interface.html using JavaScript.
|
||||||
|
|
||||||
|
**Features include**:
|
||||||
|
- Filter systems for skills, links, and projects
|
||||||
|
- Responsive mobile navigation with a custom footer bar
|
||||||
|
- Various hover effects and interactive UI elements and more
|
||||||
|
|
||||||
|
*Usage Notice*:
|
||||||
|
This project is intended as a template for creating your own projects. The content must be fundamentally changed. If you use this project as a basis, please credit me by name (Andreas R.) and link to my [GitHub account](https://github.com/LNMedia) or [website](https://areimann.de).
|
||||||
|
|
||||||
|
*Notice*:
|
||||||
|
This project is archived and will not receive further updates or maintenance. It is provided as-is for reference or template purposes only.
|
||||||
Executable
+766
@@ -0,0 +1,766 @@
|
|||||||
|
{
|
||||||
|
"navHome": {
|
||||||
|
"de": "Startseite",
|
||||||
|
"en": "Homepage"
|
||||||
|
},
|
||||||
|
"navProfile": {
|
||||||
|
"de": "Mein Profil",
|
||||||
|
"en": "My Profile"
|
||||||
|
},
|
||||||
|
"navProjects": {
|
||||||
|
"de": "Projekte",
|
||||||
|
"en": "Projects"
|
||||||
|
},
|
||||||
|
"navSkills": {
|
||||||
|
"de": "Fähigkeiten",
|
||||||
|
"en": "Skills"
|
||||||
|
},
|
||||||
|
"navContact": {
|
||||||
|
"de": "Kontakt",
|
||||||
|
"en": "Contact"
|
||||||
|
},
|
||||||
|
"mobileMenu": {
|
||||||
|
"de": "Menü",
|
||||||
|
"en": "Menu"
|
||||||
|
},
|
||||||
|
"mobileContact": {
|
||||||
|
"de": "Kontakt",
|
||||||
|
"en": "Contact"
|
||||||
|
},
|
||||||
|
"mobileProjects": {
|
||||||
|
"de": "Projekte",
|
||||||
|
"en": "Projects"
|
||||||
|
},
|
||||||
|
"mobileSettings": {
|
||||||
|
"de": "Optionen",
|
||||||
|
"en": "Settings"
|
||||||
|
},
|
||||||
|
"legalImpress": {
|
||||||
|
"de": "Impressum",
|
||||||
|
"en": "Impress"
|
||||||
|
},
|
||||||
|
"legalData": {
|
||||||
|
"de": "Datenschutz",
|
||||||
|
"en": "Privacy Policy"
|
||||||
|
},
|
||||||
|
"legalCookies": {
|
||||||
|
"de": "Cookies",
|
||||||
|
"en": "Cookies"
|
||||||
|
},
|
||||||
|
"legalSources": {
|
||||||
|
"de": "Quellen",
|
||||||
|
"en": "Sources"
|
||||||
|
},
|
||||||
|
"errorTextOne": {
|
||||||
|
"de": "Hoppla! Die Seite, die du suchst, existiert nicht.",
|
||||||
|
"en": "Oops! The page you're looking for doesn't exist."
|
||||||
|
},
|
||||||
|
"errorTextTwo": {
|
||||||
|
"de": "Es scheint, als hättest du dich verirrt. Kein Problem, das passiert den Besten!",
|
||||||
|
"en": "It seems like you’ve taken a wrong turn. Don’t worry, it happens to the best of us!"
|
||||||
|
},
|
||||||
|
"errorTextThree": {
|
||||||
|
"de": "Klicke unten, um zur Startseite zurückzukehren oder gehe zurück zu der Seite, von der du kamst.",
|
||||||
|
"en": "Click below to return to the homepage or go back to where you came from."
|
||||||
|
},
|
||||||
|
"errorButton": {
|
||||||
|
"de": "Zurück zur Startseite",
|
||||||
|
"en": "Back to Home"
|
||||||
|
},
|
||||||
|
"linksBusiness": {
|
||||||
|
"de": "Geschäftl.",
|
||||||
|
"en": "Business"
|
||||||
|
},
|
||||||
|
"linksGaming": {
|
||||||
|
"de": "Gaming",
|
||||||
|
"en": "Gaming"
|
||||||
|
},
|
||||||
|
"linksGamingjc": {
|
||||||
|
"de": "Gaming / Just Chatting",
|
||||||
|
"en": "Gaming / Just Chatting"
|
||||||
|
},
|
||||||
|
"linksAllround": {
|
||||||
|
"de": "Allround",
|
||||||
|
"en": "Allround"
|
||||||
|
},
|
||||||
|
"linksMusic": {
|
||||||
|
"de": "Musik",
|
||||||
|
"en": "Music"
|
||||||
|
},
|
||||||
|
"linksPodcast": {
|
||||||
|
"de": "Podcast",
|
||||||
|
"en": "Podcast"
|
||||||
|
},
|
||||||
|
"skillsIntroHeader": {
|
||||||
|
"de": "Meine Fähigkeiten",
|
||||||
|
"en": "My Skills"
|
||||||
|
},
|
||||||
|
"skillsIntroTextOne": {
|
||||||
|
"de": "In einer digitalen Welt, die ständig im Wandel ist, spielen fundierte Kenntnisse und vielseitige Fähigkeiten eine zentrale Rolle. Auf dieser Seite gebe ich einen Einblick in meine Erfahrungen – von technischen Fertigkeiten über kreative Ansätze bis hin zu strategischen Überlegungen.",
|
||||||
|
"en": "In a rapidly changing digital world, in-depth knowledge and versatile skills play a key role. On this page, I provide an insight into my experiences – from technical skills to creative approaches and strategic thinking."
|
||||||
|
},
|
||||||
|
"skillsIntroTextTwo": {
|
||||||
|
"de": "Ob Webentwicklung, Softwaredesign, Content Creation oder strategisches Management – meine Fähigkeiten verbinden technisches Know-how mit innovativen Ideen. Durch jahrelange praktische Erfahrung habe ich gelernt, Lösungen für vielfältige Herausforderungen zu entwickeln, die sowohl funktional als auch effizient sind.",
|
||||||
|
"en": "Whether it’s web development, software design, content creation, or strategic management – my skills blend technical expertise with innovative ideas. Through years of hands-on experience, I have learned to develop solutions for a wide range of challenges that are both functional and efficient."
|
||||||
|
},
|
||||||
|
"skillsIntroTextThree": {
|
||||||
|
"de": "Jede Fähigkeit, die hier vorgestellt wird, basiert nicht nur auf theoretischem Wissen, sondern wurde in realen Projekten angewendet und kontinuierlich verbessert. Ich freue mich darauf, gemeinsam neue Möglichkeiten zu erkunden und innovative Lösungen zu finden.",
|
||||||
|
"en": "Each skill presented here is not just theoretical knowledge but has been applied in real-world projects and continuously improved. I look forward to exploring new opportunities together and finding innovative solutions."
|
||||||
|
},
|
||||||
|
"skillsProcessHeader": {
|
||||||
|
"de": "Aktuelle Fähigkeiten",
|
||||||
|
"en": "Current skills"
|
||||||
|
},
|
||||||
|
"allProcessesButton": {
|
||||||
|
"de": "Alle",
|
||||||
|
"en": "All"
|
||||||
|
},
|
||||||
|
"processProgramming": {
|
||||||
|
"de": "Programmieren",
|
||||||
|
"en": "Programming"
|
||||||
|
},
|
||||||
|
"processPlan": {
|
||||||
|
"de": "Planen",
|
||||||
|
"en": "Planning"
|
||||||
|
},
|
||||||
|
"processVideo": {
|
||||||
|
"de": "Video",
|
||||||
|
"en": "Video"
|
||||||
|
},
|
||||||
|
"processServer": {
|
||||||
|
"de": "Server",
|
||||||
|
"en": "Server"
|
||||||
|
},
|
||||||
|
"processAudio": {
|
||||||
|
"de": "Audio",
|
||||||
|
"en": "Audio"
|
||||||
|
},
|
||||||
|
"processKI": {
|
||||||
|
"de": "Künstliche Intelligenz",
|
||||||
|
"en": "Artificial intelligence"
|
||||||
|
},
|
||||||
|
"processWebdev": {
|
||||||
|
"de": "Webentwicklung (Frontend)",
|
||||||
|
"en": "Webdevelopment (Frontend)"
|
||||||
|
},
|
||||||
|
"processBackend": {
|
||||||
|
"de": "Webentwicklung (Backend)",
|
||||||
|
"en": "Webdevelopment (Backend)"
|
||||||
|
},
|
||||||
|
"processCoding": {
|
||||||
|
"de": "Codes/Scripts schreiben",
|
||||||
|
"en": "Writing codes/scripts"
|
||||||
|
},
|
||||||
|
"processPlanning": {
|
||||||
|
"de": "Nutzung von Planungstools",
|
||||||
|
"en": "Usage of planning tools"
|
||||||
|
},
|
||||||
|
"processEditing": {
|
||||||
|
"de": "Videos erstellen",
|
||||||
|
"en": "Video creation"
|
||||||
|
},
|
||||||
|
"processStreaming": {
|
||||||
|
"de": "LIVE-Streaming",
|
||||||
|
"en": "LIVE-Streaming"
|
||||||
|
},
|
||||||
|
"processWebServer": {
|
||||||
|
"de": "Webserver erstellen",
|
||||||
|
"en": "Creating a webserver"
|
||||||
|
},
|
||||||
|
"processAudioServer": {
|
||||||
|
"de": "Audionetzwerke erstellen",
|
||||||
|
"en": "Creation of audio networks"
|
||||||
|
},
|
||||||
|
"processMusic": {
|
||||||
|
"de": "Musikproduktion",
|
||||||
|
"en": "Music creation"
|
||||||
|
},
|
||||||
|
"processUseKI": {
|
||||||
|
"de": "Künstliche Intelligenzen",
|
||||||
|
"en": "Artificial intelligence"
|
||||||
|
},
|
||||||
|
"skillsHighlightsHeader": {
|
||||||
|
"de": "Meine Projekt Highlights",
|
||||||
|
"en": "My project highlights"
|
||||||
|
},
|
||||||
|
"moreInfo": {
|
||||||
|
"de": "Mehr Informationen",
|
||||||
|
"en": "More informations"
|
||||||
|
},
|
||||||
|
"projectsHeader": {
|
||||||
|
"de": "Meine Projekte",
|
||||||
|
"en": "My Projects"
|
||||||
|
},
|
||||||
|
"startDate": {
|
||||||
|
"de": "Startdatum: ",
|
||||||
|
"en": "Start date: "
|
||||||
|
},
|
||||||
|
"endDate": {
|
||||||
|
"de": "Fertigstellung: ",
|
||||||
|
"en": "Finished: "
|
||||||
|
},
|
||||||
|
"upDate": {
|
||||||
|
"de": "Letztes Update: ",
|
||||||
|
"en": "Latest update: "
|
||||||
|
},
|
||||||
|
"technologies": {
|
||||||
|
"de": "Technologien: ",
|
||||||
|
"en": "Technologies: "
|
||||||
|
},
|
||||||
|
"projectDescription": {
|
||||||
|
"de": "Projektbeschreibung: ",
|
||||||
|
"en": "Projectdescription: "
|
||||||
|
},
|
||||||
|
"projectName": {
|
||||||
|
"de": "Projektname: ",
|
||||||
|
"en": "Projectname: "
|
||||||
|
},
|
||||||
|
"plannedDate": {
|
||||||
|
"de": "Geplante Fertigstellung: ",
|
||||||
|
"en": "Planned Finishing: "
|
||||||
|
},
|
||||||
|
"projectOpen": {
|
||||||
|
"de": "Offen",
|
||||||
|
"en": "Open"
|
||||||
|
},
|
||||||
|
"projectWIP": {
|
||||||
|
"de": "In Arbeit",
|
||||||
|
"en": "In Progress"
|
||||||
|
},
|
||||||
|
"projectFrozen": {
|
||||||
|
"de": "Pausiert",
|
||||||
|
"en": "Paused"
|
||||||
|
},
|
||||||
|
"projectDone": {
|
||||||
|
"de": "Abgeschlossen",
|
||||||
|
"en": "Done"
|
||||||
|
},
|
||||||
|
"projectOneDescription": {
|
||||||
|
"de": "Die Website von A. Reimann dient als professionelle Online-Präsenz und bietet einen umfassenden Einblick in die Person hinter dem Namen. Interessierte erhalten hier einen detaillierten Überblick über berufliche Stationen, Fähigkeiten und Projekte. Die Seite wurde mit modernen Webtechnologien realisiert und fungiert als zentrale Plattform für alle, die mehr über Werdegang, Kompetenzen und Tätigkeiten erfahren möchten.",
|
||||||
|
"en": "The A. Reimann website is a professional online presence that offers a comprehensive insight into the person behind the name. Visitors are provided with an in-depth overview of career milestones, skills, and personal projects. Built using modern web technologies, the site serves as a central hub for anyone interested in learning more about the background, expertise, and activities of A. Reimann."
|
||||||
|
},
|
||||||
|
"projectTwoDescription": {
|
||||||
|
"de": "Stream Warden ist eine innovative Softwarelösung für Content Creator, die ihren Stream auf professionelle Weise optimieren möchten. Ausgestattet mit einem intelligenten Chatbot, integriertem Musikplayer und einem individuell konfigurierbaren Streamdeck bietet die Software zahlreiche Werkzeuge zur Steigerung der Zuschauerbindung. Stream Warden unterstützt gängige Plattformen wie Twitch, YouTube und TikTok und ermöglicht ein nahtloses, interaktives Streaming-Erlebnis auf höchstem Niveau.",
|
||||||
|
"en": "Stream Warden is an innovative software solution tailored for content creators looking to elevate their streaming performance. Featuring a smart chatbot, integrated music player, and a fully customizable stream deck, the software offers a broad set of tools to enhance audience engagement. Compatible with major platforms such as Twitch, YouTube, and TikTok, Stream Warden ensures a seamless and professional-grade streaming experience."
|
||||||
|
},
|
||||||
|
"projectThreeDescription": {
|
||||||
|
"de": "LupiCore (Server) ist eine umfassende Server-Management-Software, die eine zentrale Steuerung verschiedenster Servertypen ermöglicht – darunter Apache-, WebSocket-, Datei- und Game-Server. Die Lösung läuft direkt auf dem Server-PC und bietet darüber hinaus ein flexibles Modul-System, mit dem Erweiterungen und Tools bereitgestellt werden können. LupiCore bildet das Rückgrat einer skalierbaren Infrastruktur und sorgt für eine stabile Verbindung zwischen Server und Clients.",
|
||||||
|
"en": "LupiCore (Server) is a comprehensive server management platform designed to centralize control of a wide range of server types – including Apache, WebSocket, file, and game servers. Operating directly on your server PC, LupiCore also supports a flexible module system, allowing the distribution of extensions and tools. Acting as the backbone of a scalable infrastructure, it ensures a stable and seamless connection between the server and its clients."
|
||||||
|
},
|
||||||
|
"projectFourDescription": {
|
||||||
|
"de": "LupiCore (Client) ist die benutzerfreundliche Schnittstelle zum LupiCore-Server und ermöglicht den Zugriff auf vielfältige Dienste und Anwendungen. Nutzer können über die Software Projekte steuern, WebSocket-Server verwalten, To-Do-Tools, Kalenderfunktionen und weitere Anwendungen nutzen. Zusätzlich erlaubt die Client-Version die Steuerung des eigenen Computers, wodurch individuelle Workflows und Automatisierungen realisiert werden können. Die Software kann weltweit eingesetzt werden und verbindet Nutzer direkt mit den bereitgestellten Lösungen des Servers.",
|
||||||
|
"en": "LupiCore (Client) is the user-friendly counterpart to the LupiCore Server, enabling access to a wide range of services and applications. Users can manage projects, control WebSocket servers, use to-do tools, calendar features, and more. The client also allows control over the local computer, opening up possibilities for customized workflows and automation. Accessible from anywhere with an internet connection, the software provides a direct link to all solutions hosted on the server."
|
||||||
|
},
|
||||||
|
"projectFiveDescription": {
|
||||||
|
"de": "Glow Puzzle Quest ist ein anspruchsvolles 2D-Puzzle-Spiel, das die Spieler in eine Welt voller taktischer Herausforderungen entführt. Auf einem variablen Spielfeld müssen alle Lichter deaktiviert werden, wobei jede Beleuchtungseinheit mit den benachbarten verknüpft ist. Das Ausschalten eines Elements beeinflusst andere, was strategisches Denken erfordert. Mit zufällig angeordneten Lichtern und steigender Schwierigkeit bleibt jede Runde eine neue Herausforderung. Minimalistische Grafik und fesselndes Gameplay machen Glow Puzzle Quest zu einem Muss für Puzzle-Fans.",
|
||||||
|
"en": "Glow Puzzle Quest is a challenging 2D puzzle game that immerses players in a world of tactical challenges. On a variable grid, the goal is to turn off all the lights, with each element interconnected to its neighbors. Deactivating one affects others, requiring strategic thinking. With randomly arranged lights and increasing difficulty, each round presents a new challenge. Minimalist graphics and captivating gameplay make Glow Puzzle Quest a must-have for puzzle enthusiasts."
|
||||||
|
},
|
||||||
|
"projectSixDescription": {
|
||||||
|
"de": "Fabian ist ein geschätzter Freund unseres Teams. Zu seinem Geburtstag wollten wir – das gesamte Social Media Team Giftwolf – ihm eine ganz besondere Freude machen. Mit viel Herzblut und Kreativität entstand eine Website voller liebevoller Details: interaktive Animationen, Konfetti-Effekte und individuell gestaltete Grafiken sorgen für ein einzigartiges Erlebnis. Jeder Aspekt wurde sorgfältig ausgewählt, um Fabians Persönlichkeit widerzuspiegeln und diesen besonderen Anlass zu feiern. Die Seite vereint visuelle Highlights mit akustischen Elementen – ein digitales Geschenk, das ihm hoffentlich lange in Erinnerung bleibt.",
|
||||||
|
"en": "Fabian is a valued friend of our team. For his birthday, we – the entire Social Media Team Giftwolf – wanted to give him something truly special. With a lot of passion and creativity, we created a website filled with thoughtful details: interactive animations, confetti effects, and custom-made graphics provide a one-of-a-kind experience. Every element was carefully chosen to reflect Fabian’s personality and to celebrate this special occasion. The site blends visual highlights with acoustic features – a digital gift meant to bring lasting joy and unforgettable memories."
|
||||||
|
},
|
||||||
|
"sortSelect": {
|
||||||
|
"de": "Name",
|
||||||
|
"en": "Name"
|
||||||
|
},
|
||||||
|
"sortbyStatus": {
|
||||||
|
"de": "Status",
|
||||||
|
"en": "Status"
|
||||||
|
},
|
||||||
|
"sortbyStart": {
|
||||||
|
"de": "Startdatum",
|
||||||
|
"en": "Start date"
|
||||||
|
},
|
||||||
|
"sortbyLatest": {
|
||||||
|
"de": "Letztes Update",
|
||||||
|
"en": "Latest update"
|
||||||
|
},
|
||||||
|
"sortbyPlanned": {
|
||||||
|
"de": "Geplant zu",
|
||||||
|
"en": "Planned to"
|
||||||
|
},
|
||||||
|
"sortbyEnd": {
|
||||||
|
"de": "Fertigstellung",
|
||||||
|
"en": "Finished"
|
||||||
|
},
|
||||||
|
"allProjectsButton": {
|
||||||
|
"de": "Alle Projekte",
|
||||||
|
"en": "All projects"
|
||||||
|
},
|
||||||
|
"sortAfter": {
|
||||||
|
"de": "Sortieren nach",
|
||||||
|
"en": "Sort by"
|
||||||
|
},
|
||||||
|
"profileAboutMeHeader": {
|
||||||
|
"de": "Über Mich",
|
||||||
|
"en": "About Me"
|
||||||
|
},
|
||||||
|
"aboutName": {
|
||||||
|
"de": "<strong>Name:</strong> Andreas Reimann",
|
||||||
|
"en": "<strong>Name:</strong> Andreas Reimann"
|
||||||
|
},
|
||||||
|
"aboutBirthday": {
|
||||||
|
"de": "<strong>Geboren am:</strong> 06.10.1998",
|
||||||
|
"en": "<strong>Date of Birth:</strong> October 6, 1998"
|
||||||
|
},
|
||||||
|
"aboutIntro1": {
|
||||||
|
"de": "<strong>Ich bin ein vielseitig interessierter Mensch mit einer Leidenschaft für Technologie, digitale Medien und Kommunikation.</strong> Ich liebe es, kreative Ideen in praktische Lösungen umzusetzen – sei es in der Webentwicklung, Musikproduktion, im Streaming oder beim Erstellen von digitalen Inhalten. Meist gehe ich als Einzelkämpfer durch meine Projekte, wobei ich den kreativen Prozess von Anfang bis Ende selbst in die Hand nehme. Gleichzeitig bin ich aber auch offen für strukturierte Teamarbeit und schätze die Möglichkeit, in einem Team zu arbeiten, um gemeinsam neue Ideen umzusetzen und Synergien zu nutzen. In meiner Arbeit als Webentwickler nutze ich NodeJS, um einfache, aber effiziente Backends zu erstellen, und MySQL, um Datenbanken zu entwickeln, die die spezifischen Anforderungen meiner Projekte erfüllen. Derzeit arbeite ich mit anderen an einem Podcast, dessen erste Folgen sich gerade in der Schnittphase befinden. Die Veröffentlichung steht kurz bevor und wird interessante Themen und Gespräche für die Zuhörer bieten. <br><br>Ich habe zudem eine Ausbildung zum Elektroniker für Energie- und Gebäudetechnik abgeschlossen, die ich vom 01.08.2016 bis 28.02.2020 in Rostock gemacht habe. Diese Ausbildung hat mir nicht nur praktische technische Kenntnisse vermittelt, sondern auch mein Interesse an der Lösung von Problemen und der Entwicklung effizienter Systeme geprägt.",
|
||||||
|
"en": "<strong>I am a multifaceted individual with a passion for technology, digital media, and communication.</strong> I enjoy transforming creative ideas into practical solutions, whether in web development, music production, streaming, or creating digital content. I usually work solo through my projects, taking control of the creative process from start to finish. However, I’m also open to working in a structured team environment, appreciating the opportunity to collaborate and leverage team synergies to bring new ideas to life. In my role as a web developer, I use NodeJS to build simple yet efficient backends, and MySQL to create databases that meet the specific needs of my projects. Currently, I am working with others on a podcast, with the first episodes currently in editing. The release is approaching, and it will feature interesting topics and conversations for the listeners. <br><br>I also completed an apprenticeship as an electronics technician for energy and building technology from 01.08.2016 to 28.02.2020 in Rostock. This apprenticeship not only gave me practical technical knowledge but also fostered my interest in problem-solving and developing efficient systems."
|
||||||
|
},
|
||||||
|
"aboutSkills1": {
|
||||||
|
"de": "<strong>Technisches Know-how und praktische Erfahrung:</strong><br>Ich habe fundierte Kenntnisse in der Webentwicklung, insbesondere in den Bereichen HTML, CSS, JavaScript, PHP und SQL. Dabei konzentriere ich mich darauf, Webseiten und Apps zu erstellen, die sowohl benutzerfreundlich als auch leistungsfähig sind. Als Administrator meiner eigenen Serverinfrastruktur kümmere ich mich selbstständig um Domains, Server, SSL-Zertifikate und Datenbanken und stelle sicher, dass alles reibungslos läuft. Mit NodeJS entwickle ich einfache, aber effektive Backends, und mit MySQL baue ich Datenbanken, die den Anforderungen meiner Projekte entsprechen. Außerdem arbeite ich regelmäßig mit Tools wie OBS und VoiceMeeter und nutze Video-Editoren wie DaVinci Resolve, um Inhalte für Plattformen wie TikTok und YouTube zu erstellen und zu bearbeiten.",
|
||||||
|
"en": "<strong>Technical expertise and hands-on experience:</strong><br>I have solid knowledge in web development, particularly in HTML, CSS, JavaScript, PHP, and SQL. My focus is on creating websites and apps that are both user-friendly and performant. As the administrator of my own server infrastructure, I manage domains, servers, SSL certificates, and databases independently, ensuring everything runs smoothly. Using NodeJS, I build simple yet effective backends, and with MySQL, I create databases that meet the specific needs of my projects. Additionally, I regularly work with tools like OBS and VoiceMeeter and use video editors such as DaVinci Resolve to create and edit content for platforms like TikTok and YouTube."
|
||||||
|
},
|
||||||
|
"aboutSkills2": {
|
||||||
|
"de": "<strong>Weitere Kompetenzen:</strong><br>Ich habe Erfahrung in der Bildbearbeitung und der Verwaltung von DNS sowie in der Organisation von Dateien und Ordnersystemen für größere Projekte. Zudem nutze ich KI-Tools wie ChatGPT und BlackBoxAI, um kreative Prozesse zu unterstützen und technische Herausforderungen zu meistern. Ich bin sicher im Umgang mit Windows PowerShell, der Kommandozeile und mit Office-Anwendungen wie Excel und PowerPoint. Auch die Planung und Umsetzung von PC-Setups gehört zu meinen Fähigkeiten. Außerdem leite ich ein kleines Social-Media-Team, in dem ich nicht nur die Koordination übernehme, sondern auch Inhalte erstelle und die Zusammenarbeit fördere.",
|
||||||
|
"en": "<strong>Additional skills:</strong><br>I have experience in image editing and DNS management, as well as organizing file and folder systems for larger projects. I also use AI tools like ChatGPT and BlackBoxAI to support creative processes and solve technical challenges. I am proficient in Windows PowerShell, command-line operations, and office applications like Excel and PowerPoint. Planning and setting up PC configurations is also part of my skill set. Additionally, I lead a small social media team where I not only handle coordination but also create content and promote collaboration."
|
||||||
|
},
|
||||||
|
"aboutProjects": {
|
||||||
|
"de": "<strong>Meine aktuellen Projekte:</strong> Ich plane, meinen Podcast weiter auszubauen und so eine tiefere Verbindung zu meiner Community aufzubauen. Der Podcast gibt mir die Möglichkeit, verschiedene Themen anzusprechen und mit meinen Zuhörern auf eine persönliche und authentische Weise in Kontakt zu treten. Die ersten Folgen befinden sich momentan in der Postproduktion und werden bald veröffentlicht. Zudem arbeite ich an Projekten im Bereich Kurzfilm und Dokumentation, bei denen ich emotionale Geschichten erzähle und neue Ideen in der digitalen Kommunikation umsetze. In Zukunft möchte ich auch interaktive Formate entwickeln, bei denen die Community aktiv in den kreativen Prozess eingebunden wird. <br><br>Um mehr über meine aktuellen Projekte zu erfahren, besuche bitte meine Projekteseite.",
|
||||||
|
"en": "<strong>My current projects:</strong> I plan to further expand my podcast, building a deeper connection with my community. The podcast allows me to explore various topics and engage with my listeners in a personal and authentic way. The first episodes are currently in post-production and will be released soon. Additionally, I am working on short film and documentary projects where I tell emotional stories and implement new ideas in digital communication. In the future, I want to develop interactive formats that involve the community actively in the creative process. <br><br>To learn more about my current projects, please visit my project page."
|
||||||
|
},
|
||||||
|
"aboutOutro": {
|
||||||
|
"de": "Ich freue mich immer über neue Herausforderungen, bei denen ich meine Fähigkeiten weiterentwickeln und neue Ideen einbringen kann. Ich schätze klare Kommunikation, kreative Zusammenarbeit und Projekte, die sowohl technisch als auch menschlich überzeugend sind. Mit meiner Erfahrung in der Webentwicklung, dem Streaming und Social Media Management freue ich mich auf spannende Projekte und die Möglichkeit, mit anderen zusammenzuarbeiten.",
|
||||||
|
"en": "I’m always excited about new challenges where I can continue to develop my skills and bring fresh ideas. I value clear communication, creative collaboration, and projects that are both technically and humanly compelling. With my experience in web development, streaming, and social media management, I look forward to exciting projects and the opportunity to collaborate with others."
|
||||||
|
},
|
||||||
|
"profileCertificatesHeader": {
|
||||||
|
"de": "Zertifikate",
|
||||||
|
"en": "Certificates"
|
||||||
|
},
|
||||||
|
"profilePartnershipsHeader": {
|
||||||
|
"de": "Partnerschaften",
|
||||||
|
"en": "Partnerships"
|
||||||
|
},
|
||||||
|
"profileGaleryHeader": {
|
||||||
|
"de": "Galerie",
|
||||||
|
"en": "Gallery"
|
||||||
|
},
|
||||||
|
"profileFAQHeader": {
|
||||||
|
"de": "Häufig gestellte Fragen",
|
||||||
|
"en": "Frequently asked questions"
|
||||||
|
},
|
||||||
|
"profileFAQQuestion1": {
|
||||||
|
"de": "Erstellst du alle deine Inhalte selbst?",
|
||||||
|
"en": "Do you create all your content by yourself?"
|
||||||
|
},
|
||||||
|
"profileFAQAnswer1": {
|
||||||
|
"de": "Ja, der Großteil meiner Inhalte wird in Eigenregie produziert – vom ersten Konzept bis zur finalen Umsetzung. Dabei greife ich teilweise auf Bilder von Stock-Anbietern zurück, aber auch eigene Kreationen gehören zu meinen Inhalten. Ebenso produziere und bearbeite ich alle Videos selbst, um die bestmögliche Qualität und Individualität zu gewährleisten.",
|
||||||
|
"en": "Yes, most of my content is produced independently – from the initial concept to the final product. While I occasionally source images from stock providers, I also create many of them myself. Likewise, I produce and edit all videos on my own to ensure the highest quality and individuality."
|
||||||
|
},
|
||||||
|
"profileFAQQuestion2": {
|
||||||
|
"de": "Programmierst du alle deine Projekte eigenständig?",
|
||||||
|
"en": "Do you code all your projects by yourself?"
|
||||||
|
},
|
||||||
|
"profileFAQAnswer2": {
|
||||||
|
"de": "Ja, die Entwicklung meiner Projekte erfolgt ausschließlich in Eigenregie, wobei ich ständig dazu lerne und mich weiterbilde. Derzeit konzentriere ich mich auf Webtechnologien wie HTML, CSS und JavaScript sowie auf NodeJS, um komplexe Projekte effizient umzusetzen und dabei immer auf dem neuesten Stand der Technik zu bleiben.",
|
||||||
|
"en": "Yes, I develop all my projects independently, while constantly learning and improving my skills. Currently, I focus on web technologies such as HTML, CSS, and JavaScript, as well as NodeJS, to efficiently implement complex projects while staying up to date with the latest technologies."
|
||||||
|
},
|
||||||
|
"profileFAQQuestion3": {
|
||||||
|
"de": "Bietest du Unterstützung für andere Creator an?",
|
||||||
|
"en": "Do you also support other creators?"
|
||||||
|
},
|
||||||
|
"profileFAQAnswer3": {
|
||||||
|
"de": "Das hängt stark davon ab, wie sich meine freie Zeit organisieren lässt. Ich bin jedoch immer bereit, anderen Creatorn zu helfen, besonders in den Bereichen Technik, Design und strategische Planung, wenn es meine Zeit zulässt.",
|
||||||
|
"en": "It largely depends on how I can manage my free time. However, I’m always willing to help other creators, especially in the areas of technology, design, and strategic planning, as long as my time allows it."
|
||||||
|
},
|
||||||
|
"profileFAQQuestion4": {
|
||||||
|
"de": "Arbeitest du mit einem Team zusammen?",
|
||||||
|
"en": "Do you work with a team?"
|
||||||
|
},
|
||||||
|
"profileFAQAnswer4": {
|
||||||
|
"de": "Abgesehen von meinem Social Media Team 'Team Giftwolf', das hauptsächlich für das Streaming und Video-Content zuständig ist – wir unterstützen uns gegenseitig sowohl bei Live-Streams als auch bei der Content-Erstellung – arbeite ich in der Regel eigenständig an meinen Projekten.",
|
||||||
|
"en": "Apart from my social media team 'Team Giftwolf', which mainly focuses on streaming and video content – we support each other in live streams and content creation – I usually work independently on my projects."
|
||||||
|
},
|
||||||
|
"profileFAQQuestion5": {
|
||||||
|
"de": "Kann man dich für Projekte buchen?",
|
||||||
|
"en": "Can you be booked for projects?"
|
||||||
|
},
|
||||||
|
"profileFAQAnswer5": {
|
||||||
|
"de": "Zurzeit arbeite ich an mehreren laufenden Projekten, aber ich bin immer offen für neue Ideen und Anfragen. Du kannst dich gerne über eines meiner Social Media-Konten auf der Kontaktseite bei mir melden, um mögliche Projekte zu besprechen.",
|
||||||
|
"en": "Currently, I am working on several ongoing projects, but I’m always open to new ideas and inquiries. Feel free to reach out via one of my social media accounts on the contact page to discuss potential projects."
|
||||||
|
},
|
||||||
|
"profileFAQQuestion6": {
|
||||||
|
"de": "Wie organisierst du deine Zeit zwischen den verschiedenen Projekten?",
|
||||||
|
"en": "How do you organize your time between different projects?"
|
||||||
|
},
|
||||||
|
"profileFAQAnswer6": {
|
||||||
|
"de": "Die Zeitplanung ist eine der größten Herausforderungen. Ich setze Prioritäten basierend auf Deadlines und dem Umfang der Projekte. Meistens benutze ich ein Projektmanagement-Tool, um alles im Blick zu behalten und meine Zeit effizient zu nutzen.",
|
||||||
|
"en": "Time management is one of the biggest challenges. I prioritize based on deadlines and the scope of the projects. I usually use a project management tool to keep everything in sight and make the most efficient use of my time."
|
||||||
|
},
|
||||||
|
"profileFAQQuestion7": {
|
||||||
|
"de": "Verwendest du spezielle Tools oder Software für deine Projekte?",
|
||||||
|
"en": "Do you use specific tools or software for your projects?"
|
||||||
|
},
|
||||||
|
"profileFAQAnswer7": {
|
||||||
|
"de": "Ja, für die Verwaltung und Umsetzung meiner Projekte nutze ich verschiedene Tools. Dazu gehören Software wie Visual Studio Code für das Programmieren, Adobe Photoshop für Designaufgaben sowie Notion für das Projektmanagement.",
|
||||||
|
"en": "Yes, I use various tools for managing and implementing my projects. These include software such as Visual Studio Code for coding, Adobe Photoshop for design tasks, and Notion for project management."
|
||||||
|
},
|
||||||
|
"profileFAQQuestion8": {
|
||||||
|
"de": "Welche Social Media Plattformen nutzt du am meisten?",
|
||||||
|
"en": "Which social media platforms do you use the most?"
|
||||||
|
},
|
||||||
|
"profileFAQAnswer8": {
|
||||||
|
"de": "Ich bin hauptsächlich auf TikTok und Twitch aktiv (YouTube nebenbei).",
|
||||||
|
"en": "I am mainly active on TikTok and Twitch (YouTube on the side)."
|
||||||
|
},
|
||||||
|
"profileFAQQuestion9": {
|
||||||
|
"de": "Wie gehst du mit negativer Kritik um?",
|
||||||
|
"en": "How do you deal with negative feedback?"
|
||||||
|
},
|
||||||
|
"profileFAQAnswer9": {
|
||||||
|
"de": "Negative Kritik ist unvermeidlich, aber ich versuche, sie konstruktiv zu nutzen, um mich weiterzuentwickeln. Ich nehme mir Zeit, die Kommentare zu reflektieren und nutze sie, um meine Inhalte zu verbessern und meinen Ansatz zu hinterfragen.",
|
||||||
|
"en": "Negative feedback is inevitable, but I try to use it constructively to improve. I take the time to reflect on the comments and use them to enhance my content and reassess my approach."
|
||||||
|
},
|
||||||
|
"partnerOne": {
|
||||||
|
"de": "Instant Gaming ist ein führender Anbieter von digitalen Spielkeys zu Preisen, die bis zu 90% reduziert sind. Mit einer breiten Auswahl an Spielen für PC, Xbox und PlayStation bietet Instant Gaming eine schnelle und zuverlässige Lösung für Gamer weltweit. Als Partner des Vertrauens, wenn es um Spiele geht, setzt Instant Gaming auf Transparenz, Sicherheit und exzellenten Kundenservice. Hier findest du alles, was das Gamer-Herz begehrt – zu unschlagbaren Preisen. Klicke auf das Logo, um zum Partner zu gelangen.",
|
||||||
|
"en": "Instant Gaming is a leading provider of digital game keys at prices discounted by up to 90%. With a wide selection of games for PC, Xbox, and PlayStation, Instant Gaming offers a fast and reliable solution for gamers worldwide. As my trusted partner when it comes to games, Instant Gaming emphasizes transparency, security, and exceptional customer service. Here, you'll find everything a gamer could wish for – at unbeatable prices. Click on the logo to visit the partner."
|
||||||
|
},
|
||||||
|
"impressHeader": {
|
||||||
|
"de": "Impressum",
|
||||||
|
"en": "Impress"
|
||||||
|
},
|
||||||
|
"impressParagraph5": {
|
||||||
|
"de": "Angaben gemäß § 5 DDG",
|
||||||
|
"en": "Information according to § 5 DDG"
|
||||||
|
},
|
||||||
|
"impressName": {
|
||||||
|
"de": "Andreas Reimann",
|
||||||
|
"en": "Andreas Reimann"
|
||||||
|
},
|
||||||
|
"impressAddress": {
|
||||||
|
"de": "*****************",
|
||||||
|
"en": "*****************"
|
||||||
|
},
|
||||||
|
"impressRepresentativeTitle": {
|
||||||
|
"de": "Vertreten durch:",
|
||||||
|
"en": "Represented by:"
|
||||||
|
},
|
||||||
|
"impressRepresentative": {
|
||||||
|
"de": "Andreas Reimann",
|
||||||
|
"en": "Andreas Reimann"
|
||||||
|
},
|
||||||
|
"impressContactTitle": {
|
||||||
|
"de": "Kontakt:",
|
||||||
|
"en": "Contact:"
|
||||||
|
},
|
||||||
|
"impressPhone": {
|
||||||
|
"de": "Telefon: *****************",
|
||||||
|
"en": "Phone: *****************"
|
||||||
|
},
|
||||||
|
"impressEmailLink": {
|
||||||
|
"de": "E-Mail: business@areimann.de",
|
||||||
|
"en": "Email: business@areimann.de"
|
||||||
|
},
|
||||||
|
"impressLiabilityTitle": {
|
||||||
|
"de": "Haftungsausschluss:",
|
||||||
|
"en": "Disclaimer:"
|
||||||
|
},
|
||||||
|
"impressLiabilityContentTitle": {
|
||||||
|
"de": "Haftung für Inhalte",
|
||||||
|
"en": "Liability for Content"
|
||||||
|
},
|
||||||
|
"impressLiabilityContent": {
|
||||||
|
"de": "Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 DDG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 DDG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.",
|
||||||
|
"en": "The contents of our pages were created with the greatest care. However, we cannot guarantee the accuracy, completeness, or timeliness of the content. As a service provider, we are responsible for our own content on these pages under general laws according to § 7 para. 1 DDG. According to §§ 8 to 10 DDG, we are not obligated to monitor transmitted or stored third-party information or investigate circumstances that indicate illegal activity. Obligations to remove or block the use of information under general laws remain unaffected. However, liability in this regard is only possible from the time of knowledge of a specific infringement. Upon becoming aware of such violations, we will remove this content immediately."
|
||||||
|
},
|
||||||
|
"impressLinkLiabilityTitle": {
|
||||||
|
"de": "Haftung für Links",
|
||||||
|
"en": "Liability for Links"
|
||||||
|
},
|
||||||
|
"impressLinkLiabilityContent": {
|
||||||
|
"de": "Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.",
|
||||||
|
"en": "Our offer contains links to external third-party websites over whose contents we have no influence. Therefore, we cannot assume any liability for these external contents. The respective provider or operator of the linked pages is always responsible for their content. The linked pages were checked for possible legal violations at the time of linking. Illegal content was not recognizable at the time of linking. A permanent content control of the linked pages is not reasonable without concrete indications of a legal violation. Upon becoming aware of legal violations, we will remove such links immediately."
|
||||||
|
},
|
||||||
|
"impressCopyrightTitle": {
|
||||||
|
"de": "Urheberrecht",
|
||||||
|
"en": "Copyright"
|
||||||
|
},
|
||||||
|
"impressCopyrightContent": {
|
||||||
|
"de": "Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.",
|
||||||
|
"en": "The content and works created by the site operators on these pages are subject to German copyright law. The reproduction, editing, distribution, and any kind of exploitation outside the limits of copyright require the written consent of the respective author or creator. Downloads and copies of this site are only permitted for private, non-commercial use. Insofar as the content on this site was not created by the operator, the copyrights of third parties are respected. In particular, third-party content is marked as such. If you nevertheless become aware of a copyright infringement, please inform us accordingly. Upon becoming aware of legal violations, we will remove such content immediately."
|
||||||
|
},
|
||||||
|
"impressPrivacyTitle": {
|
||||||
|
"de": "Datenschutz",
|
||||||
|
"en": "Privacy"
|
||||||
|
},
|
||||||
|
"impressPrivacyContent": {
|
||||||
|
"de": "Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich. Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.",
|
||||||
|
"en": "The use of our website is generally possible without providing personal data. Insofar as personal data (such as name, address, or email addresses) is collected on our pages, this is always done on a voluntary basis, if possible. This data will not be passed on to third parties without your express consent. We point out that data transmission over the Internet (e.g. communication by e-mail) can have security gaps. Complete protection of data against access by third parties is not possible. The use of contact data published within the scope of the legal notice obligation by third parties for sending unsolicited advertising and information materials is hereby expressly rejected. The operators of the pages expressly reserve the right to take legal action in the event of unsolicited sending of advertising information, such as spam emails."
|
||||||
|
},
|
||||||
|
"impressGeneratorInfo": {
|
||||||
|
"de": "Erstellt mit dem <a href='https://impressum-generator.de' rel='dofollow'>Impressum-Generator</a> von WebsiteWissen.com, dem Ratgeber für <a href='https://websitewissen.com/website-erstellen' rel='dofollow'>Website-Erstellung</a>, <a href='https://websitewissen.com/homepage-baukasten-vergleich' rel='dofollow'>Homepage-Baukästen</a> und <a href='https://websitewissen.com/shopsysteme-vergleich' rel='dofollow'>Shopsysteme</a>. Rechtstext von der <a href='https://www.kanzlei-hasselbach.de/' rel='dofollow'>Kanzlei Hasselbach</a>.",
|
||||||
|
"en": "Created with the <a href='https://impressum-generator.de' rel='dofollow'>Legal Notice Generator</a> by WebsiteWissen.com, the guide for <a href='https://websitewissen.com/website-erstellen' rel='dofollow'>website creation</a>, <a href='https://websitewissen.com/homepage-baukasten-vergleich' rel='dofollow'>homepage builders</a> and <a href='https://websitewissen.com/shopsysteme-vergleich' rel='dofollow'>shop systems</a>. Legal text by <a href='https://www.kanzlei-hasselbach.de/' rel='dofollow'>Kanzlei Hasselbach</a>."
|
||||||
|
},
|
||||||
|
"cookieInfo": {
|
||||||
|
"de": "Diese Website verwendet Cookies zur Speicherung deiner Sprache, des Designs und der aktuellen Seite. <a onclick='loadPage(`dataprotection`)'>Mehr Informationen</a>",
|
||||||
|
"en": "This website uses cookies to remember your language, design and current page. <a onclick='loadPage(`dataprotection`)'>More Informations</a>"
|
||||||
|
},
|
||||||
|
"dataProtectionHeader": {
|
||||||
|
"de": "Datenschutzerklärung",
|
||||||
|
"en": "Privacy Policy"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph1": {
|
||||||
|
"de": "Personenbezogene Daten (nachfolgend zumeist nur „Daten“ genannt) werden von uns nur im Rahmen der Erforderlichkeit sowie zum Zwecke der Bereitstellung eines funktionsfähigen und nutzerfreundlichen Internetauftritts, inklusive seiner Inhalte und der dort angebotenen Leistungen, verarbeitet.",
|
||||||
|
"en": "Personal data (hereinafter mostly referred to as 'data') is processed by us only to the extent necessary and for the purpose of providing a functional and user-friendly website, including its contents and the services offered there."
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph2": {
|
||||||
|
"de": "Gemäß <a href='https://dejure.org/gesetze/DSGVO/4.html' title='Art. 4 DSGVO: Begriffsbestimmungen' rel='nofollow noopener' target='_blank'>Art. 4 Ziffer 1</a>. der Verordnung (EU) 2016/679, also der Datenschutz-Grundverordnung (nachfolgend nur „DSGVO“ genannt), gilt als „Verarbeitung“ jeder mit oder ohne Hilfe automatisierter Verfahren ausgeführter Vorgang oder jede solche Vorgangsreihe im Zusammenhang mit personenbezogenen Daten, wie das Erheben, das Erfassen, die Organisation, das Ordnen, die Speicherung, die Anpassung oder Veränderung, das Auslesen, das Abfragen, die Verwendung, die Offenlegung durch Übermittlung, Verbreitung oder eine andere Form der Bereitstellung, den Abgleich oder die Verknüpfung, die Einschränkung, das Löschen oder die Vernichtung.",
|
||||||
|
"en": "According to <a href='https://dejure.org/gesetze/DSGVO/4.html' title='Art. 4 DSGVO: Definitions' rel='nofollow noopener' target='_blank'>Art. 4 Ziffer 1</a>. of Regulation (EU) 2016/679, also known as the General Data Protection Regulation (hereinafter referred to as 'GDPR'), 'processing' means any operation or set of operations which is performed on personal data, whether or not by automated means, such as collection, recording, organization, structuring, storage, adaptation or alteration, retrieval, consultation, use, disclosure by transmission, dissemination or otherwise making available, alignment or combination, restriction, erasure or destruction."
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph3": {
|
||||||
|
"de": "Mit der nachfolgenden Datenschutzerklärung informieren wir Sie insbesondere über Art, Umfang, Zweck, Dauer und Rechtsgrundlage der Verarbeitung personenbezogener Daten, soweit wir entweder allein oder gemeinsam mit anderen über die Zwecke und Mittel der Verarbeitung entscheiden. Zudem informieren wir Sie nachfolgend über die von uns zu Optimierungszwecken sowie zur Steigerung der Nutzungsqualität eingesetzten Fremdkomponenten, soweit hierdurch Dritte Daten in wiederum eigener Verantwortung verarbeiten.",
|
||||||
|
"en": "With the following privacy policy, we inform you in particular about the type, scope, purpose, duration, and legal basis of the processing of personal data, as far as we either alone or together with others decide on the purposes and means of processing. We also inform you about the third-party components we use for optimization purposes and to enhance user experience, as far as they process data in their own responsibility."
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph4": {
|
||||||
|
"de": "Unsere Datenschutzerklärung ist wie folgt gegliedert:",
|
||||||
|
"en": "Our privacy policy is structured as follows:"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph5": {
|
||||||
|
"de": "I. Informationen über uns als Verantwortliche<br>II. Rechte der Nutzer und Betroffenen<br>III. Informationen zur Datenverarbeitung",
|
||||||
|
"en": "I. Information about us as controllers<br>II. Rights of users and data subjects<br>III. Information on data processing"
|
||||||
|
},
|
||||||
|
"dataProtectionHeader2": {
|
||||||
|
"de": "I. Informationen über uns als Verantwortliche",
|
||||||
|
"en": "I. Information about us as controllers"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph6": {
|
||||||
|
"de": "Verantwortlicher Anbieter dieses Internetauftritts im datenschutzrechtlichen Sinne ist:",
|
||||||
|
"en": "Responsible provider of this website in the sense of data protection law is:"
|
||||||
|
},
|
||||||
|
"dataProtectionHeader3": {
|
||||||
|
"de": "II. Rechte der Nutzer und Betroffenen",
|
||||||
|
"en": "II. Rights of users and data subjects"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph8": {
|
||||||
|
"de": "Mit Blick auf die nachfolgend noch näher beschriebene Datenverarbeitung haben die Nutzer und Betroffenen das Recht",
|
||||||
|
"en": "With regard to the data processing described in more detail below, users and data subjects have the right"
|
||||||
|
},
|
||||||
|
"dataProtectionList1": {
|
||||||
|
"de": "<li>auf Bestätigung, ob sie betreffende Daten verarbeitet werden, auf Auskunft über die verarbeiteten Daten, auf weitere Informationen über die Datenverarbeitung sowie auf Kopien der Daten (vgl. auch <a href='https://dejure.org/gesetze/DSGVO/15.html' title='Art. 15 DSGVO: Auskunftsrecht der betroffenen Person' rel='nofollow noopener' target='_blank'>Art. 15 DSGVO</a>);</li><li>auf Berichtigung oder Vervollständigung unrichtiger bzw. unvollständiger Daten (vgl. auch <a href='https://dejure.org/gesetze/DSGVO/16.html' title='Art. 16 DSGVO: Recht auf Berichtigung' rel='nofollow noopener' target='_blank'>Art. 16 DSGVO</a>);</li><li>auf unverzügliche Löschung der sie betreffenden Daten (vgl. auch <a href='https://dejure.org/gesetze/DSGVO/17.html' title='Art. 17 DSGVO: Recht auf Löschung ("Recht auf Vergessenwerden")' rel='nofollow noopener' target='_blank'>Art. 17 DSGVO</a>), oder, alternativ, soweit eine weitere Verarbeitung gemäß <a href='https://dejure.org/gesetze/DSGVO/17.html' title='Art. 17 DSGVO: Recht auf Löschung ("Recht auf Vergessenwerden")' rel='nofollow noopener' target='_blank'>Art. 17 Abs. 3 DSGVO</a> erforderlich ist, auf Einschränkung der Verarbeitung nach Maßgabe von <a href='https://dejure.org/gesetze/DSGVO/18.html' title='Art. 18 DSGVO: Recht auf Einschränkung der Verarbeitung' rel='nofollow noopener' target='_blank'>Art. 18 DSGVO</a>;</li><li>auf Erhalt der sie betreffenden und von ihnen bereitgestellten Daten und auf Übermittlung dieser Daten an andere Anbieter/Verantwortliche (vgl. auch <a href='https://dejure.org/gesetze/DSGVO/20.html' title='Art. 20 DSGVO: Recht auf Datenübertragbarkeit' rel='nofollow noopener' target='_blank'>Art. 20 DSGVO</a>);</li><li>auf Beschwerde gegenüber der Aufsichtsbehörde, sofern sie der Ansicht sind, dass die sie betreffenden Daten durch den Anbieter unter Verstoß gegen datenschutzrechtliche Bestimmungen verarbeitet werden (vgl. auch <a href='https://dejure.org/gesetze/DSGVO/77.html' title='Art. 77 DSGVO: Recht auf Beschwerde bei einer Aufsichtsbehörde' rel='nofollow noopener' target='_blank'>Art. 77 DSGVO</a>).</li>",
|
||||||
|
"en": "<li>to confirmation as to whether data concerning them is being processed, to information about the processed data, to further information on data processing, and to copies of the data (see also <a href='https://dejure.org/gesetze/DSGVO/15.html' title='Art. 15 DSGVO: Right of access by the data subject' rel='nofollow noopener' target='_blank'>Art. 15 GDPR</a>);</li><li>to rectification or completion of inaccurate or incomplete data (see also <a href='https://dejure.org/gesetze/DSGVO/16.html' title='Art. 16 DSGVO: Right to rectification' rel='nofollow noopener' target='_blank'>Art. 16 GDPR</a>);</li><li>to immediate deletion of their data (see also <a href='https://dejure.org/gesetze/DSGVO/17.html' title='Art. 17 DSGVO: Right to erasure ("right to be forgotten")' rel='nofollow noopener' target='_blank'>Art. 17 GDPR</a>), or, alternatively, if further processing is necessary according to <a href='https://dejure.org/gesetze/DSGVO/17.html' title='Art. 17 DSGVO: Right to erasure ("right to be forgotten")' rel='nofollow noopener' target='_blank'>Art. 17 para. 3 GDPR</a>, to restriction of processing in accordance with <a href='https://dejure.org/gesetze/DSGVO/18.html' title='Art. 18 DSGVO: Right to restriction of processing' rel='nofollow noopener' target='_blank'>Art. 18 GDPR</a>;</li><li>to receive the data concerning them and provided by them and to transmit this data to other providers/controllers (see also <a href='https://dejure.org/gesetze/DSGVO/20.html' title='Art. 20 DSGVO: Right to data portability' rel='nofollow noopener' target='_blank'>Art. 20 GDPR</a>);</li><li>to lodge a complaint with a supervisory authority if they believe that the data concerning them is being processed by the provider in violation of data protection regulations (see also <a href='https://dejure.org/gesetze/DSGVO/77.html' title='Art. 77 DSGVO: Right to lodge a complaint with a supervisory authority' rel='nofollow noopener' target='_blank'>Art. 77 GDPR</a>).</li>"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph9": {
|
||||||
|
"de": "Darüber hinaus ist der Anbieter dazu verpflichtet, alle Empfänger, denen gegenüber Daten durch den Anbieter offengelegt worden sind, über jedwede Berichtigung oder Löschung von Daten oder die Einschränkung der Verarbeitung, die aufgrund der <a href='https://dejure.org/gesetze/DSGVO/16.html' title='Art. 16 DSGVO: Recht auf Berichtigung' rel='nofollow noopener' target='_blank'>Artikel 16</a>, <a href='https://dejure.org/gesetze/DSGVO/17.html' title='Art. 17 DSGVO: Recht auf Löschung ("Recht auf Vergessenwerden")' rel='nofollow noopener' target='_blank'>17 Abs. 1</a>, <a href='https://dejure.org/gesetze/DSGVO/18.html' title='Art. 18 DSGVO: Recht auf Einschränkung der Verarbeitung' rel='nofollow noopener' target='_blank'>18 DSGVO</a> erfolgt, zu unterrichten. Diese Verpflichtung besteht jedoch nicht, soweit diese Mitteilung unmöglich oder mit einem unverhältnismäßigen Aufwand verbunden ist. Unbeschadet dessen hat der Nutzer ein Recht auf Auskunft über diese Empfänger.",
|
||||||
|
"en": "In addition, the provider is obliged to inform all recipients to whom data has been disclosed by the provider about any rectification or deletion of data or the restriction of processing that has taken place under <a href='https://dejure.org/gesetze/DSGVO/16.html' title='Art. 16 DSGVO: Right to rectification' rel='nofollow noopener' target='_blank'>Articles 16</a>, <a href='https://dejure.org/gesetze/DSGVO/17.html' title='Art. 17 DSGVO: Right to erasure ("right to be forgotten")' rel='nofollow noopener' target='_blank'>17 para. 1</a>, <a href='https://dejure.org/gesetze/DSGVO/18.html' title='Art. 18 DSGVO: Right to restriction of processing' rel='nofollow noopener' target='_blank'>18 GDPR</a>. However, this obligation does not exist if this notification is impossible or involves a disproportionate effort. Notwithstanding this, the user has a right to information about these recipients."
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph10": {
|
||||||
|
"de": "Ebenfalls haben die Nutzer und Betroffenen nach <a href='https://dejure.org/gesetze/DSGVO/21.html' title='Art. 21 DSGVO: Widerspruchsrecht' rel='nofollow noopener' target='_blank'>Art. 21 DSGVO</a> das Recht auf Widerspruch gegen die künftige Verarbeitung der sie betreffenden Daten, sofern die Daten durch den Anbieter nach Maßgabe von <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Rechtmäßigkeit der Verarbeitung' rel='nofollow noopener' target='_blank'>Art. 6 Abs. 1 lit. f) DSGVO</a> verarbeitet werden. Insbesondere ist ein Widerspruch gegen die Datenverarbeitung zum Zwecke der Direktwerbung statthaft.",
|
||||||
|
"en": "Users and data subjects also have the right to object to the future processing of their data under <a href='https://dejure.org/gesetze/DSGVO/21.html' title='Art. 21 DSGVO: Right to object' rel='nofollow noopener' target='_blank'>Art. 21 GDPR</a>, provided that the data is processed by the provider in accordance with <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Lawfulness of processing' rel='nofollow noopener' target='_blank'>Art. 6 para. 1 lit. f) GDPR</a>. In particular, an objection to data processing for the purpose of direct advertising is permissible."
|
||||||
|
},
|
||||||
|
"dataProtectionHeader4": {
|
||||||
|
"de": "III. Informationen zur Datenverarbeitung",
|
||||||
|
"en": "III. Information on data processing"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph11": {
|
||||||
|
"de": "Ihre bei Nutzung unseres Internetauftritts verarbeiteten Daten werden gelöscht oder gesperrt, sobald der Zweck der Speicherung entfällt, der Löschung der Daten keine gesetzlichen Aufbewahrungspflichten entgegenstehen und nachfolgend keine anderslautenden Angaben zu einzelnen Verarbeitungsverfahren gemacht werden.",
|
||||||
|
"en": "Your data processed when using our website will be deleted or blocked as soon as the purpose of storage ceases to apply, provided that there are no legal retention obligations against deletion and no other statements are made regarding individual processing procedures below."
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph12": {
|
||||||
|
"de": "<h4>Cookies</h4><h5>a) Sitzungs-Cookies/Session-Cookies</h5><p>Wir verwenden mit unserem Internetauftritt sog. Cookies. Cookies sind kleine Textdateien oder andere Speichertechnologien, die durch den von Ihnen eingesetzten Internet-Browser auf Ihrem Endgerät ablegt und gespeichert werden. Durch diese Cookies werden im individuellen Umfang bestimmte Informationen von Ihnen, wie beispielsweise Ihre Browser- oder Standortdaten oder Ihre IP-Adresse, verarbeitet.</p><p>Durch diese Verarbeitung wird unser Internetauftritt benutzerfreundlicher, effektiver und sicherer, da die Verarbeitung bspw. die Wiedergabe unseres Internetauftritts in unterschiedlichen Sprachen oder das Angebot einer Warenkorbfunktion ermöglicht.</p><p>Rechtsgrundlage dieser Verarbeitung ist Art. 6 Abs. 1 lit b.) DSGVO, sofern diese Cookies Daten zur Vertragsanbahnung oder Vertragsabwicklung verarbeitet werden.</p><p>Falls die Verarbeitung nicht der Vertragsanbahnung oder Vertragsabwicklung dient, liegt unser berechtigtes Interesse in der Verbesserung der Funktionalität unseres Internetauftritts. Rechtsgrundlage ist in dann <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Rechtmäßigkeit der Verarbeitung' rel='nofollow noopener' target='_blank'>Art. 6 Abs. 1 lit. f) DSGVO</a>.</p><p>Mit Schließen Ihres Internet-Browsers werden diese Session-Cookies gelöscht.</p>",
|
||||||
|
"en": "<h4>Cookies</h4><h5>a) Session Cookies</h5><p>We use so-called cookies with our website. Cookies are small text files or other storage technologies that are placed and stored on your end device by the internet browser you use. Through these cookies, certain information about you, such as your browser or location data or your IP address, is processed.</p><p>This processing makes our website more user-friendly, effective, and secure, as it enables the display of our website in different languages or offers a shopping cart function.</p><p>The legal basis for this processing is <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Lawfulness of processing' rel='nofollow noopener' target='_blank'>Art. 6 para. 1 lit b.) GDPR</a>, provided that these cookies process data for contract initiation or contract execution.</p><p>If the processing does not serve contract initiation or execution, our legitimate interest lies in improving the functionality of our website. The legal basis is then <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Lawfulness of processing' rel='nofollow noopener' target='_blank'>Art. 6 para. 1 lit f) GDPR</a>.</p><p>These session cookies are deleted when you close your internet browser.</p>"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph13": {
|
||||||
|
"de": "<h5>b) Drittanbieter-Cookies</h5><p>Gegebenenfalls werden mit unserem Internetauftritt auch Cookies von Partnerunternehmen, mit denen wir zum Zwecke der Werbung, der Analyse oder der Funktionalitäten unseres Internetauftritts zusammenarbeiten, verwendet.</p><p>Die Einzelheiten hierzu, insbesondere zu den Zwecken und den Rechtsgrundlagen der Verarbeitung solcher Drittanbieter-Cookies, entnehmen Sie bitte den nachfolgenden Informationen.</p>",
|
||||||
|
"en": "<h5>b) Third-party cookies</h5><p>Possibly, cookies from partner companies with whom we cooperate for the purpose of advertising, analysis, or functionalities of our website are also used with our website.</p><p>Please refer to the following information for details, especially regarding the purposes and legal bases of processing such third-party cookies.</p>"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph14": {
|
||||||
|
"de": "<h5>c) Beseitigungsmöglichkeit</h5><p>Sie können die Installation der Cookies durch eine Einstellung Ihres Internet-Browsers verhindern oder einschränken. Ebenfalls können Sie bereits gespeicherte Cookies jederzeit löschen. Die hierfür erforderlichen Schritte und Maßnahmen hängen jedoch von Ihrem konkret genutzten Internet-Browser ab. Bei Fragen benutzen Sie daher bitte die Hilfefunktion oder Dokumentation Ihres Internet-Browsers oder wenden sich an dessen Hersteller bzw. Support. Bei sog. Flash-Cookies kann die Verarbeitung allerdings nicht über die Einstellungen des Browsers unterbunden werden. Stattdessen müssen Sie insoweit die Einstellung Ihres Flash-Players ändern. Auch die hierfür erforderlichen Schritte und Maßnahmen hängen von Ihrem konkret genutzten Flash-Player ab. Bei Fragen benutzen Sie daher bitte ebenso die Hilfefunktion oder Dokumentation Ihres Flash-Players oder wenden sich an den Hersteller bzw. Benutzer-Support.</p><p>Sollten Sie die Installation der Cookies verhindern oder einschränken, kann dies allerdings dazu führen, dass nicht sämtliche Funktionen unseres Internetauftritts vollumfänglich nutzbar sind.</p>",
|
||||||
|
"en": "<h5>c) Possibility of removal</h5><p>You can prevent or restrict the installation of cookies by adjusting your internet browser settings. You can also delete already stored cookies at any time. The steps and measures required for this depend on the specific internet browser you are using. If you have any questions, please use the help function or documentation of your internet browser or contact the manufacturer or support. However, with so-called flash cookies, the processing cannot be prevented via the browser settings. Instead, you must change the settings of your flash player accordingly. The steps and measures required for this also depend on the specific flash player you are using. If you have any questions, please also use the help function or documentation of your flash player or contact the manufacturer or user support.</p><p>If you prevent or restrict the installation of cookies, this may result in not all functions of our website being fully usable.</p>"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph15": {
|
||||||
|
"de": "<h4>Kontaktanfragen / Kontaktmöglichkeit</h4><p>Sofern Sie per Kontaktformular oder E-Mail mit uns in Kontakt treten, werden die dabei von Ihnen angegebenen Daten zur Bearbeitung Ihrer Anfrage genutzt. Die Angabe der Daten ist zur Bearbeitung und Beantwortung Ihre Anfrage erforderlich – ohne deren Bereitstellung können wir Ihre Anfrage nicht oder allenfalls eingeschränkt beantworten.</p><p>Rechtsgrundlage für diese Verarbeitung ist <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Rechtmäßigkeit der Verarbeitung' rel='nofollow noopener' target='_blank'>Art. 6 Abs. 1 lit. b) DSGVO</a>.</p><p>Ihre Daten werden gelöscht, sofern Ihre Anfrage abschließend beantwortet worden ist und der Löschung keine gesetzlichen Aufbewahrungspflichten entgegenstehen, wie bspw. bei einer sich etwaig anschließenden Vertragsabwicklung.</p>",
|
||||||
|
"en": "<h4>Contact inquiries / Contact options</h4><p>If you contact us via contact form or email, the data you provide will be used to process your inquiry. Providing the data is necessary to process and respond to your inquiry - without providing it, we cannot answer your inquiry or can only do so to a limited extent.</p><p>The legal basis for this processing is <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Lawfulness of processing' rel='nofollow noopener' target='_blank'>Art. 6 para. 1 lit. b) GDPR</a>.</p><p>Your data will be deleted once your inquiry has been conclusively answered and there are no legal retention obligations against deletion, such as in the case of a subsequent contract execution.</p>"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph16": {
|
||||||
|
"de": "<h4>Instagram</h4><p>Zur Bewerbung unserer Produkte und Leistungen sowie zur Kommunikation mit Interessenten oder Kunden betreiben wir eine Firmenpräsenz auf der Plattform Instagram.</p><p>Auf dieser Social-Media-Plattform sind wir gemeinsam mit der Meta Platforms Ireland Limited, 4 Grand Canal Square, Dublin 2, Irland, verantwortlich.</p><p>Der Datenschutzbeauftragte von Instagram kann über ein Kontaktformular erreicht werden:</p><p><a href='https://www.facebook.com/help/contact/540977946302970' rel='nofollow noopener' target='_blank'>https://www.facebook.com/help/contact/540977946302970</a></p><p>Die gemeinsame Verantwortlichkeit haben wir in einer Vereinbarung bezüglich der jeweiligen Verpflichtungen im Sinne der DSGVO geregelt. Diese Vereinbarung, aus der sich die gegenseitigen Verpflichtungen ergeben, ist unter dem folgenden Link abrufbar:</p><p><a href='https://www.facebook.com/legal/terms/page_controller_addendum' rel='nofollow noopener' target='_blank'>https://www.facebook.com/legal/terms/page_controller_addendum</a></p><p>Rechtsgrundlage für die dadurch erfolgende und nachfolgend wiedergegebene Verarbeitung von personenbezogenen Daten ist <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Rechtmäßigkeit der Verarbeitung' rel='nofollow noopener' target='_blank'>Art. 6 Abs. 1 lit. f DSGVO</a>. Unser berechtigtes Interesse besteht an der Analyse, der Kommunikation sowie dem Absatz und der Bewerbung unserer Produkte und Leistungen.</p><p>Rechtsgrundlage kann auch eine Einwilligung des Nutzers gemäß <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Rechtmäßigkeit der Verarbeitung' rel='nofollow noopener' target='_blank'>Art. 6 Abs. 1 lit. a DSGVO</a> gegenüber dem Plattformbetreiber sein. Die Einwilligung hierzu kann der Nutzer nach <a href='https://dejure.org/gesetze/DSGVO/7.html' title='Art. 7 DSGVO: Bedingungen für die Einwilligung' rel='nofollow noopener' target='_blank'>Art. 7 Abs. 3 DSGVO</a> jederzeit durch eine Mitteilung an den Plattformbetreiber für die Zukunft widerrufen.</p><p>Bei dem Aufruf unseres Onlineauftritts auf der Plattform Instagram werden von der Meta Platforms Ireland Limited als Betreiberin der Plattform in der EU Daten des Nutzers (z.B. persönliche Informationen, IP-Adresse etc.) verarbeitet.</p><p>Diese Daten des Nutzers dienen zu statistischen Informationen über die Inanspruchnahme unserer Firmenpräsenz auf Instagram. Die Meta Platforms Ireland Limited nutzt diese Daten zu Marktforschungs- und Werbezwecken sowie zur Erstellung von Profilen der Nutzer. Anhand dieser Profile ist es der Meta Platforms Ireland Limited beispielsweise möglich, die Nutzer innerhalb und außerhalb von Instagram interessenbezogen zu bewerben. Ist der Nutzer zum Zeitpunkt des Aufrufes in seinem Account auf Instagram eingeloggt, kann die Meta Platforms Ireland Limited zudem die Daten mit dem jeweiligen Nutzerkonto verknüpfen.</p><p>Im Falle einer Kontaktaufnahme des Nutzers über Instagram werden die bei dieser Gelegenheit eingegebenen personenbezogenen Daten des Nutzers zur Bearbeitung der Anfrage genutzt. Die Daten des Nutzers werden bei uns gelöscht, sofern die Anfrage des Nutzers abschließend beantwortet wurde und keine gesetzlichen Aufbewahrungspflichten, wie z.B. bei einer anschließenden Vertragsabwicklung, entgegenstehen.</p><p>Zur Verarbeitung der Daten werden von der Meta Platforms Ireland Limited ggf. auch Cookies gesetzt.</p><p>Sollte der Nutzer mit dieser Verarbeitung nicht einverstanden sein, so besteht die Möglichkeit, die Installation der Cookies durch eine entsprechende Einstellung des Browsers zu verhindern. Bereits gespeicherte Cookies können ebenfalls jederzeit gelöscht werden. Die Einstellungen hierzu sind vom jeweiligen Browser abhängig. Bei Flash-Cookies lässt sich die Verarbeitung nicht über die Einstellungen des Browsers unterbinden, sondern durch die entsprechende Einstellung des Flash-Players. Sollte der Nutzer die Installation der Cookies verhindern oder einschränken, kann dies dazu führen, dass nicht sämtliche Funktionen von Facebook vollumfänglich nutzbar sind.</p><p>Näheres zu den Verarbeitungstätigkeiten, deren Unterbindung und zur Löschung der von Instagram verarbeiteten Daten finden sich in der Datenrichtlinie von Instagram:</p><p><a href='https://help.instagram.com/519522125107875' rel='nofollow noopener' target='_blank'>https://help.instagram.com/519522125107875</a></p><p>Es ist nicht ausgeschlossen, dass die Verarbeitung durch die Meta Platforms Ireland Limited auch über die Meta Platforms, Inc., 1601 Willow Road, Menlo Park, California 94025 in den USA erfolgt.</p>",
|
||||||
|
"en": "<h4>Instagram</h4><p>To promote our products and services and to communicate with interested parties or customers, we operate a company presence on the Instagram platform.</p><p>On this social media platform, we are jointly responsible with Meta Platforms Ireland Limited, 4 Grand Canal Square, Dublin 2, Ireland.</p><p>The data protection officer of Instagram can be reached via a contact form:</p><p><a href='https://www.facebook.com/help/contact/540977946302970' rel='nofollow noopener' target='_blank'>https://www.facebook.com/help/contact/540977946302970</a></p><p>We have regulated the joint responsibility in an agreement regarding the respective obligations in accordance with the GDPR. This agreement, from which the mutual obligations arise, can be accessed at the following link:</p><p><a href='https://www.facebook.com/legal/terms/page_controller_addendum' rel='nofollow noopener' target='_blank'>https://www.facebook.com/legal/terms/page_controller_addendum</a></p><p>The legal basis for the processing of personal data that occurs as a result and is reproduced below is <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Lawfulness of processing' rel='nofollow noopener' target='_blank'>Art. 6 para. 1 lit. f GDPR</a>. Our legitimate interest lies in the analysis, communication, as well as the sale and promotion of our products and services.</p><p>The legal basis may also be a consent of the user in accordance with <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Lawfulness of processing' rel='nofollow noopener' target='_blank'>Art. 6 para. 1 lit. a GDPR</a> towards the platform operator. The user can revoke this consent at any time for the future by notifying the platform operator in accordance with <a href='https://dejure.org/gesetze/DSGVO/7.html' title='Art. 7 DSGVO: Conditions for consent' rel='nofollow noopener' target='_blank'>Art. 7 para. 3 GDPR</a>.</p><p>When accessing our online presence on the Instagram platform, data of the user (e.g., personal"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph17": {
|
||||||
|
"de": "<h4>YouTube</h4><p>Wir unterhalten bei YouTube eine Onlinepräsenz um unser Unternehmen sowie unsere Leistungen zu präsentieren und mit Kunden/Interessenten zu kommunizieren. YouTube ist ein Service der Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland, ein Tochterunternehmen der Google LLC, 1600 Amphitheatre Parkway, Mountain View, CA 94043 USA.</p><p>Insofern weisen wir darauf hin, dass die Möglichkeit besteht, dass Daten der Nutzer außerhalb der Europäischen Union, insbesondere in den USA, verarbeitet werden. Hierdurch können gesteigerte Risiken für die Nutzer insofern bestehen, als dass z.B. der spätere Zugriff auf die Nutzerdaten erschwert werden kann. Auch haben wir keinen Zugriff auf diese Nutzerdaten. Die Zugriffsmöglichkeit liegt ausschließlich bei YouTube.</p><p>Die Datenschutzhinweise von YouTube finden Sie unter</p><p><a href='https://policies.google.com/privacy' target='_blank' rel='noopener nofollow'>https://policies.google.com/privacy</a></p>",
|
||||||
|
"en": "<h4>YouTube</h4><p>We maintain an online presence on YouTube to present our company and our services and to communicate with customers/interested parties. YouTube is a service of Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland, a subsidiary of Google LLC, 1600 Amphitheatre Parkway, Mountain View, CA 94043 USA.</p><p>In this respect, we would like to point out that there is a possibility that user data may be processed outside the European Union, particularly in the USA. This may pose increased risks for users in that, for example, later access to user data may be more difficult. We also do not have access to this user data. The access possibility lies solely with YouTube.</p><p>You can find YouTube's privacy policy at</p><p><a href='https://policies.google.com/privacy' target='_blank' rel='noopener nofollow'>https://policies.google.com/privacy</a></p>"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph18": {
|
||||||
|
"de": "<h4>Allgemeine Verlinkung auf Profile bei Drittanbietern</h4><p>Der Anbieter setzt auf der Website eine Verlinkung auf die nachstehend aufgeführten sozialen Netzwerke ein.</p><p>Rechtsgrundlage ist hierbei <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Rechtmäßigkeit der Verarbeitung' rel='nofollow noopener' target='_blank'>Art. 6 Abs. 1 lit. f DSGVO</a>. Das berechtigte Interesse des Anbieters besteht an der Verbesserung der Nutzungsqualität der Website.</p><p>Die Einbindung der Plugins erfolgt dabei über eine verlinkte Grafik. Erst durch einen Klick auf die entsprechende Grafik wird der Nutzer zu dem Dienst des jeweiligen sozialen Netzwerks weitergeleitet.</p><p>Nach der Weiterleitung des Kunden werden durch das jeweilige Netzwerk Informationen über den Nutzer erfasst. Dies sind zunächst Daten wie IP-Adresse, Datum, Uhrzeit und besuchte Seite. Ist der Nutzer währenddessen in seinem Benutzerkonto des jeweiligen Netzwerks eingeloggt, kann der Netzwerk-Betreiber ggf. die gesammelten Informationen des konkreten Besuches des Nutzers dem persönlichen Account des Nutzers zuordnen. Interagiert der Nutzer über einen „Teilen“-Button des jeweiligen Netzwerks, können diese Informationen in dem persönlichen Benutzerkonto des Nutzers gespeichert und ggf. veröffentlicht werden. Will der Nutzer verhindern, dass die gesammelten Informationen unmittelbar seinem Benutzerkonto zugeordnet werden, muss sich der Nutzer vor dem Anklicken der Grafik ausloggen. Zudem besteht die Möglichkeit, das jeweilige Benutzerkonto entsprechend zu konfigurieren.</p>",
|
||||||
|
"en": "<h4>General linking to profiles on third-party providers</h4><p>The provider uses a link to the social networks listed below on the website.</p><p>The legal basis for this is <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Lawfulness of processing' rel='nofollow noopener' target='_blank'>Art. 6 para. 1 lit. f GDPR</a>. The provider's legitimate interest lies in improving the usability of the website.</p><p>The integration of the plugins is done via a linked graphic. Only by clicking on the corresponding graphic will the user be redirected to the service of the respective social network.</p><p>After redirecting the customer, information about the user is collected by the respective network. Initially, this includes data such as IP address, date, time, and visited page. If the user is logged into his user account of the respective network during this time, the network operator may assign the collected information from the specific visit to the user's personal account. If the user interacts via a \"share\" button of the respective network, this information can be stored in the user's personal user account and possibly published. If the user wants to prevent that the collected information is directly assigned to his user account, he must log out before clicking on the graphic. In addition, there is a possibility to configure the respective user account accordingly.</p>"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph19": {
|
||||||
|
"de": "<p>Folgende soziale Netzwerke sind vom Anbieter verlinkt:</p><h4>Instagram</h4><p>Meta Platforms Ireland Limited, 4 Grand Canal Square, Dublin 2, Irland.</p><p>Datenschutzerklärung: <a href='https://help.instagram.com/519522125107875' rel='nofollow noopener' target='_blank'>https://help.instagram.com/519522125107875</a></p><h4>YouTube</h4><p>Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland, ein Tochterunternehmen der Google LLC, 1600 Amphitheatre Parkway, Mountain View, CA 94043 USA</p><p>Datenschutzerklärung: <a href='https://policies.google.com/privacy' target='_blank' rel='noopener nofollow'>https://policies.google.com/privacy</a></p><h4>TikTok</h4><p>TikTok Technology Limited, 10 Earlsfort Terrace, Dublin, D02 T380, Irland.</p><p>Datenschutzerklärung: <a href='https://www.tiktok.com/legal/privacy-policy' target='_blank' rel='noopener nofollow'>https://www.tiktok.com/legal/privacy-policy</a></p><h4>Telegram</h4><p>Telegram Messenger LLP, 71-75 Shelton Street, Covent Garden, London, WC2H 9JQ, Großbritannien.</p><p>Datenschutzerklärung: <a href='https://telegram.org/privacy' target='_blank' rel='noopener nofollow'>https://telegram.org/privacy</a></p><h4>WhatsApp</h4><p>WhatsApp Ireland Limited, 4 Grand Canal Square, Dublin 2, Irland, ein Tochterunternehmen von Facebook Inc., 1601 Willow Road, Menlo Park, CA 94025, USA.</p><p>Datenschutzerklärung: <a href='https://www.whatsapp.com/legal/privacy-policy' target='_blank' rel='noopener nofollow'>https://www.whatsapp.com/legal/privacy-policy</a></p><h4>Discord</h4><p>Discord Inc., 444 Castro Street, San Francisco, CA 94114, USA.</p><p>Datenschutzerklärung: <a href='https://discord.com/privacy' target='_blank' rel='noopener nofollow'>https://discord.com/privacy</a></p><h4>Spotify</h4><p>Spotify AB, Regeringsgatan 19, 111 53 Stockholm, Schweden.</p><p>Datenschutzerklärung: <a href='https://www.spotify.com/de/legal/privacy-policy/' target='_blank' rel='noopener nofollow'>https://www.spotify.com/de/legal/privacy-policy/</a></p><h4>Steam</h4><p>Valve Corporation, 10400 NE 4th Street, Bellevue, WA 98004, USA.</p><p>Datenschutzerklärung: <a href='https://store.steampowered.com/privacy_agreement/' target='_blank' rel='noopener nofollow'>https://store.steampowered.com/privacy_agreement/</a></p><h4>Twitch</h4><p>Amazon Web Services, Inc., 410 Terry Avenue North, Seattle, WA 98109, USA.</p><p>Datenschutzerklärung: <a href='https://www.twitch.tv/p/legal/privacy-notice/' target='_blank' rel='noopener nofollow'>https://www.twitch.tv/p/legal/privacy-notice/</a></p><p>Die Datenschutzerklärungen der Anbieter sind nicht Bestandteil dieser Datenschutzerklärung. Der Anbieter hat keinen Einfluss auf die Verarbeitung der Daten durch die Anbieter.</p>",
|
||||||
|
"en": "<p>The following social networks are linked by the provider:</p><h4>Instagram</h4><p>Meta Platforms Ireland Limited, 4 Grand Canal Square, Dublin 2, Ireland.</p><p>Privacy policy: <a href='https://help.instagram.com/519522125107875' rel='nofollow noopener' target='_blank'>https://help.instagram.com/519522125107875</a></p><h4>YouTube</h4><p>Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland, a subsidiary of Google LLC, 1600 Amphitheatre Parkway, Mountain View, CA 94043 USA</p><p>Privacy policy: <a href='https://policies.google.com/privacy' target='_blank' rel='noopener nofollow'>https://policies.google.com/privacy</a></p><h4>TikTok</h4><p>TikTok Technology Limited, 10 Earlsfort Terrace, Dublin, D02 T380, Ireland.</p><p>Privacy policy: <a href='https://www.tiktok.com/legal/privacy-policy' target='_blank' rel='noopener nofollow'>https://www.tiktok.com/legal/privacy-policy</a></p><h4>Telegram</h4><p>Telegram Messenger LLP, 71-75 Shelton Street, Covent Garden, London, WC2H 9JQ, UK.</p><p>Privacy policy: <a href='https://telegram.org/privacy' target='_blank' rel='noopener nofollow'>https://telegram.org/privacy</a></p><h4>WhatsApp</h4><p>WhatsApp Ireland Limited, 4 Grand Canal Square, Dublin 2, Ireland, a subsidiary of Facebook Inc., 1601 Willow Road, Menlo Park, CA 94025, USA.</p><p>Privacy policy: <a href='https://www.whatsapp.com/legal/privacy-policy' target='_blank' rel='noopener nofollow'>https://www.whatsapp.com/legal/privacy-policy</a></p><h4>Discord</h4><p>Discord Inc., 444 Castro Street, San Francisco, CA 94114, USA.</p><p>Privacy policy: <a href='https://discord.com/privacy' target='_blank' rel='noopener nofollow'>https://discord.com/privacy</a></p><h4>"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph20": {
|
||||||
|
"de": "<h4>FontAwesome</h4><p>Um Schriften und visuelle Elemente unseres Internetauftritts darstellen zu können, setzen wir die externen Schriftarten von FontAwesome ein. Bei FontAwesome handelt es sich um einen Dienst der</p><p>Fonticons Inc., 6 Porter Road, Apartment 3R, Cambridge, MA 02140, USA, nachfolgend nur „FontAwesome“ genannt.</p><p>Bei dem Aufruf unseres Internetauftritts wird eine Verbindung zum Server von FontAwesome in den USA aufgebaut, um so die Darstellung von Schriften und visuellen Elemente zu ermöglichen und zu aktualisieren.</p><p>Rechtsgrundlage ist <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Rechtmäßigkeit der Verarbeitung' rel='nofollow noopener' target='_blank'>Art. 6 Abs. 1 lit. f) DSGVO</a>. Unser berechtigtes Interesse liegt in der Optimierung und dem wirtschaftlichen Betrieb unseres Internetauftritts.</p><p>Durch die bei Aufruf unseres Internetauftritts hergestellte Verbindung zum Server von FontAwesome kann FontAwesome ermitteln, von welcher Website Ihre Anfrage gesendet worden ist und an welche IP-Adresse die Darstellung der Schrift zu übermitteln ist.</p><p>FontAwesome bietet unter</p><p><a href='https://fontawesome.com/privacy' target='_blank' rel='noopener nofollow'>https://fontawesome.com/privacy</a></p><p>weitere Informationen an und zwar insbesondere zu den Möglichkeiten der Unterbindung der Datennutzung.</p>",
|
||||||
|
"en": "<h4>FontAwesome</h4><p>To display fonts and visual elements of our website, we use the external fonts from FontAwesome. FontAwesome is a service of</p><p>Fonticons Inc., 6 Porter Road, Apartment 3R, Cambridge, MA 02140, USA, hereinafter referred to as \"FontAwesome\".</p><p>When accessing our website, a connection is established to FontAwesome's server in the USA to enable and update the display of fonts and visual elements.</p><p>The legal basis is <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Lawfulness of processing' rel='nofollow noopener' target='_blank'>Art. 6 para. 1 lit. f) GDPR</a>. Our legitimate interest lies in optimizing and economically operating our website.</p><p>Through the connection established when accessing our website to FontAwesome's server, FontAwesome can determine from which website your request has been sent and to which IP address the display of the font is to be transmitted.</p><p>FontAwesome offers further information at</p><p><a href='https://fontawesome.com/privacy' target='_blank' rel='noopener nofollow'>https://fontawesome.com/privacy</a></p><p>especially regarding the possibilities of preventing data usage.</p>"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph21": {
|
||||||
|
"de": "<h4>Google Fonts</h4><p>In unserem Internetauftritt setzen wir Google Fonts zur Darstellung externer Schriftarten ein. Es handelt sich hierbei um einen Dienst der Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland, nachfolgend nur „Google“ genannt.</p><p>Um die Darstellung bestimmter Schriften in unserem Internetauftritt zu ermöglichen, wird bei Aufruf unseres Internetauftritts eine Verbindung zu dem Google-Server in den USA aufgebaut.</p><p>Rechtsgrundlage ist <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Rechtmäßigkeit der Verarbeitung' rel='nofollow noopener' target='_blank'>Art. 6 Abs. 1 lit. f) DSGVO</a>. Unser berechtigtes Interesse liegt in der Optimierung und dem wirtschaftlichen Betrieb unseres Internetauftritts.</p><p>Durch die bei Aufruf unseres Internetauftritts hergestellte Verbindung zu Google kann Google ermitteln, von welcher Website Ihre Anfrage gesendet worden ist und an welche IP-Adresse die Darstellung der Schrift zu übermitteln ist.</p><p>Google bietet unter</p><p><a href='https://adssettings.google.com/authenticated' target='_blank' rel='noopener nofollow'>https://adssettings.google.com/authenticated</a></p><p><a href='https://policies.google.com/privacy' target='_blank' rel='noopener nofollow'>https://policies.google.com/privacy</a></p><p>weitere Informationen an und zwar insbesondere zu den Möglichkeiten der Unterbindung der Datennutzung.</p>",
|
||||||
|
"en": "<h4>Google Fonts</h4><p>In our website, we use Google Fonts to display external fonts. This is a service of Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland, hereinafter referred to as \"Google\".</p><p>To enable the display of certain fonts on our website, a connection is established to the Google server in the USA when accessing our website.</p><p>The legal basis is <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Lawfulness of processing' rel='nofollow noopener' target='_blank'>Art. 6 para. 1 lit. f) GDPR</a>. Our legitimate interest lies in optimizing and economically operating our website.</p><p>Through the connection established when accessing our website to Google, Google can determine from which website your request has been sent and to which IP address the display of the font is to be transmitted.</p><p>Google offers further information at</p><p><a href='https://adssettings.google.com/authenticated' target='_blank' rel='noopener nofollow'>https://adssettings.google.com/authenticated</a></p><p><a href='https://policies.google.com/privacy' target='_blank' rel='noopener nofollow'>https://policies.google.com/privacy</a></p><p>especially regarding the possibilities of preventing data usage.</p>"
|
||||||
|
},
|
||||||
|
"dataProtectionParagraph22": {
|
||||||
|
"de": "<h4>WhatsApp Kontaktaufnahme</h4><p>Zur Kontaktaufnahme ermöglicht der Anbieter dem Kunden unter anderem die Kontaktmöglichkeit über den Messenger-Dienst WhatsApp. WhatsApp ist ein Dienst der WhatsApp Ireland Limited, 4 Grand Canal Square, Grand Canal Harbour, Dublin 2, Irland, nachfolgend WhatsApp, eine Tochtergesellschaft von Facebook.</p><p>Durch die Kommunikation des Nutzers mit dem Anbieter über WhatsApp erhält sowohl der Anbieter, als auch WhatsApp die Mobilrufnummer des Nutzers und die Information, dass der Nutzer den Anbieter kontaktiert hat.</p><p>Die vorgenannten Daten werden von WhatsApp auch an Server von Facebook in den USA weitergeleitet und von WhatsApp und Facebook entsprechend der WhatsApp-Datenschutzrichtlinie verarbeitet, was auch die Verarbeitung zu deren eigenen Zwecken, wie der Verbesserung des WhatsApp-Dienstes, beinhaltet.</p><p>_____________________</p><p><strong>Die USA verfügen gegenwärtig nach Ansicht der Datenschutzaufsichtsbehörden allerdings nicht über ein angemessenes Datenschutzniveau. Es bestehen allerdings sogenannte Standardvertragsklauseln:</strong></p><p><a href='https://faq.whatsapp.com/general/about-standard-contractual-clauses' rel='nofollow noopener' target='_blank'>https://faq.whatsapp.com/general/about-standard-contractual-clauses</a></p><p><strong>Jedoch sind dies privatrechtliche Vereinbarungen und haben daher keine direkte Auswirkung auf die Zugriffsmöglichkeiten der Behörden in den USA.</strong></p><p>_____________________</p><p>Näheres zum Zweck und Umfang der Datenerhebung und der weiteren Verarbeitung dieser Daten durch WhatsApp und Facebook sowie diesbezügliche Rechte und Einstellungsmöglichkeiten zum Schutz der Privatsphäre sind in der Datenschutzrichtlinie von WhatsApp enthalten:</p><p><a href='https://www.whatsapp.com/legal/#privacy-policy' rel='nofollow noopener' target='_blank'>https://www.whatsapp.com/legal/#privacy-policy</a>.</p><p>Rechtsgrundlage dieser Verarbeitungen und der Übermittlung an WhatsApp ist <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Rechtmäßigkeit der Verarbeitung' rel='nofollow noopener' target='_blank'>Art. 6 Abs. 1 S. 1 b. DSGVO</a>, soweit die Kontaktaufnahme eine bestehende Vertragsbeziehung betrifft oder der Anbahnung einer solchen Vertragsbeziehung dient. Sollte die Kontaktaufnahme nicht aufgrund der vorstehenden Zwecke erfolgen, ist Rechtsgrundlage <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Rechtmäßigkeit der Verarbeitung' rel='nofollow noopener' target='_blank'>Art. 6 Abs. 1 lit. f DSGVO</a>. Das berechtigte Interesse des Anbieters besteht an der Verbesserung der Servicequalität.</p>",
|
||||||
|
"en": "<h4>WhatsApp Contact</h4><p>For contact, the provider allows the customer to contact via the messenger service WhatsApp. WhatsApp is a service of WhatsApp Ireland Limited, 4 Grand Canal Square, Grand Canal Harbour, Dublin 2, Ireland, hereinafter WhatsApp, a subsidiary of Facebook.</p><p>By communicating with the provider via WhatsApp, both the provider and WhatsApp receive the user's mobile number and the information that the user has contacted the provider.</p><p>The aforementioned data is also forwarded by WhatsApp to servers of Facebook in the USA and processed by WhatsApp and Facebook in accordance with the WhatsApp privacy policy, which also includes processing for their own purposes, such as improving the WhatsApp service.</p><p>_____________________</p><p><strong>However, according to the data protection supervisory authorities, the USA currently does not have an adequate level of data protection. However, there are so-called standard contractual clauses:</strong></p><p><a href='https://faq.whatsapp.com/general/about-standard-contractual-clauses' rel='nofollow noopener' target='_blank'>https://faq.whatsapp.com/general/about-standard-contractual-clauses</a></p><p><strong>However, these are private law agreements and therefore have no direct effect on the access possibilities of authorities in the USA.</strong></p><p>_____________________</p><p>Further information on the purpose and scope of data collection and further processing of this data by WhatsApp and Facebook as well as related rights and settings options for privacy protection are included in WhatsApp's privacy policy:</p><p><a href='https://www.whatsapp.com/legal/#privacy-policy' rel='nofollow noopener' target='_blank'>https://www.whatsapp.com/legal/#privacy-policy</a>.</p><p>The legal basis for these processing activities and the transfer to WhatsApp is <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Lawfulness of processing' rel='nofollow noopener' target='_blank'>Art. 6 para. 1 S. 1 b. GDPR</a>, as far as contacting concerns an existing contractual relationship or serves to initiate such a contractual relationship. If contact is not made for the above purposes, the legal basis is <a href='https://dejure.org/gesetze/DSGVO/6.html' title='Art. 6 DSGVO: Lawfulness of processing' rel='nofollow noopener' target='_blank'>Art. 6 para. 1 lit. f GDPR</a>. The provider's legitimate interest lies in improving service quality.</p>"
|
||||||
|
},
|
||||||
|
"dataProtectionLink": {
|
||||||
|
"de": "<p><a href='https://www.generator-datenschutzerklärung.de' target='_blank' rel='noopener'>Muster-Datenschutzerklärung</a> der <a href='https://www.bewertung-löschen24.de' rel='nofollow noopener' target='_blank'>Anwaltskanzlei Weiß & Partner</a></p>",
|
||||||
|
"en": "<p><a href='https://www.generator-datenschutzerklärung.de' target='_blank' rel='noopener'>Sample privacy policy</a> of the <a href='https://www.bewertung-löschen24.de' rel='nofollow noopener' target='_blank'>law firm Weiß & Partner</a></p>"
|
||||||
|
},
|
||||||
|
"sourcesHeader": {
|
||||||
|
"de": "Quellenangaben",
|
||||||
|
"en": "Sources"
|
||||||
|
},
|
||||||
|
"toProvider": {
|
||||||
|
"de": "Zum Anbieter",
|
||||||
|
"en": "To the provider"
|
||||||
|
},
|
||||||
|
"fontAwesome": {
|
||||||
|
"de": "Font Awesome ist eine umfangreiche Sammlung von über 1.500 Icons, die als Schriftarten und SVG-Dateien bereitgestellt werden. Diese Icons ermöglichen es Entwicklern, Symbole wie Social Media-Icons, Navigationspfeile und andere UI-Elemente auf einfache Weise in Websites und Webanwendungen zu integrieren. Die Icons sind vollständig anpassbar und skalierbar, was bedeutet, dass sie in Größe, Farbe und Stil flexibel bearbeitet werden können, ohne die Qualität zu beeinträchtigen. Ich nutze Font Awesome, um meiner Website eine klare visuelle Struktur zu verleihen und den Nutzern eine intuitivere Navigation zu ermöglichen. Durch die Flexibilität der Icons kann ich diese sowohl an das Design der Seite anpassen als auch sicherstellen, dass sie auf verschiedenen Geräten und Bildschirmgrößen scharf und gut sichtbar bleiben.",
|
||||||
|
"en": "Font Awesome is a comprehensive collection of over 1,500 icons provided as fonts and SVG files. These icons allow developers to easily integrate symbols such as social media icons, navigation arrows, and other UI elements into websites and web applications. The icons are fully customizable and scalable, meaning they can be edited in size, color, and style without compromising on quality. I use Font Awesome to give my website a clear visual structure and provide users with more intuitive navigation. Thanks to the flexibility of these icons, I can customize them to match the design of the site and ensure they remain crisp and visible across different devices and screen sizes."
|
||||||
|
},
|
||||||
|
"googleFonts": {
|
||||||
|
"de": "Google Fonts ist eine umfassende Sammlung von über 1.000 kostenlosen Webschriftarten, die speziell für die Verwendung auf Websites und in Webanwendungen optimiert wurden. Diese Schriftarten zeichnen sich durch eine hohe Leistung aus, da sie für schnelle Ladezeiten und eine einfache Integration entwickelt wurden. Google Fonts bietet eine breite Auswahl an Stilen und Schriftschnitten, die es ermöglichen, das Design einer Seite zu personalisieren und an die ästhetischen Anforderungen anzupassen. Durch die Nutzung von Google Fonts stelle ich sicher, dass meine Website sowohl visuell ansprechend als auch technisch optimiert ist. Die große Auswahl an Schriftarten ermöglicht es mir, den typografischen Stil der Seite an die Bedürfnisse meiner Zielgruppe und den Gesamtlook der Website anzupassen, während gleichzeitig die Ladegeschwindigkeit der Seite optimiert wird.",
|
||||||
|
"en": "Google Fonts is an extensive collection of over 1,000 free web fonts, specifically optimized for use on websites and web applications. These fonts are designed for high performance, ensuring fast loading times and easy integration. Google Fonts offers a wide selection of styles and font cuts, allowing for the customization of a page's design to meet aesthetic needs. By using Google Fonts, I ensure that my website is both visually appealing and technically optimized. The vast range of fonts enables me to tailor the typography to the needs of my audience and the overall look of the site while optimizing its loading speed."
|
||||||
|
},
|
||||||
|
"icons8": {
|
||||||
|
"de": "Icons8 ist eine vielseitige Plattform, die eine breite Sammlung von Icons, Illustrationen, Fotos und anderen Designressourcen anbietet, die für Webentwickler und Designer von großem Nutzen sind. Diese Ressourcen lassen sich problemlos in Webprojekte integrieren, um das visuelle Design zu verbessern und die Benutzererfahrung zu optimieren. Icons8 bietet nicht nur eine große Auswahl an Symbolen, sondern auch Tools zur Erstellung von benutzerdefinierten Designs und zur Anpassung der Icons. Ich verwende Icons8, um meiner Website hochwertige visuelle Elemente hinzuzufügen, die das Benutzererlebnis bereichern und gleichzeitig die visuelle Kohärenz der Seite wahren. Diese Ressourcen tragen dazu bei, dass die Website sowohl ästhetisch ansprechend als auch funktional bleibt.",
|
||||||
|
"en": "Icons8 is a versatile platform that offers a wide collection of icons, illustrations, photos, and other design resources that are highly useful for web developers and designers. These resources can easily be integrated into web projects to enhance visual design and optimize the user experience. Icons8 provides not only a vast selection of symbols but also tools for creating custom designs and customizing icons. I use Icons8 to add high-quality visual elements to my website, enriching the user experience while maintaining the visual consistency of the site. These resources help ensure that the website remains both aesthetically appealing and functional."
|
||||||
|
},
|
||||||
|
"flaticon": {
|
||||||
|
"de": "Flaticon ist eine der größten Plattformen für Vektor-Icons und Grafiken und bietet eine riesige Sammlung von Symbolen in verschiedenen Stilen, Formaten und Größen. Mit Millionen von kostenlosen und Premium-Icons ist Flaticon eine wertvolle Ressource für Designer, Entwickler und Content-Ersteller, die nach hochwertigen, anpassbaren Symbolen suchen. Die Icons auf Flaticon decken eine Vielzahl von Themen ab, von klassischen UI-Elementen bis hin zu branchenspezifischen Symbolen. Ich verwende Flaticon, um meiner Website zusätzliche visuelle Elemente hinzuzufügen, die das Design bereichern und den Nutzern helfen, Informationen schneller und intuitiver zu erfassen. Die enorme Vielfalt und die einfache Integration der Icons ermöglichen es mir, genau die richtigen Symbole für jedes Designprojekt auszuwählen.",
|
||||||
|
"en": "Flaticon is one of the largest platforms for vector icons and graphics, offering an enormous collection of symbols in various styles, formats, and sizes. With millions of free and premium icons, Flaticon is a valuable resource for designers, developers, and content creators looking for high-quality, customizable icons. The icons on Flaticon cover a wide range of topics, from classic UI elements to industry-specific symbols. I use Flaticon to add extra visual elements to my website, enriching the design and helping users capture information more quickly and intuitively. The vast variety and easy integration of the icons allow me to select the perfect symbols for each design project."
|
||||||
|
},
|
||||||
|
"chatgpt": {
|
||||||
|
"de": "ChatGPT ist ein KI-gesteuertes Sprachmodell, das von OpenAI entwickelt wurde und eine Vielzahl von Anwendungen im Bereich der Textverarbeitung ermöglicht. Es ist in der Lage, natürlichsprachliche Texte zu generieren, zu verstehen und darauf zu reagieren, was es zu einem wertvollen Werkzeug für die Entwicklung von Chatbots, die Generierung von Inhalten und die Unterstützung bei kreativen Prozessen macht. In meiner Arbeit nutze ich ChatGPT als Hilfestellung für die Erstellung von Codebeispielen und bei technischen Fragestellungen während des Webentwicklungsprozesses. Es ermöglicht mir, schnelle Lösungen und Inspiration zu finden, was den Entwicklungsprozess effizienter und kreativer macht.",
|
||||||
|
"en": "ChatGPT is an AI-driven language model developed by OpenAI that enables a wide range of applications in text processing. It can generate, understand, and respond to natural language texts, making it a valuable tool for developing chatbots, generating content, and assisting with creative processes. In my work, I use ChatGPT as assistance for generating code examples and for solving technical issues during the web development process. It allows me to find quick solutions and inspiration, making the development process more efficient and creative."
|
||||||
|
},
|
||||||
|
"linkedin": {
|
||||||
|
"de": "LinkedIn ist eine der weltweit größten professionellen Plattformen für berufliche Netzwerke und Karrieremöglichkeiten. Sie ermöglicht es Nutzern, ihre beruflichen Erfahrungen, Qualifikationen und Netzwerke zu präsentieren und mit anderen Fachleuten sowie potenziellen Arbeitgebern zu interagieren. Durch die Nutzung von LinkedIn können Nutzer ihre berufliche Sichtbarkeit erhöhen, neue berufliche Chancen finden und mit Branchenexperten in Kontakt treten. Ich verwende LinkedIn, um mich mit anderen Fachleuten zu vernetzen, meine Expertise in der Webentwicklung und im Content Creation zu zeigen und die Sichtbarkeit meines Projekts zu erhöhen. Es hilft mir, auf dem neuesten Stand der Branche zu bleiben und von anderen Experten zu lernen.",
|
||||||
|
"en": "LinkedIn is one of the world’s largest professional networking platforms, enabling users to showcase their professional experience, qualifications, and networks while interacting with other professionals and potential employers. By using LinkedIn, users can increase their professional visibility, find new career opportunities, and connect with industry experts. I use LinkedIn to network with other professionals, showcase my expertise in web development and content creation, and enhance the visibility of my project. It helps me stay up to date with industry trends and learn from other experts."
|
||||||
|
},
|
||||||
|
"programmingHub": {
|
||||||
|
"de": "ProgrammingHub ist eine beliebte mobile Plattform und App, die Nutzern hilft, Programmierkenntnisse zu erlernen und zu verbessern. Sie bietet interaktive Tutorials, Lernmaterialien und praktische Übungen für eine Vielzahl von Programmiersprachen, von den Grundlagen bis zu fortgeschrittenen Konzepten. Die Plattform ist sowohl für Anfänger als auch für fortgeschrittene Entwickler geeignet, die ihre Fähigkeiten erweitern möchten. Ich nutze ProgrammingHub, um meine Programmierkenntnisse kontinuierlich zu erweitern und neue Technologien und Sprachen zu erlernen. Es ermöglicht mir, auf flexible Weise neues Wissen zu erlangen und mich als Entwickler stetig weiterzuentwickeln, was mir in meiner Arbeit als Webentwickler und in anderen kreativen Bereichen zugutekommt.",
|
||||||
|
"en": "ProgrammingHub is a popular mobile platform and app that helps users learn and enhance their programming skills. It offers interactive tutorials, learning materials, and hands-on exercises for a variety of programming languages, from basics to advanced concepts. The platform is suitable for both beginners and advanced developers who want to expand their skills. I use ProgrammingHub to continuously enhance my programming knowledge and learn new technologies and languages. It allows me to gain new knowledge flexibly and consistently improve myself as a developer, which benefits my work in web development and other creative fields."
|
||||||
|
},
|
||||||
|
"unsplash": {
|
||||||
|
"de": "Unsplash ist eine beliebte Online-Plattform, die eine riesige Sammlung von hochqualitativen, kostenlosen Fotos und Bildern bietet. Die Fotos werden von Fotografen aus der ganzen Welt zur Verfügung gestellt und unter der Unsplash-Lizenz veröffentlicht, die es Nutzern ermöglicht, die Bilder für kommerzielle und nicht-kommerzielle Zwecke zu nutzen, ohne eine Namensnennung des Fotografen zu benötigen. Unsplash ist besonders für Designer, Content Creators und Entwickler nützlich, da es eine einfache Möglichkeit bietet, visuelle Inhalte zu finden, die in Projekten verwendet werden können. Ich nutze Unsplash regelmäßig, um hochwertige Bilder für meine Websites und andere kreative Arbeiten zu finden, die meine Projekte visuell bereichern und meinen Content auf ein neues Level heben.",
|
||||||
|
"en": "Unsplash is a popular online platform that offers a vast collection of high-quality, free photos and images. The photos are contributed by photographers from around the world and are released under the Unsplash License, which allows users to use the images for both commercial and non-commercial purposes without needing to credit the photographer. Unsplash is especially useful for designers, content creators, and developers as it provides an easy way to find visual content that can be used in projects. I use Unsplash regularly to find high-quality images for my websites and other creative works, which enrich my projects visually and take my content to the next level."
|
||||||
|
},
|
||||||
|
"cookie-heading": {
|
||||||
|
"de": "Cookie-Informationen",
|
||||||
|
"en": "Cookie Information"
|
||||||
|
},
|
||||||
|
"cookie-intro": {
|
||||||
|
"de": "Auf dieser Website verwenden wir Cookies, um die Benutzererfahrung zu verbessern. Nachfolgend finden Sie Informationen zu den verwendeten Cookies:",
|
||||||
|
"en": "We use cookies on this website to enhance the user experience. Below you can find information about the cookies we use:"
|
||||||
|
},
|
||||||
|
"cookie-acceptance": {
|
||||||
|
"de": "Indem Sie weiterhin auf der Website navigieren, stimmen Sie der Verwendung dieser Cookies zu.",
|
||||||
|
"en": "By continuing to browse the website, you consent to the use of these cookies."
|
||||||
|
},
|
||||||
|
"cookie-info": {
|
||||||
|
"de": "<li><strong>lang</strong>: Dieser Cookie speichert Ihre bevorzugte Sprache, um Ihnen die Website in der richtigen Sprache anzuzeigen.</li><li><strong>theme</strong>: Dieser Cookie speichert, ob Sie den Light- oder Dark-Mode der Website bevorzugen.</li><li><strong>page</strong>: Ein temporärer Cookie, der die aktuell angezeigte Seite speichert, um die Navigation innerhalb der Website zu erleichtern.</li><li><strong>cookieConsent</strong>: Dieser Cookie wird nur beim ersten Besuch gesetzt, um Ihre Zustimmung zur Verwendung von Cookies zu speichern.</li>",
|
||||||
|
"en": "<li><strong>lang</strong>: This cookie stores your preferred language to display the website in the correct language.</li><li><strong>theme</strong>: This cookie stores whether you prefer the light or dark mode of the website.</li><li><strong>page</strong>: A temporary cookie that stores the currently displayed page to facilitate navigation within the website.</li><li><strong>cookieConsent</strong>: This cookie is set only on the first visit to store your consent to the use of cookies.</li>"
|
||||||
|
},
|
||||||
|
"bannerWelcome": {
|
||||||
|
"de": "Willkommen auf meiner Homepage!",
|
||||||
|
"en": "Welcome to my homepage!"
|
||||||
|
},
|
||||||
|
"bannerInfo": {
|
||||||
|
"de": "Erfahre mehr über meine Projekte, meine Erfahrungen und was mich antreibt.",
|
||||||
|
"en": "Find out more about my projects, my experiences, and what drives me."
|
||||||
|
},
|
||||||
|
"homeAboutMeTextOne": {
|
||||||
|
"de": "Hey, mein Name ist Andreas oder kurz Andi, geboren am 06.10.1998. Ich bin ein leidenschaftlicher Webentwickler und kreativer Mediengestalter mit einem ausgeprägten Interesse für Technologie, digitale Medien und moderne Kommunikation. Meine Schwerpunkte liegen in der Entwicklung benutzerfreundlicher Weblösungen mit NodeJS und MySQL, kombiniert mit ansprechendem Webdesign. Darüber hinaus widme ich mich intensiv der Musikproduktion, dem professionellen Videoschnitt und der Erstellung von Podcasts. Als Livestreamer bin ich regelmäßig auf Plattformen wie Twitch und TikTok aktiv. Ich leite ein engagiertes Social-Media-Team und bringe kreative Projekte mit einem hohen Qualitätsanspruch technisch wie gestalterisch zur Umsetzung. Mein Ziel ist es, innovative Ideen nicht nur zu denken, sondern sie auch mit Präzision und Leidenschaft Wirklichkeit werden zu lassen – stets mit dem Anspruch, mich fachlich und persönlich weiterzuentwickeln.",
|
||||||
|
"en": "Hey, my name is Andreas – or simply Andi – born on October 6, 1998. I am a passionate web developer and creative media designer with a strong affinity for technology, digital media, and modern communication. My core strengths lie in developing user-centric web solutions using NodeJS and MySQL, combined with visually compelling web design. In addition, I am deeply involved in music production, professional video editing, and podcast creation. As a livestreamer, I am regularly active on platforms such as Twitch and TikTok. I lead a dedicated social media team and bring creative projects to life with both technical expertise and aesthetic finesse. My mission is not only to imagine innovative ideas, but to turn them into reality with precision and passion – always striving for continuous growth, both professionally and personally."
|
||||||
|
},
|
||||||
|
"upcoming": {
|
||||||
|
"de": "Erscheint in Kürze",
|
||||||
|
"en": "Upcoming"
|
||||||
|
},
|
||||||
|
"homeNewsHeader": {
|
||||||
|
"de": "Neuigkeiten & Empfehlungen",
|
||||||
|
"en": "News & Highlights"
|
||||||
|
},
|
||||||
|
"projectPodcastHeader": {
|
||||||
|
"de": "Pixel & Pils Podcast",
|
||||||
|
"en": "Pixel & Pils Podcast"
|
||||||
|
},
|
||||||
|
"projectPodcastLink": {
|
||||||
|
"de": "Pixel & Pils Website",
|
||||||
|
"en": "Pixel & Pils Website"
|
||||||
|
},
|
||||||
|
"projectMusicHeader": {
|
||||||
|
"de": "Meine Playlists",
|
||||||
|
"en": "My Playlists"
|
||||||
|
},
|
||||||
|
"mileStones": {
|
||||||
|
"de": "Meine Meilensteine",
|
||||||
|
"en": "My Milestones"
|
||||||
|
},
|
||||||
|
"mileStonesFirstMusic": {
|
||||||
|
"de": "Erste Erfahrungen mit Musik, insbesondere dem Klavierspielen",
|
||||||
|
"en": "Initial exposure to music, particularly playing the piano"
|
||||||
|
},
|
||||||
|
"mileStonesSchool": {
|
||||||
|
"de": "Beginn meiner schulischen Ausbildung",
|
||||||
|
"en": "Commencement of formal education"
|
||||||
|
},
|
||||||
|
"mileStonesFirstStream": {
|
||||||
|
"de": "Erster Livestream auf Twitch",
|
||||||
|
"en": "First livestream on Twitch"
|
||||||
|
},
|
||||||
|
"mileStonesGraficsdesign": {
|
||||||
|
"de": "Erste Auseinandersetzung mit Grafikdesign und visueller Gestaltung",
|
||||||
|
"en": "Initial involvement with graphic design and visual arts"
|
||||||
|
},
|
||||||
|
"mileStonesFirstVideo": {
|
||||||
|
"de": "Erstes YouTube-Video, bearbeitet mit Camtasia Studio 8",
|
||||||
|
"en": "First YouTube video, edited with Camtasia Studio 8"
|
||||||
|
},
|
||||||
|
"mileStonesSchoolOut": {
|
||||||
|
"de": "Abschluss der 10. Klasse mit der Mittleren Reife",
|
||||||
|
"en": "Completion of 10th grade with an intermediate school leaving certificate"
|
||||||
|
},
|
||||||
|
"mileStonesApprenticeship": {
|
||||||
|
"de": "Beginn meiner Ausbildung zum Elektroniker für Energie- und Gebäudetechnik",
|
||||||
|
"en": "Commencement of my apprenticeship as an electronics technician for energy and building technology"
|
||||||
|
},
|
||||||
|
"mileStonesApprenticeshipEnd": {
|
||||||
|
"de": "Erfolgreicher Abschluss meiner Ausbildung",
|
||||||
|
"en": "Successful completion of my apprenticeship"
|
||||||
|
},
|
||||||
|
"mileStonesWebdev": {
|
||||||
|
"de": "Erste Erfahrungen in der Webentwicklung",
|
||||||
|
"en": "Initial exposure to web development"
|
||||||
|
},
|
||||||
|
"mileStonesDavinci": {
|
||||||
|
"de": "Wechsel zu der professionellen Videoschnittsoftware DaVinci Resolve",
|
||||||
|
"en": "Transition to the professional video editing software DaVinci Resolve"
|
||||||
|
},
|
||||||
|
"mileStonesMusicProduce": {
|
||||||
|
"de": "Erste Fortschritte in der Musikproduktion mit FL Studio",
|
||||||
|
"en": "First advancements in music production using FL Studio"
|
||||||
|
},
|
||||||
|
"mileStonesWriting": {
|
||||||
|
"de": "Erste eigene schriftliche Werke und Geschichten",
|
||||||
|
"en": "First written works and stories"
|
||||||
|
},
|
||||||
|
"mileStonesTeamGiftwolf": {
|
||||||
|
"de": "Gründung des Social Media Teams Giftwolf",
|
||||||
|
"en": "Founding of the social media team Giftwolf"
|
||||||
|
},
|
||||||
|
"mileStonesWebsite": {
|
||||||
|
"de": "Erfolgreiche Veröffentlichung meiner ersten fertigen Website",
|
||||||
|
"en": "Successful launch of my first completed website"
|
||||||
|
},
|
||||||
|
"mileStonesPodcast": {
|
||||||
|
"de": "Aufnahme der ersten Folge des Podcasts 'Pixel & Pils'",
|
||||||
|
"en": "Recording of the first episode of the 'Pixel & Pils' podcast"
|
||||||
|
},
|
||||||
|
"homeProjects": {
|
||||||
|
"de": "Aktuellste Projekte",
|
||||||
|
"en": "Latest projects"
|
||||||
|
},
|
||||||
|
"moreFollows": {
|
||||||
|
"de": "Mehr Inhalte folgen...",
|
||||||
|
"en": "More content to follow..."
|
||||||
|
}
|
||||||
|
}
|
||||||
Executable
+168
@@ -0,0 +1,168 @@
|
|||||||
|
{
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"url": "https://wa.me/4915206482495",
|
||||||
|
"icon": "images/links/whatsapp.webp",
|
||||||
|
"username": "LupiNex Media",
|
||||||
|
"plattform": "WhatsApp",
|
||||||
|
"thema": "linksBusiness",
|
||||||
|
"tags": ["Chatting", "Business", "LupiNex Media", "WhatsApp"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://t.me/lupinexmedia",
|
||||||
|
"icon": "images/links/telegram.webp",
|
||||||
|
"username": "LupiNex Media",
|
||||||
|
"plattform": "Telegram",
|
||||||
|
"thema": "linksBusiness",
|
||||||
|
"tags": ["Chatting", "Business", "LupiNex Media", "Telegram"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://youtube.com/@lupinexmedia",
|
||||||
|
"icon": "images/links/youtube.webp",
|
||||||
|
"username": "LupiNex Media",
|
||||||
|
"plattform": "YouTube",
|
||||||
|
"thema": "linksBusiness",
|
||||||
|
"tags": ["Videos", "Business", "LupiNex Media", "YouTube"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://tiktok.com/@lupinexmedia",
|
||||||
|
"icon": "images/links/tiktok.webp",
|
||||||
|
"username": "LupiNex Media",
|
||||||
|
"plattform": "Tiktok",
|
||||||
|
"thema": "linksBusiness",
|
||||||
|
"tags": ["Videos", "Business", "LupiNex Media", "Tiktok"]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"url": "https://youtube.com/@apixoffiziell",
|
||||||
|
"icon": "images/links/youtube.webp",
|
||||||
|
"username": "APiXoffiziell",
|
||||||
|
"plattform": "YouTube",
|
||||||
|
"thema": "linksGaming",
|
||||||
|
"tags": ["Videos", "Gaming", "APiXoffiziell", "YouTube"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://tiktok.com/@apixoffiziell",
|
||||||
|
"icon": "images/links/tiktok.webp",
|
||||||
|
"username": "APiXoffiziell",
|
||||||
|
"plattform": "Tiktok",
|
||||||
|
"thema": "linksGaming",
|
||||||
|
"tags": ["Videos", "Streaming", "Gaming", "APiXoffiziell", "Tiktok"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://twitch.tv/apixoffiziell",
|
||||||
|
"icon": "images/links/twitch.webp",
|
||||||
|
"username": "APiXoffiziell",
|
||||||
|
"plattform": "Twitch",
|
||||||
|
"thema": "linksGamingjc",
|
||||||
|
"tags": ["Streaming", "Gaming", "Just Chatting", "APiXoffiziell", "Twitch"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://steamcommunity.com/id/apixoffiziell",
|
||||||
|
"icon": "images/links/steam.webp",
|
||||||
|
"username": "APiXoffiziell",
|
||||||
|
"plattform": "Steam",
|
||||||
|
"thema": "linksGaming",
|
||||||
|
"tags": ["Gaming", "APiXoffiziell", "Steam"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://instagram.com/apixoffiziell",
|
||||||
|
"icon": "images/links/instagram.webp",
|
||||||
|
"username": "APiXoffiziell",
|
||||||
|
"plattform": "Instagram",
|
||||||
|
"thema": "linksAllround",
|
||||||
|
"tags": ["Allround", "APiXoffiziell", "Instagram"]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"url": "https://youtube.com/@andifenrirofficial",
|
||||||
|
"icon": "images/links/youtube.webp",
|
||||||
|
"username": "Andi Fenrir",
|
||||||
|
"plattform": "YouTube",
|
||||||
|
"thema": "linksMusic",
|
||||||
|
"tags": ["Videos", "Music", "Andi Fenrir", "YouTube"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://tiktok.com/@andifenrirofficial",
|
||||||
|
"icon": "images/links/tiktok.webp",
|
||||||
|
"username": "Andi Fenrir",
|
||||||
|
"plattform": "Tiktok",
|
||||||
|
"thema": "linksMusic",
|
||||||
|
"tags": ["Videos", "Music", "Andi Fenrir", "Tiktok"]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"url": "https://open.spotify.com/playlist/5C2IK5kGKxpYcDqTeDfNqy?si=42ebd505ebc341ab",
|
||||||
|
"icon": "images/links/spotify.webp",
|
||||||
|
"username": "Wolfsblut Beats",
|
||||||
|
"plattform": "Spotify",
|
||||||
|
"thema": "linksMusic",
|
||||||
|
"tags": ["Music", "Spotify"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://open.spotify.com/playlist/44GpwtFUB8KwG9xVNqEpFB?si=768d03a140844753",
|
||||||
|
"icon": "images/links/spotify.webp",
|
||||||
|
"username": "Stimme im Nebel",
|
||||||
|
"plattform": "Spotify",
|
||||||
|
"thema": "linksMusic",
|
||||||
|
"tags": ["Music", "Spotify"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://open.spotify.com/playlist/4RzjJxoD3yGd7d0V8ektKS?si=63ae2914b32e4ce7",
|
||||||
|
"icon": "images/links/spotify.webp",
|
||||||
|
"username": "Cozy Beats",
|
||||||
|
"plattform": "Spotify",
|
||||||
|
"thema": "linksMusic",
|
||||||
|
"tags": ["Music", "Spotify"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://discord.gg/vjg7kKyH2m",
|
||||||
|
"icon": "images/links/discord.webp",
|
||||||
|
"username": "TeamGiftwolfDE",
|
||||||
|
"plattform": "Discord",
|
||||||
|
"thema": "linksGamingjc",
|
||||||
|
"tags": ["Gaming", "Just Chatting", "Podcast", "Team Giftwolf", "Pixel & Pils", "Discord"]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"url": "https://pixelundpils.de",
|
||||||
|
"icon": "images/links/pixelundpils.webp",
|
||||||
|
"username": "Pixel & Pils",
|
||||||
|
"plattform": "Website",
|
||||||
|
"thema": "linksPodcast",
|
||||||
|
"tags": ["Podcast", "Website", "Pixel & Pils"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://open.spotify.com/show/3JFKr20mGDGGpYxmdJkHAi",
|
||||||
|
"icon": "images/links/spotify.webp",
|
||||||
|
"username": "Pixel & Pils",
|
||||||
|
"plattform": "Spotify",
|
||||||
|
"thema": "linksPodcast",
|
||||||
|
"tags": ["Podcast", "Spotify", "Just Chatting", "Pixel & Pils"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://tiktok.com/@pixelundpils",
|
||||||
|
"icon": "images/links/tiktok.webp",
|
||||||
|
"username": "Pixel & Pils",
|
||||||
|
"plattform": "Tiktok",
|
||||||
|
"thema": "linksPodcast",
|
||||||
|
"tags": ["Videos", "Just Chatting", "Pixel & Pils", "Tiktok"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://youtube.com/@pixelundpils",
|
||||||
|
"icon": "images/links/youtube.webp",
|
||||||
|
"username": "Pixel & Pils",
|
||||||
|
"plattform": "YouTube",
|
||||||
|
"thema": "linksPodcast",
|
||||||
|
"tags": ["Videos", "Business", "Pixel & Pils", "YouTube"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "https://twitch.tv/pixelundpils",
|
||||||
|
"icon": "images/links/twitch.webp",
|
||||||
|
"username": "Pixel & Pils",
|
||||||
|
"plattform": "Twitch",
|
||||||
|
"thema": "linksPodcast",
|
||||||
|
"tags": ["Streaming", "Just Chatting", "Pixel & Pils", "Twitch"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Executable
+26
@@ -0,0 +1,26 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"title": "projectPodcastHeader",
|
||||||
|
"description": "upcoming",
|
||||||
|
"media": "https://open.spotify.com/show/3JFKr20mGDGGpYxmdJkHAi",
|
||||||
|
"type": "podcast"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"titleOne": "projectPodcastLink",
|
||||||
|
"media": "https://pixelundpils.de",
|
||||||
|
"type": "link"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "projectMusicHeader",
|
||||||
|
"media": "https://open.spotify.com/embed/playlist/5C2IK5kGKxpYcDqTeDfNqy?utm_source=generator",
|
||||||
|
"type": "external"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"media": "https://open.spotify.com/embed/playlist/44GpwtFUB8KwG9xVNqEpFB?utm_source=generator",
|
||||||
|
"type": "external"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"media": "https://open.spotify.com/embed/playlist/4RzjJxoD3yGd7d0V8ektKS?utm_source=generator",
|
||||||
|
"type": "external"
|
||||||
|
}
|
||||||
|
]
|
||||||
Executable
+8
@@ -0,0 +1,8 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "Instant Gaming",
|
||||||
|
"logo": "images/partners/instantgaming.svg",
|
||||||
|
"url": "https://www.instant-gaming.com/?igr=apixoffiziell",
|
||||||
|
"description": "partnerOne"
|
||||||
|
}
|
||||||
|
]
|
||||||
Executable
+64
@@ -0,0 +1,64 @@
|
|||||||
|
{
|
||||||
|
"processes": [
|
||||||
|
{
|
||||||
|
"processName": "processWebdev",
|
||||||
|
"icon": "images/skills/skillsProcesses/baseWebDev.webp",
|
||||||
|
"percentage": "75",
|
||||||
|
"tags": ["processProgramming"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"processName": "processBackend",
|
||||||
|
"icon": "images/skills/skillsProcesses/baseBackend.webp",
|
||||||
|
"percentage": "20",
|
||||||
|
"tags": ["processProgramming"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"processName": "processCoding",
|
||||||
|
"icon": "images/skills/skillsProcesses/codingScripting.webp",
|
||||||
|
"percentage": "75",
|
||||||
|
"tags": ["processProgramming"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"processName": "processWebServer",
|
||||||
|
"icon": "images/skills/skillsProcesses/webServer.webp",
|
||||||
|
"percentage": "45",
|
||||||
|
"tags": ["processServer"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"processName": "processAudioServer",
|
||||||
|
"icon": "images/skills/skillsProcesses/voicemeeter.webp",
|
||||||
|
"percentage": "75",
|
||||||
|
"tags": ["processServer"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"processName": "processPlanning",
|
||||||
|
"icon": "images/skills/skillsProcesses/planningTools.webp",
|
||||||
|
"percentage": "85",
|
||||||
|
"tags": ["processPlan"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"processName": "processEditing",
|
||||||
|
"icon": "images/skills/skillsProcesses/videoCreation.webp",
|
||||||
|
"percentage": "65",
|
||||||
|
"tags": ["processVideo"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"processName": "processStreaming",
|
||||||
|
"icon": "images/skills/skillsProcesses/liveStreaming.webp",
|
||||||
|
"percentage": "65",
|
||||||
|
"tags": ["processVideo"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"processName": "processMusic",
|
||||||
|
"icon": "images/skills/skillsProcesses/musicMaking.webp",
|
||||||
|
"percentage": "50",
|
||||||
|
"tags": ["processAudio"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"processName": "processUseKI",
|
||||||
|
"icon": "images/skills/skillsProcesses/chatgpt.webp",
|
||||||
|
"percentage": "60",
|
||||||
|
"tags": ["processKI"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Executable
+94
@@ -0,0 +1,94 @@
|
|||||||
|
{
|
||||||
|
"projects": [
|
||||||
|
{
|
||||||
|
"startdate": "2025-03-31",
|
||||||
|
"enddate": "2025-04-13",
|
||||||
|
"planneddate": "2025-04-14",
|
||||||
|
"lastupdate": "2025-04-07",
|
||||||
|
"technologies": ["JavaScript", "Node.js", "Express", "CSS3", "HTML5"],
|
||||||
|
"tags": ["Website", "Frontend", "Backend", "JavaScript", "Node.js", "Express", "CSS3", "HTML5", "Programming"],
|
||||||
|
"logo": "images/projects/1_areimann.de/logo.webp",
|
||||||
|
"link": "https://areimann.de",
|
||||||
|
"gallery": [
|
||||||
|
],
|
||||||
|
"title": "A. Reimann Portfolio (Website)",
|
||||||
|
"description": "projectOneDescription",
|
||||||
|
"status": "projectDone"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"startdate": "2025-03-27",
|
||||||
|
"enddate": "",
|
||||||
|
"planneddate": "",
|
||||||
|
"lastupdate": "2025-04-05",
|
||||||
|
"technologies": ["JavaScript", "Node.js", "Express", "Electron", "CSS3", "HTML5", "Websockets"],
|
||||||
|
"tags": ["Software", "Frontend", "Backend", "JavaScript", "Node.js", "Express", "Electron", "CSS3", "HTML5", "Websockets", "Programming"],
|
||||||
|
"logo": "images/projects/2_streamwarden/logo.webp",
|
||||||
|
"link": "",
|
||||||
|
"gallery": [
|
||||||
|
],
|
||||||
|
"title": "Stream Warden (WebApp, Software)",
|
||||||
|
"description": "projectTwoDescription",
|
||||||
|
"status": "projectWIP"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"startdate": "2025-03-31",
|
||||||
|
"enddate": "",
|
||||||
|
"planneddate": "",
|
||||||
|
"lastupdate": "2025-03-31",
|
||||||
|
"technologies": ["JavaScript", "Node.js", "Express", "Electron", "CSS3", "HTML5", "Websockets"],
|
||||||
|
"tags": ["Software", "Frontend", "Backend", "JavaScript", "Node.js", "Express", "Electron", "CSS3", "HTML5", "Websockets", "Programming"],
|
||||||
|
"logo": "images/projects/3_lupicore_server/logo.webp",
|
||||||
|
"link": "",
|
||||||
|
"gallery": [
|
||||||
|
],
|
||||||
|
"title": "LupiCore (Server, WebApp, Software)",
|
||||||
|
"description": "projectThreeDescription",
|
||||||
|
"status": "projectOpen"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"startdate": "2025-03-28",
|
||||||
|
"enddate": "",
|
||||||
|
"planneddate": "",
|
||||||
|
"lastupdate": "2025-03-29",
|
||||||
|
"technologies": ["JavaScript", "Node.js", "Express", "Electron", "CSS3", "HTML5", "Websockets"],
|
||||||
|
"tags": ["Software", "Frontend", "Backend", "JavaScript", "Node.js", "Express", "Electron", "CSS3", "HTML5", "Websockets", "Programming"],
|
||||||
|
"logo": "images/projects/4_lupicore_client/logo.webp",
|
||||||
|
"link": "",
|
||||||
|
"gallery": [
|
||||||
|
],
|
||||||
|
"title": "LupiCore (Client, WebApp, Software)",
|
||||||
|
"description": "projectFourDescription",
|
||||||
|
"status": "projectOpen"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"startdate": "2025-01-14",
|
||||||
|
"enddate": "",
|
||||||
|
"planneddate": "",
|
||||||
|
"lastupdate": "2025-02-25",
|
||||||
|
"technologies": ["JavaScript", "Node.js", "Express", "CSS3", "HTML5"],
|
||||||
|
"tags": ["Gaming", "Website", "Frontend", "Backend", "JavaScript", "Node.js", "Express", "CSS3", "HTML5", "Programming"],
|
||||||
|
"logo": "images/projects/5_glow_puzzle_quest/logo.webp",
|
||||||
|
"link": "",
|
||||||
|
"gallery": [
|
||||||
|
],
|
||||||
|
"title": "Glow Puzzle Quest (Game, Web)",
|
||||||
|
"description": "projectFiveDescription",
|
||||||
|
"status": "projectFrozen"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"startdate": "2024-09-02",
|
||||||
|
"enddate": "2024-12-08",
|
||||||
|
"planneddate": "2024-12-08",
|
||||||
|
"lastupdate": "2024-12-07",
|
||||||
|
"technologies": ["JavaScript", "CSS3", "PHP", "HTML5"],
|
||||||
|
"tags": ["Birthday", "Website", "Frontend", "JavaScript", "CSS3", "PHP", "HTML5", "Programming"],
|
||||||
|
"logo": "images/projects/6_bday_fabian/logo.webp",
|
||||||
|
"link": "",
|
||||||
|
"gallery": [
|
||||||
|
],
|
||||||
|
"title": "Fabian Special Website (Website)",
|
||||||
|
"description": "projectSixDescription",
|
||||||
|
"status": "projectDone"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Executable
+110
@@ -0,0 +1,110 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/html5.webp",
|
||||||
|
"alt": "Hypertext Markup Language (HTML)",
|
||||||
|
"title": "Hypertext Markup Language (HTML)",
|
||||||
|
"onclick": "openLink('html5')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/php.webp",
|
||||||
|
"alt": "Hypertext Preprocessor (PHP)",
|
||||||
|
"title": "Hypertext Preprocessor (PHP)",
|
||||||
|
"onclick": "openLink('php')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/css3.webp",
|
||||||
|
"alt": "Cascading Style Sheets (CSS)",
|
||||||
|
"title": "Cascading Style Sheets (CSS)",
|
||||||
|
"onclick": "openLink('css3')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/js.webp",
|
||||||
|
"alt": "JavaScript (JS)",
|
||||||
|
"title": "JavaScript (JS)",
|
||||||
|
"onclick": "openLink('javascript')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/nodejs.webp",
|
||||||
|
"alt": "NodeJS",
|
||||||
|
"title": "NodeJS",
|
||||||
|
"onclick": "openLink('nodejs')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/vscode.webp",
|
||||||
|
"alt": "Visual Studio Code (VSCode)",
|
||||||
|
"title": "Visual Studio Code (VSCode)",
|
||||||
|
"onclick": "openLink('vscode')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/cmd.webp",
|
||||||
|
"alt": "Command Line (Windows)",
|
||||||
|
"title": "Command Line (Windows)",
|
||||||
|
"onclick": "openLink('cmd')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/powershell.webp",
|
||||||
|
"alt": "Powershell (Windows)",
|
||||||
|
"title": "Powershell (Windows)",
|
||||||
|
"onclick": "openLink('ps')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/chatgpt.webp",
|
||||||
|
"alt": "ChatGPT",
|
||||||
|
"title": "ChatGPT",
|
||||||
|
"onclick": "openLink('chatgpt')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/xampp.webp",
|
||||||
|
"alt": "Server Manager (XAMPP)",
|
||||||
|
"title": "Server Manager (XAMPP)",
|
||||||
|
"onclick": "openLink('xampp')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/apache.webp",
|
||||||
|
"alt": "Apache Server",
|
||||||
|
"title": "Apache Server",
|
||||||
|
"onclick": "openLink('apache')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/mysql.webp",
|
||||||
|
"alt": "MySQL Server",
|
||||||
|
"title": "MySQL Server",
|
||||||
|
"onclick": "openLink('mysql')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/davinci.webp",
|
||||||
|
"alt": "DaVinci Resolve",
|
||||||
|
"title": "DaVinci Resolve",
|
||||||
|
"onclick": "openLink('davinci')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/obsstudio.webp",
|
||||||
|
"alt": "OBS Studio",
|
||||||
|
"title": "OBS Studio",
|
||||||
|
"onclick": "openLink('obsstudio')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/flstudio.webp",
|
||||||
|
"alt": "Fruity Loops Studio (FL Studio)",
|
||||||
|
"title": "Fruity Loops Studio (FL Studio)",
|
||||||
|
"onclick": "openLink('flstudio')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/voicemeeter.webp",
|
||||||
|
"alt": "VoiceMeeter",
|
||||||
|
"title": "VoiceMeeter",
|
||||||
|
"onclick": "openLink('voicemeeter')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/trello.webp",
|
||||||
|
"alt": "Trello",
|
||||||
|
"title": "Trello",
|
||||||
|
"onclick": "openLink('trello')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "images/skills/skillsTree/notion.webp",
|
||||||
|
"alt": "Notion",
|
||||||
|
"title": "Notion",
|
||||||
|
"onclick": "openLink('notion')"
|
||||||
|
}
|
||||||
|
]
|
||||||
Executable
+104
@@ -0,0 +1,104 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
|
||||||
|
<title>Andreas Reimann</title><meta name="author" content="Andreas Reimann">
|
||||||
|
<meta name="description" content="Welcome to my personal portfolio. areimann.de">
|
||||||
|
<meta name="keywords" content="Andreas Reimann, Portfolio, Webentwicklung, Webdevelopment, Musik, Content Creation, Streaming">
|
||||||
|
<link rel="canonical" href="https://areimann.de/" />
|
||||||
|
<link rel="icon" href="images/logo.webp">
|
||||||
|
<meta property=og:type content=website>
|
||||||
|
<meta property=og:title content="Andreas Reimann">
|
||||||
|
<meta property=og:url content=https://areimann.de/ >
|
||||||
|
<meta property=og:site_name content=Areimann.de>
|
||||||
|
<meta property=og:image content=/images/logo.webp>
|
||||||
|
<meta property=og:image:width content=500>
|
||||||
|
<meta property=og:image:height content=500>
|
||||||
|
<meta property=og:image:type content=image/webp>
|
||||||
|
<meta name="twitter:card" content="summary_medium_image" />
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
|
<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=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="styles/main.css?v=1"><link rel="stylesheet" href="styles/pages.css?v=1">
|
||||||
|
<script>function setTemporaryCookie(e,t){document.cookie=`${e}=${t}; path=/`}function setCookie(e,t,o){let i="";if(o){let n=new Date;n.setTime(n.getTime()+864e5*o),i="; expires="+n.toUTCString()}document.cookie=e+"="+(t||"")+i+"; path=/"}function getCookie(e){for(var t=document.cookie.split(";"),o=0;o<t.length;++o)if(t[o].trim().match("^"+e+"="))return t[o].replace(`${e}=`,"").trim();return null}function deleteCookie(e){setCookie(e,"",-1)}function updateURLWithCookies(){let e=getCookie("lang"),t=getCookie("theme"),o=getCookie("page")||"home",i=window.location.href.split("?")[0],n=`${i}?page=${o}&theme=${t}&lang=${e}`;window.history.replaceState({},"",n),applySettings(e,t),setTimeout(()=>{document.getElementById("loadingScreen").style.display="none",initLanguage()},3e3)}function setCookiesFromURL(){let e=new URLSearchParams(window.location.search),t=e.get("lang")||getCookie("lang"),o=e.get("theme")||getCookie("theme"),i=e.get("page")||"home";setCookie("lang",t,365),setCookie("theme",o,365),setTemporaryCookie("page",i),applySettings(t,o),loadPage(i)}function applySettings(e,t){document.documentElement.lang=e,"dark"===t?setTheme("dark"):setTheme("light")}</script>
|
||||||
|
</head>
|
||||||
|
<body onclick="handleBodyClick(event)">
|
||||||
|
<!-- Small Screen Message -->
|
||||||
|
<div id="screenSize"><p id="tinyScreenText" class="anonymous-pro-regular"></p></div>
|
||||||
|
<script>const messages={de:["Gl\xfcckwunsch! Du nutzt jetzt den kleinsten Bildschirm der Welt!","Braucht jemand eine Lupe? \uD83E\uDDD0","Das hier ist keine Smartwatch, mach das Fenster gr\xf6\xdfer! \uD83D\uDE06","Hier k\xf6nnte Ihre Werbung stehen – wenn man sie lesen k\xf6nnte…","Dieser Bildschirm ist so klein, selbst ein Pixel f\xfchlt sich eingeengt!","Dreht dein Hamster das Internet-Rad langsamer oder was ist da los? \uD83D\uDE05","Bitte wenden Sie Ihr Ger\xe4t oder besorgen Sie sich eine Lupe! \uD83D\uDD0D","Ich wusste nicht, dass es noch Nokia 3310 Browser gibt! \uD83D\uDCF1","Mikro-Browsing: Jetzt mit 99% weniger Platz f\xfcr Inhalte!","Ich hoffe, du hast Adleraugen, denn das ist ganz sch\xf6n winzig hier!","Pixel f\xfcr Pixel, irgendwann hast du einen ganzen Bildschirm!"],en:["Congrats! You're using the smallest screen in the world!","Anyone need a magnifying glass? \uD83E\uDDD0","This isn't a smartwatch, make the window bigger! \uD83D\uDE06","Your ad could be here – if anyone could read it…","This screen is so small, even a pixel feels cramped!","Is your hamster slowing down the internet wheel? \uD83D\uDE05","Please rotate your device or get yourself a magnifying glass! \uD83D\uDD0D","I didn’t know Nokia 3310 browsers still exist! \uD83D\uDCF1","Micro-browsing: Now with 99% less space for content!","I hope you have eagle eyes, because this is tiny!","Pixel by pixel, one day you'll have a full screen!"]};function updateMessage(){let e=getCookie("lang")||"en",n=messages[e]||messages.en;document.getElementById("tinyScreenText").innerText=n[Math.floor(Math.random()*n.length)]}const screenSizeElement=document.getElementById("screenSize"),observer=new MutationObserver(()=>{"none"!==window.getComputedStyle(screenSizeElement).display&&updateMessage()});observer.observe(screenSizeElement,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",()=>{window.innerHeight<=500&&updateMessage()}),"none"!==window.getComputedStyle(screenSizeElement).display&&updateMessage();</script>
|
||||||
|
<!-- Loading Screen -->
|
||||||
|
<div id="loadingScreen" style="display: none;"><div class="spinner"></div></div>
|
||||||
|
<!-- Cookie Banner -->
|
||||||
|
<div id="cookie-banner" class="cookie-banner hidden"><p data-lang="cookieInfo" class="anonymous-pro-regular"></p><button id="cookie-accept" class="chakra-petch-light">OK</button></div>
|
||||||
|
<!-- Header -->
|
||||||
|
<header id="header">
|
||||||
|
<div class="logoContainer"><img src="images/logo.webp" alt=""><h1 class="tangerine-bold">Andreas<span>Reimann</span></h1></div>
|
||||||
|
<nav class="headerNavContainer" id="headerNavContainer">
|
||||||
|
<ul class="mainMenu">
|
||||||
|
<li data-lang="navHome" class="chakra-petch-light" onclick="loadPage('home')"></li>
|
||||||
|
<li data-lang="navProfile" class="chakra-petch-light" onclick="loadPage('profile')"></li>
|
||||||
|
<li data-lang="navProjects" class="chakra-petch-light" onclick="loadPage('projects')"></li>
|
||||||
|
<li data-lang="navSkills" class="chakra-petch-light" onclick="loadPage('skills')"></li>
|
||||||
|
<li data-lang="navContact" class="chakra-petch-light" onclick="loadPage('contact')"></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<button class="modeSwitcher" onclick="toggleTheme()"><i class="fa-solid fa-sun"></i><div class="modeSelect" style="pointer-events: none;"></div><i class="fa-solid fa-moon"></i></button>
|
||||||
|
<button class="langSwitcher" onclick="toggleLanguage()"><img class="langIcon"></button>
|
||||||
|
</header>
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav id="navigation">
|
||||||
|
<div class="navButton" onclick="toggleDeskMenu()"><span></span><span></span><span></span></div>
|
||||||
|
<ul class="mainMenu">
|
||||||
|
<div class="logoContainer"><img src="images/logo.webp" alt=""><h1 class="tangerine-bold">Andreas<span>Reimann</span></h1></div>
|
||||||
|
<li data-lang="navHome" class="chakra-petch-light" onclick="loadPage('home')"></li>
|
||||||
|
<li data-lang="navProfile" class="chakra-petch-light" onclick="loadPage('profile')"></li>
|
||||||
|
<li data-lang="navProjects" class="chakra-petch-light" onclick="loadPage('projects')"></li>
|
||||||
|
<li data-lang="navSkills" class="chakra-petch-light" onclick="loadPage('skills')"></li>
|
||||||
|
<li data-lang="navContact" class="chakra-petch-light" onclick="loadPage('contact')"></li>
|
||||||
|
<div class="modeSwitcher" onclick="toggleTheme()"><i class="fa-solid fa-sun"></i><div class="modeSelect" style="pointer-events: none;"></div><i class="fa-solid fa-moon"></i></div>
|
||||||
|
<button class="langSwitcher" onclick="toggleLanguage()"><img class="langIcon"></button>
|
||||||
|
<p class="copyright anonymous-pro-regular">©2024-<span class="year"></span> by Andreas Reimann</p>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<!-- Content -->
|
||||||
|
<main id="content"></main>
|
||||||
|
<!-- Sitefooter -->
|
||||||
|
<footer id="footer">
|
||||||
|
<div class="logoContainer"><img src="images/logo.webp" alt=""><h1 class="tangerine-bold">Andreas <span>Reimann</span></h1></div>
|
||||||
|
<div class="devider"></div>
|
||||||
|
<ul class="legalLinks">
|
||||||
|
<li data-lang="legalImpress" class="anonymous-pro-regular" onclick="loadPage('impress')"></li>
|
||||||
|
<li data-lang="legalData" class="anonymous-pro-regular" onclick="loadPage('privacy')"></li>
|
||||||
|
<li data-lang="legalCookies" class="anonymous-pro-regular" onclick="loadPage('cookies')"></li>
|
||||||
|
<li data-lang="legalSources" class="anonymous-pro-regular" onclick="loadPage('sources')"></li>
|
||||||
|
</ul>
|
||||||
|
<div class="devider"></div>
|
||||||
|
<div class="socials">
|
||||||
|
<a href="mailto:business@areimann.de"><i class="fa-solid fa-envelope"></i></a>
|
||||||
|
<a href="https://wa.me/4915206482495"><i class="fa-brands fa-whatsapp"></i></a>
|
||||||
|
<a href="https://t.me/lupinexmedia"><i class="fa-brands fa-telegram"></i></a>
|
||||||
|
<a href="https://discord.gg/vjg7kKyH2m"><i class="fa-brands fa-discord"></i></a>
|
||||||
|
<a href="https://twitch.tv/apixoffiziell"><i class="fa-brands fa-twitch"></i></a>
|
||||||
|
<a href="https://youtube.com/@apixoffiziell"><i class="fa-brands fa-youtube"></i></a>
|
||||||
|
<a href="https://tiktok.com/@apixoffiziell"><i class="fa-brands fa-tiktok"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="devider"></div>
|
||||||
|
<p class="copyright anonymous-pro-regular">©2024-<span class="year"></span> by Andreas Reimann</p>
|
||||||
|
</footer>
|
||||||
|
<!-- Mobile Footer -->
|
||||||
|
<section id="mobileFooter">
|
||||||
|
<div onclick="openMobilMenu('nav')"><i class="fa-solid fa-bars"></i><span data-lang="mobileMenu" class="chakra-petch-light"></span></div>
|
||||||
|
<div onclick="openMobilMenu('contact')"><i class="fa-solid fa-user"></i><span data-lang="mobileContact" class="chakra-petch-light"></span></div>
|
||||||
|
<i class="fa-solid fa-house center" onclick="openMobilMenu('home')"></i>
|
||||||
|
<div onclick="openMobilMenu('projects')"><i class="fa-solid fa-folder"></i><span data-lang="mobileProjects" class="chakra-petch-light"></span></div>
|
||||||
|
<div onclick="openMobilMenu('settings')"><i class="fa-solid fa-cog"></i><span data-lang="mobileSettings" class="chakra-petch-light"></span></div>
|
||||||
|
</section>
|
||||||
|
<aside id="mobileSettings">
|
||||||
|
<div class="modeSwitcher" onclick="toggleTheme()"><i class="fa-solid fa-sun"></i><div class="modeSelect" style="pointer-events: none;"></div><i class="fa-solid fa-moon"></i></div>
|
||||||
|
<button class="langSwitcher" onclick="toggleLanguage()"><img class="langIcon"></button>
|
||||||
|
</aside>
|
||||||
|
<!-- Script Loader -->
|
||||||
|
<script src="scripts/mainLogic.js"></script><script src="scripts/fetchData.js?v=1"></script>
|
||||||
|
<script data-info="Get Current Year">const years=document.querySelectorAll(".year"),d=new Date;let yearNow=d.getFullYear();years.forEach(e=>{e.innerHTML=yearNow});</script>
|
||||||
|
<script>let translations={};function toggleLanguage(){let e="en"===(getCookie("lang")||"en")?"de":"en";document.documentElement.lang=e,setCookie("lang",e,365),updateLanguageElements(e),updateURLWithCookies(),updateMottoMessage()}function updateLanguageElements(e){"en"!==e&&"de"!==e&&(e="en"),document.querySelectorAll("[data-lang]").forEach(n=>{let a=n.getAttribute("data-lang");translations[a]&&translations[a][e]&&(n.innerHTML=translations[a][e])}),document.querySelectorAll(".langIcon").forEach(n=>{"en"===e?n.src="images/lang/en.webp":"de"===e&&(n.src="images/lang/de.webp")}),setCookie("lang",e),updateURLWithCookies()}function initLanguage(){let e=getCookie("lang")||"en";"en"!==e&&"de"!==e&&(e="en"),document.documentElement.lang=e,updateLanguageElements(e)}fetch("db/dictionary.json").then(e=>e.json()).then(e=>{translations=e,initLanguage()}).catch(e=>console.error("Fehler beim Laden:",e));</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,229 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
const app = express();
|
||||||
|
const port = 4000;
|
||||||
|
|
||||||
|
// Ordner-Struktur
|
||||||
|
const logsDir = path.join(__dirname, 'logs');
|
||||||
|
const certificatesDir = path.join(__dirname, 'resources/docs/certificates');
|
||||||
|
const galleryDir = path.join(__dirname, 'resources/images/gallery');
|
||||||
|
|
||||||
|
// Statische Dateien bereitstellen
|
||||||
|
app.use('/db', express.static(path.join(__dirname, 'database')));
|
||||||
|
app.use('/styles', express.static(path.join(__dirname, 'resources/stylesheets')));
|
||||||
|
app.use('/scripts', express.static(path.join(__dirname, 'resources/scripts')));
|
||||||
|
app.use('/content', express.static(path.join(__dirname, 'resources/content')));
|
||||||
|
app.use('/docs', express.static(path.join(__dirname, 'resources/docs')));
|
||||||
|
app.use('/images', express.static(path.join(__dirname, 'resources/images')));
|
||||||
|
|
||||||
|
// Helper-Funktion: Deutscher Zeitstempel
|
||||||
|
function getGermanTimestamp(){return new Date().toLocaleString("de-DE",{timeZone:"Europe/Berlin",year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).replace(",","")}
|
||||||
|
|
||||||
|
// Statistik aktualisieren
|
||||||
|
function updateStatistics(e,t,r,i,s){let l=s.getFullYear(),a=path.join(logsDir,`statistics-${l}.log`),n={total:0,referrers:{},devices:{},browsers:{},daily:{},monthly:{}};if(fs.existsSync(a))try{n=JSON.parse(fs.readFileSync(a,"utf8"))}catch(o){console.error("Fehler beim Parsen der Statistikdatei:",o)}let c=s.toISOString().split("T")[0],y=s.toISOString().substring(0,7);n.total++,n.referrers[e]=(n.referrers[e]||0)+1,n.devices[r]=(n.devices[r]||0)+1,n.browsers[i]=(n.browsers[i]||0)+1,n.daily[c]=(n.daily[c]||0)+1,n.monthly[y]=(n.monthly[y]||0)+1,fs.writeFileSync(a,JSON.stringify(n,null,2))}
|
||||||
|
|
||||||
|
// Alte Logs aufräumen (älter als 6 Monate)
|
||||||
|
function cleanupOldLogs(){let e=new Date;fs.readdir(logsDir,(n,r)=>{if(n)return console.error("Fehler beim Lesen des Logs-Verzeichnisses:",n);r.forEach(n=>{if(/^user-access-\d{2}-\d{4}\.log$/.test(n)){let[r,t]=n.match(/\d+/g).map(Number),l=new Date(t,r-1),s=(e.getFullYear()-l.getFullYear())*12+e.getMonth()-l.getMonth();s>6&&fs.unlink(path.join(logsDir,n),()=>{})}})})}
|
||||||
|
|
||||||
|
// Dashboard anzeigen
|
||||||
|
app.get("/dashboard", (req, res) => {
|
||||||
|
const filePath = path.join(logsDir, `statistics-${new Date().getFullYear()}.log`);
|
||||||
|
if (!fs.existsSync(filePath)) return res.send("<h1 style='color: #eee; background: #121212; padding: 2rem;'>Keine Statistiken gefunden.</h1>");
|
||||||
|
|
||||||
|
const stats = JSON.parse(fs.readFileSync(filePath, 'utf8'));
|
||||||
|
|
||||||
|
const mostUsed = (obj) =>
|
||||||
|
Object.entries(obj).reduce((a, b) => (a[1] > b[1] ? a : b), ["-", 0])[0];
|
||||||
|
|
||||||
|
const dailyLabels = Object.keys(stats.daily).map(date => `'${date}'`).join(",");
|
||||||
|
const dailyData = Object.values(stats.daily).join(",");
|
||||||
|
|
||||||
|
const monthlyLabels = Object.keys(stats.monthly).map(month => `'${month}'`).join(",");
|
||||||
|
const monthlyData = Object.values(stats.monthly).join(",");
|
||||||
|
|
||||||
|
const referrerTable = Object.entries(stats.referrers)
|
||||||
|
.sort((a, b) => b[1] - a[1])
|
||||||
|
.map(([ref, count]) => `<tr><td>${ref}</td><td>${count}</td></tr>`)
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
const html = `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Andreas Reimann | Statistik</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 2rem;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background-color: #121212;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.stat-container {
|
||||||
|
background: #1e1e1e;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: auto;
|
||||||
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
.stat {
|
||||||
|
margin: 1rem 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.stat-label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #bbbbbb;
|
||||||
|
}
|
||||||
|
.stat-value {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.chart-box {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 2rem;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
table th, table td {
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
table th {
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
margin-top: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="stat-container">
|
||||||
|
<h1>📊 Website Statistik</h1>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<span class="stat-label">Total User Access:</span>
|
||||||
|
<span class="stat-value">${stats.total}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<span class="stat-label">Most Used Referrer:</span>
|
||||||
|
<span class="stat-value">${mostUsed(stats.referrers)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<span class="stat-label">Most Used Device:</span>
|
||||||
|
<span class="stat-value">${mostUsed(stats.devices)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<span class="stat-label">Most Used Browser:</span>
|
||||||
|
<span class="stat-value">${mostUsed(stats.browsers)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<span class="stat-label">Average Daily Access:</span>
|
||||||
|
<span class="stat-value">${(stats.total / Object.keys(stats.daily).length).toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<span class="stat-label">Average Monthly Access:</span>
|
||||||
|
<span class="stat-value">${(stats.total / Object.keys(stats.monthly).length).toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-box">
|
||||||
|
<canvas id="dailyChart" height="100"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="chart-box">
|
||||||
|
<canvas id="monthlyChart" height="100"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Live Referrer-Tabelle</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr><th>Referrer</th><th>Anzahl</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
${referrerTable}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>© 2025 Andreas Reimann</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const dailyCtx = document.getElementById('dailyChart').getContext('2d');
|
||||||
|
const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
|
||||||
|
|
||||||
|
new Chart(dailyCtx, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [${dailyLabels}],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Tägliche Zugriffe',
|
||||||
|
data: [${dailyData}],
|
||||||
|
borderColor: '#4fc3f7',
|
||||||
|
backgroundColor: 'rgba(79, 195, 247, 0.1)',
|
||||||
|
fill: true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: { responsive: true, plugins: { legend: { labels: { color: '#e0e0e0' } } }, scales: { x: { ticks: { color: '#aaa' } }, y: { ticks: { color: '#aaa' } } } }
|
||||||
|
});
|
||||||
|
|
||||||
|
new Chart(monthlyCtx, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: [${monthlyLabels}],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Monatliche Zugriffe',
|
||||||
|
data: [${monthlyData}],
|
||||||
|
backgroundColor: '#81c784'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: { responsive: true, plugins: { legend: { labels: { color: '#e0e0e0' } } }, scales: { x: { ticks: { color: '#aaa' } }, y: { ticks: { color: '#aaa' } } } }
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`;
|
||||||
|
res.send(html);
|
||||||
|
});
|
||||||
|
|
||||||
|
// API: Bildergalerie
|
||||||
|
app.get("/get-images",(e,s)=>{fs.readdir(galleryDir,(e,i)=>{if(e)return s.status(500).send("Fehler beim Lesen des Verzeichnisses");let t=i.filter(e=>/\.(jpg|jpeg|png|gif|webp)$/i.test(e));s.json(t)})});
|
||||||
|
|
||||||
|
// API: Zertifikate
|
||||||
|
app.get("/get-certificates",(e,t)=>{fs.readdir(certificatesDir,(e,r)=>{if(e)return t.status(500).send("Serverfehler");let i=r.filter(e=>/\.(jpg|jpeg|png|webp)$/i.test(e));t.json(i)})});
|
||||||
|
|
||||||
|
// Logging & Interface-Ausgabe
|
||||||
|
app.get("*",(e,r)=>{fs.existsSync(logsDir)||fs.mkdirSync(logsDir);let t=new Date,n=path.join(logsDir,`user-access-${String(t.getMonth()+1).padStart(2,"0")}-${t.getFullYear()}.log`);e.headers["x-forwarded-for"]||e.socket.remoteAddress;let s=e.get("Referer")||"Direct Access",i=e.get("User-Agent")||"Unknown",o=/mobile/i.test(i)?"Mobile":"Desktop",a=i.match(/(Firefox|Chrome|Safari|Opera|Edg|Brave)/i),c=a?a[0]:"Unknown",d=`[\${getGermanTimestamp()}] \${ip} accessed website
|
||||||
|
Referrer: \${referrer}
|
||||||
|
User-Agent: \${userAgent}
|
||||||
|
|
||||||
|
`;fs.appendFile(n,d,e=>{e&&console.error("Fehler beim Schreiben des Logs:",e)}),updateStatistics(s,i,o,c,t),cleanupOldLogs(),r.sendFile(path.join(__dirname,"interface.html"))});
|
||||||
|
|
||||||
|
// Cache-Header deaktivieren
|
||||||
|
app.use((e,a,o)=>{a.setHeader("Cache-Control","no-store, no-cache, must-revalidate, proxy-revalidate"),o()});
|
||||||
|
|
||||||
|
app.listen(port,()=>{console.log(`Online on http://localhost:${port}`)});
|
||||||
+1005
File diff suppressed because it is too large
Load Diff
Executable
+20
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "areimann.de",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Vorstellungswebsite A. Reimann",
|
||||||
|
"keywords": [
|
||||||
|
"Website",
|
||||||
|
"NodeSite"
|
||||||
|
],
|
||||||
|
"license": "ISC",
|
||||||
|
"author": "Andreas Reimann, LupiNex Media",
|
||||||
|
"type": "commonjs",
|
||||||
|
"main": "main.js",
|
||||||
|
"dependencies": {
|
||||||
|
"areimann.de": "file:",
|
||||||
|
"express": "^4.21.2",
|
||||||
|
"fs": "^0.0.1-security",
|
||||||
|
"path": "^0.12.7",
|
||||||
|
"pdf2pic": "^3.1.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
Executable
+55
@@ -0,0 +1,55 @@
|
|||||||
|
<div class="error-container">
|
||||||
|
<h1>404</h1>
|
||||||
|
<h2 data-lang="errorTextOne"></h2>
|
||||||
|
<p data-lang="errorTextTwo"></p>
|
||||||
|
<p data-lang="errorTextThree"></p>
|
||||||
|
<a data-lang="errorButton" onclick="loadPage('home')"></a>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
.error-container {
|
||||||
|
position: relative;
|
||||||
|
height: 400px;
|
||||||
|
top: 200px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.error-container h1 {
|
||||||
|
font-size: 120px;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--alert-color);
|
||||||
|
}
|
||||||
|
.error-container h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 10px 0;
|
||||||
|
color: var(--info-color);
|
||||||
|
}
|
||||||
|
.error-container p {
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
.error-container a {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
top: 350px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: 2px solid #1E90FF;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.error-container a:hover {
|
||||||
|
background-color: #1E90FF;
|
||||||
|
color: white;
|
||||||
|
border-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.error-container .lang {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Executable
+6
@@ -0,0 +1,6 @@
|
|||||||
|
<div class="cookie">
|
||||||
|
<h1 data-lang="cookie-heading" class="merriweather"></h1>
|
||||||
|
<p data-lang="cookie-intro" class="anonymous-pro-regular"></p>
|
||||||
|
<ul data-lang="cookie-info" class="anonymous-pro-regular"></ul>
|
||||||
|
<p data-lang="cookie-acceptance" class="anonymous-pro-regular"></p>
|
||||||
|
</div>
|
||||||
Executable
+39
@@ -0,0 +1,39 @@
|
|||||||
|
<div class="dataProtection">
|
||||||
|
<h1 data-lang="dataProtectionHeader" class="merriweather"></h1>
|
||||||
|
<p data-lang="dataProtectionParagraph1"></p>
|
||||||
|
<p data-lang="dataProtectionParagraph2"></p>
|
||||||
|
<p data-lang="dataProtectionParagraph3"></p>
|
||||||
|
<p data-lang="dataProtectionParagraph4"></p>
|
||||||
|
<p data-lang="dataProtectionParagraph5"></p>
|
||||||
|
<div>
|
||||||
|
<p><strong data-lang="dataProtectionHeader2"></strong></p>
|
||||||
|
<p data-lang="dataProtectionParagraph6"></p>
|
||||||
|
<p data-lang="dataProtectionParagraph7"></p>
|
||||||
|
Andreas Reimann<br>Lagerlöfstr. 8, <br>Rostock<br>01520 648 2495<br>business@areimann.de
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><strong data-lang="dataProtectionHeader3"></strong></p>
|
||||||
|
<p data-lang="dataProtectionParagraph8"></p>
|
||||||
|
<ul data-lang="dataProtectionList1"></ul>
|
||||||
|
<p data-lang="dataProtectionParagraph9"></p>
|
||||||
|
<p><strong data-lang="dataProtectionParagraph10"></strong></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><strong data-lang="dataProtectionHeader4"></strong></p>
|
||||||
|
<p data-lang="dataProtectionParagraph11"></p>
|
||||||
|
<div data-lang="dataProtectionParagraph12"></div>
|
||||||
|
<div data-lang="dataProtectionParagraph13"></div>
|
||||||
|
<div data-lang="dataProtectionParagraph14"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div data-lang="dataProtectionParagraph15"></div>
|
||||||
|
<div data-lang="dataProtectionParagraph16"></div>
|
||||||
|
<div data-lang="dataProtectionParagraph17"></div>
|
||||||
|
<div data-lang="dataProtectionParagraph18"></div>
|
||||||
|
<div data-lang="dataProtectionParagraph19"></div>
|
||||||
|
<div data-lang="dataProtectionParagraph20"></div>
|
||||||
|
<div data-lang="dataProtectionParagraph21"></div>
|
||||||
|
<div data-lang="dataProtectionParagraph22"></div>
|
||||||
|
</div>
|
||||||
|
<div data-lang="dataProtectionLink"></div>
|
||||||
|
</div>
|
||||||
Executable
+683
@@ -0,0 +1,683 @@
|
|||||||
|
<div class="homeBanner">
|
||||||
|
<div class="bannerContent">
|
||||||
|
<h1 data-lang="bannerWelcome" class="merriweather"></h1>
|
||||||
|
<p data-lang="bannerInfo" class="chakra-petch-light"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="homeMainContent">
|
||||||
|
<div class="leftSection slide-left">
|
||||||
|
<p id="homeMotto" class="motto chakra-petch-semibold-italic"></p>
|
||||||
|
<div class="aboutMe">
|
||||||
|
<div class="sectionLeftAboutMe">
|
||||||
|
<h1 data-lang="profileAboutMeHeader" class="merriweather"></h1>
|
||||||
|
<p data-lang="homeAboutMeTextOne"></p>
|
||||||
|
<button class="chakra-petch-light" data-lang="moreInfo" onclick="loadPage('profile')"></button>
|
||||||
|
</div>
|
||||||
|
<div class="sectionRightAboutMe">
|
||||||
|
<img src="images/selfPicLookLeft.webp" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="homeDeviderLeft"></div>
|
||||||
|
<div class="skillsCardContainer">
|
||||||
|
<div class="skillsCardSlider" id="skillsSlider"></div>
|
||||||
|
</div>
|
||||||
|
<div class="homeDeviderLeft"></div>
|
||||||
|
<div class="timeline">
|
||||||
|
<h1 class="merriweather" data-lang="mileStones"></h1>
|
||||||
|
<div class="timeline-container">
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">2001</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesFirstMusic"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">2005</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesSchool"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">11.06.2014</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesFirstVideo"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">07.07.2014</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesFirstStream"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">2014</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesGraficsdesign"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">2015</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesSchoolOut"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">01.08.2016</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesApprenticeship"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">09.2016</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesMusicProduce"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">08.2018</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesWebdev"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">28.02.2020</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesApprenticeshipEnd"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">05.2022</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesDavinci"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">06.2023</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesWriting"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">02.10.2023</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesTeamGiftwolf"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">05.2024</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesWebsite"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-icon"></div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date chakra-petch-semibold">28.03.2025</span>
|
||||||
|
<p class="timeline-description anonymous-pro-regular" data-lang="mileStonesPodcast"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightSection slide-right">
|
||||||
|
<h1 data-lang="homeNewsHeader" class="merriweather"></h1>
|
||||||
|
<div class="newsDevider"></div>
|
||||||
|
<div class="newsTicker" id="newsTicker"></div>
|
||||||
|
</div>
|
||||||
|
<div class="homeDevider"></div>
|
||||||
|
<div class="projectsContainer">
|
||||||
|
<h1 data-lang="homeProjects" class="merriweather"></h1>
|
||||||
|
<div class="projectCardContainer" id="projectCardContainer"></div>
|
||||||
|
</div>
|
||||||
|
<div class="homeDevider"></div>
|
||||||
|
<span data-lang="moreFollows" class="moreFollows merriweather"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bannerContent h1,
|
||||||
|
.rightSection h1,
|
||||||
|
.projectsContainer h1 {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
text-align: left;
|
||||||
|
line-height: 0.9;
|
||||||
|
font-size: 2.3em;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||||
|
}
|
||||||
|
.moreFollows {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.bannerContent h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
.rightSection h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
.homeBanner::before {
|
||||||
|
content: "";
|
||||||
|
background: url('images/banners/homeBanner.webp') center/cover no-repeat;
|
||||||
|
filter: blur(5px) brightness(0.6);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
animation: slideFromTop 1s ease-out forwards;
|
||||||
|
}
|
||||||
|
.homeBanner {
|
||||||
|
position: relative;
|
||||||
|
top: -50px;
|
||||||
|
left: 50%;
|
||||||
|
height: auto;
|
||||||
|
padding: 100px 0 100px 0;
|
||||||
|
transform: translate(-50%);
|
||||||
|
width: calc(100% + 100px);
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bannerContent p {
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
color: var(--button-text-color);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.3em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.homeMainContent {
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% + 100px);
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
.leftSection {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
max-width: calc(75% - 25px);
|
||||||
|
}
|
||||||
|
.motto::before {
|
||||||
|
content: "„"
|
||||||
|
}
|
||||||
|
.motto::after {
|
||||||
|
content: "“"
|
||||||
|
}
|
||||||
|
.motto {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
font-size: 2.5em;
|
||||||
|
text-shadow:
|
||||||
|
0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.aboutMe {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
left: 0;
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
text-align: justify;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
.sectionLeftAboutMe {
|
||||||
|
position: relative;
|
||||||
|
max-width: 60%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.skillsCardContainer {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
gap: 25px;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 75px;
|
||||||
|
left: 0px;
|
||||||
|
height: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 50px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 6px 12px rgba(0, 0, 0, 0.4),
|
||||||
|
inset 0 -6px 12px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 4px 0 8px rgba(0, 0, 0, 0.25),
|
||||||
|
inset -4px 0 8px rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
.skillsCardSlider {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
gap: 35px;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
width: max-content;
|
||||||
|
animation: scrollLeft 60s linear infinite;
|
||||||
|
}
|
||||||
|
.skillsCardContainer img {
|
||||||
|
width: 100px;
|
||||||
|
padding: 5px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
cursor: pointer;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.sectionRightAboutMe {
|
||||||
|
position: relative;
|
||||||
|
max-width: 40%;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(0,-50%);
|
||||||
|
}
|
||||||
|
.sectionRightAboutMe img {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
left: 50%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
.aboutMe h1 {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
line-height: 0.9;
|
||||||
|
font-size: 2.3em;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||||
|
}
|
||||||
|
.aboutMe p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-align: justify;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.aboutMe button {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
margin: 0;
|
||||||
|
background: var(--tertiary-color);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
text-align: center;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
font-size: 1em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.aboutMe button:hover {
|
||||||
|
transform: translate(-50%,-5px) scale(1.05);
|
||||||
|
background: var(--hover-color);
|
||||||
|
}
|
||||||
|
.timeline {
|
||||||
|
margin: 0;
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.timeline h1 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Merriweather', serif;
|
||||||
|
font-size: 2em;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||||
|
}
|
||||||
|
.timeline-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.timeline-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 300px;
|
||||||
|
padding: 10px;
|
||||||
|
position: relative;
|
||||||
|
animation: fadeIn 1s ease-in-out;
|
||||||
|
flex-grow: 1;
|
||||||
|
max-width: 300px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.timeline-item::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
border-radius: 12px;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.timeline-item:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.timeline-item:hover::before {
|
||||||
|
background-color: rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
.timeline-item:hover .timeline-icon {
|
||||||
|
background-color: var(--hover-color);
|
||||||
|
}
|
||||||
|
.timeline-item .timeline-icon {
|
||||||
|
background-color: #3498db;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.timeline-item .timeline-content {
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
|
border: solid 1px var(--border-color);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.timeline-date {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.1em;
|
||||||
|
color: var(--tertiary-color);
|
||||||
|
}
|
||||||
|
.timeline-description {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
.timeline-item:nth-child(odd) {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
.timeline-item:nth-child(odd) .timeline-content {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.rightSection {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
min-width: 350px;
|
||||||
|
max-width: calc(20% - 25px);
|
||||||
|
background: var(--card-bg);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.newsDevider {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
border: solid 1px var(--border-color);
|
||||||
|
}
|
||||||
|
.newsTicker {
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
padding: 25px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.newsTicker iframe {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.newsTicker h2 {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.newsTicker p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.newsTicker a {
|
||||||
|
position: relative;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: right;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
top: -15px;
|
||||||
|
color: var(--link-color);
|
||||||
|
}
|
||||||
|
.newsTicker a:hover {
|
||||||
|
color: var(--link-hover-color);
|
||||||
|
}
|
||||||
|
.projectsContainer {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 95%;
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.projectCardContainer {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.projectCard {
|
||||||
|
position: relative;
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 325px;
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
padding: 25px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.projectCard .logoImage {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.projectCard img {
|
||||||
|
position: relative;
|
||||||
|
width: 35%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.projectCard h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--card-header-text);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.projectCard p {
|
||||||
|
max-height: 100px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-align: justify;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: -webkit-box;
|
||||||
|
white-space: normal;
|
||||||
|
-webkit-line-clamp: 5;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
.projectCard button {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 15px;
|
||||||
|
width: 100%;
|
||||||
|
height: 25px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: var(--link-color);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.projectCard button:hover {
|
||||||
|
color: var(--link-hover-color);
|
||||||
|
scale: 1.1;
|
||||||
|
}
|
||||||
|
.homeDeviderLeft {
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border-color);
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
.homeDevider {
|
||||||
|
position: relative;
|
||||||
|
width: 95%;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border-color);
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1500px) {
|
||||||
|
.rightSection {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.leftSection {
|
||||||
|
max-width: 95%;
|
||||||
|
}
|
||||||
|
.skillsCardContainer img {
|
||||||
|
width: 75px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1300px) {
|
||||||
|
.motto {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
.motto {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
.aboutMe {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 25px 10px;
|
||||||
|
}
|
||||||
|
.sectionRightAboutMe {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sectionLeftAboutMe {
|
||||||
|
max-width: 100%;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
.sectionLeftAboutMe h1,
|
||||||
|
.projectsContainer h1,
|
||||||
|
.timeline h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.sectionLeftAboutMe p {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 785px) {
|
||||||
|
.bannerContent h1 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
.bannerContent p {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
.homeBanner {
|
||||||
|
padding: 50px 0 50px 0;
|
||||||
|
}
|
||||||
|
.projectCard {
|
||||||
|
max-width: 95%;
|
||||||
|
}
|
||||||
|
.skillsCardSlider {
|
||||||
|
animation: scrollLeft 30s linear infinite;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Executable
+23
@@ -0,0 +1,23 @@
|
|||||||
|
<div class="impress">
|
||||||
|
<h1 data-lang="impressHeader" class="merriweather"></h1>
|
||||||
|
<p data-lang="impressParagraph5"></p>
|
||||||
|
<p data-lang="impressName"></p>
|
||||||
|
<p data-lang="impressAddress"></p>
|
||||||
|
<p><strong data-lang="impressRepresentativeTitle"></strong><br>
|
||||||
|
<span data-lang="impressRepresentative"></span>
|
||||||
|
</p>
|
||||||
|
<p><strong data-lang="impressContactTitle"></strong><br>
|
||||||
|
<span data-lang="impressPhone"></span><br>
|
||||||
|
<a href="mailto:business@areimann.de" data-lang="impressEmailLink"></a>
|
||||||
|
</p>
|
||||||
|
<p><strong data-lang="impressLiabilityTitle"></strong></p>
|
||||||
|
<p><strong data-lang="impressLiabilityContentTitle"></strong></p>
|
||||||
|
<p data-lang="impressLiabilityContent"></p>
|
||||||
|
<p><strong data-lang="impressLinkLiabilityTitle"></strong></p>
|
||||||
|
<p data-lang="impressLinkLiabilityContent"></p>
|
||||||
|
<p><strong data-lang="impressCopyrightTitle"></strong></p>
|
||||||
|
<p data-lang="impressCopyrightContent"></p>
|
||||||
|
<p><strong data-lang="impressPrivacyTitle"></strong></p>
|
||||||
|
<p data-lang="impressPrivacyContent"></p>
|
||||||
|
<p data-lang="impressGeneratorInfo"></p>
|
||||||
|
</div>
|
||||||
Executable
+180
@@ -0,0 +1,180 @@
|
|||||||
|
<div class="linkFilterMenu slide-top" onclick="toggleLinkFilterMenu()">
|
||||||
|
<h2 class="chakra-petch-light">Filter</h2>
|
||||||
|
<button class="resetButton chakra-petch-light" id="resetButton">Reset</button>
|
||||||
|
<i class='fa-solid fa-arrow-down'></i>
|
||||||
|
<div class="tagList" id="tagList"></div>
|
||||||
|
</div>
|
||||||
|
<div class="linkContainer fade-in" id="linkContainer"></div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.linkFilterMenu {
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
height: auto;
|
||||||
|
max-height: 75px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
margin-bottom: 25px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.linkFilterMenu h2 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 25px;
|
||||||
|
margin-left: 25px;
|
||||||
|
text-align: left;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
.linkFilterMenu .fa-arrow-down {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
top: 35px;
|
||||||
|
right: 25px;
|
||||||
|
animation: arrowJumper 2s linear infinite;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
.linkFilterMenu .fa-arrow-down:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
.linkFilterMenu:hover .fa-arrow-down {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
.linkFilterMenu .resetButton {
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
width: 89%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
padding: 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.linkFilterMenu .resetButton:hover {
|
||||||
|
background: var(--link-hover-color);
|
||||||
|
transform: translateX(-50%) scale(1.02);
|
||||||
|
}
|
||||||
|
.linkFilterMenu .tagList {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 100px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 90%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.linkFilterMenu .tagList button {
|
||||||
|
flex-grow: 1;
|
||||||
|
background: var(--link-color);
|
||||||
|
color: white;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.linkFilterMenu .tagList button:hover {
|
||||||
|
background: var(--link-hover-color);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
.tagList button.active {
|
||||||
|
background: var(--success-color);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
box-shadow: 0 3px 8px rgba(0, 255, 120, 0.3);
|
||||||
|
}
|
||||||
|
.linkContainer {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
width: calc(100% + 20px);
|
||||||
|
gap: 0px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.linkCard {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-basis: calc(100% / 6 - 20px);
|
||||||
|
min-width: 15%;
|
||||||
|
max-width: 100%;
|
||||||
|
height: 175px;
|
||||||
|
padding: 16px;
|
||||||
|
margin: 12px;
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.linkCard:hover {
|
||||||
|
transform: translateY(-10px) scale(1.02);
|
||||||
|
background: var(--link-hover-color);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 5px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 3px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.linkCard .spanContainer {
|
||||||
|
position: absolute;
|
||||||
|
min-width: 100px;
|
||||||
|
bottom: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
white-space: inherit;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.linkCard span {
|
||||||
|
position: relative;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 5px;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
.linkCard img {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.linkCard:hover img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
.linkContainer {
|
||||||
|
width: calc(100% + 85px);
|
||||||
|
}
|
||||||
|
.linkCard {
|
||||||
|
min-width: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Executable
+444
@@ -0,0 +1,444 @@
|
|||||||
|
<section class="profileAboutMe">
|
||||||
|
<div class="aboutMeText">
|
||||||
|
<h2 data-lang="profileAboutMeHeader" class="profileHeaderHeader"></h2>
|
||||||
|
<img src="images/selfPicLookRight.webp" alt="Andreas Reimann" style="float: left; margin-right: 20px; height: auto;" onclick="openModal('images/selfPicLookRight.webp')">
|
||||||
|
<p data-lang="aboutName" class="anonymous-pro-regular"></p>
|
||||||
|
<p data-lang="aboutBirthday" class="anonymous-pro-regular"></p>
|
||||||
|
<p data-lang="aboutIntro1" class="anonymous-pro-regular"></p>
|
||||||
|
<p data-lang="aboutSkills1" class="anonymous-pro-regular"></p>
|
||||||
|
<p data-lang="aboutSkills2" class="anonymous-pro-regular"></p>
|
||||||
|
<p data-lang="aboutProjects" class="anonymous-pro-regular"></p>
|
||||||
|
<p data-lang="aboutOutro" class="anonymous-pro-regular"></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="profileDevider"></div>
|
||||||
|
<section class="profileCertificates">
|
||||||
|
<h2 data-lang="profileCertificatesHeader" class="profileHeaderHeader"></h2>
|
||||||
|
<div id="certificatesGallery" class="gallery"></div>
|
||||||
|
</section>
|
||||||
|
<div class="profileDevider"></div>
|
||||||
|
<section class="profilePartnerships">
|
||||||
|
<h2 data-lang="profilePartnershipsHeader" class="profileHeaderHeader"></h2>
|
||||||
|
<div class="partnershipsContainer" id="partnersContainer"></div>
|
||||||
|
</section>
|
||||||
|
<div class="profileDevider"></div>
|
||||||
|
<section class="profileGalery">
|
||||||
|
<h2 data-lang="profileGaleryHeader" class="profileHeaderHeader"></h2>
|
||||||
|
<div class="galleryContainer" id="galleryContainer"></div>
|
||||||
|
</section>
|
||||||
|
<div id="imageModal" class="modal">
|
||||||
|
<span class="close" onclick="closeModal()">×</span>
|
||||||
|
<img class="modal-content" id="modalImage">
|
||||||
|
</div>
|
||||||
|
<div class="profileDevider"></div>
|
||||||
|
<section class="profileFAQ">
|
||||||
|
<h2 data-lang="profileFAQHeader" class="profileHeaderHeader"></h2>
|
||||||
|
<div class="faqContainer">
|
||||||
|
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||||
|
<h3 data-lang="profileFAQQuestion1" class="chakra-petch-light"></h3>
|
||||||
|
<i class='fa-solid fa-arrow-down'></i>
|
||||||
|
<p data-lang="profileFAQAnswer1"></p>
|
||||||
|
</div>
|
||||||
|
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||||
|
<h3 data-lang="profileFAQQuestion2" class="chakra-petch-light"></h3>
|
||||||
|
<i class='fa-solid fa-arrow-down'></i>
|
||||||
|
<p data-lang="profileFAQAnswer2"></p>
|
||||||
|
</div>
|
||||||
|
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||||
|
<h3 data-lang="profileFAQQuestion3" class="chakra-petch-light"></h3>
|
||||||
|
<i class='fa-solid fa-arrow-down'></i>
|
||||||
|
<p data-lang="profileFAQAnswer3"></p>
|
||||||
|
</div>
|
||||||
|
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||||
|
<h3 data-lang="profileFAQQuestion4" class="chakra-petch-light"></h3>
|
||||||
|
<i class='fa-solid fa-arrow-down'></i>
|
||||||
|
<p data-lang="profileFAQAnswer4"></p>
|
||||||
|
</div>
|
||||||
|
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||||
|
<h3 data-lang="profileFAQQuestion5" class="chakra-petch-light"></h3>
|
||||||
|
<i class='fa-solid fa-arrow-down'></i>
|
||||||
|
<p data-lang="profileFAQAnswer5"></p>
|
||||||
|
</div>
|
||||||
|
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||||
|
<h3 data-lang="profileFAQQuestion6" class="chakra-petch-light"></h3>
|
||||||
|
<i class='fa-solid fa-arrow-down'></i>
|
||||||
|
<p data-lang="profileFAQAnswer6"></p>
|
||||||
|
</div>
|
||||||
|
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||||
|
<h3 data-lang="profileFAQQuestion7" class="chakra-petch-light"></h3>
|
||||||
|
<i class='fa-solid fa-arrow-down'></i>
|
||||||
|
<p data-lang="profileFAQAnswer7"></p>
|
||||||
|
</div>
|
||||||
|
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||||
|
<h3 data-lang="profileFAQQuestion8" class="chakra-petch-light"></h3>
|
||||||
|
<i class='fa-solid fa-arrow-down'></i>
|
||||||
|
<p data-lang="profileFAQAnswer8"></p>
|
||||||
|
</div>
|
||||||
|
<div class="faqItem" onclick="toggleFAQItem(this)">
|
||||||
|
<h3 data-lang="profileFAQQuestion9" class="chakra-petch-light"></h3>
|
||||||
|
<i class='fa-solid fa-arrow-down'></i>
|
||||||
|
<p data-lang="profileFAQAnswer9"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<style>
|
||||||
|
.profileAboutMe,
|
||||||
|
.profileCertificates,
|
||||||
|
.profilePartnerships,
|
||||||
|
.profileGalery,
|
||||||
|
.profileFAQ {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
height: auto;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.profileHeaderHeader {
|
||||||
|
font-size: 2.2em;
|
||||||
|
color: var(--tertiary-color);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: "Merriweather", serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
font-variation-settings:
|
||||||
|
"wdth" 100;
|
||||||
|
color: var(--tertiary-color);
|
||||||
|
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.aboutMeText img {
|
||||||
|
max-width: 280px;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.aboutMeText img:hover {
|
||||||
|
transform: scale(1.03);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -2px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 2px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.aboutMeText {
|
||||||
|
position: relative;
|
||||||
|
width: 95%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
text-align: justify;
|
||||||
|
font-family: "Anonymous Pro", monospace;
|
||||||
|
}
|
||||||
|
.aboutMeText p {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.aboutMeText strong {
|
||||||
|
color: var(--accent-color);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.gallery {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
.cert {
|
||||||
|
position: relative;
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.cert img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.cert img:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -5px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 15px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.partnershipsContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 30px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.partner {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 2px 2px 5px var(--shadow-color), 2px 2px 5px var(--shadow-color), 2px 2px 5px var(--shadow-color) inset;
|
||||||
|
max-width: 450px;
|
||||||
|
width: 90%;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
background-image: linear-gradient(to bottom, var(--background-color), var(--secondary-color));
|
||||||
|
}
|
||||||
|
.partner:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 12px 20px var(--shadow-color);
|
||||||
|
border-color: #3a8dff;
|
||||||
|
}
|
||||||
|
.partner img {
|
||||||
|
width: 90%;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.partner a {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--link-color);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
.partner-description {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: justify;
|
||||||
|
color: var(--card-header-text);
|
||||||
|
font-family: 'Anonymous Pro', monospace;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.partner a:hover {
|
||||||
|
color: #3a8dff;
|
||||||
|
}
|
||||||
|
.galleryContainer {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.galleryContainer img {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 350px;
|
||||||
|
height: auto;
|
||||||
|
text-align: center;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: solid 2px var(--border-color);
|
||||||
|
transition: transform 0.3s ease-in-out;
|
||||||
|
cursor: pointer;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.galleryContainer::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.galleryContainer img:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
max-width: 80%;
|
||||||
|
max-height: 80%;
|
||||||
|
}
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 115px;
|
||||||
|
right: 35px;
|
||||||
|
color: #f1f1f1;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.close:hover,
|
||||||
|
.close:focus {
|
||||||
|
color: #bbb;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.faqContainer {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.faqItem {
|
||||||
|
position: relative;
|
||||||
|
height: auto;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
max-height: 65px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.faqItem.expanded {
|
||||||
|
max-height: 1000px;
|
||||||
|
}
|
||||||
|
.faqItem.expanded .fa-arrow-down {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
.faqItem h3 {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-left: 25px;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1.6em;
|
||||||
|
}
|
||||||
|
.faqItem p {
|
||||||
|
position: relative;
|
||||||
|
text-align: justify;
|
||||||
|
width: 95%;
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 45px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
font-size: 1.4em;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
font-family: 'Anonymous Pro', monospace;
|
||||||
|
}
|
||||||
|
.faqItem .fa-arrow-down {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
top: 25px;
|
||||||
|
right: 25px;
|
||||||
|
animation: arrowJumper 2s linear infinite;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.faqItem .fa-arrow-down:hover {
|
||||||
|
scale: 1.05;
|
||||||
|
}
|
||||||
|
.faqItem:hover .fa-arrow-down {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
.profileDevider {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border-color);
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1400px) {
|
||||||
|
.close {
|
||||||
|
top: 160px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1099px) {
|
||||||
|
.close {
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 786px) {
|
||||||
|
.profileAboutMe,
|
||||||
|
.profileCertificates,
|
||||||
|
.profilePartnerships,
|
||||||
|
.profileGalery,
|
||||||
|
.profileFAQ {
|
||||||
|
width: 110%;
|
||||||
|
}
|
||||||
|
.profileHeaderHeader {
|
||||||
|
font-size: 1.4em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.faqItem h3 {
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
.faqItem p {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.aboutMeContainer {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.aboutMeImage {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
.aboutMeText {
|
||||||
|
flex: 1;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
.aboutMeText img {
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
max-width: 400px;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.aboutMeText img:hover {
|
||||||
|
transform: translate(-50%) scale(1.03);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Executable
+334
@@ -0,0 +1,334 @@
|
|||||||
|
<h2 class="projectsHeader slide-top merriweather" data-lang="projectsHeader"></h2>
|
||||||
|
<div class="projectsFilterMenu slide-top" id="projectsFilterMenu" onclick="toggleProjectFilterMenu(event)">
|
||||||
|
<h2 class="chakra-petch-light">Filter</h2>
|
||||||
|
<i class='fa-solid fa-arrow-down'></i>
|
||||||
|
<p data-lang="sortAfter"></p>
|
||||||
|
<div id="sortSelect" class="dropdown">
|
||||||
|
<button class="dropdown-option chakra-petch-light" data-sort="default" data-lang="sortSelect"></button>
|
||||||
|
<button class="dropdown-option chakra-petch-light" data-sort="status" data-lang="sortbyStatus"></button>
|
||||||
|
<button class="dropdown-option chakra-petch-light" data-sort="startdate" data-lang="sortbyStart"></button>
|
||||||
|
<button class="dropdown-option chakra-petch-light" data-sort="lastupdate" data-lang="sortbyLatest"></button>
|
||||||
|
<button class="dropdown-option chakra-petch-light" data-sort="planneddate" data-lang="sortbyPlanned"></button>
|
||||||
|
<button class="dropdown-option chakra-petch-light" data-sort="enddate" data-lang="sortbyEnd"></button>
|
||||||
|
</div>
|
||||||
|
<div class="tagList" id="tagList"></div>
|
||||||
|
</div>
|
||||||
|
<div class="projectsContainer slide-left" id="projectsContainer"></div>
|
||||||
|
<style>
|
||||||
|
.projectsHeader {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
font-size: 2.3em;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: var(--tertiary-color);
|
||||||
|
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
#projectsFilterMenu {
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
height: auto;
|
||||||
|
max-height: 75px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
margin-bottom: 25px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
#projectsFilterMenu h2 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 25px;
|
||||||
|
margin-left: 25px;
|
||||||
|
text-align: left;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
#projectsFilterMenu .fa-arrow-down {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
top: 35px;
|
||||||
|
right: 25px;
|
||||||
|
animation: arrowJumper 2s linear infinite;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
#projectsFilterMenu .fa-arrow-down:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
#projectsFilterMenu:hover .fa-arrow-down {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
#projectsFilterMenu p {
|
||||||
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
|
width: 90%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
top: 50px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
#projectsFilterMenu.open {
|
||||||
|
max-height: 1000px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
#sortSelect {
|
||||||
|
position: relative;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
height: auto;
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 50px;
|
||||||
|
left: 50%;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 5px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.dropdown-option {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px 35px;
|
||||||
|
min-width: 16%;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
cursor: pointer;
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.dropdown-option:hover {
|
||||||
|
background-color: var(--hover-color);
|
||||||
|
}
|
||||||
|
.dropdown-option.active {
|
||||||
|
background-color: var(--alert-color);
|
||||||
|
}
|
||||||
|
.dropdown-option::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0.5em;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 0.8em;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
.dropdown-option.active.asc::after {
|
||||||
|
content: '▲';
|
||||||
|
}
|
||||||
|
.dropdown-option.active.desc::after {
|
||||||
|
content: '▼';
|
||||||
|
}
|
||||||
|
#projectsFilterMenu .tagList {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 5px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
width: 90%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
#projectsFilterMenu .tagList button {
|
||||||
|
flex-grow: 1;
|
||||||
|
background: var(--link-color);
|
||||||
|
color: white;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
#projectsFilterMenu .tagList button:hover {
|
||||||
|
background: var(--link-hover-color);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
#projectsFilterMenu .tagList button.active {
|
||||||
|
background: var(--success-color);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
box-shadow: 0 3px 8px rgba(0, 255, 120, 0.3);
|
||||||
|
}
|
||||||
|
#projectsContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: 20px;
|
||||||
|
}
|
||||||
|
.projectCard {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 380px;
|
||||||
|
width: 100vw;
|
||||||
|
max-width: 580px;
|
||||||
|
height: auto;
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
padding: 25px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.projectCard .logoImage {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.projectCard:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 5px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 3px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.projectCard img {
|
||||||
|
position: relative;
|
||||||
|
width: 35%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.projectCard h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
color: var(--card-header-text);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.projectCard span {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 5px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.projectCard p {
|
||||||
|
text-align: justify;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.projectCard a {
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
top: 10px;
|
||||||
|
border-radius: 25px;
|
||||||
|
background: var(--tertiary-color);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.projectCard a:hover {
|
||||||
|
background: var(--hover-color);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
transform: translate(-50%) scale(1.05);
|
||||||
|
}
|
||||||
|
.projectOpen {
|
||||||
|
background-color: var(--alert-color);
|
||||||
|
color: var(--alert-text);
|
||||||
|
}
|
||||||
|
.projectWIP {
|
||||||
|
background-color: var(--info-color);
|
||||||
|
color: var(--info-text);
|
||||||
|
}
|
||||||
|
.projectFrozen {
|
||||||
|
background-color: var(--disabled-color);
|
||||||
|
color: var(--disabled-text);
|
||||||
|
}
|
||||||
|
.projectDone {
|
||||||
|
background-color: var(--success-color);
|
||||||
|
color: var(--success-text);
|
||||||
|
}
|
||||||
|
.galleryOverlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 50px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.galleryContainer {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
justify-items: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.galleryContainer img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-width: 300px;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
.galleryContainer img:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.closeGallery {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
background: none;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
.galleryButton {
|
||||||
|
position: absolute;
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
|
right: 15px;
|
||||||
|
bottom: 15px;
|
||||||
|
font-size: 35px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.galleryButton:hover {
|
||||||
|
background-color: var(--hover-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Executable
+291
@@ -0,0 +1,291 @@
|
|||||||
|
<section class="skillsIntro">
|
||||||
|
<div class="textContainer slide-top">
|
||||||
|
<h1 data-lang="skillsIntroHeader" class="merriweather"></h1>
|
||||||
|
<p data-lang="skillsIntroTextOne" class="anonymous-pro-regular"></p>
|
||||||
|
<p data-lang="skillsIntroTextTwo" class="anonymous-pro-regular"></p>
|
||||||
|
<p data-lang="skillsIntroTextThree" class="anonymous-pro-regular"></p>
|
||||||
|
</div>
|
||||||
|
<img src="images/selfPicLookLeft.webp" alt="" class="bounce">
|
||||||
|
</section>
|
||||||
|
<div class="skillDevider"></div>
|
||||||
|
<section class="skillsTree slide-right">
|
||||||
|
<div class="imgContainer">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="skillDevider"></div>
|
||||||
|
<section class="skillsProcess">
|
||||||
|
<h1 data-lang="skillsProcessHeader" class="merriweather"></h1>
|
||||||
|
<div class="processMenuContainer" id="processMenuContainer">
|
||||||
|
<button data-lang="allProcessesButton" class="resetButton anonymous-pro-regular" id="resetButton">Alle</button>
|
||||||
|
</div>
|
||||||
|
<div class="processCardContainer" id="processCardContainer"></div>
|
||||||
|
</section>
|
||||||
|
<style>
|
||||||
|
.skillsIntro {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 25px;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
.skillsIntro .textContainer {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 70%;
|
||||||
|
background: var(--card-bg);
|
||||||
|
padding: 25px;
|
||||||
|
margin-right: 5%;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.skillsIntro .textContainer h1, .skillsProcess h1 {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
font-size: 2.3em;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: var(--tertiary-color);
|
||||||
|
text-shadow: 1px 2px 3px var(--shadow-color), 2px 2px 5px var(--shadow-color), 1px 1px 3px var(--card-header-text);
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.skillsIntro .textContainer p {
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.skillsIntro img {
|
||||||
|
position: relative;
|
||||||
|
max-width: 30%;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
.skillsTree {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0px;
|
||||||
|
border-radius: 25px;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.skillsTree .imgContainer {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
.skillsTree img {
|
||||||
|
width: 90px;
|
||||||
|
padding: 5px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.skillsTree img:hover {
|
||||||
|
scale: 1.2;
|
||||||
|
}
|
||||||
|
.skillsProcess {
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
|
padding: 25px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
border-radius: 25px;
|
||||||
|
text-align: left;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
.processMenuContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: left;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.processMenuContainer button {
|
||||||
|
background-color: var(--link-color);
|
||||||
|
color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 1.2em;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#resetButton {
|
||||||
|
background: var(--alert-color);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
#resetButton:hover {
|
||||||
|
background: var(--link-hover-color);
|
||||||
|
transform: translateY(-5px) scale(1.02);
|
||||||
|
}
|
||||||
|
.processMenuContainer button:hover {
|
||||||
|
background-color: var(--link-hover-color);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
transform: translateY(-5px) scale(1.02);
|
||||||
|
}
|
||||||
|
.processMenuContainer button.active {
|
||||||
|
background-color: var(--success-color);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
transform: translateY(-5px) scale(1.02);
|
||||||
|
}
|
||||||
|
.processCardContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
.processCard {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
padding: 15px;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-basis: calc(100% / 6 - 20px);
|
||||||
|
min-width: 25%;
|
||||||
|
max-width: calc(100%);
|
||||||
|
height: 75px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 2px 4px rgba(255, 255, 255, 0.05),
|
||||||
|
inset 0 -3px 6px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.processCard img {
|
||||||
|
position: absolute;
|
||||||
|
left: 15px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(0,-50%);
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
|
object-fit: contain;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.processCard h2 {
|
||||||
|
position: absolute;
|
||||||
|
left: 110px;
|
||||||
|
top: 5px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.processCard span {
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
bottom: 30px;
|
||||||
|
color: var(--link-color);
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
.processCard:hover img {
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
.mainBar {
|
||||||
|
position: relative;
|
||||||
|
top: 60px;
|
||||||
|
left: 100px;
|
||||||
|
background-color: var(--input-bg);
|
||||||
|
width: calc(100% - 110px);
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 1px 1px 2px var(--shadow-color), 2px 2px 2px var(--shadow-color), 2px 2px 5px var(--shadow-color) inset;
|
||||||
|
}
|
||||||
|
.mainBar div {
|
||||||
|
background-color: var(--success-header);
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
transition: width 0.5s ease-in-out;
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
.skillDevider {
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border-color);
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 1150px) {
|
||||||
|
.skillsIntro {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
text-align: center;
|
||||||
|
gap: 0;
|
||||||
|
width: calc(100% + 75px);
|
||||||
|
margin-top: -50px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
.skillsIntro .textContainer h1, .skillsProcess h1 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.skillsIntro .textContainer p {
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.skillsIntro .textContainer {
|
||||||
|
max-width: 120%;
|
||||||
|
margin-right: 0;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.skillsIntro img {
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 300px;
|
||||||
|
right: -25%;
|
||||||
|
top: 12px;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
.skillsTree .imgContainer {
|
||||||
|
width: calc(100% + 100px);
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
.skillsProcess {
|
||||||
|
width: calc(100% + 75px);
|
||||||
|
box-shadow: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.skillDevider {
|
||||||
|
width: calc(100% + 75px);
|
||||||
|
}
|
||||||
|
.processCard {
|
||||||
|
flex-basis: calc(100% / 3 - 20px);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 786px) {
|
||||||
|
.processCard {
|
||||||
|
flex-basis: calc(100% / 2 - 20px);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Executable
+43
@@ -0,0 +1,43 @@
|
|||||||
|
<div class="sources">
|
||||||
|
<h1 data-lang="sourcesHeader" class="merriweather"></h1>
|
||||||
|
<div class="sourceItem">
|
||||||
|
<h2>Font Awesome</h2>
|
||||||
|
<p data-lang="fontAwesome" class="anonymous-pro-regular"></p>
|
||||||
|
<a href="https://fontawesome.com/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||||
|
</div>
|
||||||
|
<div class="sourceItem">
|
||||||
|
<h2>Google Fonts</h2>
|
||||||
|
<p data-lang="googleFonts" class="anonymous-pro-regular"></p>
|
||||||
|
<a href="https://fonts.google.com/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||||
|
</div>
|
||||||
|
<div class="sourceItem">
|
||||||
|
<h2>Unsplash</h2>
|
||||||
|
<p data-lang="unsplash" class="anonymous-pro-regular"></p>
|
||||||
|
<a href="https://unsplash.com/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||||
|
</div>
|
||||||
|
<div class="sourceItem">
|
||||||
|
<h2>Icons8</h2>
|
||||||
|
<p data-lang="icons8" class="anonymous-pro-regular"></p>
|
||||||
|
<a href="https://icons8.de/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||||
|
</div>
|
||||||
|
<div class="sourceItem">
|
||||||
|
<h2>Flaticon</h2>
|
||||||
|
<p data-lang="flaticon" class="anonymous-pro-regular"></p>
|
||||||
|
<a href="https://www.flaticon.com/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||||
|
</div>
|
||||||
|
<div class="sourceItem">
|
||||||
|
<h2>ChatGPT</h2>
|
||||||
|
<p data-lang="chatgpt" class="anonymous-pro-regular"></p>
|
||||||
|
<a href="https://chatgpt.com/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||||
|
</div>
|
||||||
|
<div class="sourceItem">
|
||||||
|
<h2>LinkedIn</h2>
|
||||||
|
<p data-lang="linkedin" class="anonymous-pro-regular"></p>
|
||||||
|
<a href="https://linkedin.com" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||||
|
</div>
|
||||||
|
<div class="sourceItem">
|
||||||
|
<h2>Programming Hub</h2>
|
||||||
|
<p data-lang="programmingHub" class="anonymous-pro-regular"></p>
|
||||||
|
<a href="https://programminghub.io/" data-lang="toProvider" class="chakra-petch-light"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 787 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 830 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 846 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Executable
+1
@@ -0,0 +1 @@
|
|||||||
|
<svg id="svg4187" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 89.4" width="2500" height="639"><style>.st0{fill:#000}.st1{fill:#ff5400}</style><g id="text4151"><path id="path4162" class="st0" d="M121.1 18.4h5V.3h-5v18.1z"/><path id="path4164" class="st0" d="M129.4 18.4h5V8.5l7.8 9.9h4.4V.3h-5v9.6L134.1.3h-4.7v18.1z"/><path id="path4166" class="st0" d="M156.9 18.7c4.4 0 7.3-2.2 7.3-5.9v-.1c0-3.4-2.6-4.7-6.7-5.6-2.5-.6-3.2-.9-3.2-1.8 0-.7.6-1.2 1.8-1.2 1.6 0 3.4.6 5.1 1.8l2.5-3.5c-2-1.6-4.4-2.4-7.5-2.4-4.4 0-7 2.4-7 5.8v.1c0 3.7 3 4.8 6.8 5.7 2.5.6 3.1 1 3.1 1.8v.1c0 .8-.7 1.2-2.1 1.2-2.1 0-4.1-.8-5.9-2.2l-2.8 3.3c2.3 1.9 5.3 2.9 8.6 2.9z"/><path id="path4168" class="st0" d="M170.6 18.4h5V4.7h5.4V.3h-15.9v4.4h5.4v13.7z"/><path id="path4170" class="st0" d="M179.5 18.4h5.3l1.3-3.3h7l1.3 3.3h5.4L192 .2h-4.8l-7.7 18.2zm8-7.1l2-5.1 2 5.1h-4z"/><path id="path4172" class="st0" d="M201.5 18.4h5V8.5l7.8 9.9h4.4V.3h-5v9.6L206.2.3h-4.7v18.1z"/><path id="path4174" class="st0" d="M226.2 18.4h5V4.7h5.4V.3h-15.9v4.4h5.4v13.7z"/></g><g id="text4155"><path id="path4149" class="st1" d="M33.5 89.4c11.3 0 20.3-4.1 26.8-9.6V52.1H32v12.5h12.1v7.5c-2.5 1.7-5.6 2.6-9.9 2.6-9.8 0-16.7-7.1-16.7-17.2v-.2c0-9.4 6.9-16.8 15.8-16.8 6.2 0 10.5 2.1 14.9 5.8l10-12.2c-6.5-5.6-14.2-8.9-25-8.9C14.1 25.2 0 39.3 0 57.3v.2c0 18.6 14.3 31.9 33.5 31.9z"/><path id="path4151" class="st1" d="M60.5 88.1h17.9L82.8 77h23.9l4.4 11.1h18.3L103.2 26H86.7L60.5 88.1zm27.3-24.4l7-17.5 6.9 17.5H87.8z"/><path id="path4153" class="st1" d="M130.9 88.1h16.7V52.8l15.7 24.1h.4l15.8-24.2v35.4h17V26.4h-18.1l-14.7 23.9L149 26.4h-18.1v61.7z"/><path id="path4155" class="st1" d="M203.2 88.1h17.1V26.4h-17.1v61.7z"/><path id="path4157" class="st1" d="M227 88.1h16.9V54.3l26.4 33.9h14.9V26.4h-16.9V59L243 26.4h-16v61.7z"/><path id="path4159" class="st1" d="M323.2 89.4c11.3 0 20.3-4.1 26.8-9.6V52.1h-28.3v12.5h12.1v7.5c-2.5 1.7-5.6 2.6-9.9 2.6-9.8 0-16.7-7.1-16.7-17.2v-.2c0-9.4 6.9-16.8 15.8-16.8 6.2 0 10.5 2.1 14.9 5.8l10-12.2c-6.5-5.6-14.2-8.9-25-8.9-19 0-33.1 14.1-33.1 32.1v.2c-.1 18.6 14.2 31.9 33.4 31.9z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 844 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1010 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 664 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Executable
+117
@@ -0,0 +1,117 @@
|
|||||||
|
// Function on links page
|
||||||
|
async function getLinks(){try{let e=await fetch("db/links.json"),a=await e.json(),t=document.getElementById("linkContainer"),n=document.getElementById("tagList"),l={},r=a.links,s=null;function o(){r.sort((e,a)=>{let t=e.plattform.localeCompare(a.plattform);return 0!==t?t:e.username.localeCompare(a.username)}),c(r),s=null,i()}function c(e){t.innerHTML="";let a=[];e.forEach(e=>{let n=document.createElement("a");n.classList.add("linkCard"),n.href=e.url,n.target="_blank",n.innerHTML=`
|
||||||
|
<img src="${e.icon}" alt="${e.plattform}">
|
||||||
|
<div class="spanContainer">
|
||||||
|
<span class="anonymous-pro-regular">${e.username}</span>
|
||||||
|
<span class="anonymous-pro-regular">${e.plattform}</span>
|
||||||
|
<span class="anonymous-pro-regular" data-lang="${e.thema||"Default Thema"}"></span>
|
||||||
|
</div>
|
||||||
|
`,t.appendChild(n),a.push(n),addHoverEffectToLinkCard(n,a),requestAnimationFrame(()=>initLanguage())})}function i(){let e=n.querySelectorAll("button");e.forEach(e=>{e.innerText.toLowerCase()===s?.toLowerCase()?e.classList.add("active"):e.classList.remove("active")})}a.links.forEach(e=>{e.tags.forEach(a=>{l[a]||(l[a]=[]),l[a].push(e)})}),Object.keys(l).sort().forEach(e=>{let a=document.createElement("button");a.innerText=e.charAt(0).toUpperCase()+e.slice(1),a.classList.add("chakra-petch-light"),a.onclick=()=>(function e(a){s=a;let t=l[a].slice().sort((e,a)=>{let t=e.plattform.localeCompare(a.plattform);return 0!==t?t:e.username.localeCompare(a.username)});c(t),i()})(e),n.appendChild(a)});let p=document.getElementById("resetButton");p.addEventListener("click",()=>{s=null,o(),i()}),o()}catch(u){console.error("Fehler beim Laden der Links:",u)}}
|
||||||
|
// Function on skills page
|
||||||
|
async function getSkillsTree(){try{let response=await fetch("db/skillsTree.json"),skills=await response.json(),imgContainer=document.querySelector(".imgContainer");imgContainer.innerHTML="",skills.forEach(skill=>{let imgElement=document.createElement("img");imgElement.src=skill.src,imgElement.alt=skill.alt,imgElement.title=skill.title,imgElement.onclick=()=>eval(skill.onclick),imgElement.onmouseover=()=>addHoverEffectToImages(imgElement),imgElement.onmouseleave=()=>removeHoverEffectFromImages(imgElement),imgContainer.appendChild(imgElement)})}catch(error){console.error("Error loading skills tree:",error)}}
|
||||||
|
async function getProcess(){try{let e=await fetch("db/process.json"),t=await e.json(),a=document.getElementById("processCardContainer"),s=document.getElementById("processMenuContainer"),n={},r=t.processes,c=null;function o(){r.sort((e,t)=>parseInt(t.percentage)-parseInt(e.percentage)),l(r),c=null,i()}function l(e){a.innerHTML="";let t=[];e.forEach(e=>{let s=document.createElement("div");s.classList.add("processCard"),s.innerHTML=`
|
||||||
|
<img src="${e.icon}" alt="${e.processName}">
|
||||||
|
<h2 data-lang="${e.processName}" class="anonymous-pro-regular"></h2>
|
||||||
|
<div class="mainBar">
|
||||||
|
<div style="width: ${e.percentage}%;"></div>
|
||||||
|
</div>
|
||||||
|
<span class="anonymous-pro-regular">${e.percentage}%</span>
|
||||||
|
`,a.appendChild(s),t.push(s),addHoverEffectToProcessCard(s,t),requestAnimationFrame(()=>initLanguage())})}function i(){let e=s.querySelectorAll("button");e.forEach(e=>{e.dataset.lang.toLowerCase()===c?.toLowerCase()?e.classList.add("active"):e.classList.remove("active")})}t.processes.forEach(e=>{e.tags.forEach(t=>{n[t]||(n[t]=[]),n[t].push(e)})}),Object.keys(n).sort().forEach(e=>{let t=document.createElement("button");t.classList.add("chakra-petch-light"),t.dataset.lang=`${e}`,t.onclick=()=>(function e(t){c=t;let a=n[t].slice().sort((e,t)=>parseInt(t.percentage)-parseInt(e.percentage));l(a),i()})(e),s.appendChild(t)});let d=document.getElementById("resetButton");d.addEventListener("click",()=>{c=null,o(),i()}),o()}catch(p){console.error("Fehler beim Laden der Links:",p)}}
|
||||||
|
// Function on projects page
|
||||||
|
async function getProjects() {
|
||||||
|
try {
|
||||||
|
const response=await fetch("db/projects.json"),data=await response.json(),projectsContainer=document.getElementById("projectsContainer"),projectsFilterMenu=document.getElementById("tagList"),sortSelect=document.getElementById("sortSelect");let allProjects=data.projects,currentSort="default",currentDirection="asc",currentTag=null;const tagGroups={};data.projects.forEach(t=>{t.tags.forEach(e=>{tagGroups[e]||(tagGroups[e]=[]),tagGroups[e].push(t)})});const showAllButton=document.createElement("button");showAllButton.dataset.lang="allProjectsButton",showAllButton.classList.add("tagButton","chakra-petch-light","active"),showAllButton.textContent="Show All",showAllButton.onclick=()=>{currentTag=null,updateActiveTag(null),sortByCriteria(currentSort,currentDirection)},projectsFilterMenu.appendChild(showAllButton),Object.keys(tagGroups).sort().forEach(t=>{let e=document.createElement("button");e.classList.add("tagButton","chakra-petch-light"),e.textContent=t,e.onclick=()=>{updateActiveTag(currentTag=currentTag===t?null:t),sortByCriteria(currentSort,currentDirection)},projectsFilterMenu.appendChild(e)});
|
||||||
|
function sortByCriteria(e,t="asc"){currentSort=e,currentDirection=t;let a=currentTag?tagGroups[currentTag]:allProjects,s=document.querySelector(`#sortSelect .dropdown-option[data-sort="${e}"]`);s&&(document.querySelectorAll("#sortSelect .dropdown-option").forEach(e=>{e.classList.remove("active","asc","desc")}),s.classList.add("active",t)),a.sort((a,s)=>{let d,r;switch(e){case"startdate":d=new Date(a.startdate),r=new Date(s.startdate);break;case"enddate":d=new Date(a.enddate||0),r=new Date(s.enddate||0);break;case"lastupdate":d=new Date(a.lastupdate),r=new Date(s.lastupdate);break;case"planneddate":d=new Date(a.planneddate||0),r=new Date(s.planneddate||0);break;case"status":d=a.status,r=s.status;break;default:d=a.title.toLowerCase(),r=s.title.toLowerCase()}return d<r?"asc"===t?-1:1:d>r?"asc"===t?1:-1:0}),renderProjects(a)}
|
||||||
|
function renderProjects(t){projectsContainer.innerHTML="",t.forEach(t=>{let a=document.createElement("div");if(a.classList.add("projectCard"),a.innerHTML=`
|
||||||
|
<div class="logoImage">
|
||||||
|
<img src="${t.logo}" alt="Not found">
|
||||||
|
<h2 class="merriweather">${t.title}</h2><br>
|
||||||
|
</div>
|
||||||
|
<p><strong data-lang="projectDescription"></strong></p><p data-lang="${t.description}"></p><br>
|
||||||
|
<span><p><strong>Status:</strong></p><p data-lang="${t.status}"></p></span><br>
|
||||||
|
<p><strong data-lang="technologies"></strong></p><p>${t.technologies.join(", ")}</p><br>
|
||||||
|
<span><p><strong data-lang="startDate"></strong></p><p> ${new Date(t.startdate).toLocaleDateString()}</p></span>
|
||||||
|
<span><p><strong data-lang="upDate"></strong></p><p> ${new Date(t.lastupdate).toLocaleDateString()}</p></span>
|
||||||
|
<span><p><strong data-lang="plannedDate"></strong></p><p>${t.planneddate?new Date(t.planneddate).toLocaleDateString():"TBA"}</p></span>
|
||||||
|
<span><p><strong data-lang="endDate"></strong></p><p>${t.enddate?new Date(t.enddate).toLocaleDateString():"TBA"}</p></span>
|
||||||
|
`,t.link){let e=document.createElement("a");e.href=t.link,e.setAttribute("data-lang","moreInfo"),e.target="_blank",a.appendChild(e),a.appendChild(document.createElement("br")),a.appendChild(document.createElement("br"))}if(Array.isArray(t.gallery)&&t.gallery.length>0){let n=document.createElement("button");n.textContent="\uD83D\uDCF7",n.classList.add("galleryButton"),n.onclick=()=>openGallery(t.gallery),a.appendChild(n)}"projectOpen"===t.status?a.classList.add("projectOpen"):"projectWIP"===t.status?a.classList.add("projectWIP"):"projectFrozen"===t.status?a.classList.add("projectFrozen"):"projectDone"===t.status&&a.classList.add("projectDone"),projectsContainer.appendChild(a)})}
|
||||||
|
function updateActiveTag(t){let a=projectsFilterMenu.querySelectorAll("button");a.forEach(a=>{a.textContent===t?a.classList.add("active"):null===t&&"allProjectsButton"===a.dataset.lang?a.classList.add("active"):a.classList.remove("active")})}
|
||||||
|
function openGallery(e){if(!Array.isArray(e)||0===e.length)return;let t=document.createElement("div");t.classList.add("galleryOverlay");let l=document.createElement("div");l.classList.add("galleryContainer"),e.forEach(e=>{let t=document.createElement("img");t.src=e,l.appendChild(t)});let a=document.createElement("button");a.textContent="\xd7",a.classList.add("closeGallery"),a.onclick=e=>{e.stopPropagation(),t.remove()},t.appendChild(a),t.appendChild(l),t.onclick=e=>{e.target===t&&t.remove()},document.body.appendChild(t)}document.querySelectorAll("#sortSelect .dropdown-option").forEach(e=>{e.addEventListener("click",()=>{let t=e.dataset.sort;currentSort===t?currentDirection="asc"===currentDirection?"desc":"asc":(currentSort=t,currentDirection="asc"),sortByCriteria(currentSort,currentDirection)})}),sortByCriteria(currentSort,currentDirection);
|
||||||
|
}catch (error){console.error('Fehler beim Laden der Projekte:', error);}
|
||||||
|
}
|
||||||
|
// Functions on profile page
|
||||||
|
async function loadCertificates(){try{let e=document.getElementById("certificatesGallery"),t=await fetch("get-certificates"),i=await t.json(),c="";i.forEach(e=>{c+=`
|
||||||
|
<div class="cert">
|
||||||
|
<img src="docs/certificates/${e}" alt="Zertifikat ${e}" title="${e}" class="cert-thumbnail" onclick="openModal('docs/certificates/${e}')">
|
||||||
|
</div>
|
||||||
|
`}),e.innerHTML=c}catch(a){console.error("Fehler beim Laden der Zertifikate:",a)}}
|
||||||
|
async function getPartnerships(){try{let r=await fetch("db/partnerships.json"),a=await r.json(),n=document.getElementById("partnersContainer"),t="";a.forEach(r=>{t+=`
|
||||||
|
<div class="partner">
|
||||||
|
<a href="${r.url}" target="_blank">
|
||||||
|
<img src="${r.logo}" alt="${r.name}" title="${r.name}">
|
||||||
|
</a>
|
||||||
|
<p class="partner-description anonymous-pro-regular" data-lang="${r.description}"></p>
|
||||||
|
</div>
|
||||||
|
`}),n.innerHTML=t}catch(e){console.error("Error loading partnerships:",e)}}
|
||||||
|
async function loadGallery(){try{let a=document.getElementById("galleryContainer"),e=await fetch("get-images"),l=await e.json();console.log(l);let r="";l.forEach(a=>{r+=`<img src="images/gallery/${a}" alt="Gallery image ${a}" class="gallery-image" onclick="openModal('images/gallery/${a}')">`}),closeModal(),a.innerHTML=r}catch(g){console.error("Error loading images:",g)}}
|
||||||
|
function openModal(e){let t=document.getElementById("imageModal"),l=document.getElementById("modalImage");t.style.display="flex",l.src=e}function closeModal(){let e=document.getElementById("imageModal");e?e.style.display="none":console.error("Modal not found")}window.onclick=function(e){let t=document.getElementById("imageModal");e.target===t&&closeModal()},document.addEventListener("contextmenu",e=>{"IMG"===e.target.tagName&&e.preventDefault()});
|
||||||
|
// Functions on homepage
|
||||||
|
async function getNewsTicker() {
|
||||||
|
try {
|
||||||
|
const response=await fetch("db/newsTicker.json"),data=await response.json(),newsTicker=document.getElementById("newsTicker");newsTicker.innerHTML="";
|
||||||
|
|
||||||
|
data.forEach(item => {
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.classList.add('newsCard');
|
||||||
|
|
||||||
|
let mediaElement = '';
|
||||||
|
|
||||||
|
switch (item.type) {
|
||||||
|
case 'audio':
|
||||||
|
mediaElement = `<audio controls style="width: 100%;"><source src="${item.media}" type="audio/mpeg"></audio>`;
|
||||||
|
break;
|
||||||
|
case 'video':
|
||||||
|
mediaElement = `<video controls style="width: 100%; max-height: 300px;"><source src="${item.media}" type="video/mp4"></video>`;
|
||||||
|
break;
|
||||||
|
case 'image':
|
||||||
|
mediaElement = `<img src="${item.media}" alt="${item.title || ''}" style="width: 100%; border-radius: 8px;">`;
|
||||||
|
break;
|
||||||
|
case 'document':
|
||||||
|
mediaElement = `<a href="${item.media}" target="_blank" class="anonymous-pro-regular" style="display:block;margin-top:10px;">📄 <span data-lang="${item.titleOne || 'document'}"></span></a>`;
|
||||||
|
break;
|
||||||
|
case 'link':
|
||||||
|
mediaElement = `<a href="${item.media}" target="_blank" class="anonymous-pro-regular" style="display:block;margin-top:10px;"><span data-lang="${item.titleOne || 'document'}"></span></a>`;
|
||||||
|
break;
|
||||||
|
case 'external':
|
||||||
|
mediaElement = `<iframe src="${item.media}" width="100%" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>`;
|
||||||
|
break;
|
||||||
|
case 'podcast':
|
||||||
|
mediaElement = `<iframe src="${item.media}" width="100%" height="150" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>`;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
mediaElement = `<p style="color:red;">Unbekannter Medientyp: ${item.type}</p>`;
|
||||||
|
}
|
||||||
|
let titleElement=item.title?`<h2 class="anonymous-pro-regular" data-lang="${item.title}"></h2>`:"",descriptionElement=item.description?`<p class="anonymous-pro-regular" data-lang="${item.description}"></p>`:"",buttonElement=item.moreInfoLink?`<a href="${item.moreInfoLink}" target="_blank"><button class="moreInfoBtn anonymous-pro-regular" data-lang="moreInfo" style="margin-top:10px;"></button></a>`:"";
|
||||||
|
card.innerHTML = `
|
||||||
|
${titleElement}
|
||||||
|
${descriptionElement}
|
||||||
|
${mediaElement}
|
||||||
|
${buttonElement}
|
||||||
|
`;
|
||||||
|
newsTicker.appendChild(card);
|
||||||
|
});
|
||||||
|
requestAnimationFrame(() => initLanguage());
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler beim Laden des NewsTickers:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let allSkills=[];async function getHomeSkills(){try{let l=await fetch("db/skillsTree.json");if(allSkills=await l.json(),0===allSkills.length)return;createInfiniteSlider()}catch(e){console.error("Error loading skills tree:",e)}}function shuffleArray(l){return l.map(l=>({value:l,sort:Math.random()})).sort((l,e)=>l.sort-e.sort).map(({value:l})=>l)}function createInfiniteSlider(){let l=document.getElementById("skillsSlider"),e=shuffleArray(allSkills);e.forEach(e=>{let t=createSkillImage(e);l.appendChild(t)}),e.forEach(e=>{let t=createSkillImage(e);l.appendChild(t)})}function createSkillImage(skill){let img=document.createElement("img");return img.src=skill.src,img.alt=skill.alt||"",img.title=skill.title||"",img.onclick=()=>eval(skill.onclick),img}
|
||||||
|
async function getHomeProjects(){try{let e=await fetch("db/projects.json"),t=await e.json();document.getElementById("projectCardContainer");let r=["projectDone","projectOpen","projectFrozen"],n=t.projects.filter(e=>!r.includes(e.status));n.sort((e,t)=>{let r=new Date(e.startdate),n=new Date(t.startdate);if(e.planneddate&&t.planneddate){let a=new Date(e.planneddate),o=new Date(t.planneddate);if(a<o)return -1;if(a>o)return 1}else{if(r<n)return -1;if(r>n)return 1}return 0}),n=n.slice(0,5),function e(t){let r=document.getElementById("projectCardContainer");r.innerHTML="",t.forEach(e=>{let t=document.createElement("div");t.classList.add("projectCard"),t.innerHTML=`
|
||||||
|
<div class="logoImage">
|
||||||
|
<img src="${e.logo}" alt="Not found">
|
||||||
|
<h2 class="merriweather">${e.title}</h2><br>
|
||||||
|
</div>
|
||||||
|
<p><strong data-lang="projectDescription" class="anonymous-pro-regular"></strong></p><p data-lang="${e.description}" class="anonymous-pro-regular"></p><br>
|
||||||
|
<button onclick="loadPage('projects')" data-lang="moreInfo" class="chakra-petch-light"></button>
|
||||||
|
`,r.appendChild(t)})}(n)}catch(a){console.error("Fehler beim Laden der Projekte:",a)}}
|
||||||
|
async function updateMottoMessage(){let e={de:["Solange nicht alles gut ist, liegt der Weg noch vor uns.","Jeder Tag ist eine neue Chance, etwas Gro\xdfartiges zu beginnen.","Wer aufh\xf6rt, besser zu werden, hat aufgeh\xf6rt, gut zu sein.","Visionen werden zur Realit\xe4t, wenn man den ersten Schritt wagt.","Zwischen Idee und Umsetzung liegt nur der Wille.","Dein Weg ist einzigartig – geh ihn mit \xdcberzeugung.","Gro\xdfe Dinge beginnen oft im Kleinen.","Kreativit\xe4t kennt keine Grenzen – nur Anf\xe4nge.","Komm rein und sprich dich aus, geh raus und rede nicht mehr dr\xfcber.","Gl\xfccklich ist, wer kein Gl\xfcck sucht.","Manchmal ist der Umweg der Weg.","Geduld ist nicht Schw\xe4che, sondern St\xe4rke mit Ausdauer.","Stillstand ist nur dann gef\xe4hrlich, wenn man ihn akzeptiert.","Es braucht keine Perfektion, um etwas Bedeutendes zu schaffen.","Mut beginnt dort, wo Zweifel laut werden.","Nicht jede T\xfcr f\xfchrt weiter – manche zeigen nur, wo du nicht hingeh\xf6rst.","Die besten Ideen kommen oft dann, wenn man nicht nach ihnen sucht.","Ver\xe4nderung beginnt mit einem ehrlichen Blick auf sich selbst.","Was du heute denkst, formt dein Morgen.","Tr\xe4ume gro\xdf – aber handle bodenst\xe4ndig."],en:["As long as not everything is good, the journey isn't over yet.","Every day is a new chance to start something great.","Those who stop getting better stop being good.","Visions become reality when you take the first step.","Between idea and execution lies only willpower.","Your path is unique – walk it with confidence.","Great things often start small.","Creativity knows no limits – only beginnings.","Come in and speak out, go out and stop talking about it.","Happy is he who does not seek happiness.","Sometimes the detour is the path.","Patience is not weakness, but strength with endurance.","Stagnation is only dangerous if you accept it.","You don't need perfection to create something meaningful.","Courage begins where doubt gets loud.","Not every door leads forward – some just show where you don't belong.","The best ideas often appear when you're not searching for them.","Change begins with an honest look at yourself.","What you think today shapes your tomorrow.","Dream big – but act grounded."]},n=getCookie("lang")||"en",t=e[n]||e.en,i=Math.floor(Math.random()*t.length);document.getElementById("homeMotto").innerText=t[i]}
|
||||||
Executable
+165
@@ -0,0 +1,165 @@
|
|||||||
|
const mainContent = document.getElementById('content');
|
||||||
|
let isNavOpen=!1,isSettingsOpen=!1;function openMobilMenu(e){switch(e){case"nav":isSettingsOpen&&(document.getElementById("mobileSettings").style.right="",isSettingsOpen=!1),isNavOpen?document.querySelector("#navigation .mainMenu").style.top="":document.querySelector("#navigation .mainMenu").style.top="0",isNavOpen=!isNavOpen;break;case"contact":loadPage("contact");break;case"home":loadPage("home");break;case"projects":loadPage("projects");break;case"settings":isNavOpen&&(document.querySelector("#navigation .mainMenu").style.top="",isNavOpen=!1),isSettingsOpen?document.getElementById("mobileSettings").style.right="":document.getElementById("mobileSettings").style.right="0",isSettingsOpen=!isSettingsOpen;break;default:console.log("Unbekanntes Men\xfc")}}
|
||||||
|
let isDeskNavOpen=!1;function toggleDeskMenu(){isDeskNavOpen?(document.querySelector("#navigation .mainMenu").style.left="",document.querySelector("#navigation .navButton span:nth-child(1)").style.marginTop="",document.querySelector("#navigation .navButton span:nth-child(2)").style.opacity="",document.querySelector("#navigation .navButton span:nth-child(3)").style.marginTop="",document.querySelector("#navigation .navButton span:nth-child(1)").style.transform="",document.querySelector("#navigation .navButton span:nth-child(3)").style.transform=""):(document.querySelector("#navigation .mainMenu").style.left="0",document.querySelector("#navigation .navButton span:nth-child(1)").style.marginTop="0",document.querySelector("#navigation .navButton span:nth-child(2)").style.opacity="0",document.querySelector("#navigation .navButton span:nth-child(3)").style.marginTop="0",document.querySelector("#navigation .navButton span:nth-child(1)").style.transform="translate(-50%,-50%) rotate(-45deg)",document.querySelector("#navigation .navButton span:nth-child(3)").style.transform="translate(-50%,-50%) rotate(45deg)"),isDeskNavOpen=!isDeskNavOpen}
|
||||||
|
let currentPage = '';
|
||||||
|
function loadPage(page) {
|
||||||
|
if (page === currentPage) {
|
||||||
|
console.log(`Seite '${page}' ist bereits aktiv – kein erneuter Ladevorgang.`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
currentPage = page;
|
||||||
|
|
||||||
|
document.getElementById('loadingScreen').style.display = 'flex';
|
||||||
|
|
||||||
|
switch (page) {
|
||||||
|
case 'home':
|
||||||
|
loadHTML('content/home.html', mainContent, () => {
|
||||||
|
checkMenus();
|
||||||
|
getNewsTicker();
|
||||||
|
getHomeSkills();
|
||||||
|
updateMottoMessage();
|
||||||
|
getHomeProjects();
|
||||||
|
scrollToTop();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'profile':
|
||||||
|
loadHTML('content/profile.html', mainContent, () => {
|
||||||
|
checkMenus();
|
||||||
|
loadCertificates();
|
||||||
|
getPartnerships();
|
||||||
|
loadGallery();
|
||||||
|
scrollToTop();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'projects':
|
||||||
|
loadHTML('content/projects.html', mainContent, () => {
|
||||||
|
checkMenus();
|
||||||
|
getProjects();
|
||||||
|
scrollToTop();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'skills':
|
||||||
|
loadHTML('content/skills.html', mainContent, () => {
|
||||||
|
checkMenus();
|
||||||
|
getSkillsTree();
|
||||||
|
getProcess();
|
||||||
|
scrollToTop();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'contact':
|
||||||
|
loadHTML('content/links.html', mainContent, () => {
|
||||||
|
checkMenus();
|
||||||
|
getLinks();
|
||||||
|
scrollToTop();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'impress':
|
||||||
|
loadHTML('content/impress.html', mainContent, () => {
|
||||||
|
checkMenus();
|
||||||
|
scrollToTop();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'privacy':
|
||||||
|
loadHTML('content/dataprotection.html', mainContent, () => {
|
||||||
|
checkMenus();
|
||||||
|
scrollToTop();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'cookies':
|
||||||
|
loadHTML('content/cookies.html', mainContent, () => {
|
||||||
|
checkMenus();
|
||||||
|
scrollToTop();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'sources':
|
||||||
|
loadHTML('content/sources.html', mainContent, () => {
|
||||||
|
checkMenus();
|
||||||
|
scrollToTop();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
loadHTML('content/404.html', mainContent, () => {
|
||||||
|
checkMenus();
|
||||||
|
scrollToTop();
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
setTimeout(()=>{initLanguage()},2500);
|
||||||
|
const validPages = ['home', 'profile', 'projects', 'skills', 'contact', 'impress', 'privacy', 'cookies', 'sources'];
|
||||||
|
setTemporaryCookie("page",validPages.includes(page)?page:"404"),updateURLWithCookies();
|
||||||
|
}
|
||||||
|
function loadHTML(e,n,r){fetch(e).then(e=>{if(!e.ok)throw Error("Fehler beim Laden der HTML-Datei");return e.text()}).then(e=>{n.innerHTML=e,"function"==typeof r&&r()}).catch(e=>{console.error("Fehler:",e),n.innerHTML="<p>Fehler beim Laden der Ansicht.</p>"})}
|
||||||
|
function checkMenus(){isNavOpen?openMobilMenu("nav"):isDeskNavOpen?toggleDeskMenu():isSettingsOpen&&openMobilMenu("settings")}
|
||||||
|
function toggleTheme(){let e="light"===(getCookie("theme")||"light")?"dark":"light";setTheme(e),setCookie("theme",e,365),updateURLWithCookies()}function setTheme(e){let t=document.documentElement,l=document.querySelectorAll(".modeSelect");t.classList.toggle("darkTheme","dark"===e),t.classList.toggle("lightTheme","light"===e),l.forEach(t=>t.style.marginLeft="dark"===e?"20px":"-20px")}function initTheme(){let e=getCookie("theme")||"light";"dark"!==e&&"light"!==e&&(e="dark"),setCookie("theme",e,365),updateURLWithCookies(),setTheme(e)}
|
||||||
|
let isLinkFilterOpen=!1;function toggleLinkFilterMenu(){isLinkFilterOpen?(document.querySelector(".linkFilterMenu").style.maxHeight="",document.querySelector(".linkFilterMenu .fa-arrow-down").style.rotate="",document.querySelector(".linkFilterMenu .fa-arrow-down").style.animation=""):(document.querySelector(".linkFilterMenu").style.maxHeight="1000px",document.querySelector(".linkFilterMenu .fa-arrow-down").style.rotate="180deg",document.querySelector(".linkFilterMenu .fa-arrow-down").style.animation="none"),isLinkFilterOpen=!isLinkFilterOpen}
|
||||||
|
let isProjectFilterOpen=!1;function toggleProjectFilterMenu(e){let t=document.getElementById("tagList"),r=document.getElementById("sortSelect"),o=document.querySelector("#projectsFilterMenu"),n=document.querySelector("#projectsFilterMenu .fa-arrow-down");r.contains(e.target)||t.contains(e.target)||(isProjectFilterOpen?(o.classList.remove("open"),n.style.transform="rotate(0deg)"):(o.classList.add("open"),n.style.transform="rotate(180deg)"),isProjectFilterOpen=!isProjectFilterOpen)}
|
||||||
|
function toggleFAQItem(e){e.classList.contains("expanded")?e.classList.remove("expanded"):(document.querySelectorAll(".faqItem").forEach(e=>{e.classList.remove("expanded")}),e.classList.add("expanded"))}document.querySelectorAll(".faqItem").forEach(e=>{e.classList.remove("expanded")});
|
||||||
|
function openLink(url) {
|
||||||
|
switch (url) {
|
||||||
|
case 'html5':
|
||||||
|
window.open('https://html.spec.whatwg.org/multipage/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'php':
|
||||||
|
window.open('https://www.php.net/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'css3':
|
||||||
|
window.open('https://developer.mozilla.org/en-US/docs/Web/CSS', '_blank');
|
||||||
|
break;
|
||||||
|
case 'javascript':
|
||||||
|
window.open('https://www.javascript.com/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'nodejs':
|
||||||
|
window.open('https://nodejs.org/en', '_blank');
|
||||||
|
break;
|
||||||
|
case 'vscode':
|
||||||
|
window.open('https://code.visualstudio.com/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'cmd':
|
||||||
|
window.open('https://learn.microsoft.com/de-de/windows-server/administration/windows-commands/cmd', '_blank');
|
||||||
|
break;
|
||||||
|
case 'ps':
|
||||||
|
window.open('https://learn.microsoft.com/de-de/powershell/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'chatgpt':
|
||||||
|
window.open('https://chatgpt.com/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'xampp':
|
||||||
|
window.open('https://www.apachefriends.org/de/index.html', '_blank');
|
||||||
|
break;
|
||||||
|
case 'apache':
|
||||||
|
window.open('https://httpd.apache.org/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'mysql':
|
||||||
|
window.open('https://www.mysql.com/de/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'davinci':
|
||||||
|
window.open('https://www.blackmagicdesign.com/de/products/davinciresolve/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'obsstudio':
|
||||||
|
window.open('https://obsproject.com/de', '_blank');
|
||||||
|
break;
|
||||||
|
case 'flstudio':
|
||||||
|
window.open('https://www.image-line.com/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'voicemeeter':
|
||||||
|
window.open('https://vb-audio.com/Voicemeeter/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'trello':
|
||||||
|
window.open('https://trello.com/', '_blank');
|
||||||
|
break;
|
||||||
|
case 'notion':
|
||||||
|
window.open('https://www.notion.com/', '_blank');
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
loadPage('404');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function handleBodyClick(e){let t=document.getElementById("navigation"),n=document.getElementById("mobileFooter"),r=document.getElementById("mobileSettings"),a=document.querySelectorAll(".faqItem"),o=document.querySelector(".linkFilterMenu"),i=document.querySelector("#projectsFilterMenu");if(t?.contains(e.target)||n?.contains(e.target)||r?.contains(e.target)||o?.contains(e.target)||i?.contains(e.target))return;let l=!1;a.forEach(t=>{t.contains(e.target)&&(l=!0)}),l||a.forEach(e=>e.classList.remove("expanded")),isLinkFilterOpen&&toggleLinkFilterMenu(),isProjectFilterOpen&&toggleProjectFilterMenu(e),checkMenus()}
|
||||||
|
function addHoverEffectToLinkCard(e,r){e.addEventListener("mouseover",()=>{r.forEach(r=>{r!==e&&(r.style.filter="blur(5px) grayscale(1)")}),e.style.backgroundColor="rgba(255, 255, 255, 0.1)"}),e.addEventListener("mouseout",()=>{r.forEach(e=>{e.style.filter=""}),e.style.backgroundColor=""})}function addHoverEffectToProcessCard(e,r){e.addEventListener("mouseover",()=>{r.forEach(r=>{r!==e&&(r.style.filter="blur(5px) grayscale(1)")}),e.style.backgroundColor="rgba(255, 255, 255, 0.1)"}),e.addEventListener("mouseout",()=>{r.forEach(e=>{e.style.filter=""}),e.style.backgroundColor=""})}function addHoverEffectToImages(e){let r=document.querySelectorAll(".imgContainer img"),o=document.querySelectorAll(".skillsCardContainer img");r.forEach(r=>{r!==e&&(r.style.filter="blur(5px) grayscale(1)")}),o.forEach(r=>{r!==e&&(r.style.filter="blur(5px) grayscale(1)")}),e.style.backgroundColor="var(--hover-color)"}function removeHoverEffectFromImages(){let e=document.querySelectorAll(".imgContainer img"),r=document.querySelectorAll(".skillsCardContainer img");e.forEach(e=>{e.style.filter="",e.style.backgroundColor=""}),r.forEach(e=>{e.style.filter="",e.style.backgroundColor=""})}
|
||||||
|
function scrollToTop(){window.scrollTo({top:0,behavior:"smooth"})}
|
||||||
|
// DOMContentLoaded
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
setCookiesFromURL(),getCookie("cookieConsent")||document.getElementById("cookie-banner").classList.remove("hidden"),document.getElementById("cookie-accept").addEventListener("click",function(){setCookie("cookieConsent","true",365),document.getElementById("cookie-banner").classList.add("hidden")});
|
||||||
|
setTimeout(()=>{initTheme()},2500),setTimeout(()=>{initLanguage()},5e3);
|
||||||
|
});
|
||||||
Executable
+111
File diff suppressed because one or more lines are too long
Executable
+8
@@ -0,0 +1,8 @@
|
|||||||
|
/* Privacy Policy */
|
||||||
|
.dataProtection{max-width:1000px;margin:0 auto;padding:2rem;background-color:var(--card-bg);color:var(--primary-text-color);border-radius:12px;box-shadow:inset 0 2px 4px rgba(255,255,255,.05),inset 0 -3px 6px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.15);font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}.dataProtection h1{font-size:2rem;margin-bottom:1rem;border-bottom:2px solid #444;padding-bottom:.5rem;text-align:center}.dataProtection h2{font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--tertiary-color);font-family:"Anonymous Pro",monospace;font-weight:700;font-style:normal}.dataProtection h3,.dataProtection h4,.dataProtection h5,.dataProtection h6{margin-top:1.5rem;margin-bottom:1rem;font-weight:700;color:var(--tertiary-color);font-family:"Anonymous Pro",monospace;font-style:normal}.dataProtection h3{font-size:1.25rem}.dataProtection h4{font-size:1.125rem}.dataProtection h5{font-size:1rem}.dataProtection h6{font-size:.875rem}.dataProtection ul{list-style-type:disc;margin-left:1rem;margin-bottom:1.5rem;text-align:justify}.dataProtection p{line-height:1.7;margin-bottom:1.2rem;text-align:justify;font-family:"Anonymous Pro",monospace;font-weight:400;font-style:normal}.dataProtection strong{color:var(--tertiary-color);font-family:"Anonymous Pro",monospace;font-weight:700;font-style:normal}.dataProtection a{color:var(--link-color);text-decoration:none}.dataProtection a:hover{text-decoration:underline;color:var(--link-hover-color)}@media (max-width:600px){.dataProtection{position:relative;padding:1rem;width:calc(100% + 50px);left:50%;transform:translate(-50%)}.dataProtection h1{font-size:1.5rem}}
|
||||||
|
/* Cookies Page */
|
||||||
|
.cookie{max-width:1000px;margin:0 auto;padding:2rem;background-color:var(--card-bg);color:var(--primary-text-color);border-radius:12px;box-shadow:inset 0 2px 4px rgba(255,255,255,.05),inset 0 -3px 6px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.15)}.cookie h1{font-size:2rem;margin-bottom:1rem;border-bottom:2px solid #444;padding-bottom:.5rem;text-align:center}.cookie p,.cookie ul{text-align:justify}.cookie p{line-height:1.7;margin-bottom:1.2rem}.cookie strong{color:var(--tertiary-color)}.cookie a{color:var(--link-color);text-decoration:none}.cookie a:hover{text-decoration:underline;color:var(--link-hover-color)}@media (max-width:600px){.cookie{position:relative;padding:1rem;width:calc(100% + 50px);left:50%;transform:translate(-50%)}.cookie h1{font-size:1.5rem}}
|
||||||
|
/* Sources Page */
|
||||||
|
.sourceItem,.sources{background-color:var(--card-bg);border-radius:12px;box-shadow:inset 0 2px 4px rgba(255,255,255,.05),inset 0 -3px 6px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.15)}.sources{max-width:1000px;margin:0 auto;padding:2rem;color:var(--primary-text-color);font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}.sources h1{font-size:2rem;margin-bottom:1rem;border-bottom:2px solid #444;padding-bottom:.5rem;text-align:center}.sources p{line-height:1.7;margin-bottom:1.2rem;text-align:justify}.sources a{color:var(--link-color);text-decoration:none}.sources a:hover{text-decoration:underline;color:var(--link-hover-color)}.sources h2{margin-top:1rem;font-size:1.5rem;color:var(--secondary-color)}.sourceItem{margin-bottom:2rem;padding:1rem}@media (max-width:600px){.sources{position:relative;padding:1rem;width:calc(100% + 50px);left:50%;transform:translate(-50%)}.sources h1{font-size:1.5rem}}
|
||||||
|
/* Impress Page */
|
||||||
|
.impress{max-width:1000px;margin:0 auto;padding:2rem;background-color:var(--card-bg);color:var(--primary-text-color);border-radius:12px;box-shadow:inset 0 2px 4px rgba(255,255,255,.05),inset 0 -3px 6px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.15)}.impress h1{font-size:2rem;margin-bottom:1rem;border-bottom:2px solid #444;padding-bottom:.5rem;text-align:center}.impress p{line-height:1.7;margin-bottom:1.2rem;text-align:justify;font-family:"Anonymous Pro",monospace;font-weight:400;font-style:normal}.impress strong{color:var(--tertiary-color)}.impress a{color:var(--link-color);text-decoration:none}.impress a:hover{text-decoration:underline;color:var(--link-hover-color)}@media (max-width:600px){.impress{position:relative;padding:1rem;width:calc(100% + 50px);left:50%;transform:translate(-50%)}.impress h1{font-size:1.5rem}}
|
||||||
Reference in New Issue
Block a user