Skip to content

Commit

Permalink
Added classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@JowaDev
JowaDev committed May 11, 2024
1 parent a9a6135 commit 0114069
Show file tree
Hide file tree
Showing 9 changed files with 37 additions and 28 deletions.
6 changes: 4 additions & 2 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;
--primary: 240 4% 16%;
--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
--secondary: 0 100% 50%;
--secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
Expand All @@ -32,6 +32,8 @@
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;

--console: 240 10% 4%;

--radius: 0.5rem;
}

Expand Down
2 changes: 1 addition & 1 deletion src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function Home() {
className='fixed text-2xl font-mono text-white z-30 w-1/3'
/>
<div
className='relative flex items-end p-8 justify-center left-[35%] h-[110%] -top-1/3 transform rotate-45 overflow-hidden bg-[#183D3D] z-20 border border-[#28282b] transition duration-500 ease-in-out hover:scale-110 hover:text-white text-transparent'
className='relative flex items-end p-8 justify-center left-[35%] h-[110%] -top-1/3 transform rotate-45 overflow-hidden bg-[#183D3D] z-20 border border-primary transition duration-500 ease-in-out hover:scale-110 hover:text-white text-transparent'
>
<span
className='transform -rotate-45'
Expand Down
4 changes: 2 additions & 2 deletions src/components/Card/CardFan.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const Card: FC<CardProps> = ({title, description, rotate}) => {
const [cardIsOverlapped, setCardIsOverlapped] = useState(false);
return (
<motion.div
className={`fixed bg-[#09090b] h-[450px] w-[250px] rounded-lg p-4 border border-[#${cardIsOverlapped ? 'FF0000' : '28282b'}] origin-bottom-left overflow-hidden`}
className={`fixed bg-console h-[450px] w-[250px] rounded-lg p-4 border border-${cardIsOverlapped ? 'secondary' : 'primary'} origin-bottom-left overflow-hidden`}
onMouseOver={() => {
setCardIsOverlapped(true);
}}
Expand Down Expand Up @@ -132,7 +132,7 @@ const Card: FC<CardProps> = ({title, description, rotate}) => {
{description}
</p>
<span
className="fixed -bottom-10 -left-8 bg-[#FF0000] h-16 w-12 transform rotate-45 animate-pulse"
className="fixed -bottom-10 -left-8 bg-secondary h-16 w-12 transform rotate-45 animate-pulse"
/>
</motion.div>
)
Expand Down
2 changes: 1 addition & 1 deletion src/components/Console/Console.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const Console: FC<FadeInProps> = ({children}) => {
useCloseConsole(5000);
return (
<motion.div
className={`absolute inset-0 bg-[#09090b] rounded-lg border border-[#28282b] overflow-hidden h-full w-full ${isWindowReduced && "cursor-pointer"}`}
className={`absolute inset-0 bg-[#09090b] rounded-lg border border-primary overflow-hidden h-full w-full ${isWindowReduced && "cursor-pointer"}`}
onClick={isWindowReduced ? () => setIsWindowReduced(false) : undefined}
animate={{
scale: isConsoleClosed ? .9 : 1,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Console/ConsoleBackground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const ConsoleBackground: FC<ConsoleBackgroundProps> = ({children}) => {
return (
<>
<motion.div
className={`relative h-full w-full rounded-lg overflow-hidden bg-black border ${isConsoleClosed || isWindowReduced ? 'border-[#FF0000]' : 'border-[#28282b]'}`}
className={`relative h-full w-full rounded-lg overflow-hidden bg-black ${isConsoleClosed || isWindowReduced && 'border border-secondary'}`}
initial={{
opacity: 0,
y: "-100%"
Expand Down
25 changes: 15 additions & 10 deletions src/components/Console/ConsoleFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const ConsoleFooter: FC<ConsoleFooterProps> = () => {
const parentRef = useRef<HTMLDivElement>(null);
return (
<div
className='flex fixed bottom-0 w-full border-t border-[#28282b] h-8 items-center overflow-hidden z-20 text-[12px] font-thin bg-[#09090b]'
className='flex fixed bottom-0 w-full border-t border-primary h-8 items-center overflow-hidden z-20 text-[12px] font-thin bg-console'
ref={parentRef}
>
<Halo
Expand All @@ -24,18 +24,23 @@ export const ConsoleFooter: FC<ConsoleFooterProps> = () => {
parentRef={parentRef}
/>
<div
className='px-2 h-full border-r border-[#28282b] flex items-center w-fit space-x-2'
className='px-2 h-full border-r border-primary flex items-center w-fit space-x-2'
>
<GitBranchIcon
size={15}
color='#FF0000'
className='text-secondary'
/>
<span>
main
</span>
<Link
href='https://github.com/JowaDev/resume'
target='_blank'
>
<span>
master
</span>
</Link>
</div>
<div
className='px-2 h-full flex items-center w-fit space-x-2 border-r border-[#28282b]'
className='px-2 h-full flex items-center w-fit space-x-2 border-r border-primary'
>
<motion.span
whileHover={{
Expand All @@ -48,20 +53,20 @@ export const ConsoleFooter: FC<ConsoleFooterProps> = () => {
>
<RefreshCcwIcon
size={15}
color='#FF0000'
className='text-secondary'
/>
</motion.span>
</div>
<div
className='px-2 h-full flex items-center w-fit space-x-2 border-r border-[#28282b]'
className='px-2 h-full flex items-center w-fit space-x-2 border-r border-primary'
>
<Link
href='https://eu.umami.is/share/mhcJrIxVskrjqxV1/resume.jowa.dev'
target='_blank'
>
<AreaChartIcon
size={15}
color='#FF0000'
className='text-secondary'
/>
</Link>
</div>
Expand Down
19 changes: 9 additions & 10 deletions src/components/Console/ConsoleHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const ConsoleHeader: FC<ConsoleProps> = () => {
const {setIsWindowReduced, setIsConsoleClosed} = useContext(globalContext);
return (
<div
className='relative grid grid-cols-12 border-b border-[#28282b] h-12 items-center px-[16px] overflow-hidden'
className='relative grid grid-cols-12 border-b border-primary h-12 items-center px-[16px] overflow-hidden'
ref={parentRef}
>
<Halo
Expand All @@ -24,31 +24,30 @@ export const ConsoleHeader: FC<ConsoleProps> = () => {
parentRef={parentRef}
/>
<div
className='col-span-3 flex items-center border-r border-[#28282b] h-full cursor-default text-white'
className='col-span-3 flex items-center border-r border-primary h-full cursor-default text-white'
>
<ChevronRight
color='#FF0000'
className='animate-pulse'
className='animate-pulse text-secondary'
/>
JowaDev
</div>
<div
className='col-span-2 flex justify-center items-center border-r border-[#28282b] h-full'
className='col-span-2 flex justify-center items-center border-r border-primary h-full'
>
<NavLink
word={'_welcome'}
/>
</div>
<div
className='col-span-2 flex justify-center items-center border-r border-[#28282b] h-full'
className='col-span-2 flex justify-center items-center border-r border-primary h-full'
>
<NavLink
word={'_about-me'}
href='/about-me'
/>
</div>
<div
className='col-span-2 flex justify-center items-center border-r border-[#28282b] h-full'
className='col-span-2 flex justify-center items-center border-r border-primary h-full'
>
<NavLink
word={'_portfolio'}
Expand All @@ -57,14 +56,14 @@ export const ConsoleHeader: FC<ConsoleProps> = () => {
/>
</div>
<span
className='absolute flex items-center inset-y-0 top-1/2 right-[25px] transform -translate-y-1/2 h-3 w-3 bg-[#FF0000] rounded-full cursor-pointer'
className='absolute flex items-center top-1/2 right-[25px] transform -translate-y-1/2 h-3 w-3 bg-secondary rounded-full cursor-pointer animate-pulse'
onClick={() => setIsConsoleClosed(prevState => !prevState)}
/>
<span
className='absolute flex items-center inset-y-0 top-1/2 right-[45px] transform -translate-y-1/2 h-3 w-3 bg-green-600 rounded-full'
className='absolute flex items-center top-1/2 right-[45px] transform -translate-y-1/2 h-3 w-3 bg-green-600 rounded-full'
/>
<span
className='absolute flex items-center inset-y-0 top-1/2 right-[65px] transform -translate-y-1/2 h-3 w-3 bg-gray-600 rounded-full cursor-pointer'
className='absolute flex items-center top-1/2 right-[65px] transform -translate-y-1/2 h-3 w-3 bg-gray-600 rounded-full cursor-pointer animate-pulse'
onClick={() => setIsWindowReduced(prevState => !prevState)}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Effect/TypeWritterEffect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const CursorBlinker = () => {
<motion.div
variants={cursorVariants}
animate="blinking"
className="inline-block h-6 w-[1px] translate-y-1 bg-[#FF0000]"
className="inline-block h-6 w-[1px] translate-y-1 bg-secondary"
/>
);
}
3 changes: 3 additions & 0 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ const config = {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
console: {
DEFAULT: "hsl(var(--console))",
},
},
borderRadius: {
lg: "var(--radius)",
Expand Down

0 comments on commit 0114069

Please sign in to comment.