Merge pull request #526 from 1chooo/dev

chore: integrate Tailwind CSS

Author: 1chooo

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "1chooo-com",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "private": true,
   "license": "CC-BY-4.0",
   "author": {

apps/web/src/app/blog/[slug]/page.tsx

@@ -117,7 +117,7 @@ export default async function Blog({ params }: {
       <article>
         <section className="blog-text">
           <PageHeader header="Hugo's Blog" />
-          <h1 className="title font-medium text-2xl tracking-tighter max-w-[650px]">
+          <h1 className="title font-semibold text-2xl tracking-tighter max-w-[650px]">
             <MarkdownRenderer content={post.metadata.title} />
           </h1>
           <div className="flex justify-between items-center mt-2 mb-8 text-sm max-w-[650px]">

apps/web/src/app/blog/page.tsx

@@ -93,13 +93,13 @@ export default async function BlogPage({ searchParams }: {
                       )}
                     </time>
                   </div>
-                  <h3 className="h3 blog-item-title">
+                  <h3 className="text-2xl text-white-2 font-semibold leading-[1.3] transition-all hover:text-orange-yellow-crayola">
                     <Balancer><MarkdownRenderer content={post.metadata.title} /></Balancer>
                   </h3>
-                  <MarkdownRenderer
-                    className="blog-summary"
+                  <Balancer><MarkdownRenderer
+                    className="text-light-gray text-s font-light leading-6 overflow-hidden line-clamp-2"
                     content={post.metadata.summary}
-                  />
+                  /></Balancer>
                 </div>
               </Link>
             </li>

apps/web/src/app/contact/page.tsx

@@ -23,9 +23,9 @@ const Contact = () => {
   return (
     <article data-page=''>
       <PageHeader header="Hugo's Contact" />
-      <section className="contact-form">
+      <section className="mb-[10px]">
         <MapBox />
-        <h3 className="h3 form-title">Contact Form</h3>
+        <h3 className="text-white-2 text-2xl font-bold mb-[20px]">Contact Form</h3>
         <form action="#" className="form" data-form>
           <div className="input-wrapper">
             <input

apps/web/src/app/globals.css

@@ -2,6 +2,10 @@
   #copyright 2024 @1chooo
 \*-----------------------------------*/
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   /**
   * colors
@@ -262,23 +266,6 @@ article {
   font-weight: var(--fw-500);
 }
 
-.article-title {
-  position: relative;
-  padding-bottom: 7px;
-  margin-bottom: 30px;
-}
-
-.article-title::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 30px;
-  height: 3px;
-  background: var(--text-gradient-yellow);
-  border-radius: 3px;
-}
-
 .has-scrollbar::-webkit-scrollbar {
   /* for vertical scrollbar */
   width: 5px;
@@ -374,33 +361,6 @@ main {
   color: var(--light-gray);
 }
 
-/*-----------------------------------*\
-  #DOCS
-\*-----------------------------------*/
-
-.docs .article-title {
-  margin-bottom: 15px;
-}
-
-.docs-text {
-  color: var(--light-gray);
-  font-size: var(--fs-6);
-  font-weight: var(--fw-300);
-  line-height: 1.6;
-}
-
-.docs-text p {
-  margin-bottom: 15px;
-}
-
-/*-----------------------------------*\
-  #ABOUT
-\*-----------------------------------*/
-
-.about .article-title {
-  margin-bottom: 15px;
-}
-
 /**
 * #service 
 */
@@ -430,10 +390,6 @@ main {
   gap: 20px;
 }
 
-.service-content-box {
-  text-align: center;
-}
-
 /**
 * #testimonials 
 */
@@ -737,11 +693,6 @@ main {
   margin-bottom: 20px;
 }
 
-.timeline-item-title {
-  font-size: var(--fs-6);
-  line-height: 1.3;
-  margin-bottom: 7px;
-}
 
 .relevant-courses-list span {
   color: var(--vegas-gold);
@@ -867,17 +818,6 @@ main {
   display: inline;
 }
 
-.profession-experience-title {
-  color: var(--orange-yellow-crayola);
-  display: inline;
-}
-
-.profession-experience-duration {
-  float: right;
-  color: var(--white-1);
-  /* 添加你想要的样式 */
-}
-
 .timeline-list p span {
   float: right;
   color: var(--white-1);
@@ -1166,32 +1106,6 @@ main {
   border-radius: 4px;
 }
 
-.blog-item-title {
-  margin-bottom: 10px;
-  line-height: 1.3;
-  transition: var(--transition-1);
-}
-
-.blog-post-item.active>a:hover .blog-item-title {
-  color: var(--orange-yellow-crayola);
-}
-
-.blog-summary {
-  color: var(--light-gray);
-  font-size: var(--fs-6);
-  font-weight: var(--fw-300);
-  line-height: 1.6;
-  display: -webkit-box;
-  display: box;
-  -webkit-line-clamp: 2;
-  -moz-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: 3.2em;
-}
-
 .blog-post-item.skeleton {
   display: flex;
   flex-direction: column;
@@ -1227,14 +1141,6 @@ main {
   #CONTACT
 \*-----------------------------------*/
 
-.contact-form {
-  margin-bottom: 10px;
-}
-
-.form-title {
-  margin-bottom: 20px;
-}
-
 .input-wrapper {
   display: grid;
   grid-template-columns: 1fr;
@@ -1441,16 +1347,6 @@ textarea.form-input::-webkit-resizer {
     padding: 30px;
   }
 
-  .article-title {
-    font-weight: var(--fw-600);
-    padding-bottom: 15px;
-  }
-
-  .article-title::after {
-    width: 40px;
-    height: 5px;
-  }
-
   /**
   * #MAIN
   */
@@ -1477,26 +1373,6 @@ textarea.form-input::-webkit-resizer {
     margin: 32px 0;
   }
 
-  /**
-  * # DOCS
-  */
-
-  .docs .article-title {
-    margin-bottom: 20px;
-  }
-
-  .docs-text {
-    margin-bottom: 40px;
-  }
-
-  /**
-  * #ABOUT
-  */
-
-  .about .article-title {
-    margin-bottom: 20px;
-  }
-
   /* testimonials */
 
   .testimonials-title {
@@ -1706,10 +1582,6 @@ textarea.form-input::-webkit-resizer {
   * PORTFOLIO
   */
 
-  .article-title {
-    padding-bottom: 20px;
-  }
-
   .filter-select-box {
     display: none;
   }
@@ -1801,8 +1673,6 @@ textarea.form-input::-webkit-resizer {
     box-shadow: var(--shadow-5);
   }
 
-
-
   /**
   * MAIN 
   */
@@ -2026,34 +1896,4 @@ textarea.form-input::-webkit-resizer {
 
 .markdown-alert-caution .markdown-alert-title {
   color: var(--github-alert-caution-color);
-}
-
-.anchor-header {
-  position: relative;
-  margin: 0;
-  cursor: pointer;
-  color: hsl(0, 0%, 84%);
-}
-
-.anchor-header a {
-  text-decoration: none;
-  color: hsl(0, 0%, 84%);
-}
-
-.anchor-header a:hover {
-  text-decoration: underline;
-}
-
-.anchor-header .hash {
-  position: absolute;
-  left: -1.5rem;
-  opacity: 0;
-  color: hsl(0, 0%, 84%);
-  transition: opacity 0.2s ease-in-out;
-  transform: scale(0.8);
-  top: 0.2rem;
-}
-
-.anchor-header:hover .hash {
-  opacity: 1;
 }

apps/web/src/app/not-found.tsx

@@ -6,7 +6,6 @@ import PageContent from '@/components/page-content';
 import MarkdownRenderer from '@/components/markdown/markdown-renderer';
 import config from '@/config';
 
-import '@/styles/about/about-text.css';
 
 const { title } = config;
 
@@ -31,7 +30,7 @@ const NotFound: React.FC = () => {
       page="404"
       pathName={pathname}
     >
-      <section className="about-text">
+      <section className="text-light-gray leading-relaxed">
         {renderErrorMessage()}
       </section>
     </PageContent>

apps/web/src/app/page.tsx

@@ -7,7 +7,7 @@ import GitHubStats from '@/components/about/github-stats';
 import TechStack from '@/components/about/tech-stack';
 import LifeStyles from '@/components/about/life-styles';
 import PageHeader from '@/components/page-header';
-import H4 from '@/components/markdown/h4';
+import AboutHeader from '@/components/about/about-header';
 import MarkdownRenderer from "@/components/markdown/markdown-renderer";
 import { FaRegPenToSquare } from "react-icons/fa6";
 import SeeMoreButton from "@/components/about/see-more-btn";
@@ -57,9 +57,9 @@ const About = async () => {
   return (
     <article data-page=''>
       <PageHeader header={header} />
-      <H4 text={`${subHeader} (${pronouns})`} />
+      <AboutHeader text={`${subHeader} (${pronouns})`} />
       <AboutText introduction={introduction} />
-      <H4 text="$ ls -al Latest Articles" />
+      <AboutHeader text="$ ls -al Latest Articles" />
       <section>
         <ul className="latest-post-list has-scrollbar">
           {selectedPosts.map((post, index) => (

apps/web/src/app/portfolio/[slug]/page.tsx

@@ -113,7 +113,7 @@ export default async function Portfolio({ params }: {
       <article>
         <section className="blog-text">
           <PageHeader header="Hugo's Portfolio" />
-          <h1 className="title font-medium text-2xl tracking-tighter max-w-[650px]">
+          <h1 className="title font-semibold text-2xl font-text-2xl tracking-tighter max-w-[650px]">
             <MarkdownRenderer content={post.metadata.title} />
           </h1>
           <div className="flex justify-between items-center mt-2 mb-8 text-sm max-w-[650px]">

apps/web/src/components/about/about-header.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface H4Props {
+  text: string;
+}
+
+const AboutHeader: React.FC<H4Props> = ({ text }) => {
+  return (
+    <h2 className="text-light-gray text-lg font-bold mt-[30px] mb-[30px]">
+      <code>{text}</code>
+    </h2>
+  );
+};
+
+export default AboutHeader;

apps/web/src/components/about/about-text.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import MarkdownRenderer from '@/components/markdown/markdown-renderer';
 
-import "@/styles/about/about-text.css"
-
 interface AboutTextProps {
   introduction: string;
 }
 
 const AboutText: React.FC<AboutTextProps> = ({ introduction }) => {
   return (
-    <section className="about-text">
+    <section className="text-light-gray leading-relaxed">
       <MarkdownRenderer content={introduction} />
     </section>
   );