style(style): change colors of the site

Aeonoi · Oct 25, 2024 · d908fcd · d908fcd
1 parent 19d897b
commit d908fcd
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 48 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -4,12 +4,12 @@
 
 :root {
   --background: #ffffff;
-  --foreground: #171717;
+  --foreground: #374151;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
+    --background: #374151;
     --foreground: #ededed;
   }
 }

diff --git a/components/about.tsx b/components/about.tsx
@@ -6,7 +6,7 @@ const About: React.FC = () => {
     <main id="about" className="animate-fadeIn">
       <Background styles="h-screen flex items-center">
         {/* <div className="grid grid-cols-2 text-black max-w-4xl mx-auto p-6"> */}
-        <div className="grid grid-cols-1 md:grid-cols-2 text-black justify-items-end mx-auto p-10">
+        <div className="grid grid-cols-1 md:grid-cols-2 text-white justify-items-center mx-auto p-10">
           <section className="mb-8 max-w-3xl">
             <h1 className="text-4xl font-bold mb-4">Hi, I'm Dylan</h1>
             <p className="text-lg">
@@ -28,18 +28,18 @@ const About: React.FC = () => {
             </h2>
             <ul className="list-disc ml-6 text-lg">
               <li>
-                <strong>Languages:</strong> JavaScript, TypeScript, C++, C, Java
+                <strong>Languages:</strong> C++, Java, JavaScript, TypeScript, C
               </li>
               <li>
-                <strong>Frontend:</strong> React.js, Preact.js, Electron.js,
-                Next.js, Tailwind CSS
+                <strong>Frontend:</strong> React.js, Next.js, Preact.js,
+                Electron.js, Tailwind CSS, JavaFX
               </li>
               <li>
-                <strong>Backend:</strong> Node.js, Express, MongoDB, Mongoose
+                <strong>Backend:</strong> Node.js, Express, MongoDB, Mongoose,
+                PostgreSQL, Spring Boot
               </li>
               <li>
-                <strong>Other:</strong> Material Tailwind, ShadCN UI components,
-                JavaFX, Spring Boot
+                <strong>Other:</strong> Material Tailwind, ShadCN UI components
               </li>
               {/* <li> */}
               {/*   <strong>Tools:</strong> Git, GitHub Desktop, tmux, VSCode, */}
@@ -53,13 +53,12 @@ const About: React.FC = () => {
               Current Focus & Interests
             </h2>
             <p className="text-lg">
-              Right now, I'm honing my skills in full-stack web development,
-              exploring the features of Next.js 14 and React.js, and working on
-              projects that blend intuitive UI with solid backend functionality.
-              I'm also excited about diving deeper into areas like database
-              optimization and cloud deployment. In my free time, I'm learning
-              the Rust language and exploring the different applications that
-              uses Rust.
+              I'm honing my skills in full-stack web development, exploring the
+              features of Next.js 14 and React.js, and working on projects that
+              blend intuitive UI with solid backend functionality. I'm also
+              excited about diving deeper into areas like database optimization
+              and cloud deployment. In my free time, I'm learning the Rust
+              language and exploring the different applications that uses Rust.
             </p>
           </section>
           {/* <div className="grid grid-cols-2 justify-center items-center flex-wrap"> */}

diff --git a/components/background.tsx b/components/background.tsx
@@ -9,7 +9,8 @@ interface Props {
 const Background: React.FC<Props> = ({ children, styles }) => {
   return (
     <section
-      className={`relative bg-gradient-to-r from-catppuccin_blue via-catppuccin_lavender to-catppuccin_mauve bg-black opacity-95 ${styles}`}
+      // className={`relative bg-gradient-to-r from-catppuccin_blue via-catppuccin_lavender to-catppuccin_mauve bg-black opacity-95 ${styles}`}
+      className={`relative bg-gray-700  ${styles}`}
     >
       {children}
     </section>

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -1,31 +1,22 @@
 import Link from "next/link";
-import Resume from "./resume";
 
 const Navbar: React.FC = () => {
   return (
-    <header className="sticky top-0 w-full h-14 bg-transparent shadow-md z-50 bg-gradient-to-r from-catppuccin_blue via-catppuccin_lavender to-catppuccin_mauve animate-fadeIn">
+    // <header className="sticky top-0 w-full h-14 bg-transparent shadow-md z-50 bg-gradient-to-r from-catppuccin_blue via-catppuccin_lavender to-catppuccin_mauve animate-fadeIn">
+    <header className="sticky top-0 w-full h-14 bg-transparent shadow-md z-50 animate-fadeIn backdrop-blur-md">
       <nav className="container mx-auto px-3 py-3">
-        <div className="flex justify-between items-center">
-          <div className="hidden md:flex text-2xl font-bold text-gray-800">
+        <div className="flex justify-between items-center text-white">
+          <div className="hidden md:flex text-2xl font-bold text-catppuccin_red">
             Dylan Zhou
           </div>
           <div className="flex justify-center items-center space-x-4">
-            <Link
-              href="#hero"
-              className="text-gray-800 hover:text-catppuccin_blue"
-            >
+            <Link href="#hero" className="hover:text-red-500">
               Home
             </Link>
-            <Link
-              href="#about"
-              className="text-gray-800 hover:text-catppuccin_blue"
-            >
+            <Link href="#about" className="hover:text-red-500">
               About
             </Link>
-            <Link
-              href="#projects"
-              className="text-gray-800 hover:text-catppuccin_blue"
-            >
+            <Link href="#projects" className="hover:text-red-500">
               Projects
             </Link>
             {/* <Link */}
@@ -35,10 +26,7 @@ const Navbar: React.FC = () => {
             {/*   Contact */}
             {/* </Link> */}
             {/* Resume */}
-            <Link
-              href="#resume"
-              className="text-gray-800 hover:text-catppuccin_blue"
-            >
+            <Link href="#resume" className="hover:text-red-500">
               Resume
             </Link>
           </div>

diff --git a/components/project-card.tsx b/components/project-card.tsx
@@ -13,23 +13,24 @@ const ProjectCard: React.FC<Props> = ({
   title,
 }: Props) => {
   return (
-    <div className="min-h-full max-w-3xl mx-auto p-3 bg-white shadow-md rounded-lg text-black">
+    // <div className="min-h-full max-w-3xl mx-auto p-3 bg-white shadow-md rounded-lg text-black">
+    <div className="min-h-full max-w-3xl mx-auto p-3 text-black">
+      <Link
+        href={link}
+        className="uppercase tracking-wide text-2xl text-indigo-500 block mt-1 leading-tight font-bold hover:underline m-3"
+      >
+        {title}
+      </Link>
       <div className="flex flex-col">
         <div className="flex w-full">
           <img
-            className="aspect-auto object-cover rounded-t-lg block"
+            className="aspect-auto object-cover max-h-full rounded-t-lg block"
             src={image}
             alt={title}
           />
         </div>
         <div className="p-8">
-          <Link
-            href={link}
-            className="uppercase tracking-wide text-lg text-indigo-500 block mt-1 leading-tight font-medium hover:underline"
-          >
-            {title}
-          </Link>
-          <p className="mt-2 text-sm text-slate-500">{description}</p>
+          <p className="mt-2 text-sm text-white font-semibold">{description}</p>
         </div>
       </div>
     </div>

diff --git a/components/projects.tsx b/components/projects.tsx
@@ -7,7 +7,7 @@ const Projects: React.FC = () => {
       <Background>
         <p
           id="projects"
-          className="text-5xl items-center text-center text-black scroll-m-14"
+          className="text-5xl items-center text-center text-white scroll-m-14 m-10"
         >
           Projects
         </p>

diff --git a/components/resume.tsx b/components/resume.tsx
@@ -6,7 +6,9 @@ const Resume: React.FC = () => {
   return (
     <main id="resume" className="animate-fadeIn scroll-m-14">
       <Background styles="h-screen">
-        <p className="text-5xl items-center text-center text-black">Resume</p>
+        <p className="text-5xl items-center text-center text-white m-10">
+          Resume
+        </p>
         <div className="grid grid-cols-1 lg:grid-cols-2">
           <div className="hidden lg:flex">
             <embed