63 lines
2.2 KiB
Plaintext
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>
|