mirror of
https://github.com/anotherhadi/blog.git
synced 2026-04-03 04:02:09 +02:00
init
This commit is contained in:
Hadi
237
src/components/Hero.astro
Normal file
237
src/components/Hero.astro
Normal file
@@ -0,0 +1,237 @@
|
||||
---
|
||||
import { ArrowRight, Coffee, FolderCode, Key, Newspaper } from "@lucide/astro";
|
||||
import { Image } from "astro:assets";
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
title: string;
|
||||
description: string;
|
||||
avatar: any;
|
||||
location?: string;
|
||||
socialLinks?: {
|
||||
github?: string;
|
||||
linkedin?: string;
|
||||
twitter?: string;
|
||||
bluesky?: string;
|
||||
instagram?: string;
|
||||
youTube?: string;
|
||||
medium?: string;
|
||||
kofi?: string;
|
||||
codetips?: string;
|
||||
};
|
||||
gpgKey?: string;
|
||||
}
|
||||
|
||||
const { name, title, description, avatar, location, socialLinks, gpgKey } =
|
||||
Astro.props;
|
||||
---
|
||||
|
||||
<section class="hero min-h-[65vh]">
|
||||
<div class="hero-content flex-col lg:flex-row-reverse max-w-7xl gap-8">
|
||||
<div class="avatar">
|
||||
<div
|
||||
class="w-48 ring-primary ring-offset-base-100 rounded-full ring-2 ring-offset-2"
|
||||
>
|
||||
<Image src={avatar} alt={name} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-2xl">
|
||||
<h1 class="text-5xl font-bold mb-4">
|
||||
Hi, I'm {name}
|
||||
</h1>
|
||||
<p class="text-xl text-base-content/80 mb-2">{title}</p>
|
||||
{location && <p class="text-base-content/60 mb-4">{location}</p>}
|
||||
<p class="text-lg leading-relaxed mb-6">
|
||||
{description}
|
||||
</p>
|
||||
{
|
||||
socialLinks && (
|
||||
<div class="flex gap-4">
|
||||
{socialLinks.github && (
|
||||
<div class="tooltip" data-tip="Github">
|
||||
<a
|
||||
href={socialLinks.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-circle btn-ghost"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{socialLinks.linkedin && (
|
||||
<div class="tooltip" data-tip="Linkedin">
|
||||
<a
|
||||
href={socialLinks.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-circle btn-ghost"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{socialLinks.twitter && (
|
||||
<div class="tooltip" data-tip="Twitter/X">
|
||||
<a
|
||||
href={socialLinks.twitter}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-circle btn-ghost"
|
||||
aria-label="X (Twitter)"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M18.42,14.009L27.891,3h-2.244l-8.224,9.559L10.855,3H3.28l9.932,14.455L3.28,29h2.244l8.684-10.095,6.936,10.095h7.576l-10.301-14.991h0Zm-3.074,3.573l-1.006-1.439L6.333,4.69h3.447l6.462,9.243,1.006,1.439,8.4,12.015h-3.447l-6.854-9.804h0Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{socialLinks.bluesky && (
|
||||
<div class="tooltip" data-tip="Bluesky">
|
||||
<a
|
||||
href={socialLinks.bluesky}
|
||||
class="btn btn-circle btn-ghost"
|
||||
aria-label="Bluesky"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M23.931,5.298c-3.21,2.418-6.663,7.32-7.931,9.951-1.267-2.631-4.721-7.533-7.931-9.951-2.316-1.744-6.069-3.094-6.069,1.201,0,.857,.49,7.206,.778,8.237,.999,3.583,4.641,4.497,7.881,3.944-5.663,.967-7.103,4.169-3.992,7.372,5.908,6.083,8.492-1.526,9.154-3.476,.123-.36,.179-.527,.179-.379,0-.148,.057,.019,.179,.379,.662,1.949,3.245,9.558,9.154,3.476,3.111-3.203,1.671-6.405-3.992-7.372,3.24,.553,6.882-.361,7.881-3.944,.288-1.031,.778-7.38,.778-8.237,0-4.295-3.753-2.945-6.069-1.201Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{socialLinks.instagram && (
|
||||
<div class="tooltip" data-tip="Instagram">
|
||||
<a
|
||||
href={`${socialLinks.instagram}`}
|
||||
class="btn btn-circle btn-ghost"
|
||||
aria-label="Instagram"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<path d="M10.202,2.098c-1.49,.07-2.507,.308-3.396,.657-.92,.359-1.7,.84-2.477,1.619-.776,.779-1.254,1.56-1.61,2.481-.345,.891-.578,1.909-.644,3.4-.066,1.49-.08,1.97-.073,5.771s.024,4.278,.096,5.772c.071,1.489,.308,2.506,.657,3.396,.359,.92,.84,1.7,1.619,2.477,.779,.776,1.559,1.253,2.483,1.61,.89,.344,1.909,.579,3.399,.644,1.49,.065,1.97,.08,5.771,.073,3.801-.007,4.279-.024,5.773-.095s2.505-.309,3.395-.657c.92-.36,1.701-.84,2.477-1.62s1.254-1.561,1.609-2.483c.345-.89,.579-1.909,.644-3.398,.065-1.494,.081-1.971,.073-5.773s-.024-4.278-.095-5.771-.308-2.507-.657-3.397c-.36-.92-.84-1.7-1.619-2.477s-1.561-1.254-2.483-1.609c-.891-.345-1.909-.58-3.399-.644s-1.97-.081-5.772-.074-4.278,.024-5.771,.096m.164,25.309c-1.365-.059-2.106-.286-2.6-.476-.654-.252-1.12-.557-1.612-1.044s-.795-.955-1.05-1.608c-.192-.494-.423-1.234-.487-2.599-.069-1.475-.084-1.918-.092-5.656s.006-4.18,.071-5.656c.058-1.364,.286-2.106,.476-2.6,.252-.655,.556-1.12,1.044-1.612s.955-.795,1.608-1.05c.493-.193,1.234-.422,2.598-.487,1.476-.07,1.919-.084,5.656-.092,3.737-.008,4.181,.006,5.658,.071,1.364,.059,2.106,.285,2.599,.476,.654,.252,1.12,.555,1.612,1.044s.795,.954,1.051,1.609c.193,.492,.422,1.232,.486,2.597,.07,1.476,.086,1.919,.093,5.656,.007,3.737-.006,4.181-.071,5.656-.06,1.365-.286,2.106-.476,2.601-.252,.654-.556,1.12-1.045,1.612s-.955,.795-1.608,1.05c-.493,.192-1.234,.422-2.597,.487-1.476,.069-1.919,.084-5.657,.092s-4.18-.007-5.656-.071M21.779,8.517c.002,.928,.755,1.679,1.683,1.677s1.679-.755,1.677-1.683c-.002-.928-.755-1.679-1.683-1.677,0,0,0,0,0,0-.928,.002-1.678,.755-1.677,1.683m-12.967,7.496c.008,3.97,3.232,7.182,7.202,7.174s7.183-3.232,7.176-7.202c-.008-3.97-3.233-7.183-7.203-7.175s-7.182,3.233-7.174,7.203m2.522-.005c-.005-2.577,2.08-4.671,4.658-4.676,2.577-.005,4.671,2.08,4.676,4.658,.005,2.577-2.08,4.671-4.658,4.676-2.577,.005-4.671-2.079-4.676-4.656h0" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{socialLinks.youTube && (
|
||||
<div class="tooltip" data-tip="Youtube">
|
||||
<a
|
||||
href={socialLinks.youTube}
|
||||
class="btn btn-circle btn-ghost"
|
||||
aria-label="YouTube"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M31.331,8.248c-.368-1.386-1.452-2.477-2.829-2.848-2.496-.673-12.502-.673-12.502-.673,0,0-10.007,0-12.502,.673-1.377,.37-2.461,1.462-2.829,2.848-.669,2.512-.669,7.752-.669,7.752,0,0,0,5.241,.669,7.752,.368,1.386,1.452,2.477,2.829,2.847,2.496,.673,12.502,.673,12.502,.673,0,0,10.007,0,12.502-.673,1.377-.37,2.461-1.462,2.829-2.847,.669-2.512,.669-7.752,.669-7.752,0,0,0-5.24-.669-7.752ZM12.727,20.758V11.242l8.364,4.758-8.364,4.758Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{socialLinks.medium && (
|
||||
<div class="tooltip" data-tip="Medium">
|
||||
<a
|
||||
href={socialLinks.medium}
|
||||
class="btn btn-circle btn-ghost"
|
||||
aria-label="Medium"
|
||||
target="_blank"
|
||||
>
|
||||
<Newspaper />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{socialLinks.kofi && (
|
||||
<div class="tooltip" data-tip="Ko-fi">
|
||||
<a
|
||||
href={socialLinks.kofi}
|
||||
class="btn btn-circle btn-ghost"
|
||||
aria-label="Ko-fi"
|
||||
target="_blank"
|
||||
>
|
||||
<Coffee />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{socialLinks.codetips && (
|
||||
<div class="tooltip" data-tip="Codetips">
|
||||
<a
|
||||
href={socialLinks.codetips}
|
||||
class="btn btn-circle btn-ghost"
|
||||
aria-label="CodeTips"
|
||||
target="_blank"
|
||||
>
|
||||
<FolderCode class="size-6" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{gpgKey && (
|
||||
<div class="tooltip" data-tip="Gpg key">
|
||||
<a
|
||||
href={gpgKey}
|
||||
class="btn btn-circle btn-ghost"
|
||||
aria-label="Gpg Key"
|
||||
target="_blank"
|
||||
>
|
||||
<Key class="size-6" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<div class="mt-12 flex gap-5">
|
||||
<a href="/blog" class="btn btn-ghost gap-2">
|
||||
Blog
|
||||
<ArrowRight class="size-4" />
|
||||
</a>
|
||||
<a href="/projects" class="btn btn-ghost gap-2">
|
||||
Projects
|
||||
<ArrowRight class="size-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user