Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 119 Packages Wiki Activity Actions

Added technologies, other approach for image loading

Browse source
This commit is contained in:
Firq 2023-03-05 01:11:34 +01:00
parent bddb6db8c5
commit b9f5460501
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
13 changed files with 84 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/ceCard.astro
View file

@ -7,8 +7,8 @@ export interface Props {
const {mlb, link, name } = Astro.props; const {mlb, link, name } = Astro.props;
const ce_img: string = `../ce/${link}.webp`; const ce_img: string = `/fgosite/ce/${link}.webp`;
const mlb_ce: string = `../ce/mlb.webp` const mlb_ce: string = `/fgosite/ce/mlb.webp`
let mlb_image: string = "mlbalign"; let mlb_image: string = "mlbalign";
if(mlb === "false") { if(mlb === "false") {

2
src/components/favouriteCard.astro
View file

@ -7,7 +7,7 @@ export interface Props {
const {image, origin, name } = Astro.props; const {image, origin, name } = Astro.props;
const img: string = `favourites/${image}.webp`; const img: string = `/fgosite/favourites/${image}.webp`;
--- ---

4
src/components/navbar.astro
View file

@ -1,9 +1,9 @@
--- ---
import headerimg from "../../static/link_192.png" import headerimg from "/link_192.png"
--- ---
<header> <header>
<a href={Astro.site} rel="noopener noreferrer" aria-label="Home"> <a href="/fgosite/" rel="noopener noreferrer" aria-label="Home">
<img src={headerimg} alt=""> <img src={headerimg} alt="">
</a> </a>
<ul class="desktop"> <ul class="desktop">

2
src/components/navbarEntry.astro
View file

@ -17,7 +17,7 @@ if (currentPage === slug) {
currPage = "current" currPage = "current"
} }
const fulllink = `${Astro.site}${slug}`; const fulllink = `/fgosite/${slug}`;
--- ---
<li> <li>

4
src/components/servantCard.astro
View file

@ -12,8 +12,8 @@ export interface Props {
const {bond10, ml, image_bond, image_servant, np, skills, level, name } = Astro.props; const {bond10, ml, image_bond, image_servant, np, skills, level, name } = Astro.props;
const servant_img: string = `../servant/${image_servant}.webp`; const servant_img: string = `/fgosite/servant/${image_servant}.webp`;
const bondce_img: string = `../ce/bond-ce/${image_bond}.webp` const bondce_img: string = `/fgosite/ce/bond-ce/${image_bond}.webp`
let bondce_css: string = "bond-ce"; let bondce_css: string = "bond-ce";
if(bond10 === "false") { if(bond10 === "false") {

2
src/components/taCard.astro
View file

@ -7,7 +7,7 @@ export interface Props {
const { image, link, title } = Astro.props; const { image, link, title } = Astro.props;
const icon: string = `background: url('../ta_icons/${image}.webp')` const icon: string = `background: url('/fgosite/ta_icons/${image}.webp')`
--- ---
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}> <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
<article> <article>

55
src/components/technologyCard.astro Normal file
View file

@ -0,0 +1,55 @@
---
export interface Props {
title: string;
link: string;
image: string;
}
const { image, link, title } = Astro.props;
const icon: string = `background-image: url('/fgosite/technologies/${image}.webp')`
---
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
<article>
<div style={icon}>
<h2>{title}</h2>
</div>
</article>
</a>
<style>
article {
background-color: rgb(27, 27, 27);
border-color: #1e1e1e;
padding: 10px;
text-align: center;
transition: transform var(--speed) var(--ease);
height: auto;
width: auto;
line-height: 128px;
}
article:hover {
transform: scale(var(--hover-scale));
}
article > div {
background-size: contain;
width: 128px;
height: 128px;
}
article:hover h2 {
color: white;
background-color: #1e1e1e;
font-size: 18px;
display: inline-block;
vertical-align: center;
line-height: normal;
width: 90%;
border-radius: 5px;
opacity: 90%;
}
article h2 {
display: none;
}
</style>

2
src/layouts/Layout.astro
View file

@ -10,7 +10,7 @@ export interface Props {
const { currentpage, title } = Astro.props; const { currentpage, title } = Astro.props;
const description: string = "A reference for all esports Servants, CEs and already completed TAs that Firq can provide. Contact information available as well."; const description: string = "A reference for all esports Servants, CEs and already completed TAs that Firq can provide. Contact information available as well.";
import favicon from "../../static/favicon.ico" import favicon from "/favicon.ico"
--- ---
<!DOCTYPE html> <!DOCTYPE html>

25
src/pages/about.astro
View file

@ -2,23 +2,36 @@
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import BasicSection from '../layouts/basicSection.astro'; import BasicSection from '../layouts/basicSection.astro';
import Navbar from '../components/navbar.astro';
import NavbarEntry from '../components/navbarEntry.astro';
import navdata from '../../static/_navdata.json'
import ContactSection from '../layouts/contactSection.astro'; import ContactSection from '../layouts/contactSection.astro';
import ContactCard from '../components/contactCard.astro'; import ContactCard from '../components/contactCard.astro';
import contactdata from '../../static/_contactdata.json' import contactdata from '../../static/_contactdata.json'
import CustomFooter from '../layouts/customFooter.astro';
import TechnologyCard from '../components/technologyCard.astro';
const techologydata = [{
"title": "Astro",
"link": "https://astro.build",
"image": "astro"
},
{
"title": "GitLab",
"link": "https://gitlab.io",
"image": "gitlab"
},]
--- ---
<Layout title="About - Firq FGO Site" currentpage="about"> <Layout title="About - Firq FGO Site" currentpage="about">
<BasicSection title="About"> <BasicSection title="About">
This is a small sideproject that I'm creating. It uses Astro for developing and Gitlab for providing the site. This is a small sideproject that I'm creating.
</BasicSection>
<BasicSection title="Technologies used">
{techologydata.map((item) => (<TechnologyCard {...item}/>))}
</BasicSection> </BasicSection>
<ContactSection title="Contact me"> <ContactSection title="Contact me">
{contactdata.map((item) => (<ContactCard {...item}/>))} {contactdata.map((item) => (<ContactCard {...item}/>))}
</ContactSection> </ContactSection>
<CustomFooter />
</Layout> </Layout>
<style> <style>

2
src/pages/servants.astro
View file

@ -1,7 +1,6 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import BaseSection from '../layouts/baseSection.astro'; import BaseSection from '../layouts/baseSection.astro';
import CustomFooter from '../layouts/customFooter.astro';
import ServantCard from '../components/servantCard.astro'; import ServantCard from '../components/servantCard.astro';
import servantdata from '../../static/_servantdata.json' import servantdata from '../../static/_servantdata.json'
@ -18,7 +17,6 @@ import cedata from '../../static/_cedata.json'
<BaseSection title="CE Offering"> <BaseSection title="CE Offering">
{cedata.map((item) => (<CeCard {...item}/>))} {cedata.map((item) => (<CeCard {...item}/>))}
</BaseSection> </BaseSection>
<CustomFooter />
</Layout> </Layout>
<style> <style>

2
src/pages/ta-collection.astro
View file

@ -1,6 +1,5 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import CustomFooter from '../layouts/customFooter.astro';
import TaSection from '../layouts/taSection.astro'; import TaSection from '../layouts/taSection.astro';
import TaCard from '../components/taCard.astro'; import TaCard from '../components/taCard.astro';
@ -12,7 +11,6 @@ import tadata from '../../static/_tadata.json'
<TaSection title="Completed TAs"> <TaSection title="Completed TAs">
{tadata.map((item) => (<TaCard {...item}/>))} {tadata.map((item) => (<TaCard {...item}/>))}
</TaSection> </TaSection>
<CustomFooter />
</Layout> </Layout>
<style> <style>

BIN
static/technologies/astro.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
static/technologies/gitlab.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB