SEO and Accessibility improvement and interview scheduling action added

darsan-in · Jul 10, 2024 · 40d09ad · 40d09ad
1 parent 91a8f0d
commit 40d09ad
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 19 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -45,7 +45,9 @@ export default function RootLayout({
 							}>
 							<a
 								href={`https://github.com/${communication.github}`}
-								className="flex gap-x-2">
+								className="flex gap-x-2"
+								aria-label="Visit github page"
+								title="Visit github page">
 								<div className={iconBgClasses + " bg-black"}>
 									<RiGithubFill size={bannerIconSize} />
 								</div>
@@ -54,7 +56,9 @@ export default function RootLayout({
 
 							<a
 								href={`https://www.linkedin.com/in/${communication.linkedin}`}
-								className="flex gap-x-2">
+								className="flex gap-x-2"
+								aria-label="Visit linked page"
+								title="Visit linked page">
 								<div className={iconBgClasses + " bg-blue-600"}>
 									<RiLinkedinFill size={bannerIconSize} />
 								</div>
@@ -63,7 +67,9 @@ export default function RootLayout({
 
 							<a
 								href={`mailto:${communication.mail}`}
-								className="flex gap-x-2">
+								className="flex gap-x-2"
+								aria-label="Mail me"
+								title="Mail me">
 								<div className={iconBgClasses + " bg-green-600"}>
 									<IoMail size={bannerIconSize} />
 								</div>
@@ -72,7 +78,9 @@ export default function RootLayout({
 
 							<a
 								href={`tel:${communication.phone}`}
-								className="flex gap-x-2">
+								className="flex gap-x-2"
+								aria-label="My contact number"
+								title="My contact number">
 								<div className={iconBgClasses + " bg-teal-600"}>
 									<IoCallSharp size={bannerIconSize} />
 								</div>
@@ -81,7 +89,9 @@ export default function RootLayout({
 
 							<a
 								href="cv.pdf"
-								className="flex gap-x-2">
+								className="flex gap-x-2"
+								aria-label="Download my resume"
+								title="Download my resume">
 								<div className={iconBgClasses + " bg-yellow-600"}>
 									<HiDocumentArrowDown size={bannerIconSize} />
 								</div>

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -14,7 +14,9 @@ export default () => {
 					<div className="flex flex-wrap items-center justify-center gap-3">
 						<a
 							href="/"
-							className="block py-2 px-4 text-white font-medium bg-primary duration-150 hover:bg-secondary active:bg-secondary rounded-lg">
+							className="block py-2 px-4 text-white font-medium bg-primary duration-150 hover:bg-secondary active:bg-secondary rounded-lg"
+							aria-label="go back to home page"
+							title="go back to home page">
 							Go back
 						</a>
 					</div>

diff --git a/app/src/components/education.tsx b/app/src/components/education.tsx
@@ -74,9 +74,9 @@ export default () => {
 						<div
 							className="space-y-3 mt-6 px-8"
 							key={idx}>
-							<h4 className="text-gray-800 text-xl font-bold text-primary flex gap-x-4 items-center">
+							<p className="text-gray-800 text-xl font-bold text-primary flex gap-x-4 items-center">
 								{item.title}
-							</h4>
+							</p>
 							<p className="text-gray-500">{item.desc}</p>
 						</div>
 					))}

diff --git a/app/src/components/quote.tsx b/app/src/components/quote.tsx
@@ -16,6 +16,7 @@ export default () => {
 							<img
 								src="/icon/steve-jobs.webp"
 								className="w-16 h-16 rounded-full"
+								alt="steve jobs"
 							/>
 							<div>
 								<span className="block text-gray-800 font-semibold">

diff --git a/app/src/components/work-card.tsx b/app/src/components/work-card.tsx
@@ -34,7 +34,9 @@ export default ({ projects }: { projects: GithubRepoMeta[] }) => {
 									<a
 										href={project.htmlUrl + "#readme"}
 										target="_"
-										className="text-black text-sm rounded-lg p-1 duration-150 hover:bg-black hover:text-white bg-white">
+										className="text-black text-sm rounded-lg p-1 duration-150 hover:bg-black hover:text-white bg-white"
+										aria-label={"Visit github repo of " + project.name}
+										title={"Visit github repo of " + project.name}>
 										<FaGithub
 											size={20}
 											className="fill-current"
@@ -45,7 +47,13 @@ export default ({ projects }: { projects: GithubRepoMeta[] }) => {
 										<a
 											href={project.homepage ?? ""}
 											target="_"
-											className="text-black text-sm rounded-lg p-1 duration-150 hover:bg-black hover:text-white bg-white">
+											className="text-black text-sm rounded-lg p-1 duration-150 hover:bg-black hover:text-white bg-white"
+											aria-label={
+												"Visit homepage of " + project.name + " project"
+											}
+											title={
+												"Visit homepage of " + project.name + " project"
+											}>
 											<RxExternalLink
 												size={20}
 												className="fill-current"
@@ -110,17 +118,17 @@ export default ({ projects }: { projects: GithubRepoMeta[] }) => {
 										)}
 									</ul>
 									<ul className="text-right">
-										<p>
+										<li>
 											{project.latestVersion
 												? "v" + project.latestVersion
 												: "Unreleased"}
-										</p>
-										<p className="text-blue-500 mt-2">
+										</li>
+										<li className="text-blue-500 mt-2">
 											©️{" "}
 											{project.license.spdxId === "NOASSERTION"
 												? "Custom License"
 												: project.license.spdxId}
-										</p>
+										</li>
 									</ul>
 								</div>
 							</section>

diff --git a/app/src/components/works.tsx b/app/src/components/works.tsx
@@ -81,11 +81,7 @@ export default function Works({
 								className="py-2 px-3 w-full bg-transparent appearance-none outline-none border rounded-lg shadow-sm focus:border-gray-800 text-sm"
 								onChange={(e) => setSelectedTab(e.target.value)}>
 								{tabs.map((language, idx) => (
-									<option
-										key={idx}
-										tabIndex={idx}>
-										{language}
-									</option>
+									<option key={idx}>{language}</option>
 								))}
 							</select>
 						</div>

diff --git a/app/src/icons/hireme.tsx b/app/src/icons/hireme.tsx
@@ -1,8 +1,13 @@
+"use client";
+
 import { IoIosRocket } from "react-icons/io";
 
 export default () => {
 	return (
 		<button
+			onClick={() => {
+				location.href = "https://calendar.app.google/eYXb2TUHy4k3S8oX8";
+			}}
 			type="button"
 			className="relative inline-flex items-center p-3 px-5 text-sm font-medium text-center text-white bg-primary rounded-full hover:bg-secondary focus:ring-4 focus:outline-none focus:ring-blue-300 hover:text-black">
 			<IoIosRocket size={22} />