started added projects
ab2643aa
3 file(s) · +43 −16
| 1 | + | --- |
|
| 2 | + | const { content } = Astro.props; |
|
| 3 | + | --- |
|
| 4 | + | ||
| 5 | + | <div |
|
| 6 | + | style={{ borderWidth: "1px" }} |
|
| 7 | + | class="flex max-w-[500px] cursor-pointer flex-col items-start justify-start gap-2 overflow-hidden rounded-lg border-accent-2 transition-all ease-in-out hover:border-accent" |
|
| 8 | + | > |
|
| 9 | + | <a href={content.link} target="_blank"> |
|
| 10 | + | <img src={content.image} alt="prject image" /> |
|
| 11 | + | <div class="flex flex-col gap-2 p-4"> |
|
| 12 | + | <h2 class="text-2xl font-bold">{content.title}</h2> |
|
| 13 | + | <p class=""> |
|
| 14 | + | {content.description} |
|
| 15 | + | </p> |
|
| 16 | + | <div class="flex gap-2"> |
|
| 17 | + | {content.tags.map((tag) => <p>#{tag}</p>)} |
|
| 18 | + | </div> |
|
| 19 | + | </div> |
|
| 20 | + | </a> |
|
| 21 | + | </div> |
| 1 | + | export type ProjectItem = { |
|
| 2 | + | title: string; |
|
| 3 | + | description: string; |
|
| 4 | + | image: string; |
|
| 5 | + | link: string; |
|
| 6 | + | tags: string[]; |
|
| 7 | + | }; |
|
| 8 | + | ||
| 9 | + | export const projects: ProjectItem[] = [ |
|
| 10 | + | { |
|
| 11 | + | title: "Snippets", |
|
| 12 | + | description: |
|
| 13 | + | "I wanted something clean and simple to share code with people, and things like pastebin were too bloated. So I made my own!", |
|
| 14 | + | image: "https://www.snippets.so/og.png", |
|
| 15 | + | link: "https://snippets.so", |
|
| 16 | + | tags: ["developer-tools", "ipfs"], |
|
| 17 | + | }, |
|
| 18 | + | ]; |
| 1 | 1 | --- |
|
| 2 | 2 | import PageLayout from "@/layouts/Base"; |
|
| 3 | 3 | import { SOCIAL_LINKS } from "@/data/constants"; |
|
| 4 | + | import ProjectCard from "@/components/ProjectCard"; |
|
| 5 | + | import { projects } from "@/data/projects"; |
|
| 4 | 6 | ||
| 5 | 7 | const meta = { |
|
| 6 | 8 | title: "Projects", |
|
| 9 | 11 | --- |
|
| 10 | 12 | ||
| 11 | 13 | <PageLayout meta={meta}> |
|
| 12 | - | <div class="flex min-h-screen flex-col items-start justify-start"> |
|
| 13 | - | <div |
|
| 14 | - | style={{ borderWidth: "1px" }} |
|
| 15 | - | class="flex max-w-[500px] flex-col items-start justify-start gap-4 overflow-hidden rounded-lg border-accent-2" |
|
| 16 | - | > |
|
| 17 | - | <img |
|
| 18 | - | src="https://opengraph.githubassets.com/bea224ceb63f864db79b28ade01103b5dc537e69003ddcb9664cc50e6dda52c0/PinataCloud/pinata-go-cli" |
|
| 19 | - | alt="prject image" |
|
| 20 | - | /> |
|
| 21 | - | <h2 class="p-2 text-2xl font-bold">Title</h2> |
|
| 22 | - | <p class="p-2"> |
|
| 23 | - | Description Mollit ea mollit ut velit veniam ut elit non consequat anim officia eiusmod. |
|
| 24 | - | Nisi dolore dolore officia non exercitation occaecat esse enim anim cillum sit aliquip ea |
|
| 25 | - | reprehenderit officia. |
|
| 26 | - | </p> |
|
| 27 | - | </div> |
|
| 14 | + | <div class="flex min-h-screen flex-col items-start justify-start gap-6"> |
|
| 15 | + | {projects.map((project) => <ProjectCard content={project} />)} |
|
| 28 | 16 | </div> |
|
| 29 | 17 | </PageLayout> |
|