Added technologies, other approach for image loading
This commit is contained in:
parent
bddb6db8c5
commit
b9f5460501
GPG key ID:
3ACC61C8CEC83C20
13 changed files with 84 additions and 20 deletions
|
|
@ -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") {
|
||||
|
|
|
|||
|
|
@ -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`;
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ if (currentPage === slug) {
|
|||
currPage = "current"
|
||||
}
|
||||
|
||||
const fulllink = `${Astro.site}${slug}`;
|
||||
const fulllink = `/fgosite/${slug}`;
|
||||
---
|
||||
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -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") {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
55
src/components/technologyCard.astro
Normal file
55
src/components/technologyCard.astro
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
BIN
static/technologies/astro.webp
Normal file
BIN
static/technologies/astro.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
static/technologies/gitlab.webp
Normal file
BIN
static/technologies/gitlab.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 KiB |
Loading…
Reference in a new issue