add callout

figma_animation/figma_animation.md

@@ -3,4 +3,31 @@ title: Figma Animation
 layout: page
 ---
 
-# Animate your first splash screen in Figma
+# Animate your first splash screen in Figma
+{: .no_toc }
+
+An animated splash screen can really bring your website or app to life. It’s accessible, enjoyable, and memorable for your users. In this demo, you'll learn how to build this animated splash screen for a mobile app called Rate my Transit.
+
+<video width="800" controls>
+  <source src="./splash_animation.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+
+<details open markdown="block">
+  <summary>
+    Table of contents
+  </summary>
+  {: .text-delta }
+1. TOC
+{:toc}
+</details>
+
+---
+
+# First, gather the components you’ll be using in your app.
+You can find thousands of icons from the [Google Material UI design library](https://fonts.google.com/icons). There are also many other design suites you can use! Download your icons in the `SVG` format.
+
+<img src="./svg_download.png" width="600">
+
+
+# Next, build your frames in Figma.

index.md

@@ -7,7 +7,7 @@ nav_order: 1
 # Welcome to my technical writing portfolio!
 
 Here are some projects I will include in my portfolio:
-* [Sample 1: Process document](./figma_animation/figma_animation.md)
+* [Sample 1: How to make an animated splash screen in Figma](./figma_animation/figma_animation.md)
 
 <video width="800" controls>
   <source src="./figma_animation/splash_animation.mp4" type="video/mp4">

insights_capture/insights_capture.md

@@ -99,8 +99,8 @@ To leave a comment or a note, click on the video and click on the speech bubble
 Drag the slider to the point in the video that you comment refers to. This will give your comment a helpful timestamp that you can click to jump to in the video. You can format your comment using the tools in the bottom right corner. After you've added a comment, you can also leave a reply. You can always go back and edit or delete you comment by clicking the three dots in the corner.
 ![Image of where to make a comment or note](./comments.png)
 
-> [!TIP]
-> You can share comments you made with other Insights users. Check out how to upload your commented clips online at [sharing to Insights Capture](./insights_capture.md#sharing-to-insights-capture).
+{: .note }
+You can share comments you made with other Insights users. Check out how to upload your commented clips online at [sharing to Insights Capture](./insights_capture.md#sharing-to-insights-capture).
 
 You can also leave notes to yourself by clicking the `Notepad` icon next to the comment icon.
 ![Image of note](./notepad.png)