diff --git a/src/App.jsx b/src/App.jsx index 1429557..71189d2 100644 --- a/src/App.jsx +++ b/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() { + + + diff --git a/src/components/publications/Publications.jsx b/src/components/publications/Publications.jsx new file mode 100644 index 0000000..d7a2d96 --- /dev/null +++ b/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 ( + + + Publications + + {publicationsData.map((pub) => ( + + {pub.title} + {pub.authors} + + {pub.journal}, {pub.year} + + + + Read Publication + + + Download PDF + + + + ))} + + + + ); +}; + +export default Publications; diff --git a/src/components/publications/Publications.module.css b/src/components/publications/Publications.module.css new file mode 100644 index 0000000..a7c68d3 --- /dev/null +++ b/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; + } +} diff --git a/version.txt b/version.txt index 53a48a1..899f24f 100644 --- a/version.txt +++ b/version.txt @@ -1 +1 @@ -0.8.2 \ No newline at end of file +0.9.0 \ No newline at end of file
{pub.authors}
+ {pub.journal}, {pub.year} +