feat: update layout and color scheme to dark

karolstawowski · Sep 14, 2023 · 0363fd6 · 0363fd6 · vercel · Sep 14, 2023
1 parent ba035dd
commit 0363fd6
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 86 deletions.
diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -4,7 +4,7 @@ import { SectionTitle } from './SectionTitle'
 export const About = (): JSX.Element => {
   return (
     <div className="flex flex-col items-center w-full">
-      <div className="w-11/12 px-4 rounded-lg xs:w-10/12 md:w-3/4 xl:w-9/12 2xl:w-8/12 max-w-8xl bg-primary xs:px-8">
+      <div className="w-11/12 px-4 rounded-lg xs:w-10/12 md:w-3/4 xl:w-9/12 2xl:w-8/12 max-w-8xl background-gradient xs:px-8">
         <div className="py-4 my-8 sm:py-8 md:grid-cols-5 md:grid" id="about">
           <div className="md:col-span-3 md:mr-24 2xl:mr-44 text-background">
             <SectionTitle>About me</SectionTitle>

diff --git a/src/components/Contact/ContactButton.test.tsx b/src/components/Contact/ContactButton.test.tsx
diff --git a/src/components/Projects/LivePreviewButton.tsx b/src/components/Projects/LivePreviewButton.tsx
@@ -7,12 +7,7 @@ export const LivePreviewButton = ({
   name,
 }: LivePreviewButtonProps): JSX.Element => {
   return (
-    <a
-      href={url}
-      target="_blank"
-      className="mr-2 sm:mr-1 xl:mr-0"
-      aria-label={`Live ${name} project preview`}
-    >
+    <a href={url} target="_blank" aria-label={`Live ${name} project preview`}>
       <span className="block p-1 text-green-600 bg-green-200 rounded-md fill-current outline outline-2 outline-green-400 hover:outline-green-300 active:outline-green-200">
         <Play />
       </span>

diff --git a/src/components/Projects/OpenSourceProjectCard.tsx b/src/components/Projects/OpenSourceProjectCard.tsx
@@ -10,9 +10,9 @@ export const OpenSourceProjectCard = ({
   project,
 }: OpenSourceProjectCardProps): JSX.Element => {
   return (
-    <div className="relative flex flex-col justify-between w-full h-full p-4 rounded-md shadow text-background bg-primary xl:h-24">
+    <div className="relative flex flex-col justify-between w-full h-full gap-1 p-4 rounded-md shadow text-background bg-primary xl:h-[6.5rem]">
       <h5 className="text-lg">
-        <span className="font-thin">{project.name}</span>/
+        <span>{project.name}</span>/
         <span className="text-sm">{project.author}</span>
       </h5>
       <p className="flex items-baseline gap-1">

diff --git a/src/components/Projects/ProjectCard.tsx b/src/components/Projects/ProjectCard.tsx
@@ -1,4 +1,3 @@
-import { Play } from '../../icons/Play'
 import { Technology } from '../../utils/technologiesList'
 import { LivePreviewButton } from './LivePreviewButton'
 import { RepositoryButton } from './RepositoryButton'
@@ -22,9 +21,9 @@ export const ProjectCard = ({
   livePreviewUrl,
 }: ProjectCardProps): JSX.Element => {
   return (
-    <div className="box-content flex flex-col p-6 transition-shadow duration-300 ease-in-out rounded-lg shadow text-background xs:p-8 bg-primary">
+    <div className="box-content flex flex-col p-6 transition-shadow duration-300 ease-in-out rounded-lg shadow text-background xs:p-8 background-gradient">
       <h4 className="w-full text-xl font-semibold">{name}</h4>
-      <div className="w-10 h-[2px] bg-accent mt-2" />
+      <div className="w-10 h-[2px] bg-text mt-2" />
       <img
         src={`./assets/projects/${imgName}.png`}
         className="object-cover w-full my-4 rounded-md"
@@ -47,12 +46,14 @@ export const ProjectCard = ({
             />
           ))}
         </div>
-        {livePreviewUrl && (
-          <LivePreviewButton name={name} url={livePreviewUrl} />
-        )}
-        {repositoryUrl && (
-          <RepositoryButton name={name} url={repositoryUrl} key={name} />
-        )}
+        <div className="flex gap-2">
+          {livePreviewUrl && (
+            <LivePreviewButton name={name} url={livePreviewUrl} />
+          )}
+          {repositoryUrl && (
+            <RepositoryButton name={name} url={repositoryUrl} key={name} />
+          )}
+        </div>
       </div>
     </div>
   )

diff --git a/src/components/Technologies/TechButton.tsx b/src/components/Technologies/TechButton.tsx
@@ -8,7 +8,7 @@ export const TechButton = ({
   imageName,
 }: TechButtonProps): JSX.Element => {
   return (
-    <div className=" card ease-in-out duration-500 transition-shadow flex flex-wrap items-center justify-center w-[84px] h-[84px] rounded-md shadow-lg bg-secondary">
+    <div className=" card ease-in-out duration-500 transition-shadow flex flex-wrap items-center justify-center w-[84px] h-[84px] rounded-md shadow-lg bg-secondary text-text cursor-default">
       <img
         src={`./assets/${imageName}.svg`}
         height="32"

diff --git a/src/components/Welcome.tsx b/src/components/Welcome.tsx
@@ -1,13 +1,19 @@
 import { Socials } from './Welcome/Socials'
 import { MainText } from './Welcome/MainText'
 import { Monitor } from './Welcome/Monitor'
+import { Navbar } from './Welcome/NavigationBar'
+import { ColorPalette } from './Welcome/ColorPalette'
 
 export const Welcome = (): JSX.Element => {
   return (
-    <div className="flex flex-col items-center w-full h-[calc(100vh-112px)]">
-      <div className="w-11/12 h-full xs:w-10/12 md:w-3/4 xl:w-9/12 2xl:w-8/12 max-w-8xl">
+    <div className="flex flex-col items-center w-full h-screen">
+      <div className="w-11/12 h-full xs:w-10/12 md:w-3/4 xl:w-9/12 2xl:w-9/12">
         <div className="flex flex-col justify-around h-full pb-4 sm:pb-10">
-          <Monitor />
+          <Navbar />
+          <div className="relative flex justify-center">
+            <Monitor />
+            <ColorPalette />
+          </div>
           <div className="flex flex-col-reverse items-end justify-between gap-8 sm:flex-row">
             <Socials />
             <MainText />

diff --git a/src/components/Welcome/ColorPalette.tsx b/src/components/Welcome/ColorPalette.tsx
@@ -0,0 +1,25 @@
+const colorPalette = ['#00ABBD', '#0C2F3B', '#3CB0D7', '#030A0D']
+
+export const ColorPalette = (): JSX.Element => {
+  const bgColor = {
+    '#00ABBD': 'bg-[#00ABBD]',
+    '#0C2F3B': 'bg-[#0C2F3B]',
+    '#3CB0D7': 'bg-[#3CB0D7]',
+    '#030A0D': 'bg-[#030A0D]',
+  }
+
+  return (
+    <div className="absolute top-0 right-0 flex-col items-end hidden gap-3 lg:flex">
+      {colorPalette.map((color) => (
+        <div className="flex items-center gap-3">
+          <p className="font-extralight opacity-80">{color}</p>
+          <div
+            className={`${
+              bgColor[color as keyof typeof bgColor]
+            } w-8 h-6 rounded outline outline-text outline-2 outline-offset-1`}
+          ></div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/Welcome/MainText.tsx b/src/components/Welcome/MainText.tsx
@@ -2,7 +2,7 @@ export const MainText = (): JSX.Element => {
   return (
     <div className="flex flex-col gap-3 opacity-0 animate-fade-in-from-up">
       <h1 className="text-5xl text-right lg:text-6xl xl:7xl">
-        Hi, I'm <span className="text-accent">Karol</span>
+        Hi, I'm <span className="font-bold text-gradient">Karol</span>
       </h1>
       <h2 className="text-2xl text-right">Frontend Developer</h2>
       <h3 className="text-2xl text-right">Software Engineer</h3>

diff --git a/src/components/Welcome/NavigationBar.tsx b/src/components/Welcome/NavigationBar.tsx
@@ -2,7 +2,7 @@ import { Link } from './NavigationBar/Link'
 
 export const Navbar = (): JSX.Element => {
   return (
-    <div className="text-background bg-primary flex items-baseline justify-center w-[calc(100%-4rem)] h-12 mx-4 my-8 rounded-lg sm:justify-between sm:px-8 sm:mx-8 lg:mx-12">
+    <div className="flex items-baseline justify-center w-full h-12 rounded-lg text-text sm:justify-between">
       <h1 className="h-8 my-2 text-2xl select-none ">{'<KarolStawowski/>'}</h1>
       <div className="hidden text-lg lg:block">
         {linkTitles.map((title) => (

diff --git a/src/index.css b/src/index.css
@@ -9,6 +9,17 @@ body {
   min-width: 330px;
 }
 
+.background-gradient {
+  background: linear-gradient(140deg, #0097a7 0%, #0097a7 45%, #1fb2c6 80%);
+}
+
+.text-gradient {
+  background: #0097a7;
+  background: linear-gradient(to bottom right, #0097a7 40%, #4dd0e1 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
 .glow {
   box-shadow: 0 0 86px 4px rgba(255, 255, 255, 0.3);
   z-index: 10;
@@ -17,16 +28,16 @@ body {
 
 .link-underline {
   border-bottom-width: 0;
-  background-image: linear-gradient(#0c2f3b, #0c2f3b);
+  background-image: linear-gradient(#3cb0d7, #3cb0d7);
   background-size: 0 2px;
-  background-position: 0 96%;
+  background-position: 0 98%;
   background-repeat: no-repeat;
   transition: background-size 0.2s ease-in-out;
 }
 
 .link-underline:hover {
   background-size: 100% 2px;
-  background-position: 0 96%;
+  background-position: 0 98%;
 }
 
 .animate-monitor-self-1 {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,16 +8,16 @@ module.exports = {
       ...defaultTheme.screens,
       '3xl': '1920px',
     },
-    fontFamily: {
-      console: ['consolas', 'monaco', 'monospace'],
-    },
     extend: {
+      fontFamily: {
+        console: ['consolas', 'monaco', 'monospace'],
+      },
       colors: {
-        primary: '#67c1e0',
-        secondary: '#0c2f3b',
-        accent: '#3cb0d7',
-        background: '#030a0d',
-        text: '#d5eef6',
+        primary: '#00ABBD',
+        secondary: '#0C2F3B',
+        accent: '#3CB0D7',
+        background: '#030A0D',
+        text: '#D5EEF6',
         'monitor-inner-border': '#32323C',
         'monitor-side-pannel': '#0B0D14',
         'monitor-outer-border': '#393A3C',