Update

package.json

@@ -19,6 +19,7 @@
  "astro": "^1.9.2",
  "atropos": "^1.0.2",
  "sass": "^1.57.1",
- "solid-js": "^1.6.9"
+ "solid-js": "^1.6.9",
+ "swiper": "^8.4.6"
  }
 }

src/components/layout/Footer.astro

@@ -1,20 +1,21 @@
 ---
+import { EMAIL_URL, GITHUB_URL, TWITTER_URL } from "~/config"
 import { Hoverable } from "../decorative/cursor/Cursor"
 ---
 
 <footer>
  <div>Zihan Chen. <br />This site is open source at Github.</div>
  <div>
  <Hoverable client:idle>
- <a target="_blank" href="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/zihan-ch">My Github</a>
+ <a target="_blank" href={GITHUB_URL}>My Github</a>
  </Hoverable>
  <br />
  <Hoverable client:idle>
- <a target="_blank" href="https://twitter.com/zihanch">My Twitter</a>
+ <a target="_blank" href={TWITTER_URL}>My Twitter</a>
  </Hoverable>
  <br />
  <Hoverable client:idle>
- <a target="_blank" href="mailto:[email protected]">My Email</a>
+ <a target="_blank" href={EMAIL_URL}>My Email</a>
  </Hoverable>
  <br />
  </div>

src/components/layout/Header.astro

@@ -1,5 +1,5 @@
 ---
-import { SITE_URL } from "~/config"
+import { GITHUB_URL, SITE_URL, TWITTER_URL } from "~/config"
 import A from "../primitive/A.astro"
 import { ThemeToggleButton } from "../functional/ThemeToggleButton"
 import { Hoverable } from "../decorative/cursor/Cursor"
@@ -20,10 +20,10 @@ import { Hoverable } from "../decorative/cursor/Cursor"
  </div>
  <div>
  <div id="github-link">
- <A target="_blank" href="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/zihan-ch">Github</A>
+ <A target="_blank" href={GITHUB_URL}>Github</A>
  </div>
  <div id="twitter-link">
- <A target="_blank" href="https://twitter.com/zihanch">Twitter</A>
+ <A target="_blank" href={TWITTER_URL}>Twitter</A>
  </div>
  <div id="theme-toggle"><ThemeToggleButton client:idle /></div>
  </div>
@@ -52,7 +52,7 @@ import { Hoverable } from "../decorative/cursor/Cursor"
  margin-right: $margin
 
  & *
- color: $font-color-primary
+ color: $font-color-primary !important
 
  #title-of-website
  font-weight: 500

src/components/page/home.tsx

@@ -1,10 +1,11 @@
 import { Component, createSignal } from "solid-js"
 import "~/styles/home.sass"
 import { Button } from "../ui/Button"
-import { HomeParallaxPart1 } from "./HomeParallaxPart1"
+import { HomeParallaxPart1 } from "./home/HomeParallaxPart1"
 import { Hoverable } from "../decorative/cursor/Cursor"
 import { Dialog } from "../ui/Dialog"
-import { AGE } from "~/config"
+import { AGE, EMAIL, EMAIL_URL, GITHUB_URL, TWITTER_URL } from "~/config"
+import { FavouriteStacks } from "./home/FavouriteStacks"
 
 export const IndexPage: Component = () => {
  const [workWithMeOpen, setWorkWithMeOpen] = createSignal(false)
@@ -37,9 +38,7 @@ export const IndexPage: Component = () => {
  You can contact me through email. My email
  address is{" "}
  <Hoverable>
- <a href="mailto:[email protected]">
- [email protected]
- </a>
+ <a href={EMAIL_URL}>{EMAIL}</a>
  </Hoverable>
  .
  </p>
@@ -51,6 +50,8 @@ export const IndexPage: Component = () => {
 
  <HomeParallaxPart1 />
 
+ <FavouriteStacks />
+
  <div id="thats-a-wrap">
  <h1>That's a wrap!</h1>
  </div>
@@ -60,13 +61,13 @@ export const IndexPage: Component = () => {
  <strong>zihan#4186</strong>.<br />
  I'm also mainly active on{" "}
  <Hoverable>
- <a target="_blank" href="https://twitter.com/zihanch">
+ <a target="_blank" href={GITHUB_URL}>
  Twitter
  </a>
  </Hoverable>{" "}
  and{" "}
  <Hoverable>
- <a target="_blank" href="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/zihan-ch">
+ <a target="_blank" href={TWITTER_URL}>
  Github
  </a>
  </Hoverable>

src/components/page/home/FavouriteStacks.sass

@@ -0,0 +1,49 @@
+@import "../../../styles/global"
+
+#favourite-stacks
+ margin: auto
+ margin-top: 10em
+
+ & > h1
+ font-family: $mono
+ font-size: 3em
+
+.swiper
+ width: 400px
+ height: 500px
+
+.swiper-slide
+ width: 100%
+ border-radius: $border-radius-l
+ height: 100%
+ transition: background-color .3 ease
+ background-color: $bg-color
+ box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px
+
+ & > h1
+ font-size: 3em
+ background: linear-gradient(90deg, #c5f9d7, #f7d486, #f27a7d)
+ -webkit-background-clip: text
+ -webkit-text-fill-color: transparent
+
+.swiper-pagination
+ --swiper-pagination-bullet-width: 40px
+ --swiper-pagination-bullet-height: 8px
+ // --swiper-theme-color: $primary-color
+
+.swiper-pagination-bullet
+ border-radius: 5px !important
+
+.swiper-pagination-bullet-active
+ background-color: $primary-color !important
+
+.swiper-pagination-bullet:not(.swiper-pagination-bullet-active)
+ background-color: $bg-color-lighter
+
+.slide-inner
+ margin: 2em
+
+ & a
+ color: $font-color-title
+ font-size: 1.5em
+ font-family: $mono