| theme | title | info | layout | logo | background | transition | themeConfig | mdc | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
onecraft |
Welcome to Slidev |
## Slidev Starter Template
Presentation slides for developers.
Learn more at [Sli.dev](https://sli.dev)
|
cover |
slide-left |
|
true |
A Capgemini Onecraft template for developers
Yohann Ciurlik
Digital Customer eXperience
01 avril 2025
layout: cover logo: 'https://raw.githubusercontent.com/spawnrider/slidev-theme-onecraft/refs/heads/master/public/logos/logo_onecraft_fond_couleur.png' background: "https://raw.githubusercontent.com/spawnrider/slidev-theme-onecraft/refs/heads/master/public/backgrounds/background8.jpeg"
Another cover exemple
Yohann Ciurlik
Digital Customer eXperience
01 avril 2025
layout: cover logo: 'https://raw.githubusercontent.com/spawnrider/slidev-theme-onecraft/refs/heads/master/public/logos/logo_onecraft_fond_couleur.png' background: "https://raw.githubusercontent.com/spawnrider/slidev-theme-onecraft/refs/heads/master/public/backgrounds/background13.jpeg"
Another cover exemple
Yohann Ciurlik
Digital Customer eXperience
01 avril 2025
layout: cover logo: 'https://raw.githubusercontent.com/spawnrider/slidev-theme-onecraft/refs/heads/master/public/logos/logo_onecraft_fond_couleur.png' background: '#272936'
Another cover exemple with a gray background
Yohann Ciurlik
Digital Customer eXperience
01 avril 2025
layout: cover logo: 'https://raw.githubusercontent.com/spawnrider/slidev-theme-onecraft/refs/heads/master/public/logos/logo_capgemini_blanc.svg' background: "https://raw.githubusercontent.com/spawnrider/slidev-theme-onecraft/refs/heads/master/public/backgrounds/background5.jpeg" dimmed: true
Capgemini cover exemple
Yohann Ciurlik
Digital Customer eXperience
01 avril 2025
layout: image-right image: 'https://raw.githubusercontent.com/spawnrider/slidev-theme-onecraft/refs/heads/master/public/bulb.jpg'
A layout with image on the right
- Introduction
- A topic
- Another topic
- Yet another topic
- Outro
layout: 'presenter' presenterImage: 'https://avatars.githubusercontent.com/u/107427?v=4'
Solution architect at Capgemini
- Paris, France 🇫🇷
- I often write at medium.com/@spawnrider
- Github porfolio at spawnrider
- Say hi at @yohann.ciurlik.fr
layout: image-right image: https://images.unsplash.com/photo-1535223289827-42f1e9919769?q=80&w=2574&auto=format&fit=crop
Presentation slides for developers
Press Space for next page
Loading
Loading
Loading
background: 'https://raw.githubusercontent.com/spawnrider/slidev-theme-onecraft/refs/heads/master/public/backgrounds/background12.jpeg'
Slidev is a slide maker and presentation tool designed for developers. It includes the following features:
- 📝 Text-based - focus on your content with Markdown, then style it later
- 🎨 Themable - themes can be shared and reused as npm packages
- 🧑💻 Developer Friendly - code highlighting, live coding with autocompletion
- 🤹 Interactive - embed Vue components to enhance your expressions
- 🎥 Recording - built-in recording and camera view
- 📤 Portable - export to PDF, PPTX, PNGs, or even a hostable SPA
- 🛠 Hackable - virtually anything that's possible on a webpage is possible in Slidev
Read more about Why Slidev?
background: 'https://raw.githubusercontent.com/spawnrider/slidev-theme-onecraft/refs/heads/master/public/backgrounds/background9.jpeg'
Hover on the bottom-left corner to see the navigation's controls panel
| space / tab / right | next animation or slide |
| left / shiftspace | previous animation or slide |
| up | previous slide |
| down | next slide |
layout: image-right image: https://cover.sli.dev
Use code snippets and get the highlighting directly!
// TwoSlash enables TypeScript hover information
// and errors in markdown code blocks
// More at https://shiki.style/packages/twoslash
import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
doubled.value = 2You can create diagrams / graphs from textual descriptions, directly in your Markdown.
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
@startuml
package "Some Group" {
HTTP - [First Component]
[Another Component]
}
node "Other Groups" {
FTP - [Second Component]
[First Component] --> FTP
}
cloud {
[Example 1]
}
database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}
[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]
@endumlLearn more: Mermaid Diagrams and PlantUML Diagrams
layout: text-image media: 'https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExY2Izd3EzZnhvY2ZxM2wydHN6aGwzeXZldG9wanVkMzBvd3l4MHgyMyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/13rQ7rrTrvZXlm/giphy.gif' caption: 'It''s incredible'
Arepa ipsum dolor amet jalabola! aenean sit tequeños se prendio esta chamito;? Nisl nojoda eu amet in? Nisl cuál es la guachafita ni lava ni presta la batea háblame cloro gravida sifrino macundal panita; Sed háblame cloro nunc empanada ac coroto Na webona vladimil parchita?
- Cacique panita sit Se prendio la labia gravida Praesent tequeño.
- Qué paso mi pana?! elit parchita molleja aguacate vergación, háblame mollejúo chamito est burda mauris morbi;
layout: text-image reverse: true media: 'https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExY2Izd3EzZnhvY2ZxM2wydHN6aGwzeXZldG9wanVkMzBvd3l4MHgyMyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/13rQ7rrTrvZXlm/giphy.gif'
Arepa ipsum dolor amet jalabola! aenean sit tequeños se prendio esta mierdaa menool ladilla chamito;? Nisl nojoda eu amet in
Awiwiiw
// Model.vue
<script setup lang="ts">
import { useAnimations, useGLTF } from '@tresjs/cientos'
const { scene: model, animations } = await useGLTF(
'models/ugly-bunny.gltf',
)
const { actions, mixer } = useAnimations(animations, model)
const currentAction = ref(actions.Greeting)
currentAction.value.play()
</script>
<template>
<primitive :object="model" />
</template>::right::
<template>
<TresCanvas
clear-color="”#82DBC5”"
window-size
>
<TresPerspectiveCamera />
<Suspense>
<Model />
</Suspense>
</TresCanvas>
</template>Awiwiiw
// Model.vue
<script setup lang="ts">
import { useAnimations, useGLTF } from '@tresjs/cientos'
const { scene: model, animations } = await useGLTF(
'models/ugly-bunny.gltf',
)
const { actions, mixer } = useAnimations(animations, model)
const currentAction = ref(actions.Greeting)
currentAction.value.play()
</script>
<template>
<primitive :object="model" />
</template>::right::
<template>
<TresCanvas
clear-color="”#82DBC5”"
window-size
>
<TresPerspectiveCamera />
<Suspense>
<Model />
</Suspense>
</TresCanvas>
</template>Use code snippets and get the highlighting directly into a nice looking window!
::window::
// main.ts
import { createDynamicForms } from '@asigloo/vue-dynamic-forms'
import { createApp } from 'vue'
const VueDynamicForms = createDynamicForms({
// Global Options go here
})
export const app = createApp(App)
app.use(VueDynamicForms)Use window to show a live demo of any page, or even a sub component!
::window::
<iframe height="300" style="width: 100%;" scrolling="no" title="Text Clock" src="https://codepen.io/searleb/embed/VYwRYEw?default-tab=result%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>