diff --git a/src/components/SectionContainer.astro b/src/components/SectionContainer.astro
new file mode 100644
index 0000000..a56e6a0
--- /dev/null
+++ b/src/components/SectionContainer.astro
@@ -0,0 +1,24 @@
+---
+import BaseHead from '../components/BaseHead.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+---
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+ </head>
+ <body>
+ <section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-2xl xl:px-0">
+ <div class="flex flex-col justify-between h-screen">
+ <Header title={SITE_TITLE} />
+
+ <slot />
+
+ <Footer />
+ </div>
+ </section>
+ </body>
+</html>
\ No newline at end of file
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index fac2ed1..b82128d 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,34 +1,26 @@
---
import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
import FormattedDate from '../components/FormattedDate.astro';
+import SectionContainer from '../components/SectionContainer.astro';
type Props = CollectionEntry<'blog'>['data'];
const { title, description, pubDate } = Astro.props;
---
+<head>
+ <BaseHead title={title} description={description} />
+</head>
-<html lang="en">
- <head>
- <BaseHead title={title} description={description} />
- </head>
-
- <body>
- <div class="flex flex-col">
- <Header />
- <main class="flex flex-col items-center mx-auto mt-8">
- <article class="flex flex-col mx-auto mb-32">
- <h1 class="text-4xl font-extrabold">{title}</h1>
- <p class="italic">{description}</p>
- <FormattedDate date={pubDate}/>
- <div class="flex flex-col items-left w-full max-w-prose blog">
- <slot />
- </div>
- </article>
- </main>
- <Footer />
- </div>
- </body>
-</html>
+<SectionContainer>
+ <main class="mb-auto break-words mt-4">
+ <article>
+ <h1 class="text-4xl font-extrabold">{title}</h1>
+ <p class="italic">{description}</p>
+ <FormattedDate date={pubDate}/>
+ <div class="blog">
+ <slot />
+ </div>
+ </article>
+ </main>
+</SectionContainer>
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 5caccb8..58f9cc5 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,26 +1,14 @@
---
-import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import SectionContainer from '../components/SectionContainer.astro';
---
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
- </head>
- <body>
- <div class="flex flex-col fixed w-screen">
- <Header title={SITE_TITLE} />
- <main class="flex flex-col justify-center items-left mx-auto">
- <h1 class="text-4xl font-extrabold">About me</h1>
- <p>Some information about me & stuff I like</p>
- <div class="mt-4">
- <a href="/tools">link to tools</a>
- </div>
- </main>
- <Footer />
- </div>
- </body>
-</html>
\ No newline at end of file
+<SectionContainer>
+ <main class="mb-auto break-words mt-4">
+ <h1 class="text-4xl font-extrabold">About me</h1>
+ <p>Some information about me & stuff I like</p>
+ <a href="/tools">link to tools</a>
+ <p>
+ sidojdjosajoidsajaiodoaisoiasdosiadjoiaskflsdmklmdfsmlkfdskmdjdoasijsadkldsanlndsalnasdnlksadnklsdnlkdoasjdoasidjaoisjdoiasjdoasijdoiasjdoaijdio flex justify-center mx-auto md:gap-64 gap-4 py-5
+ </p>
+ </main>
+</SectionContainer>
\ No newline at end of file
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 2c4c9f6..0b786fd 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,57 +1,44 @@
---
-import BaseHead from '../../components/BaseHead.astro';
-import Header from '../../components/Header.astro';
-import Footer from '../../components/Footer.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';
+import SectionContainer from '../../components/SectionContainer.astro';
const posts = (await getCollection('blog')).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
---
+<SectionContainer>
+ <main class="flex flex-col h-screen gap-4 mt-4">
+ <h1 class="text-4xl font-extrabold">Blog posts</h1>
+ <section class="mt-4">
+ <ul>
+ {
+ posts.map((post) => (
+ <li>
+ <FormattedDate date={post.data.pubDate} />
+ <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
+ </li>
+ ))
+ }
+ </ul>
+ </section>
+ </main>
+</SectionContainer>
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
- <style>
- ul {
- list-style-type: none;
- padding: unset;
- }
- ul li {
- display: flex;
- }
- ul li :global(time) {
- flex: 0 0 130px;
- font-style: italic;
- color: #595959;
- }
- ul li a {
- color: #815B5B;
- }
- </style>
- </head>
- <body>
- <div class="flex flex-col fixed w-screen">
- <Header />
- <main class="flex flex-col justify-center items-left mx-auto">
- <h1 class="text-4xl font-extrabold">Blog posts</h1>
- <section class="mt-4">
- <ul>
- {
- posts.map((post) => (
- <li>
- <FormattedDate date={post.data.pubDate} />
- <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
- </li>
- ))
- }
- </ul>
- </section>
- </main>
- <Footer />
- </div>
- </body>
-</html>
+<style>
+ ul {
+ list-style-type: none;
+ padding: unset;
+ }
+ ul li {
+ display: flex;
+ }
+ ul li :global(time) {
+ flex: 0 0 130px;
+ font-style: italic;
+ color: #595959;
+ }
+ ul li a {
+ color: #815B5B;
+ }
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e04dc4e..c5d0cd9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,51 +3,40 @@ import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import SectionContainer from '../components/SectionContainer.astro';
---
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
- </head>
- <body>
- <div class="flex flex-col fixed w-screen">
- <Header title={SITE_TITLE} />
- <main class="flex flex-col justify-center items-center text-center pt-48 description gap-4">
- <div class="profile"></div>
- <h1 class="text-3xl font-bold">Sindre Kjelsrud</h1>
- <p class="md:max-w">
- Student at Western University of Applied Sciences.
- </p>
- <div class="flex gap-1 social">
- <a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/">
- <iconify-icon icon="lucide:linkedin" width="30" height="30" />
- </a>
- <a href="https://github.com/SindreKjelsrud">
- <iconify-icon icon="ri:github-line" width="30" height="30" />
- </a>
- <a href="https://www.instagram.com/SindreKjelsrud/">
- <iconify-icon icon="mdi:instagram" width="30" height="30" />
- </a>
- <a href="https://open.spotify.com/user/kjelsrud!">
- <iconify-icon icon="mdi:spotify" width="30" height="30" />
- </a>
- </div>
- </main>
- <Footer />
+<SectionContainer>
+ <main class="flex flex-col justify-center items-center h-screen gap-4 description">
+ <div class="profile"></div>
+ <h1 class="text-3xl font-bold">Sindre Kjelsrud</h1>
+ <p>Student at Western University of Applied Sciences.</p>
+ <div class="flex gap-1 social">
+ <a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/">
+ <iconify-icon icon="lucide:linkedin" width="30" height="30" />
+ </a>
+ <a href="https://github.com/SindreKjelsrud">
+ <iconify-icon icon="ri:github-line" width="30" height="30" />
+ </a>
+ <a href="https://www.instagram.com/SindreKjelsrud/">
+ <iconify-icon icon="mdi:instagram" width="30" height="30" />
+ </a>
+ <a href="https://open.spotify.com/user/kjelsrud!">
+ <iconify-icon icon="mdi:spotify" width="30" height="30" />
+ </a>
</div>
- </body>
-</html>
+ </main>
+</SectionContainer>
<style>
.profile {
width: 10rem;
height: 10rem;
- background: url("../../public/assets/pb.jpg");
+ background: url("../../assets/pb.jpg");
background-size: cover;
border-radius: 9999px;
}
diff --git a/src/pages/tools.astro b/src/pages/tools.astro
index 1cdf25b..7378142 100644
--- a/src/pages/tools.astro
+++ b/src/pages/tools.astro
@@ -1,51 +1,38 @@
---
-import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
-import stackData from '../../public/data/tools.json'
+import stackData from '../../data/tools.json'
+import SectionContainer from '../components/SectionContainer.astro';
---
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
- </head>
- <body>
- <div class="flex flex-col fixed w-screen p-5">
- <Header title={SITE_TITLE} />
- <main class="flex flex-col justify-center items-left mx-auto pt-8">
- <h1 class="text-2xl">Tools</h1>
- <p>Tools I use everyday (or at least most days)</p>
- <ul class="pt-2">
- {stackData.map((data) =>
- <div class="p-2 mb-4 cards">
- <ul>
- <a
- href={data.link}
- class="flex gap-2"
- >
- <img src={data.icon} class="w-20 h-20" />
- <div class="flex flex-col">
- <p>
- {data.name}
- </p>
- <div class="description">
- <p>{data.description}</p>
- </div>
- <div class="tag">
- <button class="flex auto border-solid border-2 px-1 rounded-md text-sm">
- #{data.tag}
- </button>
- </div>
+<SectionContainer>
+ <main class="flex flex-col justify-center items-left mx-auto pt-8">
+ <h1 class="text-2xl">Tools</h1>
+ <p>Tools I use everyday (or at least most days)</p>
+ <ul class="pt-2">
+ {stackData.map((data) =>
+ <div class="p-2 mb-4 cards">
+ <ul>
+ <a
+ href={data.link}
+ class="flex gap-2"
+ >
+ <img src={data.icon} class="w-20 h-20" />
+ <div class="flex flex-col">
+ <p>
+ {data.name}
+ </p>
+ <div class="description">
+ <p>{data.description}</p>
</div>
- </a>
- </ul>
- </div>
- )}
- </ul>
- </main>
- <Footer />
- </div>
- </body>
-</html>
\ No newline at end of file
+ <div class="tag">
+ <button class="flex auto border-solid border-2 px-1 rounded-md text-sm">
+ #{data.tag}
+ </button>
+ </div>
+ </div>
+ </a>
+ </ul>
+ </div>
+ )}
+ </ul>
+ </main>
+</SectionContainer>
\ No newline at end of file