[{"_1":2,"_414":-5,"_415":-5},"loaderData",{"_3":4,"_411":412},"root",{"_5":6},"navigation",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_393":394},"id",42,"documentId","b2uv9b0shrzkge3w56qjyhke","createdAt","2025-06-10T13:54:59.869Z","updatedAt","2025-08-07T10:03:25.194Z","publishedAt","2025-08-07T10:03:25.230Z","top",[19,158,362,377],{"_7":20,"_21":22,"_23":-5,"_24":25,"_26":27,"_28":29,"_155":156,"_157":-5},193,"label","Home","icon","url","/","invisible",false,"page",{"_7":30,"_9":31,"_11":32,"_13":33,"_15":34,"_35":36,"_151":152},191,"j45jq26qetjpg0atohj04bm4","2025-06-10T13:54:52.052Z","2025-07-08T16:53:58.695Z","2025-07-08T16:53:58.711Z","zone",[37,108],{"_38":39,"_7":40,"_41":42},"__component","cms.image",93,"image",{"_7":43,"_9":44,"_45":46,"_47":-5,"_48":-5,"_49":50,"_51":52,"_53":54,"_58":99,"_60":61,"_62":63,"_67":100,"_24":101,"_102":-5,"_103":104,"_105":-5,"_11":106,"_13":106,"_15":107},14,"er4d3fe9nl9tu9s6rv1i0jdb","name","Frame 1.png","alternativeText","caption","width",1959,"height",1051,"formats",{"_55":56,"_72":73,"_81":82,"_90":91},"thumbnail",{"_45":57,"_58":59,"_60":61,"_62":63,"_64":-5,"_49":65,"_51":66,"_67":68,"_69":70,"_24":71},"thumbnail_Frame 1.png","hash","thumbnail_Frame_1_82ff8b10c9","ext",".png","mime","image/png","path",245,131,"size",31.04,"sizeInBytes",31039,"/uploads/thumbnail_Frame_1_82ff8b10c9.png","small",{"_45":74,"_58":75,"_60":61,"_62":63,"_64":-5,"_49":76,"_51":77,"_67":78,"_69":79,"_24":80},"small_Frame 1.png","small_Frame_1_82ff8b10c9",500,268,95.23,95234,"/uploads/small_Frame_1_82ff8b10c9.png","medium",{"_45":83,"_58":84,"_60":61,"_62":63,"_64":-5,"_49":85,"_51":86,"_67":87,"_69":88,"_24":89},"medium_Frame 1.png","medium_Frame_1_82ff8b10c9",750,402,183.2,183200,"/uploads/medium_Frame_1_82ff8b10c9.png","large",{"_45":92,"_58":93,"_60":61,"_62":63,"_64":-5,"_49":94,"_51":95,"_67":96,"_69":97,"_24":98},"large_Frame 1.png","large_Frame_1_82ff8b10c9",1000,536,276.1,276096,"/uploads/large_Frame_1_82ff8b10c9.png","Frame_1_82ff8b10c9",166.34,"/uploads/Frame_1_82ff8b10c9.png","previewUrl","provider","local","provider_metadata","2025-06-17T05:28:35.679Z","2025-06-17T05:28:35.680Z",{"_38":109,"_7":110,"_111":112,"_113":114,"_41":115,"_150":-5},"cms.content-image",69,"wysiwyg","

CRAFTFIRE

Digitale Produkte sind heute allgegenwärtig und prägen unseren Alltag.

In meinen Arbeiten steht der Mensch im Mittelpunkt.Mit einem nutzerzentrierten Designansatz gestalte ich Erlebnisse, die intuitiv, funktional und visuell überzeugend sind. Das ist Craftfire.

","revert",true,{"_7":116,"_9":117,"_45":118,"_47":-5,"_48":-5,"_49":119,"_51":119,"_53":120,"_58":146,"_60":61,"_62":63,"_67":147,"_24":148,"_102":-5,"_103":104,"_105":-5,"_11":149,"_13":149,"_15":149},15,"uyo7sqzwesuhgd0hqh9qgmdf","Frame 2.png",2376,{"_55":121,"_72":128,"_81":134,"_90":140},{"_45":122,"_58":123,"_60":61,"_62":63,"_64":-5,"_49":124,"_51":124,"_67":125,"_69":126,"_24":127},"thumbnail_Frame 2.png","thumbnail_Frame_2_b9240d6c15",156,16.29,16290,"/uploads/thumbnail_Frame_2_b9240d6c15.png",{"_45":129,"_58":130,"_60":61,"_62":63,"_64":-5,"_49":76,"_51":76,"_67":131,"_69":132,"_24":133},"small_Frame 2.png","small_Frame_2_b9240d6c15",107.66,107660,"/uploads/small_Frame_2_b9240d6c15.png",{"_45":135,"_58":136,"_60":61,"_62":63,"_64":-5,"_49":85,"_51":85,"_67":137,"_69":138,"_24":139},"medium_Frame 2.png","medium_Frame_2_b9240d6c15",190.77,190771,"/uploads/medium_Frame_2_b9240d6c15.png",{"_45":141,"_58":142,"_60":61,"_62":63,"_64":-5,"_49":94,"_51":94,"_67":143,"_69":144,"_24":145},"large_Frame 2.png","large_Frame_2_b9240d6c15",292.55,292553,"/uploads/large_Frame_2_b9240d6c15.png","Frame_2_b9240d6c15",189.73,"/uploads/Frame_2_b9240d6c15.png","2025-06-17T05:29:33.139Z","button","settings",{"_7":30,"_153":22,"_154":22},"title","description","children",[],"cta",{"_7":159,"_21":160,"_23":-5,"_24":161,"_26":27,"_28":-5,"_155":162,"_157":343},196,"Portfolio","portfolio",[163,269],{"_7":164,"_165":166,"_167":168},110,"category","Web development","sub",[169,194,244,260,264],{"_7":170,"_21":171,"_23":172,"_26":27,"_24":173,"_28":174},308,"React-Router-Framework Auth","KeyRound","react-router-framework-auth",{"_7":175,"_9":176,"_11":177,"_13":178,"_15":179,"_35":180,"_151":193},199,"a9ajz4tq83evpopqbo1037qt","2025-06-16T12:07:04.378Z","2025-08-07T09:14:06.110Z","2025-08-07T09:14:06.126Z",[181,185],{"_38":182,"_7":183,"_111":184},"cms.content",182,"

React Router Framework Auth

Dies ist eine moderne und sofort einsatzbereite Vorlage für den produktiven Aufbau von Full-Stack-React-Anwendungen mit React Router Framework. Die Vorlage enthält ein vollständig serverseitig gerendertes Authentifizierungssystem, das auf Supabase basiert.

Die wichtigsten Funktionen umfassen serverseitiges Rendering, Hot Module Replacement für eine schnelle Entwicklungsumgebung sowie TailwindCSS zur Gestaltung der Benutzeroberfläche. Zusätzlich sind Komponenten von Shadcn/ui integriert. Die Authentifizierung ist vollständig serverseitig und basiert auf Supabase

",{"_38":186,"_7":187,"_188":189,"_190":191,"_192":-5},"cms.button",165,"to","https://github.com/craftfirecode/React-Router-Framework-Auth-Supabase","value","GitHub","blank",{"_7":175,"_153":171,"_154":171},{"_7":195,"_21":196,"_23":197,"_26":27,"_24":198,"_28":199},309,"Remix Page Builder","Layers","page-builder",{"_7":200,"_9":201,"_11":202,"_13":203,"_15":204,"_35":205,"_151":243},218,"khza2xxo31fdrhmsp8diex25","2025-06-12T07:24:41.770Z","2025-08-07T09:28:43.270Z","2025-08-07T09:28:43.298Z",[206,209,214,216,218,221,223,228,230,233,236,239,241],{"_38":182,"_7":207,"_111":208},214,"

Remix Page Builder

Ein einfacher Page Builder mag auf den ersten Blick flexibel erscheinen, ist jedoch oft an starre Strukturen gebunden und bietet nur begrenzte Kontrolle. In solchen Fällen ist Strapi eine bessere Wahl. Es handelt sich um ein Headless CMS, das sich ausschließlich auf das Content Management konzentriert und Inhalte sowie Strukturen über eine API bereitstellt.

Mein Ziel war es, eine Kombination aus Remix (React-Router-Framework) und Strapi zu schaffen, bei der die gesamte Menüstruktur und die Inhaltsverwaltung vollständig über Strapi gesteuert werden.

Dabei kam D-Zone zum Einsatz. In Strapi ist die D-Zone ein Bereich im Admin-Panel, der die sogenannte „Dynamic Zone“ darstellt. Sie ermöglicht es, flexible Inhaltsbereiche innerhalb eines Content-Typs zu erstellen. Mit einer Dynamic Zone können verschiedene Komponenten in beliebiger Reihenfolge kombiniert werden, ohne dass für jede Struktur ein eigener Content-Typ nötig ist. Dadurch entsteht maximale Flexibilität beim Aufbau komplexer Seiteninhalte.

Die Menüstruktur und deren Zuordnung zu Inhalten wurde über die Relation-Funktionen in Strapi abgebildet. So entstand ein modulares Baukastensystem, das es erlaubt, auch umfangreiche Websites zu realisieren.

",{"_38":210,"_7":211,"_212":213},"cms.space",350,"margin","mt-15",{"_38":39,"_7":215},111,{"_38":210,"_7":217,"_212":213},351,{"_38":182,"_7":219,"_111":220},215,"

Component

",{"_38":210,"_7":222,"_212":213},352,{"_38":224,"_7":225,"_226":227},"cms.table",21,"csv","Levelbereich;Gebiet\n1–20;Ered Luin\n1–20;Auenland\n1–20;Bree-Land\n1–20;Archet / Combe / Stadel\n18–30;Die Einsamen Lande\n20–35;Nordhöhen\n30–40;Trollhöhen\n30–40;Evendim\n25–32;Südbree (Trestlebridge)\n35–40;Wildermark\n45–50;Eregion\n50–60;Moria\n58–60+;Lothlórien\n60–65;Dunland\n65–70;Isengart\n70–75;Großer Fluss\n75–85;Östliches Rohan\n85–95;Westliches Rohan\n95–100;Zentral-Gondor\n98–100;Ost-Gondor\n100–105;Pelennor-Felder / Minas Tirith\n105–115;Pelennor-Felder (später)\n105–115;Mordor\n115–120;Eryn Lasgalen / Wilderwald\n120–125;Vordergondor / Graues Gebirge\n125–130;Minas Morgul\n130–140;Gundabad\n135–140;Königreich des Nordens\n140–150;Korsaren von Umbar\n140–150+;Umbar & Umgebung",{"_38":210,"_7":229,"_212":213},353,{"_38":231,"_7":232},"cms.accordion",10,{"_38":210,"_7":234,"_212":235},354,"mt-10",{"_38":109,"_7":237,"_111":238,"_113":27},76,"

Lorem ipsum

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. 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.

",{"_38":210,"_7":240,"_212":235},355,{"_38":109,"_7":242,"_111":238,"_113":114},77,{"_7":200,"_153":196,"_154":196},{"_7":245,"_21":246,"_23":247,"_26":114,"_24":248,"_28":249},310,"Statamic","RectangleEllipsis","statamic",{"_7":250,"_9":251,"_11":252,"_13":253,"_15":254,"_35":255,"_151":259},194,"v9f1szl8jgkltkuaeshee352","2025-07-03T12:07:54.970Z","2025-07-08T16:55:24.642Z","2025-07-08T16:55:24.655Z",[256],{"_38":182,"_7":257,"_111":258},177,"

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.

",{"_7":250,"_153":246,"_154":246},{"_7":261,"_21":262,"_23":247,"_26":114,"_24":263,"_28":-5},311,"WordPress ACF Blocks","wordpress-acf-blocks",{"_7":265,"_21":266,"_23":267,"_26":114,"_24":268,"_28":-5},312,"PHP Starter Kit","Drum","php-starter-kit",{"_7":215,"_165":270,"_167":271},"UX / UI",[272,295,318],{"_7":273,"_21":274,"_23":275,"_26":27,"_24":276,"_28":277},313,"Figma Community","Tangent","figma-community",{"_7":278,"_9":279,"_11":280,"_13":281,"_15":282,"_35":283,"_151":294},189,"olpf6dkja4wvu70058la7vrn","2025-06-12T07:23:32.384Z","2025-07-08T16:49:29.208Z","2025-07-08T16:49:29.227Z",[284,287,289,292],{"_38":109,"_7":285,"_111":286,"_113":114},66,"

Instagram Post Template

Eine Figma-Community-Vorlage.

",{"_38":210,"_7":288,"_212":235},289,{"_38":109,"_7":290,"_111":291,"_113":27},67,"

Figma Interactive Menu

Eine Figma-Community-Vorlage für moderne Mega-Menüs.

",{"_38":210,"_7":293,"_212":235},290,{"_7":278,"_153":274,"_154":274},{"_7":296,"_21":297,"_23":298,"_26":27,"_24":299,"_28":300},314,"TechHUB","ShoppingBag","techhub",{"_7":301,"_9":302,"_11":303,"_13":304,"_15":305,"_35":306,"_151":316},221,"ck5ggd7f1u2hzm9nzw9fphle","2025-06-17T07:34:14.253Z","2025-08-07T09:37:42.341Z","2025-08-07T09:37:42.355Z",[307,309,312],{"_38":182,"_7":200,"_111":308},"

TechHUB

Im Rahmen meines Google-Zertifikats im Bereich UX-Design durfte ich eine Projektarbeit zum Thema E-Commerce im Bereich Hardware-Versand ausarbeiten. Dabei ist der Markennamen TechHUB enstanden, inklusive einer passenden Bildmarke.

",{"_38":210,"_7":310,"_212":311},358,"mt-5",{"_38":186,"_7":313,"_188":314,"_190":315,"_192":114},168,"https://www.figma.com/proto/lW2laogQED0mFgSactnXkh/TECHHUB-SHOPWARE?node-id=405-3853&t=uu7s9q2XIW1CCGhb-1&starting-point-node-id=405%3A3853","Figma",{"_7":301,"_153":317,"_154":317},"TechHub",{"_7":319,"_21":320,"_23":321,"_26":27,"_24":322,"_28":323},315,"UI Library","Diameter","ui-library",{"_7":324,"_9":325,"_11":326,"_13":327,"_15":328,"_35":329,"_151":341},224,"qkdt4g12q6usfxp83ls1djru","2025-08-07T09:39:54.215Z","2025-08-07T09:40:47.753Z","2025-08-07T09:40:47.775Z",[330,332,334,336,338],{"_38":182,"_7":301,"_111":331},"

UI Library - Starter Kit

Dieses Figma-Projekt wurde als skalierbare Designvorlage konzipiert, um digitale Projekte innerhalb eines einheitlichen Corporate Designs effizient umzusetzen. Die Struktur basiert auf Figma-Variablen für maximale Flexibilität, Wiederverwendbarkeit und zentrale Steuerung. Ein weiterer zentraler Aspekt dieses Projekts ist die visuelle Dokumentation der Variablen. Um den Überblick zu verbessern, werden die verwendeten Variablen direkt neben den Komponenten in Tabellenform dargestellt. So lässt sich zum Beispiel bei einem Button klar nachvollziehen, welche Farb-, Größen- oder Font-Variablen aktiv sind und welchen aktuellen Wert sie haben. Das erleichtert die Zusammenarbeit im Team, beschleunigt die Einarbeitung und sorgt für bessere Nachvollziehbarkeit im Designprozess.

",{"_38":210,"_7":333,"_212":235},361,{"_38":39,"_7":335},113,{"_38":210,"_7":337,"_212":235},362,{"_38":186,"_7":339,"_188":340,"_190":315,"_192":114},170,"https://www.figma.com/design/kNIlR7Df5MG2jlUxYLNUWh/UI-Library---Starter-Kit?node-id=2-52&t=xxmIjq3XYe96ipfU-1",{"_7":324,"_153":342,"_154":342},"UI Library ",{"_7":344,"_9":345,"_45":346,"_47":-5,"_48":-5,"_49":347,"_51":348,"_53":349,"_58":357,"_60":61,"_62":63,"_67":358,"_24":359,"_102":-5,"_103":104,"_105":-5,"_11":360,"_13":360,"_15":361},3,"nnqkp49oqxenjly617swc6nb","Navigation - CTA (1).png",269,333,{"_55":350},{"_45":351,"_58":352,"_60":61,"_62":63,"_64":-5,"_49":353,"_51":124,"_67":354,"_69":355,"_24":356},"thumbnail_Navigation - CTA (1).png","thumbnail_Navigation_CTA_1_9b32481750",126,3.73,3730,"/uploads/thumbnail_Navigation_CTA_1_9b32481750.png","Navigation_CTA_1_9b32481750",1.38,"/uploads/Navigation_CTA_1_9b32481750.png","2025-06-11T13:50:14.946Z","2025-06-11T13:50:14.947Z",{"_7":250,"_21":363,"_23":-5,"_24":364,"_26":114,"_28":365,"_155":376,"_157":-5},"Datenschutz","datenschutz",{"_7":366,"_9":367,"_11":368,"_13":369,"_15":370,"_35":371,"_151":375},159,"jafnqrgwy08osbyo8vebu1ht","2025-06-12T07:36:49.020Z","2025-06-18T08:09:45.301Z","2025-06-18T08:09:45.311Z",[372],{"_38":182,"_7":373,"_111":374},153,"

Datenschutzerklärung

Der Schutz Ihrer persönlichen Daten ist mir ein besonderes Anliegen. Ich verarbeite Ihre Daten daher ausschließlich auf Grundlage der gesetzlichen Bestimmungen (DSGVO, TMG). In dieser Datenschutzerklärung informiere ich Sie über die wichtigsten Aspekte der Datenverarbeitung im Rahmen meiner Website.

1. Allgemeine Hinweise zur Datenverarbeitung
Beim Besuch dieser Website werden keine personenbezogenen Daten erhoben, gespeichert oder verarbeitet. Es kommen weder Kontaktformulare, noch Cookies, noch iFrames zum Einsatz.

2. Server-Logfiles
Der Hosting-Provider dieser Website erhebt und speichert automatisch Informationen in sogenannten Server-Logfiles, die Ihr Browser automatisch übermittelt. Dazu gehören:

Browsertyp und -version
Verwendetes Betriebssystem
Referrer-URL
Hostname des zugreifenden Rechners
Uhrzeit der Serveranfrage

Diese Daten sind nicht bestimmten Personen zuordenbar. Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen.

3. Ihre Rechte
Sie haben das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Datenübertragbarkeit, Widerruf und Widerspruch. Wenn Sie glauben, dass die Verarbeitung Ihrer Daten gegen das Datenschutzrecht verstößt, können Sie sich bei der zuständigen Aufsichtsbehörde beschweren.

4. Kontakt
Bei Fragen zum Datenschutz können Sie mich unter der im Impressum angegebenen Adresse kontaktieren.

",{"_7":366,"_153":363,"_154":363},[],{"_7":378,"_21":379,"_23":-5,"_24":380,"_26":114,"_28":381,"_155":392,"_157":-5},195,"Impressum","impressum",{"_7":382,"_9":383,"_11":384,"_13":385,"_15":386,"_35":387,"_151":391},158,"a0mylvixqnj0ckvic6whegqt","2025-06-12T07:37:04.200Z","2025-06-18T08:09:34.416Z","2025-06-18T08:09:34.427Z",[388],{"_38":182,"_7":389,"_111":390},152,"

Impressum

Angaben gemäß § 5 TMG

Lars Larsen
Zur Laage 7B
38518 Gifhorn
Germany

Kontakt
E-Mail: craftfiredesign@gmail.com

Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV
Lars Larsen
Zur Laage 7B
38518 Gifhorn
Germany

Urheberrecht
Die durch den Betreiber dieser Website erstellten Inhalte und Werke unterliegen dem deutschen Urheberrecht. Beiträge Dritter sind als solche gekennzeichnet. 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.

Haftungsausschluss (Disclaimer)
Die Inhalte dieser Website wurden mit größtmöglicher Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann jedoch keine Gewähr übernommen werden.

",{"_7":382,"_153":379,"_154":379},[],"index",{"_7":30,"_9":31,"_11":32,"_13":33,"_15":34,"_35":395,"_151":410},[396,403],{"_38":39,"_7":40,"_41":397},{"_7":43,"_9":44,"_45":46,"_47":-5,"_48":-5,"_49":50,"_51":52,"_53":398,"_58":99,"_60":61,"_62":63,"_67":100,"_24":101,"_102":-5,"_103":104,"_105":-5,"_11":106,"_13":106,"_15":107},{"_55":399,"_72":400,"_81":401,"_90":402},{"_45":57,"_58":59,"_60":61,"_62":63,"_64":-5,"_49":65,"_51":66,"_67":68,"_69":70,"_24":71},{"_45":74,"_58":75,"_60":61,"_62":63,"_64":-5,"_49":76,"_51":77,"_67":78,"_69":79,"_24":80},{"_45":83,"_58":84,"_60":61,"_62":63,"_64":-5,"_49":85,"_51":86,"_67":87,"_69":88,"_24":89},{"_45":92,"_58":93,"_60":61,"_62":63,"_64":-5,"_49":94,"_51":95,"_67":96,"_69":97,"_24":98},{"_38":109,"_7":110,"_111":112,"_113":114,"_41":404,"_150":-5},{"_7":116,"_9":117,"_45":118,"_47":-5,"_48":-5,"_49":119,"_51":119,"_53":405,"_58":146,"_60":61,"_62":63,"_67":147,"_24":148,"_102":-5,"_103":104,"_105":-5,"_11":149,"_13":149,"_15":149},{"_55":406,"_72":407,"_81":408,"_90":409},{"_45":122,"_58":123,"_60":61,"_62":63,"_64":-5,"_49":124,"_51":124,"_67":125,"_69":126,"_24":127},{"_45":129,"_58":130,"_60":61,"_62":63,"_64":-5,"_49":76,"_51":76,"_67":131,"_69":132,"_24":133},{"_45":135,"_58":136,"_60":61,"_62":63,"_64":-5,"_49":85,"_51":85,"_67":137,"_69":138,"_24":139},{"_45":141,"_58":142,"_60":61,"_62":63,"_64":-5,"_49":94,"_51":94,"_67":143,"_69":144,"_24":145},{"_7":30,"_153":22,"_154":22},"routes/$id",{"_413":-5},"data","actionData","errors"]