Update colors, config

Author: adamplesnik

src/components/TimelineItem.tsx

@@ -24,11 +24,11 @@ const TimelineItem = ({
     >
       <div className="absolute top-[1.65rem] z-0 h-px w-full bg-current opacity-50"></div>
       <div className="relative z-10 w-full shrink-0 font-semibold sm:w-40 md:w-52">
-        <span className="inline-block bg-[#FEC84B] pr-2 dark:bg-[#5a574e]">{year}</span>
+        <span className="bg-cv-light dark:bg-cv-dark inline-block pr-2">{year}</span>
       </div>
       <Paragraph
         className={clsx(
-          'relative z-10 !w-fit bg-[#FEC84B] sm:px-2 dark:bg-[#5a574e]',
+          'bg-cv-light dark:bg-cv-dark relative z-10 !w-fit sm:px-2',
           em && 'font-semibold',
           right && 'text-right'
         )}

src/content/AboutMe.tsx

@@ -5,7 +5,7 @@ import TimelineItem from '@/components/TimelineItem'
 const AboutMe = () => {
   return (
     <div className="flex min-h-svh flex-col gap-1 lg:flex-row">
-      <div className="bg-[#FEC84B] p-6 sm:p-8 md:flex-1 md:p-12 dark:bg-[#5a574e]">
+      <div className="bg-cv-light dark:bg-cv-dark p-6 sm:p-8 md:flex-1 md:p-12">
         <Heading size={2}>CV</Heading>
         <Paragraph className="mb-6 mt-8">
           I spend quality time with my family—or alone when needed—preferably in nature, mountain
@@ -19,7 +19,7 @@ const AboutMe = () => {
           TSX/HTML, or pure CSS.
         </Paragraph>
       </div>
-      <div className="bg-[#FEC84B] p-6 sm:p-8 md:flex-[2] dark:bg-[#5a574e]">
+      <div className="bg-cv-light dark:bg-cv-dark p-6 sm:p-8 md:flex-[2]">
         <div className="flex flex-col gap-2">
           <TimelineItem year={'A long time ago'} desc="Han shot first!" className="mb-72" right />
           <TimelineItem year={1985} desc="Born" className="mb-12" />

src/content/Skills.tsx

@@ -7,22 +7,22 @@ const Skills = () => {
       className="flex min-h-svh w-full flex-col items-stretch gap-1 pt-20 lg:flex-row"
       id="skills"
     >
-      <div className="flex flex-1 items-end bg-[#e9cde8] p-6 sm:p-8 md:p-12 dark:bg-[#513446]">
+      <div className="bg-skills-light dark:bg-skills-dark flex flex-1 items-end p-6 sm:p-8 md:p-12">
         <Heading size={2}>Skills</Heading>
       </div>
-      <div className="flex-1 bg-[#e9cde8] p-6 sm:p-8 md:p-12 dark:bg-[#513446]">
+      <div className="bg-skills-light dark:bg-skills-dark flex-1 p-6 sm:p-8 md:p-12">
         <Paragraph>
           I like to paint the large picture first—mapping user journeys and prototyping
           wireframes—before diving into the designs.
         </Paragraph>
       </div>
-      <div className="flex flex-1 items-end bg-[#e9cde8] p-6 sm:p-8 md:p-12 dark:bg-[#513446]">
+      <div className="bg-skills-light dark:bg-skills-dark flex flex-1 items-end p-6 sm:p-8 md:p-12">
         <Paragraph>
           Once the user experience and flow are sorted, I do my best to create clean layouts with
           strong typography, thoughtful colors, and visual clarity.
         </Paragraph>
       </div>
-      <div className="group flex flex-1 items-center bg-[#e9cde8] p-6 transition-all duration-1000 ease-in-out sm:p-8 md:p-12 lg:hover:flex-[2] dark:bg-[#513446]">
+      <div className="bg-skills-light dark:bg-skills-dark group flex flex-1 items-center p-6 transition-all duration-1000 ease-in-out sm:p-8 md:p-12 lg:hover:flex-[2]">
         <Paragraph>And a touch of playfulness.</Paragraph>
       </div>
     </div>

tailwind.config.js

@@ -3,12 +3,19 @@ export default {
   content: ['index.html', './src/**/*.{html,tsx,jsx,ts,js}', './blog/**/*.{html,tsx,jsx,ts,js}'],
   theme: {
     extend: {
+      colors: {
+        cv: {
+          light: '#fec84d',
+          dark: '#333',
+        },
+        skills: {
+          light: '#e9cde8',
+          dark: '#463946',
+        },
+      },
       fontFamily: {
         sans: 'elza, sans-serif',
       },
-      transitionTimingFunction: {
-        custom: 'cubic-bezier(0.65, 0.05, 0.17, 0.99)',
-      },
     },
   },
   plugins: [],