Kremta-Website/src/components/portfolio/EntryLayout.astro

63 lines
2.2 KiB
Plaintext

---
import type { PortfolioEntry } from "@/types";
import BaseLayout from "@components/base/BaseLayout.astro";
import PageHeader from "@/components/common/PageHeader.astro";
import { markdownify } from "@lib/textConverter";
import { FaGithub } from "react-icons/fa";
interface Props {
entry: PortfolioEntry;
}
const { entry } = Astro.props;
const { title, description, projects } = entry.data;
---
<BaseLayout title={title} description={description}>
<PageHeader title={title} />
<section class="section-sm container">
<div class="row justify-center">
<div class="col-10 content glass rounded-lg p-4">
{
projects.map((project) => (
<>
<div>
<div class="mt-8">
<h3 set:html={markdownify(project.title)} />
</div>
<div class="-mt-4 flex items-center">
{project.github && (
<a
aria-label="Github"
href={project.github}
target="_blank"
rel="noopener noreferrer nofollow"
class="mr-2 glass-t shadow-none rounded flex h-8 w-8 text-txt-p dark:text-darkmode-txt-p items-center justify-center text-center"
>
<FaGithub className="h-6 w-6" />
</a>
)}
{project.technologies?.map((element: string) => (
<li class="list-none">
{/* Use markdownify to convert markdown to HTML for each technology */}
<div
class="mr-2 px-2 h-8 flex glass-t shadow-none rounded text-txt-p dark:text-darkmode-txt-p items-center justify-center text-center"
set:html={markdownify(element)}
/>
</li>
))}
</div>
</div>
<div>
{project.content?.map((element: string) => (
<p set:html={markdownify(element)} />
))}
</div>
</>
))
}
</div>
</div>
</section>
</BaseLayout>