-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
118 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,86 @@ | ||
| import React from 'react'; | ||
| import Image from 'next/image'; | ||
| import GradientBG from '../ui-utils/GradientBG'; | ||
| import React from "react"; | ||
| import Image from "next/image"; | ||
| import GradientBG from "@/components/"; | ||
| import { GetStaticProps } from "next"; | ||
|
|
||
| // Define the types for your data | ||
| interface AboutMeData { | ||
| imageSrc: string; | ||
| name: string; | ||
| title: string; | ||
| description: string[]; | ||
| } | ||
|
|
||
| interface AboutMeProps { | ||
| data: AboutMeData; | ||
| } | ||
|
|
||
| const AboutMe: React.FC<AboutMeProps> = ({ data }) => { | ||
| if (!data) { | ||
| return <div>Error loading data</div>; | ||
| } | ||
|
|
||
| const AboutMe = () => { | ||
| return ( | ||
| <div className=" bg-gray-100 dark:bg-gray-800 flex justify-center items-center"> | ||
| <div className="bg-gray-100 dark:bg-gray-800 flex justify-center items-center"> | ||
| <GradientBG /> | ||
| <div className="lg:w-[80%] sm:w-[80%] xs:w-[90%] mx-auto flex flex-col lg:flex-row gap-8 items-center"> | ||
| {/* Image Section */} | ||
| <div className="w-full lg:w-1/3 flex justify-center lg:justify-end"> | ||
| <Image | ||
| width={300} | ||
| height={300} | ||
| src="https://avatars.githubusercontent.com/u/105772384?v=4" | ||
| src={data.imageSrc} | ||
| alt="About Me" | ||
| className="w-32 h-32 lg:w-48 lg:h-48 object-cover rounded-full shadow-xl border-green-400 border-4" | ||
| /> | ||
| </div> | ||
| {/* Article Section */} | ||
| <div className="w-full lg:w-3/1 flex flex-col gap-4 text-dark dark:text-white p-4 rounded-lg border border-green-300 shadow-xl shadow-green-400/30"> | ||
| <h5 className="text-sm text-green-500 font-semibold">About Me</h5> | ||
| <h2 className="text-3xl font-semibold uppercase font-serif">Samuel Abera</h2> | ||
| <h5 className="text-sm text-green-500 font-semibold">{data.title}</h5> | ||
| <h2 className="text-3xl font-semibold uppercase font-serif"> | ||
| {data.name} | ||
| </h2> | ||
| <hr className="w-[50%] h-1 rounded-full border-t-green-500 bg-green-500" /> | ||
| <p className="text-sm"> | ||
| Hello! I am Samuel Abera, a versatile developer specializing in bridging the gap between front-end design and back-end functionality. My expertise lies in creating seamless user experiences by transforming lines of code into interactive and intuitive digital solutions. I excel in solving complex problems and collaborating effectively with diverse teams to deliver innovative solutions. | ||
| </p> | ||
| <p className="text-sm"> | ||
| I thrive on embracing the latest technologies to build efficient and scalable applications. Passionate about coding and committed to excellence, I am dedicated to crafting the future of digital experiences. With a strong foundation in Node.js, JavaScript, and TypeScript, I consistently push the boundaries of what’s possible in web development, ensuring that each project not only meets but exceeds user expectations. | ||
| </p> | ||
| {data.description.map((paragraph, index) => ( | ||
| <p key={index} className="text-sm"> | ||
| {paragraph} | ||
| </p> | ||
| ))} | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AboutMe; | ||
|
|
||
| export const getStaticProps: GetStaticProps = async () => { | ||
| const fs = require("fs"); | ||
| const path = require("path"); | ||
| const filePath = path.join(process.cwd(), "", ""); | ||
|
|
||
| // Check if the file exists | ||
| if (!fs.existsSync(filePath)) { | ||
| return { | ||
| props: { | ||
| data: null, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| const jsonData = fs.readFileSync(filePath, "utf8"); | ||
| let data; | ||
|
|
||
| try { | ||
| data = JSON.parse(jsonData); | ||
| } catch (error) { | ||
| console.error("Error parsing JSON:", error); | ||
| data = null; | ||
| } | ||
|
|
||
| return { | ||
| props: { | ||
| data: data ? data.aboutMe : null, | ||
| }, | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "aboutMe": { | ||
| "imageSrc": "https://avatars.githubusercontent.com/u/105772384?v=4", | ||
| "name": "Samuel Abera", | ||
| "title": "About Me", | ||
| "description": [ | ||
| "Hello! I am Samuel Abera, a versatile developer specializing in bridging the gap between front-end design and back-end functionality. My expertise lies in creating seamless user experiences by transforming lines of code into interactive and intuitive digital solutions. I excel in solving complex problems and collaborating effectively with diverse teams to deliver innovative solutions.", | ||
| "I thrive on embracing the latest technologies to build efficient and scalable applications. Passionate about coding and committed to excellence, I am dedicated to crafting the future of digital experiences. With a strong foundation in Node.js, JavaScript, and TypeScript, I consistently push the boundaries of what’s possible in web development, ensuring that each project not only meets but exceeds user expectations." | ||
| ] | ||
| } | ||
| } |