Added typescript, added new logo, improved margins

This commit is contained in:
Firq 2023-03-05 02:00:36 +01:00
parent b9f5460501
commit 05120f0aa5
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
10 changed files with 79 additions and 14 deletions

View file

@ -1,5 +1,5 @@
--- ---
import headerimg from "/link_192.png" import headerimg from "/logo.svg"
--- ---
<header> <header>
@ -9,7 +9,7 @@ import headerimg from "/link_192.png"
<ul class="desktop"> <ul class="desktop">
<slot /> <slot />
</ul> </ul>
<button class="mobile"> <button class="mobile" aria-label="Navigation Button">
<ul> <ul>
<slot /> <slot />
</ul> </ul>

View file

@ -26,15 +26,15 @@ article {
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);
height: auto; height: auto;
width: auto; width: auto;
line-height: 128px; line-height: 100px;
} }
article:hover { article:hover {
transform: scale(var(--hover-scale)); transform: scale(var(--hover-scale));
} }
article > div { article > div {
background-size: contain; background-size: contain;
width: 128px; width: 100px;
height: 128px; height: 100px;
} }
article:hover h2 { article:hover h2 {
@ -43,8 +43,8 @@ article:hover h2 {
font-size: 18px; font-size: 18px;
display: inline-block; display: inline-block;
vertical-align: center; vertical-align: center;
line-height: normal; line-height: 150%;
width: 90%; width: 95%;
border-radius: 5px; border-radius: 5px;
opacity: 90%; opacity: 90%;
} }

View file

@ -32,7 +32,7 @@ const { title } = Astro.props;
} }
div > h1 { div > h1 {
color: white; color: white;
margin: 0.5rem 0px; margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
width: max-content; width: max-content;
background-color: #1e1e1e; background-color: #1e1e1e;

View file

@ -16,7 +16,7 @@ const { title } = Astro.props;
<style> <style>
h1 { h1 {
color: white; color: white;
margin: 0.5rem 0px; margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
width: max-content; width: max-content;
background-color: #1e1e1e; background-color: #1e1e1e;

View file

@ -15,7 +15,7 @@ const { title } = Astro.props;
<style> <style>
h1 { h1 {
color: white; color: white;
margin: 0.5rem 0px; margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
width: max-content; width: max-content;
background-color: #1e1e1e; background-color: #1e1e1e;

View file

@ -3,7 +3,7 @@
--- ---
<footer> <footer>
<div>Disclaimer: <div>
“Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex Inc. used under fair “Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex Inc. used under fair
use. | View <a class="linker" href="https://fate-go.us" target="_blank" rel="noopener noreferrer">the use. | View <a class="linker" href="https://fate-go.us" target="_blank" rel="noopener noreferrer">the
official website</a> for official website</a> for

View file

@ -25,7 +25,7 @@ const { title } = Astro.props;
} }
h1 { h1 {
color: white; color: white;
margin: 0.5rem 0px; margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
width: max-content; width: max-content;
background-color: #1e1e1e; background-color: #1e1e1e;

View file

@ -18,12 +18,17 @@ const techologydata = [{
"title": "GitLab", "title": "GitLab",
"link": "https://gitlab.io", "link": "https://gitlab.io",
"image": "gitlab" "image": "gitlab"
},
{
"title": "Typescript",
"link": "https://www.typescriptlang.org/",
"image": "typescript"
},] },]
--- ---
<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. This is a small sideproject that I'm creating. First time doing webdev in general, and first project using Typescript.
</BasicSection> </BasicSection>
<BasicSection title="Technologies used"> <BasicSection title="Technologies used">
{techologydata.map((item) => (<TechnologyCard {...item}/>))} {techologydata.map((item) => (<TechnologyCard {...item}/>))}
@ -31,7 +36,9 @@ const techologydata = [{
<ContactSection title="Contact me"> <ContactSection title="Contact me">
{contactdata.map((item) => (<ContactCard {...item}/>))} {contactdata.map((item) => (<ContactCard {...item}/>))}
</ContactSection> </ContactSection>
<BasicSection title="Disclaimers">
<CustomFooter /> <CustomFooter />
</BasicSection>
</Layout> </Layout>
<style> <style>

58
static/logo.svg Normal file
View file

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="110.08279mm"
height="101.08971mm"
viewBox="0 0 110.08279 101.08971"
version="1.1"
id="svg5"
xml:space="preserve"
inkscape:export-filename="bitmap.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
sodipodi:docname="logo_2.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview7"
pagecolor="#000000"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.76880612"
inkscape:cx="165.84155"
inkscape:cy="226.32494"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="g429" /><defs
id="defs2" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(160.03878,-49.932608)"><g
id="g429"
transform="translate(-210.61878,-24.090382)"
inkscape:export-filename="g429.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:groupmode="layer"><path
style="fill:#ffffff;stroke-width:0.107"
d="m 87.179998,136.57997 v 23.84826 l 13.810092,-13.81009 v -9.79482 h 16.73028 l 12.50209,-12.50209 h -29.23237 v -9.94692 h 35.71155 l 12.16748,-12.16747 H 87.179998 v 22.14481 H 67.955379 Z"
id="path302" /><path
style="fill:#ffffff;stroke-width:0.107"
d="m 74.013398,131.76579 2.989789,1.97885 c 0,0 -24.434533,22.32662 -12.819526,37.81329 l 1.419613,-5.97957 c 0,0 15.830822,6.4958 44.094006,-10.36747 0,0 -0.6883,-12.26028 10.88369,-6.71089 0,0 13.20669,-8.08749 25.25188,-21.76738 -0.25811,-0.34415 -3.52752,-5.42034 -3.52752,-5.42034 l 0.086,-3.78563 5.3343,7.05504 c 0,0 23.23001,-28.048086 -8.77579,-24.09038 l -3.26936,-1.290557 c 0,0 39.2329,-8.861819 13.59385,27.703937 0,0 17.12138,25.89716 9.37805,39.6631 -7.74334,13.76593 -36.13558,-6.88297 -36.47973,-8.25956 -0.34414,-1.3766 24.95076,16.51912 33.72654,5.85052 8.77578,-10.6686 -9.80823,-37.51217 -8.60371,-35.10313 0,0 -13.07764,14.79838 -25.2949,22.02549 0,0 1.54867,10.75464 -10.06634,6.79693 0,0 -43.104576,26.15527 -59.19351,14.02405 0,0 -12.174247,-12.04519 21.272668,-40.1363 z"
id="path358" /><path
style="fill:#ffffff;stroke-width:0.107"
d="m 84.058227,118.30098 0.08604,-9.37804 c 0,0 -5.420336,-10.410486 -1.892816,-20.56286 -0.94641,-0.344147 -6.280709,0.602261 -6.280709,0.602261 0,0 15.400637,-16.51912 45.083428,10.152375 0.43019,0.172074 5.59241,0.08604 5.59241,0.08604 0,0 -28.134123,-30.543163 -48.524911,-24.348493 0,0 -17.293454,5.850508 5.936558,43.448717 z"
id="path360" /></g></g></svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1,018 B