Merge pull request #5 from vnvyvu/init

Init

src/app/@header/page.tsx

@@ -10,34 +10,34 @@ import { LabelWithIcon } from '../_components/label-with-icon';
 
 export default async function Header() {
 	return (
-		<header className='bg-sky-900 p-8 gap-8 flex'>
+		<header className='bg-sky-900 p-8 gap-8 flex text-base'>
 			<div className='flex flex-wrap'>
-				<h1 className='font-semibold text-4xl basis-full'>VU CHI VY</h1>
-				<h2 className='font-semibold text-lg basis-full'>
+				<h1 className='font-semibold text-7xl basis-full'>VU CHI VY</h1>
+				<h2 className='font-semibold text-3xl basis-full'>
 					Web Developer
 				</h2>
 				<LabelWithIcon
-					icon={<SiMaildotru size={16} />}
+					icon={<SiMaildotru size={24} />}
 					label='[email protected]'
-					className='text-sm basis-1/2'
+					className='basis-1/2'
 				/>
 				<LabelWithIcon
-					icon={<SiLinkedin size={16} />}
+					icon={<SiLinkedin size={24} />}
 					label='https://www.linkedin.com/in/vy-vu-761bab274/'
-					className='text-sm basis-1/2'
+					className='basis-1/2'
 				/>
 				<LabelWithIcon
-					icon={<SiGithub size={16} />}
+					icon={<SiGithub size={24} />}
 					label='https://github.com/vnvyvu'
-					className='text-sm basis-1/2'
+					className='basis-1/2'
 				/>
 				<LabelWithIcon
-					icon={<SiGooglemaps size={16} />}
+					icon={<SiGooglemaps size={24} />}
 					label='Thanh Xuan district'
-					className='text-sm basis-1/2'
+					className='basis-1/2'
 				/>
 			</div>
-			<div className='min-w-32 max-w-32 min-h-32 max-h-32 overflow-clip rounded-md mt-5 ml-auto'>
+			<div className='min-w-40 max-w-40 min-h-40 max-h-40 overflow-clip rounded-md mt-5 ml-auto'>
 				<Image src={avatar} className='-mt-5' alt='avatar' />
 			</div>
 		</header>

src/app/@main/@certificates/page.tsx

@@ -5,18 +5,18 @@ import { MdCalendarMonth, MdLanguage, MdSchool } from 'react-icons/md';
 export default function Certificates() {
 	return (
 		<Section title='Certificates'>
-			<div className='flex flex-col gap-1 mt-1'>
+			<div className='flex flex-col gap-1 mt-1 text-base'>
 				<LabelWithIcon
 					icon={
 						<MdLanguage
-							size={21}
+							size={34}
 							color='#283665'
 							className='mr-1 self-start'
 						/>
 					}
 					label={
 						<>
-							<span className='text-sm font-semibold'>
+							<span className='text-lg font-semibold'>
 								IIG TOEIC 2 SKILLS
 							</span>
 							<br />
@@ -33,14 +33,14 @@ export default function Certificates() {
 				<LabelWithIcon
 					icon={
 						<MdSchool
-							size={24}
+							size={36}
 							color='#283665'
 							className='mr-1 self-start'
 						/>
 					}
 					label={
 						<>
-							<span className='text-sm font-semibold'>
+							<span className='text-lg font-semibold'>
 								Bachelor of Information Security
 							</span>
 							<br />

src/app/@main/@projects/_project.tsx

@@ -25,18 +25,13 @@ export function Project({
 		<div
 			className={twMerge('flex flex-col gap-2', divider ? 'divider' : '')}
 		>
-			<h2 className='text-base text-[#493f3f]'>{projectName}</h2>
+			<h2 className='text-2xl text-[#493f3f]'>{projectName}</h2>
 			<div className='flex gap-16 mb-2 -mt-1 text-[#61636b]'>
 				<LabelWithIcon
 					icon={<MdCalendarMonth size={16} />}
 					label={date}
-					className='text-xs'
-				/>
-				<LabelWithIcon
-					icon={<MdWork size={16} />}
-					label={company}
-					className='text-xs'
 				/>
+				<LabelWithIcon icon={<MdWork size={16} />} label={company} />
 			</div>
 			<div>
 				<span className='font-semibold'>Role: </span>

src/app/@main/@skills/page.tsx

@@ -39,9 +39,6 @@ export default async function Skills() {
 						'EC2',
 						'ELB',
 						'RDS',
-						'SQS',
-						'SNS',
-						'Event Bridge',
 						'IAM',
 						'CloudFront',
 						'CloudWatch',

src/app/_components/badges.tsx

@@ -17,7 +17,7 @@ export function Badges({
 				divider ? 'divider' : '',
 			)}
 		>
-			<span className='text-sm text-[#5a6182]'>{title}</span>
+			<span className='text-xl text-[#5a6182]'>{title}</span>
 			<div className='flex flex-wrap gap-2'>
 				{badges.map(badge => (
 					<span

src/app/_components/section.tsx

@@ -3,8 +3,8 @@ interface SectionProps extends React.PropsWithChildren {
 }
 export function Section({ title, children }: SectionProps) {
 	return (
-		<div className='text-xs flex flex-col gap-2'>
-			<span className='relative uppercase font-semibold text-xl text-[#645b5b] before:absolute before:border-b-4 before:border-[#645b5b] before:w-full before:bottom-0'>
+		<div className='text-base flex flex-col gap-2'>
+			<span className='relative uppercase font-semibold text-4xl text-[#645b5b] before:absolute before:border-b-4 before:border-[#645b5b] before:w-full before:bottom-0'>
 				{title}
 			</span>
 			{children}