1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
import Layout from "../layouts/Layout.astro";
import SocialNavbar from "../components/SocialNavbar.astro";
import DiscordStatus from "../components/DiscordStatus.astro";
import DiscordActivity from "../components/DiscordActivity.astro";
import RSSFeed from "../components/RSSFeed.astro";
---
<Layout title="About">
<div class="grid-container">
<div class="grid-item">
<h1 style="margin-bottom: 30px;">About</h1>
<p style="line-height: 1.4;" class="introduction">
Since you're here, I guess you want to know a bit more about me. Outside of programming random projects here and there, I'm
a conisseur of anime and VTubers (although you might've already figured out that from my projects). I also enjoy gaming, although
nearly all the games I've enjoyed are either MMORPGS, JRPGS, or Visual Novels.
</p>
</div>
<div class="grid-item">
<h2 style="margin-bottom: 30px;">What am I up to right now?</h2>
<div style="display: flex; justify-content: center;">
<a href="https://discord.com/users/246787839570739211"><img src="https://lanyard.cnrad.dev/api/246787839570739211" style="width: 650px; height: auto; margin-bottom: 10px;" /></a>
</div>
<DiscordStatus/>
<DiscordActivity/>
<p style="font-size: 1.3rem;">Yes. Its a live status of my Discord status</p>
<a style="font-size: small;" href="https://github.com/Phineas/lanyard">Live data courtesy of Lanyard</a>
</div>
<div class="grid-item">
<a><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=pinapelz&layout=pie&hide=makefile&theme=dark&langs_count=12" alt="Github Language Stats" style="width: 400px; height: auto" >
<p style="font-size: large; line-height: 1.4;">The first programming language I ever learned was Java, although after learning Python, that has become what I primarily use
since its super easy to just get something running. A lot of my C++ experince comes from competitive robotics in high school.
</p>
<a style="font-size: small;" href="https://github.com/anuraghazra/github-readme-stats">Live data courtesy of anuraghazra/github-readme-stats</a>
</div>
<div class="grid-item">
<h2>My Final Fantasy XIV Character!</h2>
<img src="https://xiv-character-cards.drakon.cloud/characters/id/30300645.png" style="width: 740px; height: auto">
<p style="font-size: 1.3rem">FFXIV is one of my favorite MMORPGs of all time so I figured I'd also share my character in case you were curious</p>
<a style="font-size: small; margin-top: 5px;" href="https://github.com/xivapi/XIV-Character-Cards">Live data courtesy of xivapi/XIV-Character-Cards</a>
</div>
<div class="grid-item">
<h2 style="margin-bottom: 10px;">推し! (Oshi!)</h2>
<p align="center" style="margin-bottom: 10px;">VTubers I enjoy watching</p>
<div class="profile">
<a style="text-decoration:none; margin-bottom: 10px;"href="https://www.youtube.com/@Rosemi_Lovelock">
@RosemiLovelock
<img src="https://files.pinapelz.com/FM5RJDxUYAMqkOF.jpeg" style="width: 350px; height: auto;"/>
</a>
</div>
<div class="profile">
<a style="text-decoration:none; margin-bottom: 10px;" href="https://www.youtube.com/@ErinaMakina">
@ErinaMakina
<img src="https://files.catbox.moe/zawgke.webp" style="width: 300px; height: auto;"/>
</a>
</div>
</div>
<div class="grid-item">
<h2>MyAnimeList - What am I watching?</h2>
<p style="small" align="center">Don't judge me too hard :(</p>
<RSSFeed url="https://myanimelist.net/rss.php?type=rw&u=pinapelz" />
<a style="font-size: small;" href="https://myanimelist.net/rss.php">Live data courtesy of MyAnimeList</a>
</div>
<SocialNavbar />
</Layout>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin: 4rem auto;
max-width: 1200px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.05);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 3.5rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
transition: transform 0.3s ease-in-out;
color: rgba(255, 255, 255, 0.742);
}
h2 {
font-size: 2rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
transition: transform 0.3s ease-in-out;
color: rgba(255, 255, 255, 0.742);
}
h3 {
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
transition: transform 0.3s ease-in-out;
color: rgba(255, 255, 255, 0.742);
}
a,p {
margin-top: 0.5rem;
margin-bottom: 0;
color: rgba(255, 255, 255, 0.742);
font-size: 1.5rem;
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
</style>
|
