academy draft outline

docs/academy/_category_.json

@@ -0,0 +1,6 @@
+{
+  "position": 0,
+  "className": "hidden",
+  "collapsible": false,
+  "collapsed": false
+}

docs/academy/developer-track.md

@@ -0,0 +1,93 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import styles from './developer-track.module.css';
+
+# Developer track
+
+This track is designed for the personas who will be **using** (as opposed to building) the internal developer portal.
+
+It is focused on describing the different components of your portal (software catalog, actions, scorecards, etc.) and how to use them to accommodate your routines and workflows.
+
+## Available courses
+
+Courses are designed to be self-contained and can be taken in any order:
+
+<div className={styles.courseGrid}>
+  <div className={styles.courseCard}>
+    <div className={styles.courseIcon}>📚</div>
+    <h3>Getting Started with Port</h3>
+    <div className={styles.courseTags}>
+      <span className={`${styles.courseTag} ${styles.video}`}>Video</span>
+      <span className={`${styles.courseTag} ${styles.guide}`}>Guide</span>
+    </div>
+    <p>Learn the basics of navigating and using your developer portal effectively.</p>
+    <a href="/academy/developer-track/getting-started" className={styles.courseLink}>
+      Start Learning →
+    </a>
+  </div>
+
+  <div className={styles.courseCard}>
+    <div className={styles.courseIcon}>🔍</div>
+    <h3>Software Catalog Mastery</h3>
+    <div className={styles.courseTags}>
+      <span className={`${styles.courseTag} ${styles.documentation}`}>Documentation</span>
+      <span className={`${styles.courseTag} ${styles.guide}`}>Guide</span>
+    </div>
+    <p>Discover how to effectively use the software catalog to find and manage your services.</p>
+    <a href="/academy/developer-track/software-catalog" className={styles.courseLink}>
+      Start Learning →
+    </a>
+  </div>
+
+  <div className={styles.courseCard}>
+    <div className={styles.courseIcon}>⚡</div>
+    <h3>Working with Actions</h3>
+    <div className={styles.courseTags}>
+      <span className={`${styles.courseTag} ${styles.video}`}>Video</span>
+      <span className={`${styles.courseTag} ${styles.documentation}`}>Documentation</span>
+    </div>
+    <p>Master the use of self-service actions to streamline your development workflows.</p>
+    <a href="/academy/developer-track/actions" className={styles.courseLink}>
+      Start Learning →
+    </a>
+  </div>
+
+  <div className={styles.courseCard}>
+    <div className={styles.courseIcon}>📊</div>
+    <h3>Understanding Scorecards</h3>
+    <div className={styles.courseTags}>
+      <span className={`${styles.courseTag} ${styles.guide}`}>Guide</span>
+      <span className={`${styles.courseTag} ${styles.documentation}`}>Documentation</span>
+    </div>
+    <p>Learn how to interpret and use scorecards to track service health and metrics.</p>
+    <a href="/academy/developer-track/scorecards" className={styles.courseLink}>
+      Start Learning →
+    </a>
+  </div>
+
+  <div className={styles.courseCard}>
+    <div className={styles.courseIcon}>🔔</div>
+    <h3>Notifications & Alerts</h3>
+    <div className={styles.courseTags}>
+      <span className={`${styles.courseTag} ${styles.video}`}>Video</span>
+      <span className={`${styles.courseTag} ${styles.guide}`}>Guide</span>
+    </div>
+    <p>Configure and manage notifications to stay informed about important updates.</p>
+    <a href="/academy/developer-track/notifications" className={styles.courseLink}>
+      Start Learning →
+    </a>
+  </div>
+
+  <div className={styles.courseCard}>
+    <div className={styles.courseIcon}>🤝</div>
+    <h3>Team Collaboration</h3>
+    <div className={styles.courseTags}>
+      <span className={`${styles.courseTag} ${styles.guide}`}>Guide</span>
+      <span className={`${styles.courseTag} ${styles.documentation}`}>Documentation</span>
+    </div>
+    <p>Learn best practices for collaborating with your team using Port's features.</p>
+    <a href="/academy/developer-track/collaboration" className={styles.courseLink}>
+      Start Learning →
+    </a>
+  </div>
+</div>

docs/academy/developer-track.module.css

@@ -0,0 +1,98 @@
+.courseGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin: 2rem 0;
+}
+
+.courseCard {
+  background: var(--ifm-card-background-color);
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.courseCard:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.courseIcon {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.courseCard h3 {
+  margin: 0 0 0.75rem 0;
+  color: var(--ifm-heading-color);
+  font-size: 1.25rem;
+}
+
+.courseCard p {
+  color: var(--ifm-color-emphasis-700);
+  margin-bottom: 1.5rem;
+  flex-grow: 1;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.courseTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.courseTag {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-weight: 500;
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-emphasis-700);
+}
+
+.courseTag.video {
+  background: #e3f2fd;
+  color: #1976d2;
+}
+
+.courseTag.guide {
+  background: #e8f5e9;
+  color: #2e7d32;
+}
+
+.courseTag.documentation {
+  background: #fff3e0;
+  color: #f57c00;
+}
+
+.courseLink {
+  display: inline-block;
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+  margin-top: auto;
+}
+
+.courseLink:hover {
+  color: var(--ifm-color-primary-darker);
+  text-decoration: none;
+}
+
+@media (max-width: 768px) {
+  .courseGrid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .courseCard {
+    padding: 1.25rem;
+  }
+}