feat: add project card component and clean up homepage
This commit is contained in:
parent
3874443c34
commit
ea18dcdb8e
4 changed files with 79 additions and 68 deletions
|
|
@ -11,7 +11,7 @@
|
||||||
<div>
|
<div>
|
||||||
<span class="footer-title">Social</span>
|
<span class="footer-title">Social</span>
|
||||||
<div class="grid grid-flow-col gap-4">
|
<div class="grid grid-flow-col gap-4">
|
||||||
<a
|
<a href="https://bsky.app/profile/badblocks.fyi"
|
||||||
><svg
|
><svg
|
||||||
role="img"
|
role="img"
|
||||||
width="24"
|
width="24"
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"
|
d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"
|
||||||
/></svg
|
/></svg
|
||||||
></a>
|
></a>
|
||||||
<a
|
<a href="https://github.com/badbl0cks"
|
||||||
><svg
|
><svg
|
||||||
role="img"
|
role="img"
|
||||||
width="24"
|
width="24"
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
||||||
/></svg
|
/></svg
|
||||||
></a>
|
></a>
|
||||||
<a
|
<a href="https://git.badblocks.dev"
|
||||||
><svg
|
><svg
|
||||||
role="img"
|
role="img"
|
||||||
width="24"
|
width="24"
|
||||||
|
|
|
||||||
|
|
@ -127,7 +127,7 @@
|
||||||
:disabled="!isVerified || isSendingMessage || isMessageSent"
|
:disabled="!isVerified || isSendingMessage || isMessageSent"
|
||||||
>
|
>
|
||||||
<span v-if="isSendingMessage" class="loading loading-spinner"></span>
|
<span v-if="isSendingMessage" class="loading loading-spinner"></span>
|
||||||
Text Me!
|
Text Me! (Rob ☺️)
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
44
app/components/ProjectCard.vue
Normal file
44
app/components/ProjectCard.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<!-- Project Card -->
|
||||||
|
<div class="card bg-base-100 shadow-xl">
|
||||||
|
<div class="card-body">
|
||||||
|
<h2 class="card-title">{{ title }}</h2>
|
||||||
|
<p>{{ description }}</p>
|
||||||
|
<div class="card-actions justify-end">
|
||||||
|
<button
|
||||||
|
v-if="liveDemoLink"
|
||||||
|
class="btn btn-primary"
|
||||||
|
@click="openLink(liveDemoLink)"
|
||||||
|
>
|
||||||
|
Live Demo
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="sourceCodeLink"
|
||||||
|
class="btn btn-secondary"
|
||||||
|
@click="openLink(sourceCodeLink)"
|
||||||
|
>
|
||||||
|
Source Code
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
title: { type: String, default: "Lorem Ipsum" },
|
||||||
|
description: {
|
||||||
|
type: String,
|
||||||
|
default:
|
||||||
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||||
|
},
|
||||||
|
liveDemoLink: { type: [String, null], default: null },
|
||||||
|
sourceCodeLink: { type: [String, null], default: null },
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openLink(url) {
|
||||||
|
window.open(url, "_blank");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -31,14 +31,14 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="md:w-2/3">
|
<div class="md:w-2/3">
|
||||||
<p class="text-lg mb-4">
|
<p class="text-lg mb-4">
|
||||||
Hello! I'm a passionate and creative junior web developer with a
|
Hiya! I'm a passionate and creative web developer with a knack for
|
||||||
knack for building beautiful and functional websites. I love
|
building beautiful and functional websites. I love learning new
|
||||||
learning new technologies and I'm always looking for exciting
|
technologies and I'm always looking for exciting projects to work
|
||||||
projects to work on.
|
on.
|
||||||
</p>
|
</p>
|
||||||
<h3 class="text-2xl font-bold mb-4">My Skills</h3>
|
<h3 class="text-2xl font-bold mb-4">My Skills</h3>
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="badge badge-primary badge-lg">HTML</div>
|
<div class="badge badge-primary badge-lg">HTML5</div>
|
||||||
<div class="badge badge-primary badge-lg">CSS</div>
|
<div class="badge badge-primary badge-lg">CSS</div>
|
||||||
<div class="badge badge-primary badge-lg">JavaScript</div>
|
<div class="badge badge-primary badge-lg">JavaScript</div>
|
||||||
<div class="badge badge-primary badge-lg">Git</div>
|
<div class="badge badge-primary badge-lg">Git</div>
|
||||||
|
|
@ -51,68 +51,35 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<!-- Current Projects Section -->
|
||||||
<!-- Projects Section -->
|
|
||||||
<section id="projects" class="py-20 bg-base-200">
|
<section id="projects" class="py-20 bg-base-200">
|
||||||
<div class="container mx-auto px-4">
|
<div class="container mx-auto px-4">
|
||||||
<h2 class="text-4xl font-bold text-center mb-12">My Projects</h2>
|
<h2 class="text-4xl font-bold text-center mb-12">Current Projects</h2>
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
<!-- Project Card 1 -->
|
<ProjectCard
|
||||||
<div class="card bg-base-100 shadow-xl">
|
title="PKMNTradeClub"
|
||||||
<div class="card-body">
|
description="A web app to facilitate trading between players of Pokémon TCG Pocket, which frustratingly lacks trade matching features. Currently in development!"
|
||||||
<h2 class="card-title">Project One</h2>
|
/>
|
||||||
<p>
|
</div>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
</div>
|
||||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
</section>
|
||||||
</p>
|
<!-- Inactive Projects Section -->
|
||||||
<div class="card-actions justify-end">
|
<section id="projects" class="py-20 bg-base-200">
|
||||||
<button class="btn btn-primary">Live Demo</button>
|
<div class="container mx-auto px-4">
|
||||||
<button class="btn btn-secondary">Source Code</button>
|
<h2 class="text-4xl font-bold text-center mb-12">Inactive Projects</h2>
|
||||||
</div>
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
</div>
|
<ProjectCard
|
||||||
</div>
|
title="PokeEmerald Mods"
|
||||||
<!-- Project Card 2 -->
|
description="Various mods for one of my favorite games, Pokémon Emerald, to streamline my replays with custom QoL features."
|
||||||
<div class="card bg-base-100 shadow-xl">
|
/>
|
||||||
<div class="card-body">
|
<ProjectCard
|
||||||
<h2 class="card-title">Project Two</h2>
|
title="EditMii"
|
||||||
<p>
|
description="A Python script that allows users to view their WiiU Mii character's data and optionally change the Mii's name. Created in order to easily set flashy, custom names for online play."
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
/>
|
||||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
<ProjectCard
|
||||||
</p>
|
title="BOTW Completer"
|
||||||
<div class="card-actions justify-end">
|
description="A Nintendo Switch application that helps users find missing items and locations in Breath of the Wild by modifying the save file to add stamps to the in-game map."
|
||||||
<button class="btn btn-primary">Live Demo</button>
|
/>
|
||||||
<button class="btn btn-secondary">Source Code</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Project Card 3 -->
|
|
||||||
<div class="card bg-base-100 shadow-xl">
|
|
||||||
<div class="card-body">
|
|
||||||
<h2 class="card-title">Project Three</h2>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
||||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
</p>
|
|
||||||
<div class="card-actions justify-end">
|
|
||||||
<button class="btn btn-primary">Live Demo</button>
|
|
||||||
<button class="btn btn-secondary">Source Code</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Project Card 4 -->
|
|
||||||
<div class="card bg-base-100 shadow-xl">
|
|
||||||
<div class="card-body">
|
|
||||||
<h2 class="card-title">Project Four</h2>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
||||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
</p>
|
|
||||||
<div class="card-actions justify-end">
|
|
||||||
<button class="btn btn-primary">Live Demo</button>
|
|
||||||
<button class="btn btn-secondary">Source Code</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue