artie/artie.moe
1
0
Fork 0
mirror of https://github.com/artiemis/artie.moe.git synced 2026-02-14 17:11:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add icons + cleanup

Browse Source
This commit is contained in:
Artem 2023-03-05 17:43:27 +01:00
parent d16495d098
commit 27513123fc
6 changed files with 95 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Centerpiece.astro Normal file
View File

@ -0,0 +1,5 @@
<div>
<p class="font-bold dark:text-white text-5xl">
Hiya! I'm <span class="text-transparent bg-clip-text from-pink-400 to-purple-600 bg-gradient-to-r">Artur</span> 👋
</p>
</div>

29
src/components/Icons.astro Normal file
View File

@ -0,0 +1,29 @@
---
import { Icon } from "astro-icon";
---
<div class="flex gap-x-2 mt-7">
<a href="https://github.com/artiemis" target="_blank">
<Icon name="mdi:github" />
</a>
<a href="https://discord.com/users/134306884617371648" target="_blank">
<Icon name="mdi:discord" />
</a>
<a href="mailto:hi@arti3.dev" target="_blank">
<Icon name="mdi:email" />
</a>
<a href="https://anilist.co/user/Artiem/" target="_blank">
<Icon name="simple-icons:anilist" />
</a>
</div>
<style>
[astro-icon] {
width: 2rem;
transition: 0.4s ease-out;
}
[astro-icon]:hover {
transform: rotateZ(360deg);
}
</style>

31
src/components/Prompt.astro Normal file
View File

@ -0,0 +1,31 @@
<div class="artie font-mono fixed top-4 left-6 text-xl font-bold text-slate-300">
&gt; arti<span class="text-pink-400">3</span>
</div>
<style>
.artie::after {
content: "";
position: absolute;
top: 2.4px;
right: -8px;
display: inline-block;
background-color: #606060;
vertical-align: top;
width: 6px;
height: 22px;
animation: blink 1s step-end infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

34
src/layouts/Layout.astro
View File

@ -3,31 +3,29 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest"> <link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#603cba"> <meta name="msapplication-TileColor" content="#603cba" />
<meta name="theme-color" content="#F472B6" /> <meta name="theme-color" content="#F472B6" />
<meta name="description" content="A laid-back software tinkerer." /> <meta name="description" content="A laid-back software tinkerer." />
<meta property="og:site_name" content="artie" /> <meta property="og:site_name" content="artie" />
<meta property="og:image" content="https://arti3.dev/apple-touch-icon.png" /> <meta property="og:image" content="https://arti3.dev/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet" />
<title>artie</title> <title>artie</title>
</head> </head>
<body> <body>
<slot /> <slot />
</body> </body>
</html> </html>
<style is:global> <style is:global></style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap');
html {
font-family: "Open Sans", sans-serif;
background-color: #f6f6f6;
}
code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
monospace;
}
</style>

47
src/pages/index.astro
View File

@ -1,47 +1,14 @@
--- ---
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import Prompt from "../components/Prompt.astro";
import Centerpiece from "../components/Centerpiece.astro";
import Icons from "../components/Icons.astro";
--- ---
<Layout> <Layout>
<main class="bg-zinc-900 h-screen text-white flex justify-center items-center"> <main class="bg-zinc-900 h-screen text-white flex flex-col justify-center items-center">
<div class="artie fixed top-4 left-6 text-xl font-bold text-slate-300"> <Prompt />
&gt; arti<span class="text-pink-400">3</span> <Centerpiece />
</div> <Icons />
<div>
<p class="font-bold dark:text-white text-5xl">
Hiya! I'm <span class="text-transparent bg-clip-text from-pink-400 to-purple-600 bg-gradient-to-r">Artur</span> 👋
</p>
</div>
</main> </main>
</Layout> </Layout>
<style>
.artie {
font-family: "JetBrains Mono", monospace;
}
.artie::after {
content: "";
position: absolute;
top: 2.4px;
right: -8px;
display: inline-block;
background-color: #606060;
vertical-align: top;
width: 6px;
height: 22px;
animation: blink 1s step-end infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

7
tailwind.config.cjs
View File

@ -2,7 +2,12 @@
module.exports = { module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: { theme: {
extend: {}, extend: {
fontFamily: {
sans: ['"Open Sans"', 'sans-serif'],
mono: ['"JetBrains Mono"', 'monospace']
}
},
}, },
plugins: [], plugins: [],
} }