v0.9.0 Publication section initial commit

src/App.jsx

@@ -7,6 +7,7 @@ import InfoSection from "./components/info/InfoSection";
 import Separator from "./components/separater/Separater";
 import Projects from "./components/projects/Projects";
 import AboutMe from "./components/aboutMe/AboutMe";
+import Publications from "./components/publications/Publications";
 
 import styles from "./App.module.css";
 
@@ -60,6 +61,9 @@ function App() {
 				<section id="education">
 					<InfoSection title="Education" data={educationData} isEducation={true} />
 				</section>
+				<section id="publications">
+					<Publications />
+				</section>
 			</main>
 			<Footer />
 		</div>

src/components/publications/Publications.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import styles from "./Publications.module.css";
+
+const publicationsData = [
+	{
+		id: 1,
+		title: "Boosting Edge-to-Cloud Data Transmission Efficiency with Semantic Transcoding",
+		authors: "Murtadha Nisyif, Ahmed Refaey, and Sylvester Aboagye",
+		journal: "IEEE Canadian Conference on Electrical and Computer Engineering",
+		year: 2024,
+		// doi: "10.1234/example.doi.2023",
+		// link: "https://doi.org/10.1234/example.doi.2023"
+		pdfLink: "/papers/sem_com01.pdf",
+	},
+	// Add more publications as needed
+];
+
+const Publications = () => {
+	return (
+		<section className={styles.publications} id="publications">
+			<div className={styles.container}>
+				<h2 className={styles.title}>Publications</h2>
+				<div className={styles.publicationList}>
+					{publicationsData.map((pub) => (
+						<div key={pub.id} className={styles.publicationItem}>
+							<h3 className={styles.pubTitle}>{pub.title}</h3>
+							<p className={styles.authors}>{pub.authors}</p>
+							<p className={styles.journalInfo}>
+								{pub.journal}, {pub.year}
+							</p>
+							<div className={styles.buttonGroup}>
+								<a href={pub.link} target="_blank" rel="noopener noreferrer" className={styles.readLink}>
+									Read Publication
+								</a>
+								<a href={pub.pdfLink} download className={styles.downloadLink}>
+									Download PDF
+								</a>
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default Publications;

src/components/publications/Publications.module.css

@@ -0,0 +1,112 @@
+.publications {
+	padding: 80px 0;
+	background-color: #f8f9fa;
+}
+
+.container {
+	max-width: var(--content-width);
+	margin: 0 auto;
+	padding: 0 20px;
+}
+
+.title {
+	font-size: 2.5rem;
+	text-align: center;
+	margin-bottom: 40px;
+	color: #333;
+}
+
+.publicationList {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+	gap: 30px;
+}
+
+.publicationItem {
+	background-color: #fff;
+	border-radius: 8px;
+	padding: 20px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	transition: transform 0.3s ease;
+}
+
+.publicationItem:hover {
+	transform: translateY(-5px);
+}
+
+.pubTitle {
+	font-size: 1.2rem;
+	margin-bottom: 10px;
+	color: #333;
+}
+
+.authors {
+	font-size: 0.9rem;
+	color: #666;
+	margin-bottom: 5px;
+}
+
+.journalInfo {
+	font-size: 0.9rem;
+	color: #666;
+	font-style: italic;
+	margin-bottom: 5px;
+}
+
+.doi {
+	font-size: 0.8rem;
+	color: #888;
+	margin-bottom: 15px;
+}
+
+.buttonGroup {
+	display: flex;
+	justify-content: space-between;
+	gap: 10px;
+}
+
+.readLink,
+.downloadLink {
+	display: inline-block;
+	padding: 8px 15px;
+	border-radius: 5px;
+	text-decoration: none;
+	font-size: 0.9rem;
+	transition: background-color 0.3s ease;
+	text-align: center;
+	flex: 1;
+}
+
+.readLink {
+	background-color: #ff6600;
+	color: #fff;
+}
+
+.readLink:hover {
+	background-color: #e55d00;
+}
+
+.downloadLink {
+	background-color: #fff;
+	color: #ff6600;
+	border: 1px solid #ff6600;
+}
+
+.downloadLink:hover {
+	background-color: #ff6600;
+	color: #fff;
+}
+
+@media (max-width: 768px) {
+	.publications {
+		padding: 60px 0;
+	}
+
+	.publicationList {
+		grid-template-columns: 1fr;
+	}
+
+	.buttonGroup {
+		flex-direction: column;
+	}
+}