diff --git a/docs/getting_started/main.md b/docs/getting_started/main.md index afec9750..d164645d 100644 --- a/docs/getting_started/main.md +++ b/docs/getting_started/main.md @@ -66,14 +66,42 @@ while ClearML ensures your work is reproducible and scalable. Want a more in depth introduction to ClearML? Choose where you want to get started: -* **Data Scientists** start [here](ds/ds_first_steps.md) - learn how to use ClearML's -experiment tracking and management tools, and more! -* **MLOps Engineers** start [here](mlops/mlops_first_steps.md) - learn how to use ClearML's -automation, orchestration, and tracking tools -* **DevOps Engineers** start [here](../deploying_clearml/clearml_server.md#deployment) - learn how -to deploy and configure a ClearML Server +
+
    +
  1. + + + +

    Data Scientists

    +

    Learn how to use ClearML's experiment tracking and management tools, and more!

    + + START HERE + +
    2. +
  2. + + + +

    MLOps Engineers

    +

    Learn how to use ClearML's automation, orchestration, and tracking tools

    + + START HERE + +
    3. +
  3. + + + +

    DevOps Engineers

    +

    Learn learn how to deploy and configure a ClearML Server

    + + START HERE + +
    4. +
+
## What Can You Do with ClearML? diff --git a/src/css/custom.css b/src/css/custom.css index 76347bd7..9c7e808d 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -917,4 +917,78 @@ html[data-theme="dark"] .panel-title:hover { background-repeat: no-repeat; background-position: center; background-size: contain; +} +.cml-card ol { + list-style-type: none; + display: flex; + padding: 48px 16px; + flex-wrap: wrap; + gap: 32px; + align-items: stretch; +} + +.cml-card li { + border: 1px solid rgba(0, 0, 0, 0.2); + text-align: center; + flex-grow: 1; + flex-basis: 0; + margin: 0 0 24px 0 !important; + padding: 48px 16px 32px; + border-radius: 6px; + position: relative; + min-height: 280px; + flex-direction: column; + display: flex; + align-items: center; +} + +.cml-card i { + width: 64px; + height: 64px; + position: absolute; + top: -32px; + left: calc(50% - 32px); + border-radius: 50%; + border: 1px solid rgba(0, 0, 0, 0.2); + display: flex; + align-items: center; + justify-content: center; + background-color: white; +} + +.cml-card i img { + filter: hue-rotate(25deg) invert(1); +} + +.cml-card .btn-link { + margin-top: auto; +} + +.cml-card .btn-link a:link, +.cml-card .btn-link a:visited { + display: inline-block; + border-radius: 6px; + font-weight: 700; + white-space: nowrap; + text-decoration: none !important; + padding: calc(var(--ifm-button-padding-vertical)*var(--ifm-button-size-multiplier)) calc(var(--ifm-button-padding-horizontal)*var(--ifm-button-size-multiplier)); + font-size: calc(.875rem*var(--ifm-button-size-multiplier)); + line-height: 1.5; + color: var(--ifm-button-color); + background-color: var(--ifm-color-primary); +} + +.cml-card .btn-link a:hover { + background-color: var(--ifm-color-primary-dark) +} + + +html[data-theme=dark] .cml-card li, +html[data-theme=dark] .cml-card i { + border-color: var(--ifm-color-gray-800); +} + +html[data-theme=dark] .cml-card i { + background-color: var(--ifm-background-color); + border-color: var(--ifm-color-gray-800); } \ No newline at end of file diff --git a/static/icons/ico-data-scientist.svg b/static/icons/ico-data-scientist.svg new file mode 100644 index 00000000..790323fd --- /dev/null +++ b/static/icons/ico-data-scientist.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/icons/ico-devops-engineer.svg b/static/icons/ico-devops-engineer.svg new file mode 100644 index 00000000..39421bf1 --- /dev/null +++ b/static/icons/ico-devops-engineer.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/icons/ico-mlops-engineer.svg b/static/icons/ico-mlops-engineer.svg new file mode 100644 index 00000000..a9476787 --- /dev/null +++ b/static/icons/ico-mlops-engineer.svg @@ -0,0 +1,7 @@ + + + + + + +