feat: Add 404 page, blog site

Author: AdityaBhattacharya1

src/components/Header.astro

@@ -1,12 +1,11 @@
 ---
-const title = 'Aditya Bhattacharya | Portfolio Website'
-const description =
-	'Portfolio website for Aditya Bhattacharya, a software developer and UI/UX Designer'
 type Props = {
 	previewImage: string | '/hero-preview.png'
 	url: string | 'https://adityabh.is-a.dev'
+	title?: string
+	description?: string
 }
-const { previewImage, url } = Astro.props
+const { previewImage, url, title, description } = Astro.props
 ---
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -22,18 +21,31 @@ const { previewImage, url } = Astro.props
 <meta name="language" content="English" />
 <meta name="author" content="Aditya Bhattacharya" />
 
-{/* Open Graph tags */}
+<!-- Open Graph Tags -->
 <meta property="og:type" content="website" />
 <meta property="og:url" content={url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 <meta property="og:image" content={previewImage} />
 
-{/* twitter specific */}
+<!-- Twitter specific -->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content={url} />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={previewImage} />
 
 <link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
+
+<!-- Privacy-friendly Analytics -->
+<script
+	async
+	src="https://cdn.splitbee.io/sb.js"
+	type="text/partytown"
+	is:inline></script>
+<script
+	src="https://beamanalytics.b-cdn.net/beam.min.js"
+	data-token="a24be98c-ce23-46dc-93d4-d67b6ca7118d"
+	async
+	type="text/partytown"
+	is:inline></script>

src/components/about/About.astro

@@ -5,8 +5,9 @@ import { skills } from '../../data/skills'
 
 <style>
 	.container {
-		padding: 0 2rem 0 2rem;
+		padding-left: 1rem;
 		font-size: 1.15rem;
+		word-break: break-word;
 	}
 
 	.chip-container {
@@ -28,6 +29,12 @@ import { skills } from '../../data/skills'
 			display: block;
 		}
 	}
+
+	@media screen and (max-width: 300px) {
+		.container {
+			padding: none;
+		}
+	}
 </style>
 <section class="container">
 	<p>

src/components/contact/ContactForm.module.css

@@ -1,7 +1,7 @@
 .container {
 	display: flex;
 	flex-direction: column;
-	height: 40vh;
+	height: 25rem;
 	width: 25rem;
 	padding: 5rem;
 	margin-top: 2rem;
@@ -49,7 +49,7 @@
 	border: 0;
 	border-bottom: 2px solid #9b9b9b;
 	outline: 0;
-	font-size: 1.3rem;
+	font-size: 1rem;
 	color: #000;
 	padding: 7px 0;
 	background: transparent;

src/components/contact/ContactSection.tsx

@@ -33,10 +33,6 @@ function Footer() {
 			name: 'Education',
 			path: '/#education',
 		},
-		{
-			name: '404 Page',
-			path: '/404',
-		},
 	]
 
 	const socials = [

src/components/interface/Button.module.css

@@ -18,9 +18,18 @@
 
 .hero-btn {
 	margin-top: 2rem;
-	height: 5rem;
-	width: 13rem;
+	height: 4.5rem;
+	width: 10rem;
 	border-radius: 50px;
 	font-size: 1rem;
 	font-weight: 600;
+	margin: 0.3rem;
+}
+
+@media screen and (max-width: 400px) {
+	.hero-btn {
+		height: 3.5rem;
+		width: 9rem;
+		font-size: 0.6rem;
+	}
 }

src/components/interface/Button.tsx

@@ -7,9 +7,10 @@ type Props = {
 	className?: string
 	type: 'button' | 'submit' | 'reset' | undefined
 	disabled?: boolean
+	id?: string
 }
 
-function Button({ text, onClick, className, type, disabled }: Props) {
+function Button({ text, onClick, className, type, disabled, id }: Props) {
 	let classNames = `${className || ''} ${classes.btn} `
 	className == 'hero-btn' ? (classNames += classes['hero-btn']) : ''
 	return (
@@ -18,6 +19,7 @@ function Button({ text, onClick, className, type, disabled }: Props) {
 			onClick={onClick}
 			type={type}
 			disabled={disabled}
+			id={id}
 		>
 			{text}
 		</button>

src/components/projects/ProjectSection.astro

@@ -6,7 +6,7 @@ import { projects } from '../../data/projects'
 <section>
 	{
 		projects.map((project, idx) => {
-			return <ProjectCard key={idx} {...project} />
+			return <ProjectCard {...project} />
 		})
 	}
 </section>

src/components/skills/SkillCard.astro

@@ -30,7 +30,7 @@ let resStr = number < 10 ? `0${number}.` : `${number}.`
 		color: #44ab9729;
 		content: attr(data-bg-text);
 		display: block;
-		font-size: 3rem;
+		font-size: 2rem;
 		line-height: 1;
 		position: absolute;
 		font-weight: bold;
@@ -41,12 +41,12 @@ let resStr = number < 10 ? `0${number}.` : `${number}.`
 	.text,
 	.title-span {
 		font-family: 'Roboto Mono', monospace;
-		padding-top: 3rem;
+		padding-top: 2.5rem;
 	}
 
 	.title-span {
 		padding-top: 5px;
-		font-size: 2rem;
+		font-size: 1.5rem;
 		display: block;
 		font-weight: bold;
 	}

src/components/skills/SkillSection.astro

@@ -6,7 +6,7 @@ import SkillCard from './SkillCard.astro'
 <style>
 	.container {
 		display: grid;
-		grid-template-columns: repeat(5, 1fr);
+		grid-template-columns: repeat(6, 1fr);
 		grid-template-rows: repeat(2, 1fr);
 		column-gap: 1rem;
 		row-gap: 2rem;
@@ -42,7 +42,6 @@ import SkillCard from './SkillCard.astro'
 					number={idx + 1}
 					title={skill.title}
 					altText={skill.alt}
-					key={idx}
 				/>
 			)
 		})

src/data/education.ts

@@ -22,6 +22,8 @@ export const educationData: EducationData[] = [
 		endDate: '2027',
 		description: [
 			"Bachelor's of Technology (B.Tech) in Information Technology",
+			'Student Intern at VIERP, college’s own educational platform - led a team in developing a costless AI video summariser',
+			'CGPA: 9.41',
 		],
 	},
 ]