Initial commit from Astro
This commit is contained in:
houston[bot]
60
src/pages/about.astro
Normal file
60
src/pages/about.astro
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
import experiences from "../collections/experiences.json";
|
||||
import AboutExperience from "../components/about-experience.astro";
|
||||
import PageHeading from "../components/page-heading.astro";
|
||||
import Layout from "../layouts/main.astro";
|
||||
---
|
||||
|
||||
<Layout title="About Me">
|
||||
<section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
|
||||
<PageHeading
|
||||
title="About Me"
|
||||
description="Hello 👋 I'm a frontend engineer from Nanjing, China. I'm passionate about building new products and learning new technology."
|
||||
/>
|
||||
|
||||
<img src="/assets/images/about.jpg" class="relative z-30 w-full my-10 rounded-xl" />
|
||||
|
||||
<h2 class="mb-2 text-2xl font-bold dark:text-neutral-200">Short Bio</h2>
|
||||
<p
|
||||
class="text-sm leading-6 text-gray-600 dark:text-neutral-400 sm:leading-7 lg:leading-8 sm:text-base lg:text-lg"
|
||||
>
|
||||
Front-end cutter 🧑🏻💻, back-end amateur 🤷🏻♂️, operations digging holes person 🤦🏻♂️.
|
||||
</p>
|
||||
|
||||
<h2
|
||||
class="mt-5 mb-2 text-2xl font-bold lg:mt-10 sm:mt-6 dark:text-neutral-200"
|
||||
>
|
||||
Experience
|
||||
</h2>
|
||||
<div class="px-5 py-10">
|
||||
{
|
||||
experiences.map((experience) => {
|
||||
return (
|
||||
<div class="pb-10 border-l border-gray-200 last:border-l-0 dark:border-neutral-700">
|
||||
<AboutExperience
|
||||
dates={experience.dates}
|
||||
role={experience.role}
|
||||
company={experience.company}
|
||||
description={experience.description}
|
||||
logo={experience.logo}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
<h2 class="mt-5 mb-2 text-2xl font-bold lg:mt-10 sm:mt-6 dark:text-neutral-200">Let's Connect</h2>
|
||||
<p
|
||||
class="text-sm leading-6 text-gray-600 dark:text-neutral-400 sm:leading-7 lg:leading-8 sm:text-base lg:text-lg"
|
||||
>
|
||||
If you want to stay up to date with my work be sure to <a
|
||||
href="https://x.com/0xKaibi"
|
||||
target="_blank"
|
||||
class="text-indigo-600 underline">follow me on twitter</a
|
||||
>, or you can send me an <a href="mailto:astro-aria#miantiao.me" class="text-indigo-600 underline"
|
||||
>email</a
|
||||
> and I'll be sure to get back to you.
|
||||
</p>
|
||||
</section>
|
||||
</Layout>
|
||||
76
src/pages/index.astro
Normal file
76
src/pages/index.astro
Normal file
@@ -0,0 +1,76 @@
|
||||
---
|
||||
import Button from "../components/button.astro";
|
||||
import Projects from "../components/home/projects.astro";
|
||||
import Separator from "../components/home/separator.astro";
|
||||
import Writings from "../components/home/writings.astro";
|
||||
import Layout from "../layouts/main.astro";
|
||||
---
|
||||
|
||||
<Layout title="Kai">
|
||||
<div
|
||||
class="relative z-20 w-full max-w-4xl mx-auto mt-16 px-7 md:mt-24 lg:mt-32 xl:px-0"
|
||||
>
|
||||
<div class="flex flex-col items-center md:flex-row">
|
||||
<div class="relative w-full md:w-1/2">
|
||||
<h1
|
||||
class="mb-5 text-4xl font-bold leading-tight md:text-4xl lg:text-6xl dark:text-white"
|
||||
>
|
||||
Hello, I'm Kai.
|
||||
</h1>
|
||||
<p class="mb-6 text-base text-neutral-600 dark:text-neutral-400">
|
||||
I'm a front-end programmer living in Nanjing. <br
|
||||
class="hidden lg:block"
|
||||
/>I focus on Web development.
|
||||
</p>
|
||||
<p class="mb-2 font-semibold text-neutral-800 dark:text-neutral-200">
|
||||
I can help you out with:
|
||||
</p>
|
||||
<ul
|
||||
class="py-2 space-y-[3px] text-sm list-disc list-inside text-neutral-500 dark:text-neutral-400"
|
||||
>
|
||||
<li>Vue.js Development</li>
|
||||
<li>React.js Development</li>
|
||||
<li>Node.js Development</li>
|
||||
<li>Website Design</li>
|
||||
<li>and more...</li>
|
||||
</ul>
|
||||
<Button text="Follow me on 𝕏" link="https://x.com/0xKaiBi" />
|
||||
</div>
|
||||
<div
|
||||
class="relative justify-end hidden w-full mt-10 md:flex md:pl-10 md:w-1/2 md:mt-0 md:translate-y-4 xl:translate-y-0"
|
||||
>
|
||||
<div class="relative z-50 w-full">
|
||||
<div
|
||||
class="absolute bottom-0 z-40 w-16 h-16 -translate-x-6 -translate-y-1/2 lg:top-auto top-0 lg:-translate-y-[330px] rounded-full"
|
||||
>
|
||||
<span
|
||||
class="relative z-20 flex items-center justify-center w-full h-full text-2xl border-8 border-white rounded-full dark:border-neutral-950 bg-neutral-100 dark:bg-neutral-900"
|
||||
>
|
||||
<span
|
||||
class="flex items-center justify-center w-full h-full bg-white border border-dashed rounded-full dark:bg-neutral-950 border-neutral-300 dark:border-neutral-700"
|
||||
>👋</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div class="relative z-30 px-10">
|
||||
<img
|
||||
src="/assets/images/photo.png"
|
||||
loading="eager"
|
||||
decoding="auto"
|
||||
class="relative z-30 w-full aspect-[790/1189] md:max-w-md mx-auto dark:-translate-y-0.5"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-0 right-0 z-20 w-full h-full lg:h-[420px] translate-x-0 -translate-y-px border border-dashed rounded-2xl bg-gradient-to-r dark:from-neutral-950 dark:via-black dark:to-neutral-950 from-white via-neutral-50 to-white border-neutral-300 dark:border-neutral-700"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator text="Check out my projects" />
|
||||
<Projects />
|
||||
<Separator text="Some of my writing" />
|
||||
<Writings />
|
||||
</Layout>
|
||||
16
src/pages/post/[slug].astro
Normal file
16
src/pages/post/[slug].astro
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const postEntries = await getCollection("post");
|
||||
return postEntries.map((entry) => ({
|
||||
params: { slug: entry.slug },
|
||||
props: { entry },
|
||||
}));
|
||||
}
|
||||
|
||||
const { entry } = Astro.props;
|
||||
const { Content } = await entry.render();
|
||||
---
|
||||
|
||||
<Content />
|
||||
18
src/pages/posts.astro
Normal file
18
src/pages/posts.astro
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
import PageHeading from "../components/page-heading.astro";
|
||||
import PostsLoop from "../components/posts-loop.astro";
|
||||
import Layout from "../layouts/main.astro";
|
||||
---
|
||||
|
||||
<Layout title="My Writing">
|
||||
<section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
|
||||
<PageHeading
|
||||
title="My Writing"
|
||||
description="Dive into my musings on life and tech in my latest posts; a blend of introspection and innovation. Keep an eye out for fresh insights and updates!"
|
||||
/>
|
||||
|
||||
<div class="z-50 flex flex-col items-stretch w-full gap-5 my-8">
|
||||
<PostsLoop count="999999999" />
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
32
src/pages/projects.astro
Normal file
32
src/pages/projects.astro
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
import projects from "../collections/projects.json";
|
||||
import PageHeading from "../components/page-heading.astro";
|
||||
import Project from "../components/project.astro";
|
||||
import Layout from "../layouts/main.astro";
|
||||
---
|
||||
|
||||
<Layout title="My Projects">
|
||||
<section class="relative z-20 max-w-2xl mx-auto my-12 px-7 lg:px-0">
|
||||
<PageHeading
|
||||
title="My Projects"
|
||||
description="Here are some of the current projects I've been working on. I really enjoy creating new projects and coming up with new ideas. I'm always working on something new, so check back often!"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="z-50 grid items-stretch w-full grid-cols-1 my-8 gap-7 sm:gap-5 sm:grid-cols-2"
|
||||
>
|
||||
{
|
||||
projects.map((project) => {
|
||||
return (
|
||||
<Project
|
||||
name={project.name}
|
||||
description={project.description}
|
||||
image={project.image}
|
||||
url={project.url}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user