.text color changed

TjasaZil · Dec 3, 2022 · 93e29ea · 93e29ea
1 parent 4fde2fa
commit 93e29ea
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 17 deletions.
diff --git a/src/components/Hero/HeadlineComponent.vue b/src/components/Hero/HeadlineComponent.vue
@@ -1,35 +1,35 @@
 <template>
   <section class="mt-32">
     <h1
-      class="font-bold tracking-tighter text-xl sm:text-3xl md:text-4xl lg:text-5xl 3xl:text-6xl 4xl:text-7xl"
+      class="font-bold tracking-tighter text-xl sm:text-3xl md:text-4xl lg:text-5xl 3xl:text-6xl 4xl:text-7xl text-neutral-200"
     >
       Hello, I am
       <span :class="[colorClasses]">{{ action }}</span>
     </h1>
-    <h2>Welcome to my page.</h2>
+    <h2 class="text-neutral-200">Welcome to my page.</h2>
     <div
-      class="flex items-center absolute top-52 sm:top-72 md:top-80 lg:top-96 mt-16"
+      class="flex items-center absolute top-52 sm:top-72 md:top-80 lg:top-96 mt-16 text-neutral-200"
     >
       <h2>Let's connect:</h2>
       <SocialMedia />
     </div>
     <div
       class="bg-neutral-600 mx-auto w-1/2 lg:w-1/3 rounded-lg flex flex-col items-center absolute top-60 sm:top-80 md:top-96 lg:top-[450px] mt-16"
     >
-      <h2 class="pt-3">About me:</h2>
-      <p class="p-3">
+      <h2 class="pt-3 text-neutral-200">About me:</h2>
+      <p class="p-3 text-neutral-300">
         I am a software developer, specializing in the web development arena. I
         have been developing websites using Vue.js, TailwindCss, and Jest for
         the last year.
       </p>
-      <p class="p-3">
+      <p class="p-3 text-neutral-300">
         I'm currently working on getting my skill to a higher level, by offering
         my services to people and non-profit organizations that need a website.
         All my projects are made using the TDD workflow to ensure a seamless
         user experience. I mostly enjoy working on converting Figma files to
         fully responsive website layouts.
       </p>
-      <p class="p-3">
+      <p class="p-3 text-neutral-300">
         Drop me a line if you want to talk about web development, coding, or
         anything else. I am currently available for employment and eager to hear
         from GitHub users.

diff --git a/src/components/Projects/ContainerComponent.vue b/src/components/Projects/ContainerComponent.vue
@@ -14,8 +14,10 @@
             {{ heading }}
           </h5>
         </a>
-        <p>{{ technologies }}</p>
-        <p class="mb-3 font-normal text-neutral-700 dark:text-neutral-400">
+        <p class="text-neutral-600 opacity-80 dark:text-neutral-300">
+          {{ technologies }}
+        </p>
+        <p class="mb-3 font-normal text-neutral-700 dark:text-neutral-300">
           {{ paragraph }}
         </p>
         <a
@@ -45,10 +47,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-//import ButtonComponent from "../Shared/ButtonComponent.vue";
 export default defineComponent({
   name: "ContainerComponent",
-  //components: { ButtonComponent },
   props: {
     heading: {
       type: String,

diff --git a/src/components/Projects/ProjectsComponent.vue b/src/components/Projects/ProjectsComponent.vue
@@ -1,15 +1,17 @@
 <template>
-  <section class="w-full mx-auto flex flex-col mt-32 p-12">
+  <section class="w-full mx-auto flex flex-col mt-16 p-12">
     <section class="w-full mx-auto max-w-7xl">
       <div
         class="flex flex-row justify-between items-center mx-auto text-center lg:text-left"
       >
-        <h2 class="text-xl lg:text-3xl font-bold text-center mx-auto">
+        <h2
+          class="text-xl lg:text-3xl font-bold text-center mx-auto text-neutral-200"
+        >
           Projects
         </h2>
       </div>
       <div
-        class="flex flex-col xl:flex-row xl::flex-wrap w-full justify-center xl:justify-between mx-auto xl:space-x-3 mt-16"
+        class="flex flex-col xl:flex-row xl::flex-wrap w-full justify-center xl:justify-between mx-auto xl:space-x-3 mt-8"
       >
         <ContainerComponent
           heading="Pomoč Pointerjem Website"

diff --git a/src/components/Shared/FooterComponent.vue b/src/components/Shared/FooterComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="w-full mt-16 bg-neutral-900 h-auto p-16">
     <div class="flex justify-between w-11/12 mx-auto max-w-7xl">
-      <p>Copyright 2022</p>
+      <p class="text-neutral-200">Copyright 2022</p>
       <SocialMedia />
     </div>
   </section>

diff --git a/src/components/Skills/SkillsComponent.vue b/src/components/Skills/SkillsComponent.vue
@@ -8,7 +8,11 @@
     <div
       class="flex flex-col mx-auto text-center sm:mx-0 sm:flex-row space-x-10 sm:justify-between sm:items-center mt-16"
     >
-      <h2 class="text-xl lg:text-3xl text-center mx-auto font-bold">Skills</h2>
+      <h2
+        class="text-xl lg:text-3xl text-center mx-auto font-bold text-neutral-200"
+      >
+        Skills
+      </h2>
     </div>
     <div class="flex flex-col space-y-16 mx-auto">
       <div class="flex flex-col mt-16">
@@ -19,7 +23,9 @@
             class="flex flex-col justify-center items-center space-y-4 ml-5"
           >
             <img :src="skill.img" :alt="skill.alt" />
-            <p>{{ skill.text }}</p>
+            <p class="text-neutral-300 capitalize opacity-80">
+              {{ skill.text }}
+            </p>
           </div>
         </div>
       </div>