a/andyscott-dot-me
1
0
Fork 0
mirror of https://codeberg.org/andyscott-pages/andyscott-dot-me.git synced 2024-11-08 13:20:49 -05:00
Code Issues Projects Releases Packages Wiki Activity

creating layout

Browse source
This commit is contained in:
Manuel Ernesto Garcia 2022-09-21 09:36:49 -04:00
parent 234acf8537
commit 3b1affed41
6 changed files with 150 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/Card.astro Normal file
View 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>

41
src/components/Header.astro
View file

@ -1,25 +1,24 @@
---
import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../config';
import HeaderLink from "./HeaderLink.astro";
import { SITE_TITLE } from "../config";
---
<header>
<h2>
<!-- <h2>
{SITE_TITLE}
</h2>
<nav>
<HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="/about">About</HeaderLink>
<HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
<HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
</nav>
</header>
<style>
header {
margin: 0em 0 2em;
}
h2 {
margin: 0.5em 0;
}
</style>
</h2> -->
<div
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"
>
<div class="navbar">
<div class="flex-1">
<a class="btn btn-ghost normal-case text-xl">Manuel Ernesto ⚡️</a>
</div>
<div class="flex-none">
<label for="my-drawer" class="btn btn-square btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"
><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</label>
</div>
</div>
</div>

83
src/components/SideBar.astro Normal file
View 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
View 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>

152
src/pages/index.astro
View file

@ -1,151 +1,11 @@
---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import MainLayout from "../layouts/Main.astro";
import Card from "../components/Card.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
---
<!DOCTYPE html>
<html lang="en">
<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>
<MainLayout>
<Card />
<h1 class="font-bold">🧑‍🚀 Hello, Astronaut!</h1>
<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>
</MainLayout>

0
src/pages/projects.astro Normal file
View file