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>
|
||||
<span class="footer-title">Social</span>
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a
|
||||
<a href="https://bsky.app/profile/badblocks.fyi"
|
||||
><svg
|
||||
role="img"
|
||||
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"
|
||||
/></svg
|
||||
></a>
|
||||
<a
|
||||
<a href="https://github.com/badbl0cks"
|
||||
><svg
|
||||
role="img"
|
||||
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"
|
||||
/></svg
|
||||
></a>
|
||||
<a
|
||||
<a href="https://git.badblocks.dev"
|
||||
><svg
|
||||
role="img"
|
||||
width="24"
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
:disabled="!isVerified || isSendingMessage || isMessageSent"
|
||||
>
|
||||
<span v-if="isSendingMessage" class="loading loading-spinner"></span>
|
||||
Text Me!
|
||||
Text Me! (Rob ☺️)
|
||||
</button>
|
||||
</div>
|
||||
</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 class="md:w-2/3">
|
||||
<p class="text-lg mb-4">
|
||||
Hello! I'm a passionate and creative junior web developer with a
|
||||
knack for building beautiful and functional websites. I love
|
||||
learning new technologies and I'm always looking for exciting
|
||||
projects to work on.
|
||||
Hiya! I'm a passionate and creative web developer with a knack for
|
||||
building beautiful and functional websites. I love learning new
|
||||
technologies and I'm always looking for exciting projects to work
|
||||
on.
|
||||
</p>
|
||||
<h3 class="text-2xl font-bold mb-4">My Skills</h3>
|
||||
<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">JavaScript</div>
|
||||
<div class="badge badge-primary badge-lg">Git</div>
|
||||
|
|
@ -51,68 +51,35 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Section -->
|
||||
<!-- Current Projects Section -->
|
||||
<section id="projects" class="py-20 bg-base-200">
|
||||
<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">
|
||||
<!-- Project Card 1 -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Project One</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 2 -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Project Two</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 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>
|
||||
<ProjectCard
|
||||
title="PKMNTradeClub"
|
||||
description="A web app to facilitate trading between players of Pokémon TCG Pocket, which frustratingly lacks trade matching features. Currently in development!"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Inactive Projects Section -->
|
||||
<section id="projects" class="py-20 bg-base-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">Inactive Projects</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<ProjectCard
|
||||
title="PokeEmerald Mods"
|
||||
description="Various mods for one of my favorite games, Pokémon Emerald, to streamline my replays with custom QoL features."
|
||||
/>
|
||||
<ProjectCard
|
||||
title="EditMii"
|
||||
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."
|
||||
/>
|
||||
<ProjectCard
|
||||
title="BOTW Completer"
|
||||
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."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue