Kris_HD1337/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

addded fuctioning burger with accordion for projects and fixed the header

Browse Source
This commit is contained in:
IM23a-cernik
2025-03-27 10:44:58 +01:00
parent d9ad7f920d
commit 243598ad20
13 changed files with 1975 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/jsLibraryMappings.xml
Generated
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<includedPredefinedLibrary name="Node.js Core" />
</component>
</project>
.idea/tailwindcss.xml
Generated
-6
View File
@@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="TailwindSettings">
<option name="lspConfiguration" value="{&#10; &quot;includeLanguages&quot;: {&#10; &quot;ftl&quot;: &quot;html&quot;,&#10; &quot;jinja&quot;: &quot;html&quot;,&#10; &quot;jinja2&quot;: &quot;html&quot;,&#10; &quot;smarty&quot;: &quot;html&quot;,&#10; &quot;tmpl&quot;: &quot;gohtml&quot;,&#10; &quot;cshtml&quot;: &quot;html&quot;,&#10; &quot;vbhtml&quot;: &quot;html&quot;,&#10; &quot;razor&quot;: &quot;html&quot;,&#10; &quot;js&quot;: &quot;js&quot;&#10; },&#10; &quot;files&quot;: {&#10; &quot;exclude&quot;: [&#10; &quot;**/.git/**&quot;,&#10; &quot;**/node_modules/**&quot;,&#10; &quot;**/.hg/**&quot;,&#10; &quot;**/.svn/**&quot;&#10; ]&#10; },&#10; &quot;emmetCompletions&quot;: false,&#10; &quot;classAttributes&quot;: [&quot;class&quot;, &quot;className&quot;, &quot;ngClass&quot;],&#10; &quot;colorDecorators&quot;: false,&#10; &quot;showPixelEquivalents&quot;: true,&#10; &quot;rootFontSize&quot;: 16,&#10; &quot;hovers&quot;: true,&#10; &quot;suggestions&quot;: true,&#10; &quot;codeActions&quot;: true,&#10; &quot;validate&quot;: true,&#10; &quot;lint&quot;: {&#10; &quot;invalidScreen&quot;: &quot;error&quot;,&#10; &quot;invalidVariant&quot;: &quot;error&quot;,&#10; &quot;invalidTailwindDirective&quot;: &quot;error&quot;,&#10; &quot;invalidApply&quot;: &quot;error&quot;,&#10; &quot;invalidConfigPath&quot;: &quot;error&quot;,&#10; &quot;cssConflict&quot;: &quot;warning&quot;,&#10; &quot;recommendedVariantOrder&quot;: &quot;warning&quot;&#10; },&#10; &quot;experimental&quot;: {&#10; &quot;configFile&quot;: null,&#10; &quot;classRegex&quot;: []&#10; }&#10;}" />
</component>
</project>
.idea/workspace.xml
Generated
+35 -6
View File
@@ -5,10 +5,19 @@
</component>
<component name="ChangeListManager">
<list default="true" id="15d653a3-00a9-440e-a365-0d5dba6a77a9" name="Changes" comment="added dark/light mode toggle">
<change beforePath="$PROJECT_DIR$/.idea/vcs.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/jsLibraryMappings.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/app/projects/nuclear-age/page.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/app/projects/porsche/page.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/app/projects/roboxers/page.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/accordion.jsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/burger.jsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/tailwindcss.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/app/layout.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/layout.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/app/me/page.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/me/page.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/app/projects/page.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/projects/page.js" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -19,6 +28,7 @@
<option name="RECENT_TEMPLATES">
<list>
<option value="JSX File" />
<option value="JavaScript File" />
</list>
</option>
</component>
@@ -49,21 +59,26 @@
<component name="PropertiesComponent"><![CDATA[{
"keyToString": {
"RunOnceActivity.ShowReadmeOnStart": "true",
"RunOnceActivity.git.unshallow": "true",
"SHARE_PROJECT_CONFIGURATION_FILES": "true",
"git-widget-placeholder": "main",
"last_opened_file_path": "C:/BZZ/JS/portfolio",
"javascript.nodejs.core.library.configured.version": "20.18.0",
"javascript.nodejs.core.library.typings.version": "20.17.24",
"last_opened_file_path": "C:/BZZ/JS/portfolio/src/app/projects",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)",
"node.js.selected.package.tslint": "(autodetect)",
"nodejs_package_manager_path": "npm",
"npm.build.executor": "Run",
"settings.editor.selected.configurable": "Settings.JavaScript",
"settings.editor.selected.configurable": "preferences.pluginManager",
"ts.external.directory.path": "C:\\Program Files\\JetBrains\\WebStorm 2024.1.2\\plugins\\javascript-plugin\\jsLanguageServicesImpl\\external",
"vue.rearranger.settings.migration": "true"
}
}]]></component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\BZZ\JS\portfolio\src\app\projects" />
<recent name="C:\BZZ\JS\portfolio\src\app\me" />
</key>
</component>
@@ -87,7 +102,7 @@
<component name="SharedIndexes">
<attachedChunks>
<set>
<option value="bundled-js-predefined-d6986cc7102b-5c90d61e3bab-JavaScript-WS-242.23339.15" />
<option value="bundled-js-predefined-d6986cc7102b-1632447f56bf-JavaScript-WS-243.26053.12" />
</set>
</attachedChunks>
</component>
@@ -104,7 +119,13 @@
<workItem from="1742386550288" duration="4657000" />
<workItem from="1742455885801" duration="139000" />
<workItem from="1742456154241" duration="711000" />
<workItem from="1742456884412" duration="4284000" />
<workItem from="1742456884412" duration="5646000" />
<workItem from="1742463144263" duration="7000" />
<workItem from="1742463267394" duration="14000" />
<workItem from="1742463482019" duration="601000" />
<workItem from="1742464379879" duration="293000" />
<workItem from="1742464681826" duration="2750000" />
<workItem from="1743060154301" duration="7632000" />
</task>
<task id="LOCAL-00001" summary="created a base layout">
<option name="closed" value="true" />
@@ -122,7 +143,15 @@
<option name="project" value="LOCAL" />
<updated>1742461203049</updated>
</task>
<option name="localTasksCounter" value="3" />
<task id="LOCAL-00003" summary="added dark/light mode toggle">
<option name="closed" value="true" />
<created>1742461342755</created>
<option name="number" value="00003" />
<option name="presentableId" value="LOCAL-00003" />
<option name="project" value="LOCAL" />
<updated>1742461342755</updated>
</task>
<option name="localTasksCounter" value="4" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
package-lock.json
Generated
+1775 -3
View File
File diff suppressed because it is too large Load Diff
package.json
+3
View File
@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@radix-ui/react-accordion": "^1.2.3",
"@radix-ui/react-slot": "^1.1.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
@@ -16,6 +17,7 @@
"next": "15.2.0",
"next-themes": "^0.4.6",
"postcss": "^8.5.3",
"radix-ui": "^1.1.3",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwind-merge": "^3.0.2",
@@ -24,6 +26,7 @@
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4.0.14",
"autoprefixer": "^10.4.16",
"eslint": "^9",
"eslint-config-next": "15.2.0",
"tailwindcss": "^4.0.14"
src/app/layout.js
+6 -5
View File
@@ -4,6 +4,7 @@ import "./globals.css";
import Link from "next/link";
import {ThemeProvider} from "@/components/theme-provider";
import {ModeToggle} from "@/components/mode-toggle";
import Burger from "@/components/burger";
export default function RootLayout({children}) {
@@ -17,15 +18,15 @@ export default function RootLayout({children}) {
enableSystem
disableTransitionOnChange
>
<header className={"flex text-3xl md:text-5xl p-3 justify-between border-b-2 border-emerald-800 dark:border-emerald-300 content-center"}>
<button className={""}>&#9776;</button>
<div className={"p-2"}>Kristians Portfolio</div>
<header className={"fixed dark:bg-black bg-gray-200 w-full flex text-3xl md:text-5xl p-3 justify-between border-b-2 border-emerald-800 dark:border-emerald-300 content-center"}>
<Burger/>
<div className={""}>Kristians Portfolio</div>
<ModeToggle/>
</header>
<div className={"p-5"}>
<div className={"p-5 pt-20"}>
{children}
</div>
<footer className="">
<footer className={""}>
<ul className="flex justify-evenly flex-wrap border-t-2 border-emerald-800 dark:border-emerald-300 p-3">
<li className="">
<Link href="/privacy">
src/app/me/page.js
+57 -1
View File
@@ -4,5 +4,61 @@ export default function Me() {
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
vLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</p>
}
src/app/projects/nuclear-age/page.js
+8
View File
@@ -0,0 +1,8 @@
export default function NuclearAge() {
return <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
}
src/app/projects/page.js
+1 -1
View File
@@ -1,4 +1,4 @@
export default function Page() {
export default function Projects() {
return <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
src/app/projects/porsche/page.js
+8
View File
@@ -0,0 +1,8 @@
export default function Porsche() {
return <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
}
src/app/projects/roboxers/page.js
+8
View File
@@ -0,0 +1,8 @@
export default function Roboxers() {
return <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
}
src/components/accordion.jsx
+18
View File
@@ -0,0 +1,18 @@
import {Accordion} from "radix-ui";
import Link from "next/link";
export default function ProjectAccordion() {
return (
<Accordion.Root className="" type={"multiple"}>
<Accordion.Item value={"item-1"}>
<Accordion.Trigger>Projects</Accordion.Trigger>
<Accordion.Content className="flex justify-center flex-col p-2">
<Link className="text-lg p-2" href="/projects">All Projects</Link>
<Link className="text-lg p-2" href="/projects/porsche">Wirtschaftsgeschichte von Porsche</Link>
<Link className="text-lg p-2" href="/projects/nuclear-age">Nuclear Age Mod</Link>
<Link className="text-lg p-2" href="/projects/roboxers">Roboxers</Link>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
)
}
src/components/burger.jsx
+50
View File
@@ -0,0 +1,50 @@
import React, {useState} from 'react';
import Link from "next/link";
import ProjectAccordion from "@/components/accordion";
export default function Burger() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button className={"text-5xl"} onClick={() => setIsOpen(!isOpen)}>&#9776;</button>
<div
className={`absolute top-19 left-0 md:w-1/4 w-3/4 h-screen dark:bg-emerald-950 dark:border-t-emerald-400
dark:border-r-emerald-400 border-2 bg-gray-200 flex flex-col
border-t-emerald-600 border-r-emerald-600
gap-6 font-semibold text-lg transform transition-transform
${isOpen ? "opacity-100" : "opacity-0 hidden"}`}
style={{
transition: "transform 0.3s ease," +
"opacity 0.3s ease"
}}>
<ul className={"text-2xl list-none"}>
<li className={"p-3 border-b-emerald-600 border-2 dark:border-b-emerald-400"}>
<Link href={"/"}>Home</Link>
</li>
<li className={"p-3 border-b-emerald-600 border-2 dark:border-b-emerald-400"}>
<ProjectAccordion/>
</li>
<li className={"p-3 border-b-emerald-600 border-2 dark:border-b-emerald-400"}>
<Link href={"/me"}>About-Me</Link>
</li>
<li className={"p-3 border-b-emerald-600 border-2 dark:border-b-emerald-400"}>
<Link href={"https://github.com/KrisHD1337?tab=repositories"} target={"_blank"}>GitHub</Link>
</li>
<li className={"p-3 border-b-emerald-600 border-2 dark:border-b-emerald-400"}>
<Link href={"/contact"}>Contact</Link>
</li>
</ul>
</div>
<div onClick={() => setIsOpen(!isOpen)}
className={`absolute top-19 md:left-1/4 md:w-3/4 left-3/4 w-1/4 h-screen bg-black flex flex-col
items-center gap-6 font-semibold text-lg transform transition-transform
${isOpen ? "opacity-50" : "opacity-0 hidden"}`}
style={{
transition: "transform 0.3s ease," +
"opacity 0.3s ease"
}}>
</div>
</div>
);
}