ADD: NuxtContent
For RichText and blog later
This commit is contained in:
parent
9930b39578
commit
73f09ad76e
8 changed files with 3230 additions and 428 deletions
|
|
@ -3,13 +3,7 @@
|
|||
<h2>Jetzt mal ganz konkret.</h2>
|
||||
<h3>In diesem Abschnitt ganz <span class="highlight">ohne Technik-Blabla</span>.</h3>
|
||||
<div class="skill-container flex-col margin-top gap-default">
|
||||
<Teaser
|
||||
v-for="(skill, skillIndex) in skills"
|
||||
:title="skill.title"
|
||||
:image="{ path: '/img/explanations/', name : skill.img, position: skillIndex % 2 ? 'right' : 'left'}"
|
||||
>
|
||||
<RichText :elements="skill.text" />
|
||||
</Teaser>
|
||||
<ContentRenderer v-for="skill in skills" :key="skill.id" :value="skill" :style="{ display: 'contents' }" />
|
||||
</div>
|
||||
<div class="bottom flex-col margin-top gap-default">
|
||||
<h3>Verwirkliche jetzt dein Webprojekt.</h3>
|
||||
|
|
@ -32,234 +26,236 @@ type Skill = {
|
|||
|
||||
const getExplanationImage = (img : string) => getImage('/img/explanations/', img)
|
||||
|
||||
const skills : Skill[] = [
|
||||
{
|
||||
img: 'components',
|
||||
title: 'Das, was du sehen kannst',
|
||||
text: [
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Die meisten Anwendungen haben eine grafische Benutzeroberfläche - die so genannte GUI. Wenn etwas graphisch ist, ' +
|
||||
'dann bedeutet das auch natürlich, dass es sinnvoll dargestellt werden muss. Dafür verwenden wir kleine Bausteine, die wir Komponenten nennen.',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Grundsätzlich lassen sich komplette Anwendungen und auch einfache Webseiten ziemlich cool über Komponenten aufbauen, sodass wir wiederkehrende Elemente ' +
|
||||
'wie Buttons, Textabschnitte, Links oder Teaser immer wieder verwenden können - selbst wenn sich diese in ihren Details wie Farben oder Icons unterscheiden.',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Diese Komponenten so zu entwickeln, dass sie wirklich flexibel sind und auch perfekt mit dem Design übereinstimmen ist gar nicht so einfach, denn oft sollten sie ' +
|
||||
'auch mehr können als im Design kurzfristig ersichtlich ist.',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'p',
|
||||
css: 'place-bottom bold',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Diese Voraussicht, für den Fall der Fälle vorzusorgen:',
|
||||
},
|
||||
{
|
||||
type: 'br',
|
||||
},
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Die gibt\'s bei mir dazu.',
|
||||
},
|
||||
{
|
||||
type: 'br',
|
||||
},
|
||||
{
|
||||
type: 'span',
|
||||
css: 'highlight',
|
||||
content: 'Fussel-Ehrenwort.'
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
}, {
|
||||
img: 'cms',
|
||||
title: 'Da, wo du eintragen kannst',
|
||||
text: [
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'In vielen Fällen ist es natürlich praktisch, wenn du einfach Inhalte einer Seite auf das ändern kannst, was gerade aktuell ist, ohne auf andere angewiesen zu sein.'
|
||||
+ 'Damit das reibungslos möglich ist, entwickle ich dir gerne eine Anwendung oder Homepage, deren Inhalte du komplett selbst auf dem neuesten Stand halten kannst - und zwar '
|
||||
+ 'mit einem sogenannten CMS - ein ',
|
||||
},
|
||||
{
|
||||
type: 'span',
|
||||
css: 'highlight',
|
||||
content: 'C'
|
||||
},
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'ontent '
|
||||
},
|
||||
{
|
||||
type: 'span',
|
||||
css: 'highlight',
|
||||
content: 'M'
|
||||
},
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'anagement '
|
||||
},
|
||||
{
|
||||
type: 'span',
|
||||
css: 'highlight',
|
||||
content: 'S'
|
||||
},
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'ystem.'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Für CMS setze ich in erster Linie auf die cloudbasierte Lösung ',
|
||||
},
|
||||
{
|
||||
type: 'a',
|
||||
target: '_blank',
|
||||
css: 'text',
|
||||
href: 'https://www.storyblok.com',
|
||||
content: 'Storyblok'
|
||||
},
|
||||
{
|
||||
type: 'plain',
|
||||
content: '. Dies stellt für die Meisten eine kostenlose bis kostengünstige Lösung dar ohne viel technisches Wissen mitbringen zu müssen.',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Falls du aber nicht möchtest, dass deine Daten auf irgendeinem Fremden server liegen - was ich durchaus verstehen kann! - dann gibt es auch die Möglichkeit mit ',
|
||||
},
|
||||
{
|
||||
type: 'a',
|
||||
target: '_blank',
|
||||
css: 'text',
|
||||
href: 'https://www.strapi.io',
|
||||
content: 'Strapi'
|
||||
},
|
||||
{
|
||||
type: 'plain',
|
||||
content: ' selbst das eigene CMS zu hosten. Das musst du dann aber allerdings selbst erledigen oder ich erledige das für dich für einen Aufpreis.',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'p',
|
||||
css: 'place-bottom bold',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Nie wieder jemand anderen Fragen zu müssen, um deine Website auf dem neuesten Stand zu halten.',
|
||||
},
|
||||
{
|
||||
type: 'br',
|
||||
},
|
||||
{
|
||||
type: 'span',
|
||||
css: 'highlight',
|
||||
content: 'Mit Fussel-Garantie.'
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
}, {
|
||||
img: 'result',
|
||||
title: 'Was dabei am Ende rauskommt',
|
||||
text: [
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Grundsätzlich lässt sich das ganz einfach zusammenfassen: ',
|
||||
},
|
||||
{
|
||||
type: 'span',
|
||||
css: 'highlight',
|
||||
content: 'Dein persönlicher Webauftritt.',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Ob du nun etwas kleineres brauchst, um ein paar Hobbies zu zeigen. Oder vielleicht etwas größeres, weil du dir ein eigenes Business aufbauen willst. Eventuell ein eigener Blog, eine komplette Applikation oder '
|
||||
+ 'die Möglichkeit für andere Leute deine Daten bereit zu stellen. All das, das kann ich dir mit meinen Fähigkeiten und meiner Erfahrung bieten.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'p',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Erkunde einfach meine ',
|
||||
},
|
||||
{
|
||||
type: 'a',
|
||||
href: '/references',
|
||||
content: 'Referenzen'
|
||||
},
|
||||
{
|
||||
type: 'plain',
|
||||
content: ' und dir wird auffallen, dass diese äußerst durchmischt und bunt sind. So individuell wie die Projekte meiner bisherigen Kunden wird auch dein Projekt behandelt. Und auch, wenn '
|
||||
+ 'du glaubst, dass die Referenzen nicht zu deinem Projekt passen, werden wir deine ganz individuelle Lösung gemeinsam erarbeiten.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'p',
|
||||
css: 'place-bottom bold',
|
||||
children: [
|
||||
{
|
||||
type: 'plain',
|
||||
content: 'Denn jedes Projekt ist etwas eigenes und besonderes.',
|
||||
},
|
||||
{
|
||||
type: 'br',
|
||||
},
|
||||
{
|
||||
type: 'span',
|
||||
css: 'highlight',
|
||||
content: 'Auch deins.'
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
// const skills : Skill[] = [
|
||||
// {
|
||||
// img: 'components',
|
||||
// title: 'Das, was du sehen kannst',
|
||||
// text: [
|
||||
// {
|
||||
// type: 'p',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Die meisten Anwendungen haben eine grafische Benutzeroberfläche - die so genannte GUI. Wenn etwas graphisch ist, ' +
|
||||
// 'dann bedeutet das auch natürlich, dass es sinnvoll dargestellt werden muss. Dafür verwenden wir kleine Bausteine, die wir Komponenten nennen.',
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// type: 'p',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Grundsätzlich lassen sich komplette Anwendungen und auch einfache Webseiten ziemlich cool über Komponenten aufbauen, sodass wir wiederkehrende Elemente ' +
|
||||
// 'wie Buttons, Textabschnitte, Links oder Teaser immer wieder verwenden können - selbst wenn sich diese in ihren Details wie Farben oder Icons unterscheiden.',
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// type: 'p',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Diese Komponenten so zu entwickeln, dass sie wirklich flexibel sind und auch perfekt mit dem Design übereinstimmen ist gar nicht so einfach, denn oft sollten sie ' +
|
||||
// 'auch mehr können als im Design kurzfristig ersichtlich ist.',
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// type: 'p',
|
||||
// css: 'place-bottom bold',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Diese Voraussicht, für den Fall der Fälle vorzusorgen:',
|
||||
// },
|
||||
// {
|
||||
// type: 'br',
|
||||
// },
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Die gibt\'s bei mir dazu.',
|
||||
// },
|
||||
// {
|
||||
// type: 'br',
|
||||
// },
|
||||
// {
|
||||
// type: 'span',
|
||||
// css: 'highlight',
|
||||
// content: 'Fussel-Ehrenwort.'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// ],
|
||||
// }, {
|
||||
// img: 'cms',
|
||||
// title: 'Da, wo du eintragen kannst',
|
||||
// text: [
|
||||
// {
|
||||
// type: 'p',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'In vielen Fällen ist es natürlich praktisch, wenn du einfach Inhalte einer Seite auf das ändern kannst, was gerade aktuell ist, ohne auf andere angewiesen zu sein.'
|
||||
// + 'Damit das reibungslos möglich ist, entwickle ich dir gerne eine Anwendung oder Homepage, deren Inhalte du komplett selbst auf dem neuesten Stand halten kannst - und zwar '
|
||||
// + 'mit einem sogenannten CMS - ein ',
|
||||
// },
|
||||
// {
|
||||
// type: 'span',
|
||||
// css: 'highlight',
|
||||
// content: 'C'
|
||||
// },
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'ontent '
|
||||
// },
|
||||
// {
|
||||
// type: 'span',
|
||||
// css: 'highlight',
|
||||
// content: 'M'
|
||||
// },
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'anagement '
|
||||
// },
|
||||
// {
|
||||
// type: 'span',
|
||||
// css: 'highlight',
|
||||
// content: 'S'
|
||||
// },
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'ystem.'
|
||||
// },
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// type: 'p',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Für CMS setze ich in erster Linie auf die cloudbasierte Lösung ',
|
||||
// },
|
||||
// {
|
||||
// type: 'a',
|
||||
// target: '_blank',
|
||||
// css: 'text',
|
||||
// href: 'https://www.storyblok.com',
|
||||
// content: 'Storyblok'
|
||||
// },
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: '. Dies stellt für die Meisten eine kostenlose bis kostengünstige Lösung dar ohne viel technisches Wissen mitbringen zu müssen.',
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// type: 'p',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Falls du aber nicht möchtest, dass deine Daten auf irgendeinem Fremden server liegen - was ich durchaus verstehen kann! - dann gibt es auch die Möglichkeit mit ',
|
||||
// },
|
||||
// {
|
||||
// type: 'a',
|
||||
// target: '_blank',
|
||||
// css: 'text',
|
||||
// href: 'https://www.strapi.io',
|
||||
// content: 'Strapi'
|
||||
// },
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: ' selbst das eigene CMS zu hosten. Das musst du dann aber allerdings selbst erledigen oder ich erledige das für dich für einen Aufpreis.',
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// type: 'p',
|
||||
// css: 'place-bottom bold',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Nie wieder jemand anderen Fragen zu müssen, um deine Website auf dem neuesten Stand zu halten.',
|
||||
// },
|
||||
// {
|
||||
// type: 'br',
|
||||
// },
|
||||
// {
|
||||
// type: 'span',
|
||||
// css: 'highlight',
|
||||
// content: 'Mit Fussel-Garantie.'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// ],
|
||||
// }, {
|
||||
// img: 'result',
|
||||
// title: 'Was dabei am Ende rauskommt',
|
||||
// text: [
|
||||
// {
|
||||
// type: 'p',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Grundsätzlich lässt sich das ganz einfach zusammenfassen: ',
|
||||
// },
|
||||
// {
|
||||
// type: 'span',
|
||||
// css: 'highlight',
|
||||
// content: 'Dein persönlicher Webauftritt.',
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// type: 'p',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Ob du nun etwas kleineres brauchst, um ein paar Hobbies zu zeigen. Oder vielleicht etwas größeres, weil du dir ein eigenes Business aufbauen willst. Eventuell ein eigener Blog, eine komplette Applikation oder '
|
||||
// + 'die Möglichkeit für andere Leute deine Daten bereit zu stellen. All das, das kann ich dir mit meinen Fähigkeiten und meiner Erfahrung bieten.'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// type: 'p',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Erkunde einfach meine ',
|
||||
// },
|
||||
// {
|
||||
// type: 'a',
|
||||
// href: '/references',
|
||||
// content: 'Referenzen'
|
||||
// },
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: ' und dir wird auffallen, dass diese äußerst durchmischt und bunt sind. So individuell wie die Projekte meiner bisherigen Kunden wird auch dein Projekt behandelt. Und auch, wenn '
|
||||
// + 'du glaubst, dass die Referenzen nicht zu deinem Projekt passen, werden wir deine ganz individuelle Lösung gemeinsam erarbeiten.'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// type: 'p',
|
||||
// css: 'place-bottom bold',
|
||||
// children: [
|
||||
// {
|
||||
// type: 'plain',
|
||||
// content: 'Denn jedes Projekt ist etwas eigenes und besonderes.',
|
||||
// },
|
||||
// {
|
||||
// type: 'br',
|
||||
// },
|
||||
// {
|
||||
// type: 'span',
|
||||
// css: 'highlight',
|
||||
// content: 'Auch deins.'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// ],
|
||||
// }
|
||||
// ]
|
||||
|
||||
const skills = await queryCollection('skills').all()
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue