mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

finish homepage

Browse Source
This commit is contained in:
Surjith S M
2022-11-05 21:25:04 +05:30
parent bfb5c99b5a
commit 7e64dc87e6
11 changed files with 217 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -18,6 +18,8 @@
"@types/alpinejs": "^3.0.0",
"alpinejs": "^3.0.0",
"astro": "^1.6.0",
"astro-feather-icons": "^1.0.2",
"astro-icon": "^0.8.0",
"tailwindcss": "^3.0.24"
}
}

132
pnpm-lock.yaml generated
View File

@@ -8,6 +8,8 @@ specifiers:
'@types/alpinejs': ^3.0.0
alpinejs: ^3.0.0
astro: ^1.6.0
astro-feather-icons: ^1.0.2
astro-icon: ^0.8.0
tailwindcss: ^3.0.24
dependencies:
@@ -18,6 +20,8 @@ dependencies:
'@types/alpinejs': 3.7.1
alpinejs: 3.10.5
astro: 1.6.2
astro-feather-icons: 1.0.2
astro-icon: 0.8.0
tailwindcss: 3.2.1
packages:
@@ -544,6 +548,11 @@ packages:
tsm: 2.2.2
dev: false
/@trysound/sax/0.2.0:
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
engines: {node: '>=10.13.0'}
dev: false
/@types/acorn/4.0.6:
resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
dependencies:
@@ -787,6 +796,18 @@ packages:
tslib: 2.4.1
dev: false
/astro-feather-icons/1.0.2:
resolution: {integrity: sha512-3goz21oOAdMtISBRUvVvNY2V9WcOo67FH+US/G7BUfhLlmhVE8bBpNYRrc+v5dloGCQIzXlKryWNDZLapaHmlw==}
dev: false
/astro-icon/0.8.0:
resolution: {integrity: sha512-sCzhZcl46BIyLJVg89hq5J4uQABn2psmGvK4cUaxib+M/kBI3TrPy1w3g2O5h/WcrTHLVN9LyxjgkD4lEJJFpw==}
dependencies:
node-fetch: 3.2.10
resolve-pkg: 2.0.0
svgo: 2.8.0
dev: false
/astro/1.6.2:
resolution: {integrity: sha512-UHbzQ3Q7iU2a0XBY6Dzh/Hksoa7svmkWZ3ABRGgSOT765GXIGZkErgeNAsjsBW7RsTUKVLqVxD2LK3NzZL5EKA==}
engines: {node: ^14.18.0 || >=16.12.0, npm: '>=6.14.0'}
@@ -901,6 +922,10 @@ packages:
readable-stream: 3.6.0
dev: false
/boolbase/1.0.0:
resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
dev: false
/boolean/3.2.0:
resolution: {integrity: sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==}
dev: false
@@ -1066,6 +1091,11 @@ packages:
resolution: {integrity: sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==}
dev: false
/commander/7.2.0:
resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
engines: {node: '>= 10'}
dev: false
/common-ancestor-path/1.0.1:
resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==}
dev: false
@@ -1088,12 +1118,42 @@ packages:
which: 2.0.2
dev: false
/css-select/4.3.0:
resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
dependencies:
boolbase: 1.0.0
css-what: 6.1.0
domhandler: 4.3.1
domutils: 2.8.0
nth-check: 2.1.1
dev: false
/css-tree/1.1.3:
resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
engines: {node: '>=8.0.0'}
dependencies:
mdn-data: 2.0.14
source-map: 0.6.1
dev: false
/css-what/6.1.0:
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
engines: {node: '>= 6'}
dev: false
/cssesc/3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'}
hasBin: true
dev: false
/csso/4.2.0:
resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
engines: {node: '>=8.0.0'}
dependencies:
css-tree: 1.1.3
dev: false
/data-uri-to-buffer/4.0.0:
resolution: {integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==}
engines: {node: '>= 12'}
@@ -1182,6 +1242,33 @@ packages:
resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
dev: false
/dom-serializer/1.4.1:
resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
dependencies:
domelementtype: 2.3.0
domhandler: 4.3.1
entities: 2.2.0
dev: false
/domelementtype/2.3.0:
resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
dev: false
/domhandler/4.3.1:
resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
engines: {node: '>= 4'}
dependencies:
domelementtype: 2.3.0
dev: false
/domutils/2.8.0:
resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
dependencies:
dom-serializer: 1.4.1
domelementtype: 2.3.0
domhandler: 4.3.1
dev: false
/dset/3.1.2:
resolution: {integrity: sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==}
engines: {node: '>=4'}
@@ -1210,6 +1297,10 @@ packages:
resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
dev: false
/entities/2.2.0:
resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
dev: false
/eol/0.9.1:
resolution: {integrity: sha512-Ds/TEoZjwggRoz/Q2O7SE3i4Jm66mqTDfmdHdq/7DKVk3bro9Q8h6WdXKdPqFLMoqxrDK5SVRzHVPOS6uuGtrg==}
dev: false
@@ -2411,6 +2502,10 @@ packages:
resolution: {integrity: sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==}
dev: false
/mdn-data/2.0.14:
resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
dev: false
/merge-stream/2.0.0:
resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
dev: false
@@ -2805,6 +2900,12 @@ packages:
path-key: 4.0.0
dev: false
/nth-check/2.1.1:
resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
dependencies:
boolbase: 1.0.0
dev: false
/object-hash/3.0.0:
resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
engines: {node: '>= 6'}
@@ -3197,6 +3298,18 @@ packages:
unist-util-visit: 4.1.1
dev: false
/resolve-from/5.0.0:
resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
engines: {node: '>=8'}
dev: false
/resolve-pkg/2.0.0:
resolution: {integrity: sha512-+1lzwXehGCXSeryaISr6WujZzowloigEofRB+dj75y9RRa/obVcYgbHJd53tdYw8pvZj8GojXaaENws8Ktw/hQ==}
engines: {node: '>=8'}
dependencies:
resolve-from: 5.0.0
dev: false
/resolve/1.22.1:
resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
hasBin: true
@@ -3406,6 +3519,11 @@ packages:
resolution: {integrity: sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==}
dev: false
/stable/0.1.8:
resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
dev: false
/string-width/4.2.3:
resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
engines: {node: '>=8'}
@@ -3508,6 +3626,20 @@ packages:
engines: {node: '>= 0.4'}
dev: false
/svgo/2.8.0:
resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
engines: {node: '>=10.13.0'}
hasBin: true
dependencies:
'@trysound/sax': 0.2.0
commander: 7.2.0
css-select: 4.3.0
css-tree: 1.1.3
csso: 4.2.0
picocolors: 1.0.0
stable: 0.1.8
dev: false
/synckit/0.7.3:
resolution: {integrity: sha512-jNroMv7Juy+mJ/CHW5H6TzsLWpa1qck6sCHbkv8YTur+irSq2PjbvmGnm2gy14BUQ6jF33vyR4DPssHqmqsDQw==}
engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}

62
src/components/Card.astro
View File

@@ -1,62 +0,0 @@
---
export interface Props {
title: string;
body: string;
href: string;
}
const { href, title, body } = Astro.props;
---
<li class="link-card">
<a href={href}>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
</li>
<style>
.link-card {
list-style: none;
display: flex;
padding: 0.15rem;
background-color: white;
background-image: var(--accent-gradient);
background-size: 400%;
border-radius: 0.5rem;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.link-card > a {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: 1rem 1.3rem;
border-radius: 0.35rem;
color: #111;
background-color: white;
opacity: 0.8;
}
h2 {
margin: 0;
font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
p {
margin-top: 0.5rem;
margin-bottom: 0;
color: #444;
}
.link-card:is(:hover, :focus-within) {
background-position: 0;
}
.link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent));
}
</style>

15
src/components/cta.astro Normal file
View File

@@ -0,0 +1,15 @@
---
import Link from "./ui/link.astro";
---
<div
class="bg-black px-20 py-20 mt-20 mx-auto max-w-5xl rounded-lg flex flex-col items-center text-center">
<h2 class="text-white text-3xl md:text-6xl">Build faster websites.</h2>
<p class="text-slate-500 mt-4 text-lg md:text-xl">
Pull content from anywhere and serve it fast with Astro's next-gen island
architecture.
</p>
<div class="flex mt-5">
<Link href="#" style="inverted">Get Started</Link>
</div>
</div>

24
src/components/features.astro
View File

@@ -1,40 +1,49 @@
---
// @ts-ignore
import { Icon } from "astro-icon";
const features = [
{
title: "Bring Your Own Framework",
description:
"Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.",
icon: "bx:bxs-briefcase",
},
{
title: "100% Static HTML, No JS",
description:
"Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.",
icon: "bx:bxs-window-alt",
},
{
title: "On-Demand Components",
description:
"Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.",
icon: "bx:bxs-data",
},
{
title: "Broad Integration",
description:
"Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.",
icon: "bx:bxs-bot",
},
{
title: "SEO Enabled",
description:
"Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.",
icon: "bx:bxs-file-find",
},
{
title: "Community",
description:
"Astro is an open source project powered by hundreds of contributors making thousands of individual contributions.",
icon: "bx:bxs-user",
},
];
---
<div>
<h2 class="text-2xl lg:text-5xl font-bold lg:tracking-tight">
<div class="mt-16 md:mt-0">
<h2 class="text-4xl lg:text-5xl font-bold lg:tracking-tight">
Everything you need to start a website
</h2>
<p class="text-lg mt-4 text-slate-600">
@@ -46,9 +55,14 @@ const features = [
<div class="grid sm:grid-cols-2 md:grid-cols-3 mt-10 gap-16">
{
features.map((item) => (
<div>
<h3 class="font-semibold text-lg">{item.title}</h3>{" "}
<p class="text-slate-500 mt-2 leading-relaxed">{item.description}</p>
<div class="flex gap-4 items-start">
<div class="mt-1 bg-black rounded-full p-2 w-8 h-8 shrink-0">
<Icon class="text-white" name={item.icon} />
</div>
<div>
<h3 class="font-semibold text-lg">{item.title}</h3>{" "}
<p class="text-slate-500 mt-2 leading-relaxed">{item.description}</p>
</div>
</div>
))
}

14
src/components/footer.astro Normal file
View File

@@ -0,0 +1,14 @@
<footer class="my-20">
<p class="text-center text-sm text-slate-500">
Copyright © {new Date().getFullYear()} Astroship. All rights reserved.
</p>
<p class="text-center text-xs text-slate-500 mt-1">
Made by <a
href="https://web3templates.com"
target="_blank"
rel="noopener"
class="hover:underline">
Web3Templates
</a>
</p>
</footer>

6
src/components/hero.astro
View File

@@ -4,8 +4,8 @@ import heroImage from "assets/hero.png";
import Link from "@components/ui/link.astro";
---
<main class="grid lg:grid-cols-2 place-items-center py-8">
<div class="py-6 md:order-1">
<main class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-8">
<div class="py-6 md:order-1 hidden md:block">
<Image
src={heroImage}
alt="Astronaut in the air"
@@ -14,7 +14,7 @@ import Link from "@components/ui/link.astro";
/>
</div>
<div>
<h1 class="text-4xl lg:text-7xl font-bold lg:tracking-tight">
<h1 class="text-5xl lg:text-7xl font-bold lg:tracking-tight">
Marketing website done with Astro
</h1>
<p class="text-lg mt-4 text-slate-600 max-w-xl">

16
src/components/logos.astro Normal file
View File

@@ -0,0 +1,16 @@
---
// @ts-ignore
import { Icon } from "astro-icon";
---
<div class="mt-24">
<h2 class="text-center text-slate-500">Works with your technologies</h2>
<div class="flex gap-8 md:gap-20 items-center justify-center mt-10 flex-wrap">
<Icon class="h-8 md:h-12" name="simple-icons:react" />
<Icon class="h-8 md:h-12" name="simple-icons:svelte" />
<Icon class="h-8 md:h-14" name="simple-icons:tailwindcss" />
<Icon class="h-8 md:h-16" name="simple-icons:alpinedotjs" />
<Icon class="h-8 md:h-12" name="simple-icons:vercel" />
<Icon class="h-8 md:h-12" name="simple-icons:astro" />
</div>
</div>

3
src/components/ui/link.astro
View File

@@ -2,7 +2,7 @@
interface Props {
href: string;
size?: string;
style?: string;
style?: "outline" | "primary" | "inverted";
class?: string;
[x: string]: any;
}
@@ -24,6 +24,7 @@ const styles = {
outline: "border-2 border-black hover:bg-black text-black hover:text-white",
primary:
"bg-black text-white hover:bg-slate-900 border-2 border-transparent",
inverted: "bg-white text-black border-2 border-transparent",
};
---

16
src/layouts/Layout.astro
View File

@@ -6,13 +6,13 @@ import "@fontsource/inter/variable.css";
export interface Props {
title: string;
}
const { src } = await getImage({
src: "../../assets/hero.png",
width: 800,
height: 742,
format: "avif",
});
console.log(src);
// const { src } = await getImage({
// src: "../../assets/hero.png",
// width: 800,
// height: 742,
// format: "avif",
// });
// console.log(src);
const { title } = Astro.props;
---
@@ -25,7 +25,7 @@ const { title } = Astro.props;
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<link rel="preload" as="image" href={src} alt="Hero" />
<!-- <link rel="preload" as="image" href={src} alt="Hero" /> -->
<title>{title} {title && "|"} Astro Ship</title>
</head>
<body>

7
src/pages/index.astro
View File

@@ -1,8 +1,10 @@
---
import Card from "@components/Card.astro";
import Container from "@components/container.astro";
import Cta from "@components/cta.astro";
import Features from "@components/features.astro";
import Footer from "@components/footer.astro";
import Hero from "@components/hero.astro";
import Logos from "@components/logos.astro";
import Layout from "@layouts/Layout.astro";
---
@@ -10,5 +12,8 @@ import Layout from "@layouts/Layout.astro";
<Container>
<Hero />
<Features />
<Logos />
<Cta />
<Footer />
</Container>
</Layout>