Text

H 1

This is a headline

H 2

This is a headline

H 3

This is a headline

H 4

This is a headline

H 5

This is a headline

Display

Display 1

Display Variants

Display 1
Display 2
Display 3
Display 4
Display 5
Display 6

Hr

Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Variants

BG Primary: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Link

BG Light: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Link

Text Note - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text Lead - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text large - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text small - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text center - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text start (left) - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text end (right) - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lowercased text.

Uppercased text.

Capitalized text.

.fs-1 text.

.fs-2 text.

.fs-3 text.

.fs-4 text.

.fs-5 text.

.fs-6 text.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

Line height 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Line height SM: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Line height Base: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Line height LG: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Unordered

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ordered

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Definition

Term 1
1. This is the definition of the term.
Term 2 with too much characters
2. This is the definition of the term.
Term 3
3. This is the definition of the term.

Lists Variants

  • List custom - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • List custom (nested) - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • List custom - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • List custom (nested) - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • List unstyled - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • List unstyled (nested) - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • List unstyled - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • List unstyled (nested) - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Table

Default Table
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
row 4 cell 1 row 4 cell 2 row 4 cell 3 row 4 cell 4

Table Variants

Table with hover rows
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
Table with even, odd striped rows
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
Table with border
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
Table without border
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
Table small
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
Table based primary color
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
Table based secondary color
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
Table based of light color
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4
Table based dark color
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
row 2 cell 1 row 2 cell 2 row 2 cell 3 row 2 cell 4
row 3 cell 1 row 3 cell 2 row 3 cell 3 row 3 cell 4

Image

Audio

Video

Embed

Icon

Button

Button Submit

Button Variants

Legend

Legend

Label

Input

Select

Textarea

Checkbox

Radio

Figure

alternative text
Some caption

Navbar

Navs

Input

Select

Textarea

Checkbox

Radio

Textmedia

This is a headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

link text

Timeline

  • 1972
    Born

Address

Dirk Wolke

Hagenholt 10
48324 Sendenhorst

Chart

Skill
95%

Modal

open Modal

Header

Direkt zu den Inhalten springen

Main

Main area

The

HTML element represents the dominant content of the of a document.

Form Contact

Bitte Ihren Namen eintragen.
Bitte eine valide E-Mail eintragen.
Bitte ausfüllen.
*
Bitte stimmen Sie zu.

Home

Direkt zu den Inhalten springen
DW

Dirk Wolke

Nach meiner Ausbildung zum Mediengestalter für Digital- und Printmedien 2004 habe ich ein 2 monatiges Praktikum bei einer Internetagentur in Münster gemacht und meine Leidenschaft für das Programmieren von Webseiten mit dem Enterprise CMS TYPO3 für mich entdeckt.

Von 2005 bis 2009 war ich erst als freier Mitarbeiter für verschiedene Agenturen in Münster als Webentwickler tätig, seitdem bin ich fortlaufend in Festeinstellung als Webentwickler mit Schwerkunkt Frontendentwicklung angestellt.

Meine Hauptaufgabe besteht darin, das Design und die Funktionalität möglichst mit TYPO3 eigenen Bordmitteln umzusetzen. In der Regel wird das Frontend zuvor nach dem Atomic-Design-Prinzip unter Berücksichtigung der Barrierefreiheit nach BITV und dem CI/CD in PatternLab interaktiv umgesetzt, welches unabhängig von TYPO3 auch für andere Webanwendungen genutzt werden kann. Dies hat den Vorteil, dass schon von Anfang an Komponenten mit allen Beteiligten getestet und abgestimmt werden können. Das PatternLab von dieser Seite findest Du unter styleguide.dirk-wolke.de

  • 2022
    Webentwickler bei p2 media
  • 2018
    Webentwickler bei strich komma
  • 2017
    Senior Webentwickler bei cyclos
  • 2011
    TYPO3 CMS Certified Integrator
  • 2009
    Webentwickler bei elemente
  • 2005
    Freiberuflich als Webentwickler
  • 2004
    Ausbildung Mediengestalter
  • 1980
    Ausbildung Tischler

CSS / SASS
95%

HTML / Fluid
93%

JavaScript
85%

TypoScript
96%

Kontakt

macbook

Forumlar

Bitte Ihren Namen eintragen.
Bitte eine valide E-Mail eintragen.
Bitte ausfüllen.
*
Bitte stimmen Sie zu.

Anschrift

Dirk Wolke

Hagenholt 10
48324 Sendenhorst