cv screen and navbar

reott · Jul 1, 2024 · dc6def9 · dc6def9
1 parent a23396c
commit dc6def9
Showing 1 changed file with 73 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -12,6 +12,22 @@
             padding: 0;
             background-color: #f7f7f7;
         }
+        .navbar {
+            background-color: #333;
+            overflow: hidden;
+        }
+        .navbar a {
+            float: left;
+            display: block;
+            color: #f2f2f2;
+            text-align: center;
+            padding: 14px 16px;
+            text-decoration: none;
+        }
+        .navbar a:hover {
+            background-color: #ddd;
+            color: black;
+        }
         .content {
             padding: 2em;
         }
@@ -41,27 +57,37 @@
             margin-bottom: 0.5em;
         }
         video {
-        max-width: 100%;
-        height: auto;
-        width: 400px;
+            max-width: 100%;
+            height: auto;
+            width: 400px;
         }
         .project-info {
-        display: flex;
-        align-items: flex-start;
+            display: flex;
+            align-items: flex-start;
         }
         .project-info span {
-        flex-shrink: 0; /* Prevents the span from shrinking */
-        width: 120px; /* Adjust this width as needed */
-        font-weight: bold;
+            flex-shrink: 0;
+            width: 120px;
+            font-weight: bold;
         }
         .project-info::after {
-        content: '';
-        flex-grow: 1;
+            content: '';
+            flex-grow: 1;
+        }
+        .section {
+            display: none;
+        }
+        .section.active {
+            display: block;
         }
     </style>
 </head>
 <body>
-    <div class="content">
+    <div class="navbar">
+        <a href="#projekte" onclick="showSection('projekte')">Projekte</a>
+        <a href="#lebenslauf" onclick="showSection('lebenslauf')">Lebenslauf</a>
+    </div>
+    <div id="projekte" class="content section active">
         <div class="intro">
             <img src="picture.jpg" alt="image of website owner">
             <div>
@@ -100,5 +126,41 @@ <h2>Mein Name ist René.</h2>
             <p class="project-info"><span>Details:</span> Bei diesem Projekt hab ich einige der Grundlagen der Unity Engine gelernt, wie z.B. Raycasts, Bewegen von Bots über ein NavMesh und den Umgang mit dem ProBuilder Tool.</p>
         </div>
     </div>
+    <div id="lebenslauf" class="content section">
+        <h2>Lebenslauf</h2>
+        <p><strong>Name:</strong> René</p>
+        <p><strong>Geburtsdatum:</strong> 1. Januar 1995</p>
+        <p><strong>Bildung:</strong></p>
+        <ul>
+            <li>Bachelor in Software Engineering, Hochschule Heilbronn, 2023</li>
+            <li>Abitur, Gymnasium XYZ, 2014</li>
+        </ul>
+        <p><strong>Berufserfahrung:</strong></p>
+        <ul>
+            <li>Softwareentwickler, Firma ABC, 2023 - heute</li>
+            <li>Praktikum, Firma DEF, 2022</li>
+        </ul>
+        <p><strong>Kenntnisse:</strong></p>
+        <ul>
+            <li>Programmiersprachen: C#, Python, Java</li>
+            <li>Tools: Unity, Git, Docker</li>
+            <li>Frameworks: .NET, React</li>
+        </ul>
+        <p><strong>Projekte:</strong></p>
+        <ul>
+            <li>3D Cave Generation</li>
+            <li>KI-Antrag Bearbeitung</li>
+            <li>Demo Project</li>
+        </ul>
+        <p><strong>Hobbys:</strong> Gaming, Wandern, Lesen</p>
+    </div>
+    <script>
+        function showSection(sectionId) {
+            document.querySelectorAll('.section').forEach(section => {
+                section.classList.remove('active');
+            });
+            document.getElementById(sectionId).classList.add('active');
+        }
+    </script>
 </body>
 </html>