kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-05-01 11:17:15 +02:00
Code Issues Projects Releases Wiki Activity

Use Fontsource and Lucide

Browse source 
Replacing Google Fonts and FontAwesome
This commit is contained in:
Kevin Kandlbinder 2021-09-24 15:49:14 +02:00
parent 4fb0aae042
commit 833318ba3d
12 changed files with 69 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -19,6 +19,7 @@
"dependencies": { "dependencies": {
"@babel/cli": "7.15.7", "@babel/cli": "7.15.7",
"@babel/plugin-transform-typescript": "7.15.4", "@babel/plugin-transform-typescript": "7.15.4",
"@fontsource/anonymous-pro": "^4.5.0",
"@mdx-js/mdx": "1.6.22", "@mdx-js/mdx": "1.6.22",
"@mdx-js/react": "1.6.22", "@mdx-js/react": "1.6.22",
"animejs": "3.2.1", "animejs": "3.2.1",
@ -42,6 +43,7 @@
"gatsby-transformer-sharp": "^3.14.0", "gatsby-transformer-sharp": "^3.14.0",
"i18next": "21.0.2", "i18next": "21.0.2",
"locale": "0.1.0", "locale": "0.1.0",
"lucide-react": "^0.16.0",
"prop-types": "15.7.2", "prop-types": "15.7.2",
"react": "17.0.2", "react": "17.0.2",
"react-dom": "17.0.2", "react-dom": "17.0.2",

13
src/_mixins.scss
View file

@ -42,7 +42,7 @@
} }
@mixin buttonBasic { @mixin buttonBasic {
display: block; display: flex;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
background: $accentColor; background: $accentColor;
@ -50,6 +50,12 @@
text-decoration: none; text-decoration: none;
box-shadow: 0 0 33px -10px rgba($accentColor, 0.5); box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
transition: box-shadow 0.25s; transition: box-shadow 0.25s;
align-items: center;
justify-content: center;
svg {
margin-left: 10px;
}
&:hover, &:hover,
&:active, &:active,
@ -66,7 +72,6 @@
@mixin homeBanner { @mixin homeBanner {
background: lighten($background, 1); background: lighten($background, 1);
cursor: pointer; cursor: pointer;
display: block;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
transition: background-color 0.25s, color 0.25s; transition: background-color 0.25s, color 0.25s;
@ -75,10 +80,6 @@
background: darken($accentColor, 1); background: darken($accentColor, 1);
} }
img {
height: 50px;
}
> div { > div {
display: flex; display: flex;
height: 100%; height: 100%;

9
src/components/seo.js
View file

@ -65,15 +65,6 @@ function SEO({ description, meta, title }) {
}, },
].concat(meta)} ].concat(meta)}
> >
<script
src="https://kit.fontawesome.com/1377f925e0.js"
crossOrigin="anonymous"
></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Roboto&display=swap"
rel="stylesheet"
/>
<meta <meta
name="battery-savings" name="battery-savings"
content="allow-reduced-framerate" content="allow-reduced-framerate"

4
src/layouts/default.scss
View file

@ -1,5 +1,9 @@
@import "~@fontsource/anonymous-pro/index.css";
@import "~@fontsource/anonymous-pro/700.css";
@import "../variables"; @import "../variables";
* { * {
box-sizing: border-box; box-sizing: border-box;
} }

6
src/pages/donate.js
View file

@ -6,6 +6,7 @@ import PropTypes from "prop-types";
import GitHubButton from "react-github-btn"; import GitHubButton from "react-github-btn";
import * as styles from "./donate.module.scss"; import * as styles from "./donate.module.scss";
import { ArrowRight } from "lucide-react";
export const query = graphql` export const query = graphql`
query ($language: String!) { query ($language: String!) {
@ -127,10 +128,7 @@ const DonatePage = (props) => {
} }
> >
<span>Donate using PayPal</span> <span>Donate using PayPal</span>
<i <ArrowRight/>
className="fas fa-fw fa-chevron-right"
aria-hidden="true"
></i>
</a> </a>
</article> </article>
</section> </section>

6
src/pages/friends.js
View file

@ -6,6 +6,7 @@ import PropTypes from "prop-types";
import * as styles from "./friends.module.scss"; import * as styles from "./friends.module.scss";
import { GatsbyImage, getImage } from "gatsby-plugin-image"; import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { Globe2 } from "lucide-react";
export const query = graphql` export const query = graphql`
query AllFriendsQuery($language: String!) { query AllFriendsQuery($language: String!) {
@ -122,10 +123,7 @@ const FriendsPage = ({ data }) => {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<i <Globe2 height={20}/>{" "}
className="fas fa-globe-europe"
aria-hidden="true"
></i>{" "}
{friend.url} {friend.url}
</a> </a>
</div> </div>

15
src/pages/friends.module.scss
View file

@ -61,19 +61,20 @@
.contactLink { .contactLink {
transition: text-decoration 0.5s; transition: text-decoration 0.5s;
text-decoration: underline dotted rgba(0, 0, 0, 0); text-decoration: underline dotted rgba(0, 0, 0, 0);
padding: 6px 0 6px 25px; padding: 6px 0 6px 0;
color: $textColor; color: $textColor;
transition: color 0.25s; transition: color 0.25s;
display: flex;
align-items: center;
svg {
color: $accentColor;
margin-right: 10px;
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
color: $lightTextColor; color: $lightTextColor;
} }
> i {
color: $accentColor;
margin-left: -25px;
margin-right: 5px;
}
} }
} }
} }

19
src/pages/index.js
View file

@ -14,6 +14,7 @@ import anime from "animejs";
import { tsParticles } from "tsparticles"; import { tsParticles } from "tsparticles";
import * as particleConfig from "./index.particles.json"; import * as particleConfig from "./index.particles.json";
import { ArrowRight, AtSign, Camera, Github, Mail, MapPin, Phone } from "lucide-react";
export const query = graphql` export const query = graphql`
query GetMetaAndProjects($language: String) { query GetMetaAndProjects($language: String) {
@ -145,7 +146,7 @@ const IndexPage = (props) => {
href={"tel:" + meta.contactPhone} href={"tel:" + meta.contactPhone}
rel="me" rel="me"
> >
<i className="fas fa-fw fa-phone"></i> <Phone width={20} />
{meta.contactPhone} {meta.contactPhone}
</a> </a>
<a <a
@ -153,7 +154,7 @@ const IndexPage = (props) => {
href={"mailto:" + meta.contactEmail} href={"mailto:" + meta.contactEmail}
rel="me" rel="me"
> >
<i className="far fa-fw fa-envelope"></i> <Mail width={20}/>
{meta.contactEmail} {meta.contactEmail}
</a> </a>
<a <a
@ -162,7 +163,7 @@ const IndexPage = (props) => {
rel="noreferrer " rel="noreferrer "
target="_blank" target="_blank"
> >
<i className="fas fa-fw fa-map-marker-alt"></i> <MapPin width={20} />
<Trans>homeMyLocation</Trans> <Trans>homeMyLocation</Trans>
</a> </a>
<a <a
@ -171,7 +172,7 @@ const IndexPage = (props) => {
rel="noreferrer me" rel="noreferrer me"
target="_blank" target="_blank"
> >
<i className="fab fa-fw fa-mastodon"></i> <AtSign width={20}/>
{meta.contactMastodon} {meta.contactMastodon}
</a> </a>
<a <a
@ -182,7 +183,7 @@ const IndexPage = (props) => {
rel="noreferrer me" rel="noreferrer me"
target="_blank" target="_blank"
> >
<i className="fab fa-fw fa-github"></i> <Github width={20}/>
{meta.contactGitHub} {meta.contactGitHub}
</a> </a>
</div> </div>
@ -237,10 +238,10 @@ const IndexPage = (props) => {
> >
<div> <div>
<span> <span>
<i className="fas fa-fw fa-camera"></i>{" "} <Camera/>{" "}
<Trans>homeImageCredit</Trans> <Trans>homeImageCredit</Trans>
</span> </span>
<i className="fas fa-fw fa-chevron-right"></i> <ArrowRight/>
</div> </div>
</a> </a>
<section className="featuredSection"> <section className="featuredSection">
@ -289,7 +290,7 @@ const IndexPage = (props) => {
</div> </div>
<Link to="/projects" className={styles.seeMoreButton}> <Link to="/projects" className={styles.seeMoreButton}>
<Trans>seeMore</Trans>{" "} <Trans>seeMore</Trans>{" "}
<i className="fas fa-fw fa-chevron-right"></i> <ArrowRight/>
</Link> </Link>
</article> </article>
</section> </section>
@ -298,7 +299,7 @@ const IndexPage = (props) => {
<span> <span>
<Trans>donationCatchphrase</Trans> <Trans>donationCatchphrase</Trans>
</span> </span>
<i className="fas fa-fw fa-chevron-right"></i> <ArrowRight/>
</div> </div>
</Link> </Link>
</Layout> </Layout>

23
src/pages/index.module.scss
View file

@ -93,8 +93,16 @@
.contactLink { .contactLink {
transition: text-decoration 0.5s; transition: text-decoration 0.5s;
text-decoration: underline dotted rgba(0, 0, 0, 0); text-decoration: underline dotted rgba(0, 0, 0, 0);
padding: 6px 0 6px 25px; padding: 6px 0 6px 0;
color: $textColor; color: $textColor;
display: flex;
align-items: center;
svg {
margin-right: 10px;
color: $accentColor;
flex-shrink: 0;
}
@media (pointer: coarse), (pointer: none) { @media (pointer: coarse), (pointer: none) {
padding-top: 15px; padding-top: 15px;
@ -167,6 +175,10 @@
.donationSection, .donationSection,
.hireMeSection { .hireMeSection {
@include homeBanner; @include homeBanner;
svg {
height: 50px;
}
} }
.creditSection { .creditSection {
@ -178,8 +190,13 @@
font-size: 1.2em; font-size: 1.2em;
color: white; color: white;
> span > i { > span {
line-height: 15px !important; display: flex;
align-items: center;
svg {
margin-right: 10px;
}
} }
} }
} }

11
src/templates/project.js
View file

@ -7,6 +7,7 @@ import PropTypes from "prop-types";
import * as styles from "./project.module.scss"; import * as styles from "./project.module.scss";
import { MDXRenderer } from "gatsby-plugin-mdx"; import { MDXRenderer } from "gatsby-plugin-mdx";
import { GatsbyImage } from "gatsby-plugin-image"; import { GatsbyImage } from "gatsby-plugin-image";
import { ExternalLink, Github } from "lucide-react";
export const query = graphql` export const query = graphql`
query GetProject($urlname: String!, $lang: String!, $language: String!) { query GetProject($urlname: String!, $lang: String!, $language: String!) {
@ -100,10 +101,7 @@ const ProjectTemplate = ({ data }) => {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<i <Github height={15}/>{" "}
className="fab fa-github"
aria-hidden="true"
></i>{" "}
<Trans>projectViewGitHub</Trans> <Trans>projectViewGitHub</Trans>
</a> </a>
) : null} ) : null}
@ -113,10 +111,7 @@ const ProjectTemplate = ({ data }) => {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<i <ExternalLink height={15}/>{" "}
className="fas fa-external-link-alt"
aria-hidden="true"
></i>{" "}
<Trans>projectViewWebsite</Trans> <Trans>projectViewWebsite</Trans>
</a> </a>
) : null} ) : null}

1
src/templates/project.module.scss
View file

@ -82,6 +82,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
} }
a { a {

10
yarn.lock
View file

@ -1131,6 +1131,11 @@
minimatch "^3.0.4" minimatch "^3.0.4"
strip-json-comments "^3.1.1" strip-json-comments "^3.1.1"
"@fontsource/anonymous-pro@^4.5.0":
version "4.5.0"
resolved "https://registry.yarnpkg.com/@fontsource/anonymous-pro/-/anonymous-pro-4.5.0.tgz#cc618eb2692ed0414f45c5e1c2ab1efeb5ca10d7"
integrity sha512-4+JsJ0J/0NZvqiKv6TtkG5fCrs5RNSylAQ4vEifCRTlIZCWUDAjEmRz6s0DdRicTSLaOBoAUIp7efufWmHbpmw==
"@gatsbyjs/reach-router@^1.3.6": "@gatsbyjs/reach-router@^1.3.6":
version "1.3.6" version "1.3.6"
resolved "https://registry.yarnpkg.com/@gatsbyjs/reach-router/-/reach-router-1.3.6.tgz#4e8225836959be247890b66f21a3198a0589e34d" resolved "https://registry.yarnpkg.com/@gatsbyjs/reach-router/-/reach-router-1.3.6.tgz#4e8225836959be247890b66f21a3198a0589e34d"
@ -7979,6 +7984,11 @@ lru-queue@^0.1.0:
dependencies: dependencies:
es5-ext "~0.10.2" es5-ext "~0.10.2"
lucide-react@^0.16.0:
version "0.16.0"
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.16.0.tgz#38573a3e287712cb1d56aa6dd46e47e3323ba8f4"
integrity sha512-R5chQb550S+znoZPAJTHRqAOq6NiMCr4Pm8C0irPBNPEjx3Oarvqt+dbiFu4DWaSR2bMh2iOj0IgtOepoPDdaQ==
make-dir@^2.1.0: make-dir@^2.1.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"