-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ganze Sektionen/Komponenten können nun hinzugefügt und entfernt werden
- Loading branch information
1 parent
d3f8503
commit 31ac35b
Showing
8 changed files
with
338 additions
and
265 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
dist/assets/Datenschutz-98e7edeb.js → dist/assets/Datenschutz-2f3b20a5.js
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
2 changes: 1 addition & 1 deletion
2
dist/assets/Impressum-642106a9.js → dist/assets/Impressum-41be2ea4.js
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
2 changes: 1 addition & 1 deletion
2
dist/assets/index-66451129.css → dist/assets/index-ba0ac5a4.css
Large diffs are not rendered by default.
Oops, something went wrong.
378 changes: 189 additions & 189 deletions
378
dist/assets/index-0101db5c.js → dist/assets/index-d4e04eee.js
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <template> | ||
| <div contenteditable="true" ref="editableContent"> | ||
| <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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit | ||
| esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at | ||
| vero eros et accumsan et iusto odio dignissim qui blandit praesent | ||
| luptatum zzril delenit augue duis dolore te feugait nulla facilisi. | ||
| </p> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,135 @@ | ||
| <script setup> | ||
| /* | ||
| import TheWelcome from '../components/TheWelcome.vue' | ||
| */ | ||
| import { ref } from 'vue'; | ||
| import ImageGrid from '../components/ImageGrid.vue' | ||
| import Contact from '../components/Contact.vue' | ||
| import Hero from '../components/Hero.vue'; | ||
| import TeaserCards from '../components/TeaserCards.vue'; | ||
| import Skills from '../components/Skills.vue'; | ||
| import Model from '../components/3DModel.vue'; | ||
| </script> | ||
| import AboutMe from '../components/AboutMe.vue'; | ||
| <template> | ||
| <main> | ||
| <!-- | ||
| <TheWelcome /> | ||
| --> | ||
| <section id="section1"> | ||
| <Hero /> | ||
| </section> | ||
| <section id="section2"> | ||
| <h2>Über mich</h2> | ||
| <div contenteditable="true" ref="editableContent"> | ||
| <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. 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. | ||
|
|
||
| Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu | ||
| feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril | ||
| delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</p> | ||
| </div> | ||
| </section> | ||
| const sections = ref([ | ||
| { uniqueId: 'section1', component: Hero, props: {} }, | ||
| { uniqueId: 'section2', component: AboutMe, props: {title: 'Über mich'} }, | ||
| { uniqueId: 'section3', component: TeaserCards, props: {title: 'Meine Projekte'} }, | ||
| { uniqueId: 'section4', component: Skills, props: {title: 'Meine Skills'} }, | ||
| { uniqueId: 'section5', component: ImageGrid, props: {title: 'Galerie'} }, | ||
| { uniqueId: 'section6', component: Model, props: {title: '3D-Model'} }, | ||
| { uniqueId: 'section7', component: Contact, props: {} }, | ||
| ]); | ||
| <section id="section3"> | ||
| <h2>Meine Projekte</h2> | ||
| <TeaserCards/> | ||
| </section> | ||
| const availableSections = ref([ | ||
| { id: 'section1', component: Hero, props: { title: 'Startbild' } }, | ||
| { id: 'section2', component: AboutMe, props: { title: 'Über mich' } }, | ||
| { id: 'section3', component: TeaserCards, props: { title: 'Meine Projekte' } }, | ||
| { id: 'section4', component: Skills, props: { title: 'Meine Skills' } }, | ||
| { id: 'section5', component: ImageGrid, props: { title: 'Galerie' } }, | ||
| { id: 'section6', component: Model, props: { title: '3D-Model' } }, | ||
| { id: 'section7', component: Contact, props: { title: 'Kontaktformular' } }, | ||
| ]); | ||
| <section id="section4"> | ||
| <h2>Meine Skills</h2> | ||
| <Skills/> | ||
| </section> | ||
|
|
||
| <section id="section5"> | ||
| <h2>Galerie</h2> | ||
| <ImageGrid /> | ||
| </section> | ||
| let selectedSection = ref('section1'); // Standardwert im DropDown-Menü | ||
| <section id="section6"> | ||
| <h2>3D-Model</h2> | ||
| <Model /> | ||
| </section> | ||
|
|
||
| <section id="section7"> | ||
| <Contact /> | ||
| function generateUniqueId() { | ||
| return `section_${sections.value.length + 1}`; | ||
| } | ||
| function toggleHover(id, isHovered) { | ||
| const section = sections.value.find(section => section.uniqueId === id); | ||
| if (section) { | ||
| section.hovered = isHovered; | ||
| } | ||
| } | ||
| function addSelectedSection() { | ||
| const sectionToAdd = availableSections.value.find(section => section.id === selectedSection.value); | ||
| const uniqueId = generateUniqueId(); | ||
| if (sectionToAdd) { | ||
| if (sectionToAdd.id === availableSections.value[0].id || sectionToAdd.id === availableSections.value[availableSections.value.length - 1].id) { | ||
| sections.value.push({ id: sectionToAdd.id, component: sectionToAdd.component, props: {}, uniqueId }); | ||
| } else { | ||
| sections.value.push({ ...sectionToAdd, uniqueId }); | ||
| } | ||
| } | ||
| } | ||
| function removeSection(uniqueId) { | ||
| const index = sections.value.findIndex(section => section.uniqueId === uniqueId); | ||
| if (index !== -1) { | ||
| sections.value.splice(index, 1); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
|
|
||
| <template> | ||
| <main> | ||
| <!-- Bestehende Sektionen --> | ||
| <section | ||
| v-for="(section, index) in sections" | ||
| :key="section.uniqueId" | ||
| :class="{'section-container': true, 'first-section': section.uniqueId === 'section1'}" | ||
| @mouseenter="toggleHover(section.uniqueId, true)" | ||
| @mouseleave="toggleHover(section.uniqueId, false)" | ||
| > | ||
| <h2>{{ section.props.title }}</h2> | ||
| <component :is="section.component" v-bind="section.props" /> | ||
| <button | ||
| v-if="section.hovered" | ||
| class="remove-button" | ||
| @click="removeSection(section.uniqueId)" | ||
| > | ||
| X | ||
| </button> | ||
| </section> | ||
|
|
||
| <!-- Dropdown-Menü zur Auswahl von Sektionen --> | ||
| <select v-model="selectedSection"> | ||
| <option v-for="(section, index) in availableSections" :key="section.id" :value="section.id"> | ||
| {{ section.props.title }} | ||
| </option> | ||
| </select> | ||
| <button @click="addSelectedSection">Füge Komponente hinzu</button> | ||
| </main> | ||
| </template> | ||
|
|
||
|
|
||
| <style> | ||
| section { | ||
| padding-top: 80px; | ||
| } | ||
| #section1 { | ||
| .section-container { | ||
| position: relative; | ||
| } | ||
| .first-section { | ||
| padding-top: 0; | ||
| } | ||
| </style> | ||
| .remove-button { | ||
| position: absolute; | ||
| top: 64px; | ||
| right: 8px; | ||
| font-size: 20px; | ||
| color: white; | ||
| background-color: rgba(0, 145, 110, 1.0); | ||
| border: none; | ||
| cursor: pointer; | ||
| display: none; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
| .remove-button:hover { | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| } | ||
| .section-container:hover .remove-button { | ||
| display: block; | ||
| } | ||
| </style> | ||
|
|