modified: assets/css/input.css

modified:   assets/css/output.css
new file:   assets/images/paper-plane.webp
new file:   assets/images/precious-gem.webp

Author: codebythiago

assets/css/input.css

@@ -67,11 +67,11 @@
     }
 
     .bg-surface {
-        background-color: var(--surface);
+        background-color: var(--surface-1);
     }
 
     .bg-surface2 {
-        background-color: var(--surface2);
+        background-color: var(--surface-2);
     }
 
     .bg-primary {

assets/css/output.css

@@ -7,7 +7,10 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-blue-500: oklch(62.3% 0.214 259.815);
     --spacing: 0.25rem;
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -274,6 +277,15 @@
   .table {
     display: table;
   }
+  .h-23 {
+    height: calc(var(--spacing) * 23);
+  }
+  .h-25 {
+    height: calc(var(--spacing) * 25);
+  }
+  .w-25 {
+    width: calc(var(--spacing) * 25);
+  }
   .flex-shrink {
     flex-shrink: 1;
   }
@@ -286,12 +298,24 @@
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
   .resize {
     resize: both;
   }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -300,10 +324,38 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
+  .px-54 {
+    padding-inline: calc(var(--spacing) * 54);
+  }
+  .px-54\.75 {
+    padding-inline: calc(var(--spacing) * 54.75);
+  }
+  .px-\[219px\] {
+    padding-inline: 219px;
+  }
+  .pt-19 {
+    padding-top: calc(var(--spacing) * 19);
+  }
+  .pt-19\.75 {
+    padding-top: calc(var(--spacing) * 19.75);
+  }
+  .pt-\[79px\] {
+    padding-top: 79px;
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
   .lowercase {
     text-transform: lowercase;
   }
@@ -317,6 +369,9 @@
     --tw-ordinal: ordinal;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -357,6 +412,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
 }
 @font-face {
   font-family: "Sekuya";
@@ -404,10 +464,10 @@
     background-color: var(--base);
   }
   .bg-surface {
-    background-color: var(--surface);
+    background-color: var(--surface-1);
   }
   .bg-surface2 {
-    background-color: var(--surface2);
+    background-color: var(--surface-2);
   }
   .bg-primary {
     background-color: var(--primary);

assets/images/paper-plane.webp

@@ -1 +0,0 @@
-import * as THREE from "../../vendor/three/build/three.module"

assets/images/precious-gem.webp

@@ -1,8 +1,10 @@
-import { gsap } from "gsap";
-    
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { ScrollSmoother } from "gsap/ScrollSmoother";
-import { SplitText } from "gsap/SplitText";
+import { ScrollTrigger } from "../../vendor/gsap/ScrollTrigger.js";
+import { ScrollSmoother } from "../../vendor/gsap/ScrollSmoother.js";
+import { SplitText } from "../../vendor/gsap/SplitText.js";
 
 gsap.registerPlugin(ScrollTrigger,ScrollSmoother,SplitText);
 
+ScrollSmoother.create({
+    smooth: 3,
+    effects: true
+});

assets/js/3dAnimationThree.js

@@ -7,7 +7,7 @@
     <meta name="description" content="">
     <link rel="stylesheet" href="../assets/css/output.css">
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
-    <title>Thiago Rodrigues</title>
+    <title>Thiago Rodrigues - Links Úteis</title>
 </head>
 <body>
     <header>