feat: circled highlight

wkylin · Jan 14, 2025 · aa52859 · aa52859
1 parent 9cd375a
commit aa52859
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -268,10 +268,11 @@ const Home = () => {
       </section>
 
       <section style={{ marginBottom: 15, fontSize: 20 }}>
-        I love coding in <AlternatingText alternateText={['javascript', 'typescript', 'rect', 'vue']} />.
+        I love <span className={styles.circledHighlight}>coding</span> in{' '}
+        <AlternatingText alternateText={['javascript', 'typescript', 'rect', 'vue']} />.
       </section>
       <section style={{ marginBottom: 15, fontSize: 20 }}>
-        X 岁的你，正处在一个特殊的位置：
+        X岁的你，正处在一个特殊的位置：
         <TypeWriter
           text={['年轻到足以创新, 成熟到懂得坚持', '你既有冒险的勇气, 又有控制风险的智慧', '人生不设限，梦想不过期! ']}
           speed={70}

diff --git a/src/pages/home/index.module.less b/src/pages/home/index.module.less
@@ -473,3 +473,33 @@
   initial-value: 0deg;
   inherits: false;
 }
+
+.circledHighlight {
+  position: relative;
+  z-index: 1;
+  padding: 5px;
+  margin: 0 15px;
+}
+
+.circledHighlight:before,
+.circledHighlight:after {
+  content: '';
+  width: 120%;
+  height: 100%;
+  position: absolute;
+  top: 5%;
+  left: -10%;
+  z-index: -1;
+  border-radius: 80%;
+  box-sizing: border-box;
+}
+
+.circledHighlight:before {
+  border: 2px solid #06251b;
+  transform: rotate(-4deg);
+}
+
+.circledHighlight:after {
+  border: 1px solid #63d9b3;
+  transform: rotate(6deg);
+}