mirror of https://github.com/aldy505/code.git
125 lines
3.9 KiB
Vue
125 lines
3.9 KiB
Vue
<template>
|
|
<div class="bg-cool-gray-900 text-white min-h-screen min-w-full h-full w-full font-body">
|
|
<div class="container mx-auto px-10 md:px-20 lg:px-32">
|
|
<div class="h-full lg:min-h-screen flex flex-col lg:flex-row items-center justify-content">
|
|
<div class="flex-1 pt-12 pb-4 md:pt-0 md:pb-0">
|
|
<div class="flex flex-row items-center">
|
|
<div class="flex-initial">
|
|
<h1 class="text-5xl md:text-8xl font-bold py-4">
|
|
Reinaldy Rafli
|
|
</h1>
|
|
</div>
|
|
<div class="flex-initial md:pl-4">
|
|
<img
|
|
:src="image.me"
|
|
alt="My Memoji"
|
|
class="w-full md:w-2/3 h-auto md:py-4"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-base py-2 md:w-2/3">
|
|
Not a CS student, don't work in IT industry, but most of the time I do web development. Always love to be working on a cool project 😉
|
|
</p>
|
|
|
|
<ul class="list-none text-base py-2">
|
|
<li>
|
|
<a
|
|
href="mailto:aldy505@tutanota.com"
|
|
class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100"
|
|
>Email</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://www.github.com/aldy505"
|
|
class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100"
|
|
>Github</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://t.me/aldy505"
|
|
class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100"
|
|
>Telegram</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="text-sm py-2 hidden md:block">
|
|
<MadeWithLove />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 pl-0 lg:pl-12">
|
|
<div
|
|
class="repository"
|
|
v-show="repoRequest"
|
|
>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 place-content-center">
|
|
<div
|
|
class="line"
|
|
v-for="repo in repositories"
|
|
:key="repo.updated_at"
|
|
>
|
|
<Repository
|
|
:url="repo.html_url"
|
|
:name="repo.name"
|
|
:stars="repo.stargazers_count"
|
|
:language="repo.language"
|
|
:description="repo.description"
|
|
/>
|
|
</div>
|
|
<div class="line">
|
|
<p class="text-sm opacity-75 hover:opacity-100 hover:text-blue-100 hover:underline md:pb-0 pb-4">
|
|
<a href="https://www.github.com/aldy505">
|
|
Explore more on Github —>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-initial md:hidden py-4">
|
|
<MadeWithLove />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
repositories: [],
|
|
repoRequest: false,
|
|
image: {
|
|
me: 'me.png',
|
|
},
|
|
};
|
|
},
|
|
async mounted() {
|
|
try {
|
|
const response = await this.$axios.$get('https://api.github.com/users/aldy505/repos');
|
|
const randNumber = Math.random() * (response.length - 5);
|
|
this.repositories = response.sort().slice(randNumber, randNumber + 5);
|
|
this.repoRequest = true;
|
|
|
|
this.$anime({
|
|
targets: '.repository',
|
|
opacity: [
|
|
{value: 0, duration: 500, delay: 500},
|
|
{value: 100, duration: 2500},
|
|
],
|
|
translateY: [
|
|
{value: 1000, duration: 500, delay: 800},
|
|
{value: 0, duration: 2500},
|
|
],
|
|
delay: this.$anime.stagger(300, {start: 0, from: 'first', easing: 'spring'}),
|
|
});
|
|
} catch {
|
|
this.repoRequest = false;
|
|
}
|
|
},
|
|
};
|
|
</script>
|