a/andyscott-dot-me
1
0
Fork 0
mirror of https://codeberg.org/andyscott-pages/andyscott-dot-me.git synced 2024-12-22 01:33:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

creating card component and adding section to main view

Browse source
This commit is contained in:
Manuel Ernesto Garcia 2022-09-22 12:29:25 -04:00
parent 3b1affed41
commit ab2b1f5273
5 changed files with 72 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/Card.astro
View file

@ -1,13 +1,18 @@
<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>
---
const { title, img, desc, url } = Astro.props;
---
<div class="md:w-1/3 w-full">
<a href={url} target="_blank">
<div class="card bg-base-100 transition ease-in-out hover:shadow-xl m-6 hover:scale-105">
<figure><img src={img} alt="Shoes" /></figure>
<div class="card-body">
<h2 class="card-title">
{title}
<div class="badge badge-secondary">NEW</div>
</h2>
<p>{desc}</p>
</div>
</div>
</div>
</a>
</div>

14
src/components/Footer.astro
View file

@ -2,12 +2,14 @@
const today = new Date();
---
<footer>
&copy; {today.getFullYear()} YOUR NAME HERE. All rights reserved.
<footer class="footer footer-center block mb-5">
<div class="pb-2">
&copy; {today.getFullYear()} Manuel Ernesto
</div>
<div class="inline opacity-50">
Developed by <a href="">Manuel Ernesto ⚡️</a>
</div>
</footer>
<style>
footer {
padding: 25px;
text-align: center;
}
</style>

9
src/components/Header.astro
View file

@ -10,15 +10,16 @@ import { SITE_TITLE } from "../config";
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">
<div class="navbar-start">
<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 class="navbar-center">
<a class="btn btn-ghost normal-case text-xl">Manuel Ernesto ⚡️</a>
</div>
<div class="navbar-end"></div>
</div>
</div>

4
src/layouts/Main.astro → src/layouts/Page.astro
View file

@ -15,9 +15,9 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
<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">
<div class="drawer-content flex flex-col bg-base-100">
<Header title={SITE_TITLE} />
<main class="p-6 pb-16 bg-base-100">
<main class="p-6 pb-16 px-8 md:px-12">
<slot />
</main>
<Footer />

46
src/pages/index.astro
View file

@ -1,11 +1,49 @@
---
import MainLayout from "../layouts/Main.astro";
import PageLayout from "../layouts/Page.astro";
import Card from "../components/Card.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
---
<MainLayout>
<Card />
<PageLayout>
<div class="pb-8">
<div class="py-4">
<text class="text-2xl"> Hey there 👋</text>
</div>
<div>
<text class="text-6xl font-bold"> I'm Manuel Ernesto</text>
</div>
<div class="py-2">
<text>
I am a Cuban Software Engineer. I am a big fan of programming, web development, and entrepreneurship. I work on
creating computer solutions that solve problems in a simple way and share everything I learn along the way. I like
minimalism, Open-Source and good music.</text
>
</div>
</div>
</MainLayout>
<div>
<div class="text-3xl text-center w-full font-bold">My last projects {'</>'}</div>
</div>
<div class="flex flex-wrap mb-5 mt-3">
<Card
title="WeekTodo"
img="https://weektodo.me/assets/images/weektodo-opengraph-1200x630.png"
desc="Free minimalist weektly planner focused in privacy."
url="https://weektodo.me/"
/>
<Card
title="Productiveness"
img="https://softr-prod.imgix.net/applications/f988aa05-d312-4aa6-812e-832bdc75388d/assets/d2c87a17-4fc7-455f-a656-5e4cdbe7aa71.png"
desc="Discover the best productivity apps in the market."
url="https://www.productiveness.net/"
/>
<Card
title="Zen Twitter"
img="https://lh3.googleusercontent.com/NGt846Flv6wyBSlYzfJkFHAJ8mcG1pf4M-InYeZnp4VsIk6JKk8nZ2ZKskDlvHDAEYr_biSO8jtXIWI83OXD5RNXWg=w640-h400-e365-rj-sc0x00ffffff"
desc="Disable Twitter vanity metrics, notifications and distractions."
url="https://chrome.google.com/webstore/detail/zen-twitter/nlkendkabgopehmlmohfbkgkjjdjepnb"
/>
</div>
</PageLayout>