Added technologies, other approach for image loading

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -7,7 +7,7 @@ export interface 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}>
<article>

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>

View file

@ -10,7 +10,7 @@ export interface 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.";
import favicon from "../../static/favicon.ico"
import favicon from "/favicon.ico"
---
<!DOCTYPE html>

View file

@ -2,23 +2,36 @@
import Layout from '../layouts/Layout.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 ContactCard from '../components/contactCard.astro';
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">
<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>
<ContactSection title="Contact me">
{contactdata.map((item) => (<ContactCard {...item}/>))}
</ContactSection>
<CustomFooter />
</Layout>
<style>

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 KiB