77 lines
1.9 KiB
Vue
77 lines
1.9 KiB
Vue
<template>
|
|
<div class="wrapper-small md:px-10">
|
|
<AuthorProfile />
|
|
|
|
<section
|
|
id="technologies"
|
|
class="mt-6"
|
|
>
|
|
<h3 class="section-heading">
|
|
Technologies I Use
|
|
</h3>
|
|
|
|
<ResumeTechnologies />
|
|
</section>
|
|
|
|
<section
|
|
id="experience"
|
|
class="grid gap-6 mt-4 sm:mt-6 md:mt-10 sm:gap-8 sm:grid-cols-2"
|
|
>
|
|
<h3 class="section-heading">
|
|
Experience
|
|
</h3>
|
|
|
|
<div class="grid gap-2 mt-4">
|
|
<!-- <CardExperience
|
|
v-for="(experience, index) in experiences.jobs"
|
|
:key="`experience-job-${index}`"
|
|
:title="experience.title"
|
|
:url="experience.url"
|
|
:date="experience.date"
|
|
:position="experience.position"
|
|
/> -->
|
|
</div>
|
|
</section>
|
|
|
|
<section id="featured-posts" class="mt-6">
|
|
<h3 class="section-heading">
|
|
Featured Posts
|
|
</h3>
|
|
|
|
<BlogPostCard v-for="post in posts" :key="post.slug" :post="post"></BlogPostCard>
|
|
</section>
|
|
|
|
|
|
<section id="projects" class="mt-6">
|
|
<h3 class="section-heading">
|
|
Open Source Projects
|
|
</h3>
|
|
|
|
<ResumeProjects :projects="projects"/>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
async asyncData({ $axios, $notion, $config: { githubUsername, notionTableId } }) {
|
|
const projects = await $axios
|
|
.get(
|
|
'https://api.github.com/search/repositories?q=user:' + githubUsername + '&sort=stars&per_page=3'
|
|
)
|
|
.catch((errors) => {
|
|
// console.log(errors)
|
|
})
|
|
const pageTable = await $notion.getPageTable(notionTableId)
|
|
const posts = pageTable.filter((page) => page.public && page.featured).sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
|
|
return { posts, projects: projects.data.items }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.section-heading {
|
|
@apply text-xl font-semibold text-gray-900 dark:text-gray-100;
|
|
}
|
|
</style>
|