mirror of
https://codeberg.org/andyscott-pages/andyscott-dot-me.git
synced 2024-09-19 11:08:05 -04:00
creating layout
This commit is contained in:
Manuel Ernesto Garcia
parent
234acf8537
commit
3b1affed41
6 changed files with 150 additions and 167 deletions
13
src/components/Card.astro
Normal file
13
src/components/Card.astro
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<div class="p-5">
|
||||||
|
<div class="card card-side bg-base-100 shadow-xl">
|
||||||
|
<figure><img src="https://placeimg.com/200/280/arch" alt="Movie" /></figure>
|
||||||
|
<div class="card-body">
|
||||||
|
<h2 class="card-title">New movie is released!</h2>
|
||||||
|
<p>Click the button to watch on Jetflix app.</p>
|
||||||
|
<div class="card-actions justify-end">
|
||||||
|
<div class="badge badge-outline">Fashion</div>
|
||||||
|
<div class="badge badge-outline">Products</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,25 +1,24 @@
|
||||||
---
|
---
|
||||||
import HeaderLink from './HeaderLink.astro';
|
import HeaderLink from "./HeaderLink.astro";
|
||||||
import { SITE_TITLE } from '../config';
|
import { SITE_TITLE } from "../config";
|
||||||
---
|
---
|
||||||
|
|
||||||
<header>
|
<!-- <h2>
|
||||||
<h2>
|
|
||||||
{SITE_TITLE}
|
{SITE_TITLE}
|
||||||
</h2>
|
</h2> -->
|
||||||
<nav>
|
<div
|
||||||
<HeaderLink href="/">Home</HeaderLink>
|
class="sticky lg:hidden top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-all duration-100 bg-base-100 text-base-content shadow-sm"
|
||||||
<HeaderLink href="/blog">Blog</HeaderLink>
|
>
|
||||||
<HeaderLink href="/about">About</HeaderLink>
|
<div class="navbar">
|
||||||
<HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
|
<div class="flex-1">
|
||||||
<HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
|
<a class="btn btn-ghost normal-case text-xl">Manuel Ernesto ⚡️</a>
|
||||||
</nav>
|
</div>
|
||||||
</header>
|
<div class="flex-none">
|
||||||
<style>
|
<label for="my-drawer" class="btn btn-square btn-ghost">
|
||||||
header {
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"
|
||||||
margin: 0em 0 2em;
|
><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||||
}
|
</svg>
|
||||||
h2 {
|
</label>
|
||||||
margin: 0.5em 0;
|
</div>
|
||||||
}
|
</div>
|
||||||
</style>
|
</div>
|
||||||
|
|
|
||||||
83
src/components/SideBar.astro
Normal file
83
src/components/SideBar.astro
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
<div class="drawer-side bg-base-200">
|
||||||
|
<label for="my-drawer" class="drawer-overlay bg-base-200"></label>
|
||||||
|
<div class="menu p-4 overflow-y-auto w-80 bg-base-200 text-base-content">
|
||||||
|
<div class="w-fit">
|
||||||
|
<div class="avatar transition ease-in-out w-1/2 hover:scale-110 block m-auto mt-3 mb-6">
|
||||||
|
<div class="rounded-full">
|
||||||
|
<img src="/profile.jpg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<!-- Sidebar content here -->
|
||||||
|
<li><a href="/">About</a></li>
|
||||||
|
<li><a>Projects</a></li>
|
||||||
|
<li><a href="/blog">Blog</a></li>
|
||||||
|
<li><a>CV</a></li>
|
||||||
|
<li><a>Comunity</a></li>
|
||||||
|
<li><a>Support my Work</a></li>
|
||||||
|
<li><a>Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="grow"></div>
|
||||||
|
<div class="social-icons px-4 my-2 flex self-center">
|
||||||
|
<a href="https://github.com/manuelernestog" target="_blank" class="mx-3">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="currentColor"
|
||||||
|
class="bi bi-github"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://twitter.com/manuelernestog" target="_blank" class="mx-3">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="currentColor"
|
||||||
|
class="bi bi-twitter"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://twitter.com/manuelernestog" target="_blank" class="mx-3">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="currentColor"
|
||||||
|
class="bi bi-telegram"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://twitter.com/manuelernestog" target="_blank" class="mx-3">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="currentColor"
|
||||||
|
class="bi bi-linkedin"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
28
src/layouts/Main.astro
Normal file
28
src/layouts/Main.astro
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
---
|
||||||
|
import BaseHead from "../components/BaseHead.astro";
|
||||||
|
import Header from "../components/Header.astro";
|
||||||
|
import Footer from "../components/Footer.astro";
|
||||||
|
import SideBar from "../components/SideBar.astro";
|
||||||
|
|
||||||
|
import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" data-theme="lofi">
|
||||||
|
<head>
|
||||||
|
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="bg-base-100 drawer drawer-mobile">
|
||||||
|
<input id="my-drawer" type="checkbox" class="drawer-toggle" />
|
||||||
|
<div class="drawer-content flex flex-col">
|
||||||
|
<Header title={SITE_TITLE} />
|
||||||
|
<main class="p-6 pb-16 bg-base-100">
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
<SideBar />
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,151 +1,11 @@
|
||||||
---
|
---
|
||||||
import BaseHead from "../components/BaseHead.astro";
|
import MainLayout from "../layouts/Main.astro";
|
||||||
import Header from "../components/Header.astro";
|
import Card from "../components/Card.astro";
|
||||||
import Footer from "../components/Footer.astro";
|
|
||||||
import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
|
import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<MainLayout>
|
||||||
<html lang="en">
|
<Card />
|
||||||
<head>
|
|
||||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="drawer drawer-mobile">
|
|
||||||
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
|
|
||||||
<div class="drawer-content flex flex-col items-center justify-center">
|
|
||||||
<Header title={SITE_TITLE} />
|
|
||||||
<main>
|
|
||||||
<div class="p-5">
|
|
||||||
<div class="card card-side bg-base-100 shadow-xl">
|
|
||||||
<figure><img src="https://placeimg.com/200/280/arch" alt="Movie" /></figure>
|
|
||||||
<div class="card-body">
|
|
||||||
<h2 class="card-title">New movie is released!</h2>
|
|
||||||
<p>Click the button to watch on Jetflix app.</p>
|
|
||||||
<div class="card-actions justify-end">
|
|
||||||
<div class="badge badge-outline">Fashion</div>
|
|
||||||
<div class="badge badge-outline">Products</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h1 class="font-bold">🧑🚀 Hello, Astronaut!</h1>
|
</MainLayout>
|
||||||
<p>
|
|
||||||
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This template serves as a
|
|
||||||
lightweight, minimally-styled starting point for anyone looking to build a personal website, blog, or portfolio with
|
|
||||||
Astro.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
This template comes with a few integrations already configured in your
|
|
||||||
<code>astro.config.mjs</code> file. You can customize your setup with
|
|
||||||
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind, React, or Vue to your
|
|
||||||
project.
|
|
||||||
</p>
|
|
||||||
<p>Here are a few ideas on how to get started with the template:</p>
|
|
||||||
<ul>
|
|
||||||
<li>Edit this page in <code>src/pages/index.astro</code></li>
|
|
||||||
<li>Edit the site header items in <code>src/components/Header.astro</code></li>
|
|
||||||
<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
|
|
||||||
<li>Check out the included blog posts in <code>src/pages/blog/</code></li>
|
|
||||||
<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
|
|
||||||
</ul>
|
|
||||||
<p>
|
|
||||||
Have fun! If you get stuck, remember to <a href="https://docs.astro.build/">read the docs</a> or <a
|
|
||||||
href="https://astro.build/chat">join us on Discord</a
|
|
||||||
> to ask questions.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Looking for a blog template with a bit more personality? Check out <a
|
|
||||||
href="https://github.com/Charca/astro-blog-template"
|
|
||||||
>astro-blog-template
|
|
||||||
</a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
|
|
||||||
</p>
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
<div class="drawer-side bg-base-200">
|
|
||||||
<div class="menu p-4 overflow-y-auto w-72 text-base-content flex-col">
|
|
||||||
<div class="w-fit">
|
|
||||||
<div class="avatar transition ease-in-out w-1/2 hover:scale-110 block m-auto mt-3 mb-6">
|
|
||||||
<div class="rounded-full">
|
|
||||||
<img src="/profile.jpg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<!-- Sidebar content here -->
|
|
||||||
<li><a>About</a></li>
|
|
||||||
<li><a>Projects</a></li>
|
|
||||||
<li><a>Blog</a></li>
|
|
||||||
<li><a>CV</a></li>
|
|
||||||
<li><a>Comunity</a></li>
|
|
||||||
<li><a>Support my Work</a></li>
|
|
||||||
<li><a>Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
<div class="grow"></div>
|
|
||||||
<div class="social-icons px-4 my-2 flex self-center">
|
|
||||||
<a href="https://github.com/manuelernestog" target="_blank" class="mx-3">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
fill="currentColor"
|
|
||||||
class="bi bi-github"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a href="https://twitter.com/manuelernestog" target="_blank" class="mx-3">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
fill="currentColor"
|
|
||||||
class="bi bi-twitter"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a href="https://twitter.com/manuelernestog" target="_blank" class="mx-3">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
fill="currentColor"
|
|
||||||
class="bi bi-telegram"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="https://twitter.com/manuelernestog" target="_blank" class="mx-3">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
fill="currentColor"
|
|
||||||
class="bi bi-linkedin"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
0
src/pages/projects.astro
Normal file
0
src/pages/projects.astro
Normal file
Loading…
Reference in a new issue