diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/index.astro | 33 | ||||
| -rw-r--r-- | src/pages/projects/3d.astro | 43 | ||||
| -rw-r--r-- | src/pages/projects/index.astro | 30 |
3 files changed, 46 insertions, 60 deletions
diff --git a/src/pages/index.astro b/src/pages/index.astro index d109080..daabea8 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,7 +3,6 @@ import Layout from '../layouts/Default.astro'; import { Icon } from 'astro-icon/components' import { Image } from 'astro:assets'; import { getCollection } from "astro:content"; -import projects from "../data/projects.json"; import Profile from '../images/Alee.png'; import '../styles/index.css'; @@ -11,7 +10,6 @@ import '../styles/Page.css'; import "../styles/cards.css"; import { formatDate } from "../util"; const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()).slice(0, 10); -const featuredProjects = projects.filter(project => project.featured); --- @@ -109,36 +107,5 @@ const featuredProjects = projects.filter(project => project.featured); ))} </div> </div> - <div class="container"> - <div class="featured-projects"> - <h1>Featured Projects</h1> - <div class="grid"> - { - featuredProjects.map((project) => { - return ( - <article class="card"> - <h1>{project.name}</h1> - <p>{project.description}</p> - <div class="row"> - {project.links.map((link) => { - return ( - <a href={link.url} target={link.external ? "_blank" : "_self"}>{link.name}</a> - ) - })} - </div> - </article> - ) - }) - } - </div> - </div> - </div> </main> </Layout> -<style> - .row { - display: flex; - flex-direction: row; - gap: 1em; - } -</style> diff --git a/src/pages/projects/3d.astro b/src/pages/projects/3d.astro index 8f9a06d..3715a3d 100644 --- a/src/pages/projects/3d.astro +++ b/src/pages/projects/3d.astro @@ -1,38 +1,27 @@ --- import Page from "../../layouts/Page.astro"; +import Models from "../../data/models.json"; import "../../styles/cards.css"; import ThreeJSModels from "../../components/3DModels.jsx"; --- <Page title="3D Models" description="Things that I made using Blender"> <main> <div class="grid"> - <div class="card"> - <h1>Test</h1> - <p>Description</p> - <ThreeJSModels modelName="/models/snug_cup_model.glb" client:load /> - <div class="column"> - <a href="#">Download</a> - <small>Licensed with (license)</small> - </div> - </div> - <div class="card"> - <h1>Test</h1> - <p>Description</p> - <ThreeJSModels modelName="/models/alee_logo.glb" client:load /> - <div class="column"> - <a href="#">Download</a> - <small>Licensed with (license)</small> - </div> - </div> - <div class="card"> - <h1>Test</h1> - <p>Description</p> - <!--<ThreeJSModels modelName="/models/snug_cup_model.glb" client:load />--> - <div class="column"> - <a href="#">Download</a> - <small>Licensed with (license)</small> - </div> - </div> + { + Models.map((model) => { + return ( + <div class="card"> + <h1>{model.name}</h1> + <p>{model.description}</p> + <ThreeJSModels modelName={model.model} scale={model.scale} client:visible /> + <div class="column"> + <a href={model.download}>Download</a> + <small>Licensed under {model.license}</small> + </div> + </div> + ) + }) + } </div> </main> </Page> diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro index 9a2dbc7..4d997c5 100644 --- a/src/pages/projects/index.astro +++ b/src/pages/projects/index.astro @@ -1,6 +1,8 @@ --- import Page from "../../layouts/Page.astro"; import "../../styles/cards.css"; +import projects from "../../data/projects.json"; +const featuredProjects = projects.filter(project => project.featured); --- <Page title="Projects" description="Things that I have been working on in the past, and present"> <main> @@ -18,6 +20,28 @@ import "../../styles/cards.css"; <p>Websites I created</p> </div> </div> + <div class="featured-projects"> + <h1>Featured Projects</h1> + <div class="grid"> + { + featuredProjects.map((project) => { + return ( + <article class="card"> + <h1>{project.name}</h1> + <p>{project.description}</p> + <div class="row"> + {project.links.map((link) => { + return ( + <a href={link.url} target={link.external ? "_blank" : "_self"}>{link.name}</a> + ) + })} + </div> + </article> + ) + }) + } + </div> + </div> </main> </Page> <style> @@ -26,5 +50,11 @@ import "../../styles/cards.css"; flex-direction: column; gap: 0.1em; } + + .row { + display: flex; + flex-direction: row; + gap: 1em; + } </style> |