Skip to content

Commit b541823

Browse files
kerbethecoderkerbethecoder
committed
finish initial redesign
1 parent cce5e5a commit b541823

File tree

5 files changed

+310
-120
lines changed

5 files changed

+310
-120
lines changed

‎app/color-palettes/page.jsx

+97-117
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,112 @@
1-
import { styles } from '@/ui/style';
2-
import { viga } from '@/ui/fonts';
1+
'use client';
2+
3+
import React from 'react';
4+
import { hexToRgb, calculateLuminance, rgbToHsl } from '@/utils/colorPicker';
5+
// import { styles } from '@/ui/style';
6+
// import { viga } from '@/ui/fonts';
37

48
export default function ColorPalettes() {
9+
const [activeColor, setActiveColor] = React.useState('#eeeeee');
10+
const [textColor, setTextColor] = React.useState('#1a1a1a');
11+
const [terminalColor, setTerminalColor] = React.useState('#dedede');
12+
13+
const handleChangeColor = (newColor) => {
14+
setActiveColor(newColor);
15+
16+
const luminance = calculateLuminance(newColor);
17+
if (luminance > 0.5) {
18+
setTextColor('#1a1a1a');
19+
setTerminalColor('#dedede');
20+
} else {
21+
setTextColor('#eeeeee');
22+
setTerminalColor('#3b3b3b');
23+
}
24+
};
25+
26+
const rgb = hexToRgb(activeColor);
27+
const hsl = rgbToHsl(rgb);
28+
529
return (
6-
<main className={`${styles.flexCenter} mx-72 my-24 flex-wrap gap-8`}>
7-
<div className={`${styles.colorCard} p-4`}>
8-
<div className="h-4/6">
9-
<div
10-
className={`${styles.customBorder} flex h-3/5 items-end bg-[#FFFFE3]`}
11-
>
12-
<p className={`${viga.className} pl-2 text-[#10100E]`}>#FFFFE3</p>
13-
</div>
14-
<div className={`${styles.customBorder} h-2/5 bg-[#10100E]`}>
15-
<p className={`${viga.className} pl-2 text-[#FFFFE3]`}>#10100E</p>
16-
</div>
30+
<main className="mx-60 my-40">
31+
<div
32+
style={{ backgroundColor: activeColor, color: textColor }}
33+
className="my-10 flex h-80 items-center justify-evenly rounded border border-blck/30 text-sm shadow-lg"
34+
>
35+
<div className="flex items-center gap-2">
36+
{/* maybe add hex input, rgb input, and hsl input */}
37+
<p>Test your color:</p>
38+
<input
39+
type="color"
40+
id="chosenColor"
41+
value={`${activeColor}`}
42+
onChange={(e) => handleChangeColor(e.target.value)}
43+
/>
1744
</div>
18-
<div className="mt-2 h-2/6">
19-
<p className="text-2xl font-bold">PORTFOLIO THEME</p>
20-
<p>
21-
This color palette was the one used in the developer&apos;s
22-
portfolio.
23-
</p>
24-
</div>
25-
</div>
26-
<div className={`${styles.colorCard} p-4`}>
27-
<div className="h-4/6">
28-
<div
29-
className={`${styles.customBorder} flex h-3/5 items-end bg-[#1A1A1A]`}
30-
>
31-
<p className={`${viga.className} pl-2 text-whte`}>#1A1A1A</p>
32-
</div>
33-
<div
34-
className={`${styles.customBorder} flex h-1/5 items-center bg-whte`}
35-
>
36-
<p className={`${viga.className} pl-2 text-[#1A1A1A]`}>#EEEEEE</p>
45+
<div className="flex gap-4">
46+
<div className="flex items-center gap-2">
47+
<span className="font-bold">HEX:</span>
48+
<code
49+
className="rounded border border-blck/30 px-5 py-1"
50+
style={{ backgroundColor: terminalColor }}
51+
>
52+
{activeColor}
53+
</code>
54+
</div>
55+
<div className="flex items-center gap-2">
56+
<span className="font-bold">RGB:</span>
57+
<code
58+
className="rounded border border-blck/30 px-5 py-1"
59+
style={{ backgroundColor: terminalColor }}
60+
>
61+
{`rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`}
62+
</code>
63+
</div>
64+
<div className="flex items-center gap-2">
65+
<span className="font-bold">HSL:</span>
66+
<code
67+
className="rounded border border-blck/30 px-5 py-1"
68+
style={{ backgroundColor: terminalColor }}
69+
>
70+
{`hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`}
71+
</code>
3772
</div>
38-
<div className={`${styles.customBorder} h-1/5 bg-[#0BC6AB]`}>
39-
<p className={`${viga.className} pl-2 text-[#1A1A1A]`}>#0BC6AB</p>
40-
</div>
41-
</div>
42-
<div className="mt-2 h-2/6">
43-
<p className="text-2xl font-bold">DARK-TECHY THEME</p>
44-
<p>
45-
This was used for an org website that the developer once worked on.
46-
</p>
4773
</div>
4874
</div>
49-
<div className={`${styles.colorCard} p-4`}>
50-
<div className="h-4/6">
51-
<div
52-
className={`${styles.customBorder} flex h-3/5 items-end bg-whte`}
53-
>
54-
<p className={`${viga.className} pl-2 text-[#393E46]`}>#EEEEEE</p>
55-
</div>
56-
<div className={`${styles.customBorder} h-2/5 bg-[#393E46]`}>
57-
<p className={`${viga.className} pl-2 text-whte`}>#393E46</p>
75+
<div>
76+
<div>
77+
<h3 className="text-lg font-bold">Project-Based Color Palettes:</h3>
78+
<hr className="my-2 border border-blck/10" />
79+
<div className="my-4 flex gap-10">
80+
<div className="flex size-40">
81+
<div className="h-full w-1/2 rounded-l border border-blck bg-[#FFFFE3] text-sm text-blck">
82+
#FFFFE3
83+
</div>
84+
<div className="h-full w-1/2 rounded-r border border-blck bg-[#10100E] text-sm text-whte">
85+
#10100E
86+
</div>
87+
</div>
88+
<div className="flex size-40">
89+
<div className="h-full w-1/2 rounded-l border border-blck bg-[#EEEEEE]"></div>
90+
<div className="h-full w-1/2 rounded-r border border-blck bg-[#393E46]"></div>
91+
</div>
5892
</div>
5993
</div>
60-
<div className="mt-2 h-2/6">
61-
<p className="text-2xl font-bold">PORTFOLIO THEME 2</p>
62-
<p>This color palette was used in someone&apos;s portfolio.</p>
63-
</div>
64-
</div>
65-
<div className={`${styles.colorCard} p-4`}>
66-
<div className="h-4/6">
67-
<div
68-
className={`${styles.customBorder} flex h-2/5 items-end bg-whte`}
69-
>
70-
<p className={`${viga.className} pl-2 text-[#323232]`}>#EEEEEE</p>
71-
</div>
72-
<div
73-
className={`${styles.customBorder} flex h-1/5 items-center bg-[#295F4E]`}
74-
>
75-
<p className={`${viga.className} pl-2 text-whte`}>#295F4E</p>
76-
</div>
77-
<div
78-
className={`${styles.customBorder} flex h-1/5 items-center bg-[#6DB193]`}
79-
>
80-
<p className={`${viga.className} pl-2 text-[#323232]`}>#6DB193</p>
94+
<div className="my-20">
95+
<h3 className="text-lg font-bold">Standard Color Palettes:</h3>
96+
<hr className="my-2 border border-blck/10" />
97+
<div className="my-4">
98+
<div className="flex size-40 flex-col">
99+
<div className="h-1/2 w-full rounded-t bg-[#295F4E]"></div>
100+
<div className="h-1/2 w-full rounded-b bg-[#6DB193]"></div>
101+
</div>
81102
</div>
82-
<div className={`${styles.customBorder} h-1/5 bg-[#323232]`}>
83-
<p className={`${viga.className} pl-2 text-whte`}>#323232</p>
84-
</div>
85-
</div>
86-
<div className="mt-2 h-2/6">
87-
<p className="text-2xl font-bold">THESIS SYSTEM THEME</p>
88-
<p>Dev team color palette for thesis project.</p>
89103
</div>
90-
</div>
91-
<div className={`${styles.colorCard} p-4`}>
92-
<div className="h-4/6">
93-
<div
94-
className={`${styles.customBorder} flex h-1/6 items-center bg-whte`}
95-
>
96-
<p className={`${viga.className} pl-2 text-blck`}>#EEEEEE</p>
104+
<div>
105+
<h3 className="text-lg font-bold">Color Inspirations:</h3>
106+
<hr className="my-2 border border-blck/10" />
107+
<div className="my-4">
108+
<div className="size-40 rounded bg-blck"></div>
97109
</div>
98-
<div
99-
className={`${styles.customBorder} flex h-1/6 items-center bg-cyn`}
100-
>
101-
<p className={`${viga.className} pl-2 text-blck`}>#CBF3F0</p>
102-
</div>
103-
<div
104-
className={`${styles.customBorder} flex h-1/6 items-center bg-bge`}
105-
>
106-
<p className={`${viga.className} pl-2 text-blck`}>#F7EDE2</p>
107-
</div>
108-
<div
109-
className={`${styles.customBorder} flex h-1/6 items-center bg-yllw`}
110-
>
111-
<p className={`${viga.className} pl-2 text-blck`}>#F6BD60</p>
112-
</div>
113-
<div
114-
className={`${styles.customBorder} flex h-1/6 items-center bg-blgrn`}
115-
>
116-
<p className={`${viga.className} pl-2 text-blck`}>#2EC4B6</p>
117-
</div>
118-
<div
119-
className={`${styles.customBorder} flex h-1/6 items-center bg-rd`}
120-
>
121-
<p className={`${viga.className} pl-2 text-blck`}>#E76F51</p>
122-
</div>
123-
</div>
124-
<div className="mt-2 h-2/6">
125-
<p className="text-2xl font-bold">THE NOTEPAD THEME</p>
126-
<p>
127-
This color palette was used on this website itself for different
128-
elements.
129-
</p>
130110
</div>
131111
</div>
132112
</main>

‎app/components/NavigationTabs.jsx

+130
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,133 @@ export default function NavigationTabs() {
3333
</section>
3434
);
3535
}
36+
37+
{
38+
/* <main className={`${styles.flexCenter} mx-72 my-24 flex-wrap gap-8`}>
39+
<div className={`${styles.colorCard} p-4`}>
40+
<div className="h-4/6">
41+
<div
42+
className={`${styles.customBorder} flex h-3/5 items-end bg-[#FFFFE3]`}
43+
>
44+
<p className={`${viga.className} pl-2 text-[#10100E]`}>#FFFFE3</p>
45+
</div>
46+
<div className={`${styles.customBorder} h-2/5 bg-[#10100E]`}>
47+
<p className={`${viga.className} pl-2 text-[#FFFFE3]`}>#10100E</p>
48+
</div>
49+
</div>
50+
<div className="mt-2 h-2/6">
51+
<p className="text-2xl font-bold">PORTFOLIO THEME</p>
52+
<p>
53+
This color palette was the one used in the developer&apos;s
54+
portfolio.
55+
</p>
56+
</div>
57+
</div>
58+
<div className={`${styles.colorCard} p-4`}>
59+
<div className="h-4/6">
60+
<div
61+
className={`${styles.customBorder} flex h-3/5 items-end bg-[#1A1A1A]`}
62+
>
63+
<p className={`${viga.className} pl-2 text-whte`}>#1A1A1A</p>
64+
</div>
65+
<div
66+
className={`${styles.customBorder} flex h-1/5 items-center bg-whte`}
67+
>
68+
<p className={`${viga.className} pl-2 text-[#1A1A1A]`}>#EEEEEE</p>
69+
</div>
70+
<div className={`${styles.customBorder} h-1/5 bg-[#0BC6AB]`}>
71+
<p className={`${viga.className} pl-2 text-[#1A1A1A]`}>#0BC6AB</p>
72+
</div>
73+
</div>
74+
<div className="mt-2 h-2/6">
75+
<p className="text-2xl font-bold">DARK-TECHY THEME</p>
76+
<p>
77+
This was used for an org website that the developer once worked on.
78+
</p>
79+
</div>
80+
</div>
81+
<div className={`${styles.colorCard} p-4`}>
82+
<div className="h-4/6">
83+
<div
84+
className={`${styles.customBorder} flex h-3/5 items-end bg-whte`}
85+
>
86+
<p className={`${viga.className} pl-2 text-[#393E46]`}>#EEEEEE</p>
87+
</div>
88+
<div className={`${styles.customBorder} h-2/5 bg-[#393E46]`}>
89+
<p className={`${viga.className} pl-2 text-whte`}>#393E46</p>
90+
</div>
91+
</div>
92+
<div className="mt-2 h-2/6">
93+
<p className="text-2xl font-bold">PORTFOLIO THEME 2</p>
94+
<p>This color palette was used in someone&apos;s portfolio.</p>
95+
</div>
96+
</div>
97+
<div className={`${styles.colorCard} p-4`}>
98+
<div className="h-4/6">
99+
<div
100+
className={`${styles.customBorder} flex h-2/5 items-end bg-whte`}
101+
>
102+
<p className={`${viga.className} pl-2 text-[#323232]`}>#EEEEEE</p>
103+
</div>
104+
<div
105+
className={`${styles.customBorder} flex h-1/5 items-center bg-[#295F4E]`}
106+
>
107+
<p className={`${viga.className} pl-2 text-whte`}>#295F4E</p>
108+
</div>
109+
<div
110+
className={`${styles.customBorder} flex h-1/5 items-center bg-[#6DB193]`}
111+
>
112+
<p className={`${viga.className} pl-2 text-[#323232]`}>#6DB193</p>
113+
</div>
114+
<div className={`${styles.customBorder} h-1/5 bg-[#323232]`}>
115+
<p className={`${viga.className} pl-2 text-whte`}>#323232</p>
116+
</div>
117+
</div>
118+
<div className="mt-2 h-2/6">
119+
<p className="text-2xl font-bold">THESIS SYSTEM THEME</p>
120+
<p>Dev team color palette for thesis project.</p>
121+
</div>
122+
</div>
123+
<div className={`${styles.colorCard} p-4`}>
124+
<div className="h-4/6">
125+
<div
126+
className={`${styles.customBorder} flex h-1/6 items-center bg-whte`}
127+
>
128+
<p className={`${viga.className} pl-2 text-blck`}>#EEEEEE</p>
129+
</div>
130+
<div
131+
className={`${styles.customBorder} flex h-1/6 items-center bg-cyn`}
132+
>
133+
<p className={`${viga.className} pl-2 text-blck`}>#CBF3F0</p>
134+
</div>
135+
<div
136+
className={`${styles.customBorder} flex h-1/6 items-center bg-bge`}
137+
>
138+
<p className={`${viga.className} pl-2 text-blck`}>#F7EDE2</p>
139+
</div>
140+
<div
141+
className={`${styles.customBorder} flex h-1/6 items-center bg-yllw`}
142+
>
143+
<p className={`${viga.className} pl-2 text-blck`}>#F6BD60</p>
144+
</div>
145+
<div
146+
className={`${styles.customBorder} flex h-1/6 items-center bg-blgrn`}
147+
>
148+
<p className={`${viga.className} pl-2 text-blck`}>#2EC4B6</p>
149+
</div>
150+
<div
151+
className={`${styles.customBorder} flex h-1/6 items-center bg-rd`}
152+
>
153+
<p className={`${viga.className} pl-2 text-blck`}>#E76F51</p>
154+
</div>
155+
</div>
156+
<div className="mt-2 h-2/6">
157+
<p className="text-2xl font-bold">THE NOTEPAD THEME</p>
158+
<p>
159+
This color palette was used on this website itself for different
160+
elements.
161+
</p>
162+
</div>
163+
</div>
164+
</main> */
165+
}

‎app/page.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export default function Home() {
9393
</div>
9494
</div>
9595

96-
<div
96+
{/* <div
9797
className={`${styles.flexBetween} mx-20 mb-60`}
9898
id="js-snippets-section"
9999
>
@@ -119,7 +119,7 @@ export default function Home() {
119119
width={550}
120120
height={150}
121121
/>
122-
</div>
122+
</div> */}
123123

124124
<div className={`${styles.flexCenter} my-40`}>
125125
<Image src="/hr.svg" alt="horizontal rule" width={1100} height={1} />

0 commit comments

Comments
 (0)