Skip to content

Commit 3d27387

Browse files
ar1603ar1603
committed
fix(): Fixing the issues
1 parent bba57c5 commit 3d27387

7 files changed

Lines changed: 139 additions & 104 deletions

File tree

‎src/components/Button/LinkButton/LinkButton.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@ const LinkButton = ({
3838

3939
const translationProps = isHovered
4040
? {
41-
transform: 'translateY(12px)',
41+
transform: 'translateY(16px)',
4242
transition: 'transform 0.2s',
4343
}
4444
: {
45-
transform: 'translateY(-11px)',
45+
transform: 'translateY(-15px)',
4646
transition: 'transform 0.2s',
4747
};
4848

@@ -67,6 +67,7 @@ const LinkButton = ({
6767
onMouseEnter={onMouseEnter}
6868
onMouseLeave={onMouseLeave}
6969
justifyItems={'end'}
70+
rowGap={2}
7071
>
7172
<Text
7273
pointerEvents={'none'}

‎src/components/CardComponent/Card.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useMotionValue } from 'framer-motion';
22
import { useState, useEffect } from 'react';
33
import { useMotionTemplate, motion } from 'framer-motion';
4+
import { Box } from '@chakra-ui/react';
45

56
export const Icon = ({ className, ...rest }: any) => {
67
return (
@@ -18,13 +19,7 @@ export const Icon = ({ className, ...rest }: any) => {
1819
);
1920
};
2021

21-
export const CardBasic = ({
22-
text,
23-
className,
24-
}: {
25-
text?: string;
26-
className?: string;
27-
}) => {
22+
export const CardBasic = ({ text }: { text?: string }) => {
2823
const mouseX = useMotionValue(0);
2924
const mouseY = useMotionValue(0);
3025

@@ -45,9 +40,11 @@ export const CardBasic = ({
4540
}
4641

4742
return (
48-
<div
43+
<Box
44+
width={{ base: '36', md: '44', lg: '64' }}
45+
h={'100%'}
4946
className={
50-
'p-0.5 bg-transparent aspect-square flex items-center justify-center w-full h-full relative'
47+
'p-0.5 bg-transparent aspect-square flex items-center justify-center relative'
5148
}
5249
>
5350
<div
@@ -60,15 +57,15 @@ export const CardBasic = ({
6057
randomString={randomString}
6158
/>
6259
<div className="relative z-10 flex items-center justify-center">
63-
<div className="relative h-44 w-44 rounded-full flex items-center justify-center text-white font-bold text-4xl">
60+
<div className="relative h-28 w-28 rounded-full flex items-center justify-center text-white font-bold text-4xl">
6461
<div className="absolute w-full h-full bg-white/[0.8] dark:bg-black/[0.8] blur-sm rounded-full" />
6562
<span className="dark:text-white text-black z-20 text-center w-[200%]">
6663
{text}
6764
</span>
6865
</div>
6966
</div>
7067
</div>
71-
</div>
68+
</Box>
7269
);
7370
};
7471

‎src/components/CardComponent/CardExport.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Card = ({ titleText, chips: chipText, centerText }: CardExportProps) => {
1919
})
2020
}
2121
onMouseLeave={() => setCursorInsets(undefined)}
22-
className="border border-black/[0.2] dark:border-white/[0.2] flex flex-col items-start max-w-sm p-4 relative h-[30rem]"
22+
className="border border-black/[0.2] dark:border-white/[0.2] flex flex-col items-start max-w-sm p-4 relative"
2323
>
2424
<CardBasic text={centerText} />
2525
<Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" />

‎src/components/WavyBackground/WavyBackground.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Box } from '@chakra-ui/react';
12
import { useEffect, useRef, useState } from 'react';
23
import { createNoise3D } from 'simplex-noise';
34

@@ -112,10 +113,10 @@ const WavyBackground = ({
112113
return (
113114
<div
114115
className={
115-
'h-screen flex flex-col items-center justify-center mx-auto pb-20'
116+
'flex flex-col items-center justify-center mx-auto pb-20'
116117
}
117118
style={{
118-
height: '30vh',
119+
height: '20vh',
119120
zIndex: 0,
120121
top: 0,
121122
overflowX: 'clip',
@@ -130,15 +131,15 @@ const WavyBackground = ({
130131
...(isSafari ? { filter: `blur(${blur}px)` } : {}),
131132
}}
132133
></canvas>
133-
<div
134+
<Box
134135
className={'z-0'}
135136
style={{
136137
position: 'absolute',
137138
}}
138139
{...props}
139140
>
140141
{children}
141-
</div>
142+
</Box>
142143
</div>
143144
);
144145
};

‎src/screens/mainFlow/components/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const Footer = () => {
2323
p={2}
2424
bg={'black'}
2525
color={'white'}
26-
marginTop={24}
26+
marginY={24}
2727
>
2828
<HoverBorderGradient>
2929
<FooterEndText />

‎src/screens/mainFlow/components/NavigationBar.tsx‎

Lines changed: 78 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -47,89 +47,95 @@ const NavigationBar = () => {
4747
const onMouseLeave = () => {
4848
setCursorInsets(undefined);
4949
};
50+
5051
return (
51-
<HStack
52-
position={'fixed'}
53-
marginY={8}
54-
w={'100%'}
55-
paddingRight={14}
56-
paddingLeft={32}
57-
zIndex={1000}
58-
justifyContent={'space-between'}
59-
>
60-
<Img
61-
src={AmitRaikwarLogo}
62-
alt={'logo'}
63-
w={8}
64-
h={6}
65-
_hover={{
66-
transform: 'scale(1.3)',
67-
transition: 'transform 0.5s',
68-
cursor: 'pointer',
69-
}}
70-
/>
71-
<HStack>
72-
<HStack
73-
columnGap={3}
74-
border={'1px solid gray'}
75-
padding="2"
76-
borderRadius="100px"
77-
bg={'rgba(255, 255, 255, 0.1)'}
78-
backdropFilter={'blur(20px)'}
79-
transition={'background-color 0.3s'}
80-
>
81-
{NavigationLink.map(({ name, href }) => (
82-
<LinkButton
83-
key={name}
84-
text={t(name)}
85-
href={`#${href}`}
86-
fontSize={'lg'}
87-
animationOnHover
88-
/>
89-
))}
90-
<LinkButton
91-
key={ArticleLink.name}
92-
text={t(ArticleLink.name)}
93-
href={ArticleLink.href}
94-
fontSize={'lg'}
95-
animationOnHover
96-
/>
97-
<Box
98-
padding="0.2"
52+
<>
53+
<HStack
54+
position={'fixed'}
55+
marginY={{ md: 4, xl: 6 }}
56+
w={'100%'}
57+
paddingRight={14}
58+
paddingLeft={{ base: 14, '2xl': 32 }}
59+
zIndex={1000}
60+
justifyContent={'space-between'}
61+
>
62+
<Img
63+
src={AmitRaikwarLogo}
64+
alt={'logo'}
65+
w={8}
66+
h={6}
67+
_hover={{
68+
transform: 'scale(1.3)',
69+
transition: 'transform 0.5s',
70+
cursor: 'pointer',
71+
}}
72+
/>
73+
<HStack>
74+
<HStack
75+
border={'1px solid gray'}
76+
padding="2.5"
77+
color={'white'}
9978
borderRadius="100px"
10079
bg={'rgba(255, 255, 255, 0.1)'}
10180
backdropFilter={'blur(20px)'}
102-
transition={'background-color 0.3s'}
81+
transition={'all 0.3s'}
82+
_hover={{
83+
transform: 'scale(1.1)',
84+
cursor: 'pointer',
85+
}}
86+
onMouseEnter={onMouseEnter}
87+
onMouseLeave={onMouseLeave}
88+
ref={ref}
89+
onClick={() => {}} // eslint-disable-line
10390
>
104-
<LinkButton
105-
key={'Contact'}
106-
text={t('navigation.contact')}
107-
href={'#contact'}
108-
fontSize={'lg'}
109-
/>
110-
</Box>
91+
<SearchIcon />
92+
</HStack>
11193
</HStack>
112-
<HStack
113-
border={'1px solid gray'}
114-
padding="2.5"
115-
color={'white'}
94+
</HStack>
95+
<HStack
96+
zIndex={1000}
97+
position={'fixed'}
98+
columnGap={3}
99+
bottom={4}
100+
border={'1px solid gray'}
101+
padding="2"
102+
borderRadius="100px"
103+
bg={'rgba(255, 255, 255, 0.1)'}
104+
backdropFilter={'blur(20px)'}
105+
transition={'background-color 0.3s'}
106+
>
107+
{NavigationLink.map(({ name, href }) => (
108+
<LinkButton
109+
key={name}
110+
text={t(name)}
111+
href={`#${href}`}
112+
fontSize={'lg'}
113+
animationOnHover
114+
/>
115+
))}
116+
<LinkButton
117+
key={ArticleLink.name}
118+
text={t(ArticleLink.name)}
119+
href={ArticleLink.href}
120+
fontSize={'lg'}
121+
animationOnHover
122+
/>
123+
<Box
124+
padding="0.2"
116125
borderRadius="100px"
117126
bg={'rgba(255, 255, 255, 0.1)'}
118127
backdropFilter={'blur(20px)'}
119-
transition={'all 0.3s'}
120-
_hover={{
121-
transform: 'scale(1.1)',
122-
cursor: 'pointer',
123-
}}
124-
onMouseEnter={onMouseEnter}
125-
onMouseLeave={onMouseLeave}
126-
ref={ref}
127-
onClick={() => {}} // eslint-disable-line
128+
transition={'background-color 0.3s'}
128129
>
129-
<SearchIcon />
130-
</HStack>
130+
<LinkButton
131+
key={'Contact'}
132+
text={t('navigation.contact')}
133+
href={'#contact'}
134+
fontSize={'lg'}
135+
/>
136+
</Box>
131137
</HStack>
132-
</HStack>
138+
</>
133139
);
134140
};
135141

‎src/screens/mainFlow/contents/projects/Projects.tsx‎

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
1-
import { Box, HStack } from '@chakra-ui/react';
1+
import {
2+
Box,
3+
Heading,
4+
HStack,
5+
IconButton,
6+
Text,
7+
VStack,
8+
} from '@chakra-ui/react';
29
import { AnimatedModal, Card, ThreeDPin, WavyBackground } from '@components';
310
import { useTranslation } from 'react-i18next';
411
import { ProjectItemType, ProjectsData } from '@data';
12+
import { GithubIcon } from '@assets';
13+
import { useScroll } from 'framer-motion';
514

615
const HeroText = () => {
716
const { t } = useTranslation();
@@ -11,15 +20,19 @@ const HeroText = () => {
1120
style={{
1221
height: 'auto',
1322
zIndex: 100,
14-
marginTop: '8vh',
23+
marginTop: '14vh',
1524
}}
25+
fontSize={{ base: '2xl', md: '3xl', lg: '5xl' }}
1626
>
17-
<p className="text-2xl md:text-4xl lg:text-7xl text-white font-bold inter-var text-center">
27+
<Text className=" text-white font-bold inter-var text-center">
1828
{t('about.quoteHeading')}
19-
</p>
20-
<p className="text-base md:text-lg mt-4 text-white font-normal inter-var text-center">
29+
</Text>
30+
<Text
31+
className="text-base md:text-lg text-white font-normal inter-var text-center"
32+
marginTop={{ base: 2 }}
33+
>
2134
{t('about.quoteHeading')}
22-
</p>
35+
</Text>
2336
</Box>
2437
);
2538
};
@@ -35,16 +48,32 @@ const ProjectItem = ({
3548
demoVideo,
3649
}: ProjectItemType) => {
3750
return (
38-
<HStack height={'70vh'} width={'100%'} px={32}>
51+
<HStack width={'100%'} px={32} border={'1px solid white'}>
3952
<ThreeDPin title={title} href={link}>
4053
<Card centerText="Hourcoding" titleText={title} chips={tags} />
4154
</ThreeDPin>
42-
<AnimatedModal
43-
triggerText={'See demo'}
44-
title={title}
45-
videoUrl={demoVideo}
46-
websiteUrl={link}
47-
/>
55+
<VStack justifyContent={'flex-start'}>
56+
<HStack py={10}>
57+
<Heading size="lg">{title}</Heading>
58+
<IconButton
59+
variant="outline"
60+
aria-label="Github"
61+
color={'white'}
62+
width={10}
63+
icon={<GithubIcon width={'2em'} />}
64+
_hover={{ color: 'white' }}
65+
as="a"
66+
href={githubLink}
67+
/>
68+
</HStack>
69+
<Text>{description}</Text>
70+
<AnimatedModal
71+
triggerText={'Demo'}
72+
title={title}
73+
videoUrl={demoVideo}
74+
websiteUrl={link}
75+
/>
76+
</VStack>
4877
</HStack>
4978
);
5079
};
@@ -56,6 +85,7 @@ const Projects = () => {
5685
<HeroText />
5786
</WavyBackground>
5887
<ProjectItem {...ProjectsData[0]} />
88+
<ProjectItem {...ProjectsData[0]} />
5989
</Box>
6090
);
6191
};

0 commit comments

Comments
 (0)