diff options
| -rw-r--r-- | src/components/Card.astro | 4 | ||||
| -rw-r--r-- | src/components/MiniCard.astro | 62 | ||||
| -rw-r--r-- | src/pages/about.astro | 1 | ||||
| -rw-r--r-- | src/pages/contributions.astro | 74 | ||||
| -rw-r--r-- | src/pages/projects.astro | 11 |
5 files changed, 118 insertions, 34 deletions
diff --git a/src/components/Card.astro b/src/components/Card.astro index d2d428e..4de0a1b 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -7,9 +7,10 @@ interface Props { languageColor: string; logoSrc?: string; logoWidth?: string; + contribution?: string; } -const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%' } = Astro.props; +const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%', contribution="Contributor" } = Astro.props; --- <li class="link-card"> @@ -22,6 +23,7 @@ const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%' } <span class="language">{language}</span> </div> <p>{body}</p> + <p>{contribution}</p> </div> </a> </li> diff --git a/src/components/MiniCard.astro b/src/components/MiniCard.astro new file mode 100644 index 0000000..b34bcef --- /dev/null +++ b/src/components/MiniCard.astro @@ -0,0 +1,62 @@ +--- +interface Props { + title: string; + body: string; + href: string; + language: string; + languageColor: string; + logoSrc?: string; + logoWidth?: string; + contribution?: string; +} + +const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%', contribution = 'Minor Contributions' } = Astro.props; +--- + +<li class="link-card"> + <a href={href}> + {logoSrc && <img src={logoSrc} alt="Project Logo" style={{ maxWidth: logoWidth }} />} + <h2>{title}</h2> + <div class="language-container"> + <span class="dot" style={{ backgroundColor: languageColor }}></span> + <span class="language">{language}</span> + </div> + <p>{body}</p> + <p>{contribution}</p> + </a> +</li> + +<style> + .link-card { + list-style: none; + padding: 1px; + background-color: #23262d; + border-radius: 6px; + color: white; + } + .link-card > a { + text-decoration: none; + color: inherit; + display: flex; + flex-direction: column; + padding: 2rem; + } + .link-card h2 { + margin: 0; + font-size: 1.25rem; + } + .link-card p { + margin-top: 0.5rem; + margin-bottom: 0; + } + .language-container { + display: flex; + align-items: center; + gap: 5px; + } + .dot { + width: 10px; + height: 10px; + border-radius: 50%; + } +</style>
\ No newline at end of file diff --git a/src/pages/about.astro b/src/pages/about.astro index 59ffdbc..69ed3c4 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -22,6 +22,7 @@ import RSSFeed from "../components/RSSFeed.astro"; <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> diff --git a/src/pages/contributions.astro b/src/pages/contributions.astro index f6dd454..0f4c6ad 100644 --- a/src/pages/contributions.astro +++ b/src/pages/contributions.astro @@ -2,50 +2,62 @@ import Layout from "../layouts/Layout.astro"; import SocialNavbar from "../components/SocialNavbar.astro"; import Card from "../components/Card.astro"; +import MiniCard from "../components/MiniCard.astro"; --- <Layout title="Contributions"> <main> <h1>Open Source Contributions</h1> - - <ul role="list" class="link-card-grid"> - </ul> - + + <ul role="list" class="link-card-grid"></ul> + <section class="contributions-section"> <h2>Contributions</h2> <ul role="list" class="contribution-card-grid"> <Card - href="https://github.com/pinapelz/Sapphire" - title="Sapphire" - body="Sapphire is a research implementation of the Final Fantasy XIV Online server. The purpose of Sapphire is to gain an understanding of how the retail game servers work internally." - language="C++" - languageColor="#f34b7d" - logoWidth="300px" - logoSrc="https://1852825540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWEO5F5fxBARvfBEby5l%2Fuploads%2FN0KFeaD6TNNdujlRXgrw%2Fsapphire_logo.png?alt=media&token=79fdc373-8bf7-41e0-bf66-fb3eaf67d2ca" - /> - <Card href="https://github.com/Patchwork-Archive" title="Patchwork Archive" body="Patchwork Archive aims to archive original songs and covers created by VTubers. With loss of content being a major issue in VTubing (due to termination and graduations), the goal of Patchwork Archive is to preserve a subset of VTuber content for preservation of culture." + contribution="Maintainer and creator of project" language="Javascript" languageColor="#f1e05a" logoSrc="https://avatars.githubusercontent.com/u/145537335?s=200&v=4" logoWidth="150px" - /> + /> <Card - href="https://github.com/EBro912/Holodex.NET" - title="Holodex.NET" - body="A C# wrapper for the Holodex API " - language="C#" - languageColor="#178600" - logoSrc="https://camo.githubusercontent.com/259199b315aaf21baf8665a6613a2c0ffb404ad9fbf3f8441e8d0100a1a71937/68747470733a2f2f692e696d6775722e636f6d2f69527967754c672e706e67" - logoWidth="150px" + href="https://github.com/pinapelz/Sapphire" + title="Sapphire" + body="Sapphire is a research implementation of the Final Fantasy XIV Online server. The purpose of Sapphire is to gain an understanding of how the retail game servers work internally." + contribution="Bug fixes + Reverse engineered and implemented quests" + language="C++" + languageColor="#f34b7d" + logoWidth="300px" + logoSrc="https://1852825540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWEO5F5fxBARvfBEby5l%2Fuploads%2FN0KFeaD6TNNdujlRXgrw%2Fsapphire_logo.png?alt=media&token=79fdc373-8bf7-41e0-bf66-fb3eaf67d2ca" /> - + <div class="card-container"> + <MiniCard + href="https://github.com/EBro912/Holodex.NET" + title="Holodex.NET" + body="A C# wrapper for the Holodex API " + language="C#" + languageColor="#178600" + logoSrc="https://camo.githubusercontent.com/259199b315aaf21baf8665a6613a2c0ffb404ad9fbf3f8441e8d0100a1a71937/68747470733a2f2f692e696d6775722e636f6d2f69527967754c672e706e67" + logoWidth="150px" + /> + <MiniCard + href="https://github.com/icssc/AntAlmanac" + title="AntAlmanac" + body="A course exploration and scheduling tool for UCI Anteaters" + language="TypeScript" + languageColor="#2b7489" + logoSrc="https://github.com/icssc/AntAlmanac/raw/main/apps/antalmanac/public/banner.png" + logoWidth="300px" + /> + </div> </ul> </section> </main> - + <SocialNavbar /> <style> @@ -57,14 +69,20 @@ import Card from "../components/Card.astro"; font-size: 20px; line-height: 1.6; } - .link-card-grid, .contribution-card-grid { + .card-container { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + .link-card-grid, + .contribution-card-grid { display: grid; grid-template-columns: repeat(3, minmax(24ch, 1fr)); gap: 2rem; padding: 0; } .contribution-card-grid { - grid-template-columns: 1fr; /* Each card takes up one row */ + grid-template-columns: 1fr; /* Each card takes up one row */ } .contributions-section { margin-top: 2rem; @@ -73,8 +91,12 @@ import Card from "../components/Card.astro"; font-size: 1.5rem; margin-bottom: 1rem; } + .mini-card { + margin: 10px 0; + } @media (max-width: 1020px) { - .link-card-grid, .contribution-card-grid { + .link-card-grid, + .contribution-card-grid { grid-template-columns: 1fr; } } diff --git a/src/pages/projects.astro b/src/pages/projects.astro index 0da5cc1..554a3df 100644 --- a/src/pages/projects.astro +++ b/src/pages/projects.astro @@ -86,14 +86,8 @@ import Card from "../components/Card.astro"; language="Javascript" languageColor="#f1e05a" /> - <Card - href="https://github.com/pinapelz/Sapphire" - title="Sapphire (Contributed)" - body="A Final Fantasy XIV Server Emulator written in C++" - language="C++" - languageColor="#f34b7d" - /> </ul> + <a href="/contributions"><p>Open Source Contribtuions</p></a> </main> <SocialNavbar /> <style> @@ -105,6 +99,9 @@ import Card from "../components/Card.astro"; font-size: 20px; line-height: 1.6; } + a{ + color: white; + } .link-card-grid { display: grid; grid-template-columns: repeat(3, minmax(24ch, 1fr)); |