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

Started redesign

Browse source
This commit is contained in:
Firq 2023-02-11 15:05:53 +01:00
parent 217c568ef1
commit c98c43100e
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
6 changed files with 169 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/navbuttonsTitle.astro Normal file
View file

@ -0,0 +1,31 @@
---
---
<div>
<button>Servant Offering</button>
<button>TA Achievements</button>
<button>About</button>
</div>
<style>
div {
display: flex;
margin: 1em 0%;
}
button {
padding: 1em 1em;
margin: 0em 0.5em;
background-color: rgb(218, 66, 218);
border-radius: 0%;
border-width: 0;
text-align: center;
font-size: large;
color: black;
width: 10em;
}
button:active {
background-color: blueviolet;
}
</style>

43
src/layouts/aboutSection.astro Normal file
View file

@ -0,0 +1,43 @@
---
export interface Props {
title: string;
}
const { title } = Astro.props;
---
<section>
<h1>{title}</h1>
<div>
<slot />
</div>
</section>
<style>
h1 {
color: white;
margin: 0.5rem 0px;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: #1e1e1e;
}
div {
row-gap: 1em;
column-gap: 1em;
justify-content: center;
align-self: center;
display: flex;
flex-flow: row wrap;
padding: 1em;
}
@media (min-width: 512px) {
div {
justify-content: left;
}
}
div {
color: white;
font-size: 1em;
}
</style>

31
src/layouts/hometitle.astro Normal file
View file

@ -0,0 +1,31 @@
---
---
<div class="wrap">
<div>
<span>FIRQ FGO SITE</span>
<slot />
</div>
</div>
<style>
.wrap {
display: block;
}
.wrap > div {
display: flex;
padding: 15% 20%;
align-items: center;
justify-content: center;
flex-direction: column;
}
span {
display: inline-block;
padding: 0.1em;
font-weight: bold;
color: white;
font-size: 5em;
background-color: #1e1e1e;
}
</style>

24
src/pages/about.astro Normal file
View file

@ -0,0 +1,24 @@
---
import Layout from '../layouts/Layout.astro';
import CustomFooter from '../layouts/customFooter.astro';
import Hometitle from '../layouts/hometitle.astro';
import NavbuttonsTitle from '../components/navbuttonsTitle.astro';
import ContactSection from '../layouts/contactSection.astro';
import contactdata from '../../static/_contactdata.json'
import ContactCard from '../components/contactCard.astro';
import AboutSection from '../layouts/aboutSection.astro';
---
<Layout title="Firq FGO Site">
<AboutSection title="About">
This is a small sideproject that I'm creating. It uses Astro for developing and Gitlab for providing the site.
</AboutSection>
<ContactSection title="Contact me">
{contactdata.map((item) => (<ContactCard {...item}/>))}
</ContactSection>
</Layout>
<style>
</style>

33
src/pages/index.astro
View file

@ -1,36 +1,15 @@
---
import Layout from '../layouts/Layout.astro';
import BaseSection from '../layouts/baseSection.astro';
import TaSection from '../layouts/taSection.astro';
import ContactSection from '../layouts/contactSection.astro';
import CustomFooter from '../layouts/customFooter.astro';
import ServantCard from '../components/servantCard.astro';
import CeCard from '../components/ceCard.astro';
import TaCard from '../components/taCard.astro';
import ContactCard from '../components/contactCard.astro';
import servantdata from '../../static/_servantdata.json'
import cedata from '../../static/_cedata.json'
import tadata from '../../static/_tadata.json'
import contactdata from '../../static/_contactdata.json'
import Hometitle from '../layouts/hometitle.astro';
import NavbuttonsTitle from '../components/navbuttonsTitle.astro';
---
<Layout title="Firq TA on Astro">
<BaseSection title="Servant Offering">
{servantdata.map((item) => (<ServantCard {...item}/>))}
</BaseSection>
<BaseSection title="CE Offering">
{cedata.map((item) => (<CeCard {...item}/>))}
</BaseSection>
<TaSection title="Completed TAs">
{tadata.map((item) => (<TaCard {...item}/>))}
</TaSection>
<ContactSection title="Contact me">
{contactdata.map((item) => (<ContactCard {...item}/>))}
</ContactSection>
<CustomFooter />
<Layout title="Firq FGO Site">
<Hometitle>
<NavbuttonsTitle></NavbuttonsTitle>
</Hometitle>
</Layout>
<style>

34
src/pages/servants.astro Normal file
View file

@ -0,0 +1,34 @@
---
import Layout from '../layouts/Layout.astro';
import BaseSection from '../layouts/baseSection.astro';
import TaSection from '../layouts/taSection.astro';
import ContactSection from '../layouts/contactSection.astro';
import CustomFooter from '../layouts/customFooter.astro';
import ServantCard from '../components/servantCard.astro';
import CeCard from '../components/ceCard.astro';
import TaCard from '../components/taCard.astro';
import ContactCard from '../components/contactCard.astro';
import servantdata from '../../static/_servantdata.json'
import cedata from '../../static/_cedata.json'
import tadata from '../../static/_tadata.json'
import contactdata from '../../static/_contactdata.json'
---
<Layout title="Firq TA on Astro">
<BaseSection title="Servant Offering">
{servantdata.map((item) => (<ServantCard {...item}/>))}
</BaseSection>
<BaseSection title="CE Offering">
{cedata.map((item) => (<CeCard {...item}/>))}
</BaseSection>
<TaSection title="Completed TAs">
{tadata.map((item) => (<TaCard {...item}/>))}
</TaSection>
<CustomFooter />
</Layout>
<style>
</style>