Add about bio

Author: realstoman

src/components/AboutMeBio.js

@@ -0,0 +1,47 @@
+import profileImage from '../images/profile.jpeg';
+
+const bios = [
+	{
+		id: 1,
+		bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
+	},
+	{
+		id: 2,
+		bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
+	},
+	{
+		id: 3,
+		bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta?',
+	},
+	{
+		id: 4,
+		bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil vel illum asperiores dignissimos cumque quibusdam et fugiat voluptatem nobis suscipit explicabo, eaque consequatur nesciunt, fugit eligendi corporis laudantium adipisci soluta? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt totam dolorum, ducimus obcaecati, voluptas facilis molestias nobis ut quam natus similique inventore excepturi optio ipsa deleniti fugit illo. Unde, amet! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo necessitatibus perspiciatis! Aperiam perferendis labore temporibus, eos culpa corporis recusandae quas, fuga voluptatibus nesciunt odit libero tenetur neque consequatur ea.',
+	},
+];
+
+const AboutMeBio = () => {
+	return (
+		<div className="block sm:flex sm:gap-10 mt-10 sm:mt-20">
+			{/* About me portfolio image start */}
+			<div class="w-full sm:w-1/4 mb-7 sm:mb-0">
+				<img src={profileImage} class="rounded-xl w-96" alt="" />
+			</div>
+			{/* About me portfolio image end */}
+
+			{/* About me details start */}
+			<div class="w-full sm:w-3/4 text-left">
+				{bios.map((bio) => (
+					<p
+						className="mb-4 text-ternary-dark dark:text-ternary-light text-lg"
+						key={bio.id}
+					>
+						{bio.bio}
+					</p>
+				))}
+			</div>
+			{/* About me details end */}
+		</div>
+	);
+};
+
+export default AboutMeBio;

src/pages/AboutMe.js

@@ -1,7 +1,9 @@
+import AboutMeBio from '../components/AboutMeBio';
+
 const About = () => {
 	return (
-		<div>
-			<h1>This is the About me page</h1>
+		<div className="container mx-auto">
+			<AboutMeBio />
 		</div>
 	);
 };