Spaces:

Scroll26
/

pixelportfolio-pro

Running

App Files Files Community

Scroll26 commited on Nov 3, 2025

Commit

a07a2f6

verified ·

1 Parent(s): fe3d38d

This Portfolio is for a Freelancer/Media Designer. While he does make Websites, his main focus is on Animation/3D/Videogames. He also has some experience with A.I. The website should be modern, dark and most importantly unique. It also needs an Impressum and Datenschutz page

Browse files

Files changed (6) hide show

components/footer.js +6 -6
components/navbar.js +10 -10
datenschutz.html +55 -0
impressum.html +54 -0
index.html +20 -20
style.css +33 -1

components/footer.js CHANGED Viewed

@@ -101,13 +101,13 @@ class CustomFooter extends HTMLElement {
             <div class="footer-content">
                 <div class="footer-grid">
                     <div>
-                        <a href="index.html" class="footer-logo">
-                            <i data-feather="box" class="footer-logo-icon"></i>
-                            PixelPortfolio
-                        </a>
                         <p class="footer-description">
-                            Crafting beautiful digital experiences that users love and businesses grow with.
-                        </p>
                     </div>
                     <div>

             <div class="footer-content">
                 <div class="footer-grid">
                     <div>
+                    <a href="index.html" class="footer-logo">
+                        <i data-feather="hexagon" class="footer-logo-icon"></i>
+                        NexusMedia
+</a>
                         <p class="footer-description">
+                            Pushing creative boundaries through animation, game design and AI-powered media.
+</p>
                     </div>
                     <div>

components/navbar.js CHANGED Viewed

@@ -14,10 +14,10 @@ class CustomNavbar extends HTMLElement {
                     position: sticky;
                     top: 0;
                     z-index: 50;
-                    background-color: rgba(255, 255, 255, 0.95);
                     backdrop-filter: blur(8px);
-                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-                }
                 nav {
                     max-width: 1200px;
@@ -31,8 +31,8 @@ class CustomNavbar extends HTMLElement {
                 .logo {
                     font-weight: 700;
                     font-size: 1.25rem;
-                    color: #4f46e5;
-                    text-decoration: none;
                     display: flex;
                     align-items: center;
                 }
@@ -47,8 +47,8 @@ class CustomNavbar extends HTMLElement {
                 }
                 .nav-link {
-                    color: #6b7280;
-                    text-decoration: none;
                     font-weight: 500;
                     transition: color 0.2s ease;
                     position: relative;
@@ -94,9 +94,9 @@ class CustomNavbar extends HTMLElement {
             <nav>
                 <a href="index.html" class="logo">
-                    <i data-feather="box" class="logo-icon"></i>
-                    PixelPortfolio
-                </a>
                 <div class="nav-links">
                     <a href="index.html" class="nav-link ${active === 'home' ? 'active' : ''}">Home</a>

                     position: sticky;
                     top: 0;
                     z-index: 50;
+                    background-color: rgba(17, 24, 39, 0.95);
                     backdrop-filter: blur(8px);
+                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
                 nav {
                     max-width: 1200px;
                 .logo {
                     font-weight: 700;
                     font-size: 1.25rem;
+                    color: #8b5cf6;
+text-decoration: none;
                     display: flex;
                     align-items: center;
                 }
                 }
                 .nav-link {
+                    color: #9ca3af;
+text-decoration: none;
                     font-weight: 500;
                     transition: color 0.2s ease;
                     position: relative;
             <nav>
                 <a href="index.html" class="logo">
+                    <i data-feather="hexagon" class="logo-icon"></i>
+                    NexusMedia
+</a>
                 <div class="nav-links">
                     <a href="index.html" class="nav-link ${active === 'home' ? 'active' : ''}">Home</a>

datenschutz.html ADDED Viewed

	@@ -0,0 +1,55 @@

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Datenschutz | NexusMedia</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-200">
+    <custom-navbar></custom-navbar>
+    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="mb-12">
+            <h1 class="text-4xl font-bold text-white mb-6">Datenschutzerklärung</h1>
+            <div class="bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-700 space-y-6">
+                <div>
+                    <h2 class="text-2xl font-bold text-white mb-3">1. Datenschutz auf einen Blick</h2>
+                    <p class="text-gray-400">Diese Datenschutzerklärung klärt Sie über die Art, den Umfang und Zweck der Verarbeitung von personenbezogenen Daten innerhalb unseres Onlineangebotes auf.</p>
+                </div>
+                <div>
+                    <h2 class="text-2xl font-bold text-white mb-3">2. Hosting und Content Delivery Networks</h2>
+                    <p class="text-gray-400">Unser Hoster erhebt in sog. Logfiles folgende Daten, die Ihr Browser übermittelt: IP-Adresse, Browsertyp, Betriebssystem, Referrer URL, Hostname des zugreifenden Rechners, Uhrzeit der Serveranfrage.</p>
+                </div>
+                <div>
+                    <h2 class="text-2xl font-bold text-white mb-3">3. Allgemeine Hinweise und Pflichtinformationen</h2>
+                    <p class="text-gray-400">Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften.</p>
+                </div>
+                <div>
+                    <h2 class="text-2xl font-bold text-white mb-3">4. Rechte der betroffenen Person</h2>
+                    <p class="text-gray-400">Sie haben das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Datenübertragbarkeit und Widerspruch gegen die Verarbeitung Ihrer Daten.</p>
+                </div>
+                <div>
+                    <h2 class="text-2xl font-bold text-white mb-3">5. Datenerfassung auf dieser Website</h2>
+                    <p class="text-gray-400">Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert.</p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

impressum.html ADDED Viewed

	@@ -0,0 +1,54 @@

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Impressum | NexusMedia</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-200">
+    <custom-navbar></custom-navbar>
+    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="mb-12">
+            <h1 class="text-4xl font-bold text-white mb-6">Impressum</h1>
+            <div class="bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-700">
+                <h2 class="text-2xl font-bold text-white mb-4">Angaben gemäß § 5 TMG</h2>
+                <div class="space-y-4">
+                    <div>
+                        <p class="font-medium text-gray-300">Max Mustermann</p>
+                        <p class="text-gray-400">NexusMedia Studios</p>
+                    </div>
+                    <div>
+                        <p class="font-medium text-gray-300">Adresse</p>
+                        <p class="text-gray-400">Musterstraße 123<br>12345 Musterstadt</p>
+                    </div>
+                    <div>
+                        <p class="font-medium text-gray-300">Kontakt</p>
+                        <p class="text-gray-400">Telefon: +49 123 456789<br>E-Mail: contact@nexusmedia.example</p>
+                    </div>
+                    <div>
+                        <p class="font-medium text-gray-300">Umsatzsteuer-ID</p>
+                        <p class="text-gray-400">DE123456789</p>
+                    </div>
+                    <div>
+                        <p class="font-medium text-gray-300">Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</p>
+                        <p class="text-gray-400">Max Mustermann</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PixelPortfolio Pro | Creative Showcase</title>
-    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
@@ -23,15 +23,15 @@
         }
     </script>
 </head>
-<body class="bg-gray-50">
-    <custom-navbar active="home"></custom-navbar>
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <section class="mb-20">
             <div class="text-center">
-                <h1 class="text-5xl md:text-7xl font-bold text-gray-900 mb-6">Crafting Digital <span class="text-primary">Experiences</span></h1>
-                <p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto">I design and build beautiful, functional digital products that users love.</p>
-                <div class="mt-10 flex justify-center gap-4">
                     <a href="projects.html" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all">View Projects</a>
                     <a href="#contact" class="border-2 border-gray-300 hover:border-primary text-gray-700 hover:text-primary px-6 py-3 rounded-lg font-medium transition-all">Contact Me</a>
                 </div>
@@ -40,28 +40,28 @@
         <section class="mb-20">
             <div class="grid md:grid-cols-3 gap-8">
-                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all">
                     <div class="text-primary mb-4">
-                        <i data-feather="code" class="w-10 h-10"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Web Development</h3>
-                    <p class="text-gray-600">Modern, responsive websites built with cutting-edge technologies.</p>
                 </div>
-                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all">
                     <div class="text-primary mb-4">
-                        <i data-feather="smartphone" class="w-10 h-10"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">App Design</h3>
-                    <p class="text-gray-600">Intuitive mobile interfaces that enhance user experience.</p>
                 </div>
-                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all">
                     <div class="text-primary mb-4">
-                        <i data-feather="award" class="w-10 h-10"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Branding</h3>
-                    <p class="text-gray-600">Cohesive visual identities that tell your unique story.</p>
                 </div>
-            </div>
         </section>
         <section class="mb-20">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NexusMedia | Digital Art & Animation</title>
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
         }
     </script>
 </head>
+<body class="bg-gray-900">
+<custom-navbar active="home"></custom-navbar>
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <section class="mb-20">
             <div class="text-center">
+    <h1 class="text-5xl md:text-7xl font-bold text-white mb-6">Pushing <span class="text-primary">Digital Boundaries</span></h1>
+    <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto">3D Animation • Game Design • AI Integration • Interactive Media</p>
+<div class="mt-10 flex justify-center gap-4">
                     <a href="projects.html" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all">View Projects</a>
                     <a href="#contact" class="border-2 border-gray-300 hover:border-primary text-gray-700 hover:text-primary px-6 py-3 rounded-lg font-medium transition-all">Contact Me</a>
                 </div>
         <section class="mb-20">
             <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-gray-800 p-8 rounded-xl shadow-md hover:shadow-lg transition-all border border-gray-700">
                     <div class="text-primary mb-4">
+                        <i data-feather="film" class="w-10 h-10"></i>
                     </div>
+                    <h3 class="text-xl font-bold mb-2 text-white">3D Animation</h3>
+                    <p class="text-gray-400">Cinematic motion graphics and character animations that bring stories to life.</p>
                 </div>
+                <div class="bg-gray-800 p-8 rounded-xl shadow-md hover:shadow-lg transition-all border border-gray-700">
                     <div class="text-primary mb-4">
+                        <i data-feather="cpu" class="w-10 h-10"></i>
                     </div>
+                    <h3 class="text-xl font-bold mb-2 text-white">Game Design</h3>
+                    <p class="text-gray-400">Immersive game environments and mechanics from concept to completion.</p>
                 </div>
+                <div class="bg-gray-800 p-8 rounded-xl shadow-md hover:shadow-lg transition-all border border-gray-700">
                     <div class="text-primary mb-4">
+                        <i data-feather="activity" class="w-10 h-10"></i>
                     </div>
+                    <h3 class="text-xl font-bold mb-2 text-white">AI Integration</h3>
+                    <p class="text-gray-400">Enhancing creative workflows with cutting-edge AI tools and techniques.</p>
                 </div>
+</div>
         </section>
         <section class="mb-20">

style.css CHANGED Viewed

@@ -1,11 +1,43 @@
 /* Base styles */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
-    font-family: 'Inter', sans-serif;
     line-height: 1.6;
 }
 /* Custom animation classes */
 .transition-all {
     transition-property: all;

 /* Base styles */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
 body {
+    font-family: 'Space Grotesk', sans-serif;
     line-height: 1.6;
+    color: #e5e7eb;
+}
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Space Grotesk', sans-serif;
+    font-weight: 700;
+}
+/* Glow effect for interactive elements */
+.glow-on-hover:hover {
+    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
+}
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
+::-webkit-scrollbar-track {
+    background: #1f2937;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #8b5cf6;
+}
 /* Custom animation classes */
 .transition-all {
     transition-property: all;