Verified Commit 54d617a9 authored by Bryce Dorn's avatar Bryce Dorn 🐘

replace twitter w/ coffee blog

parent 67ab0d97
Pipeline #110906492 passed with stage
in 1 minute and 49 seconds
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitLab</title><path d="M23.955 13.587l-1.342-4.135-2.664-8.189c-.135-.423-.73-.423-.867 0L16.418 9.45H7.582L4.919 1.263C4.783.84 4.185.84 4.05 1.26L1.386 9.449.044 13.587c-.121.375.014.789.331 1.023L12 23.054l11.625-8.443c.318-.235.453-.647.33-1.024"/></svg>
\ No newline at end of file
import React, { Component } from "react";
import React from "react";
import { hydrate, render } from "react-dom";
import posed, { PoseGroup } from "react-pose";
import { images, links } from "./consts";
import { PoseGroup } from "react-pose";
import { links } from "./consts";
import Legos from "./legos";
const { flickr, github, gitlab, twitter, lastfm, devto, spotify, bg } = images;
import bg from "../img/bg.png";
import "../styles/index.scss";
const Link = posed.a({
enter: {
scale: 1,
transition: {
duration: 50
}
},
hoverable: true,
hover: { scale: 1.15 }
});
class App extends Component {
render() {
return (
<div id="react-root">
<div className="links">
<PoseGroup>
{links.map((link, index) => (
<Link
className="link"
dangerouslySetInnerHTML={{ __html: link.icon }}
href={link.url}
key={index}
index={index}
target="_blank"
/>
))}
</PoseGroup>
</div>
<Legos />
<div
className="background-scaffold"
style={{ backgroundImage: `url(${bg})` }}
/>
</div>
);
}
}
const App = () => (
<div id="react-root">
<div className="links">
<PoseGroup>
{links.map(link => (
<a
className="link"
dangerouslySetInnerHTML={{ __html: link.icon }}
href={link.url}
key={link.url}
target="_blank"
/>
))}
</PoseGroup>
</div>
<Legos />
<div
className="background-scaffold"
style={{ backgroundImage: `url(${bg})` }}
/>
</div>
);
const rootElement = document.getElementById("app");
if (rootElement.hasChildNodes()) {
......
import flickr from "../img/flickr.svg";
import github from "../img/github.svg";
import gitlab from "../img/gitlab.svg";
import twitter from "../img/twitter.svg";
import lastfm from "../img/last.fm.svg";
import devto from "../img/dev.to.svg";
import spotify from "../img/spotify.svg";
import bg from "../img/bg.png";
export const images = {
flickr,
github,
gitlab,
twitter,
lastfm,
devto,
spotify,
bg
};
import flickr from "../svg/flickr.svg";
import github from "../svg/github.svg";
import gitlab from "../svg/gitlab.svg";
import linkedin from "../svg/linkedin.svg";
import buymeacoffee from "../svg/buymeacoffee.svg";
import lastfm from "../svg/last.fm.svg";
import devto from "../svg/dev.to.svg";
import spotify from "../svg/spotify.svg";
export const links = [
{
url: "https://twitter.com/combatfetus",
icon: twitter
url: "https://coffee.bryce.io",
icon: buymeacoffee
},
{
url: "https://dev.to/bryce",
icon: devto
},
{
url: "https://www.linkedin.com/in/brycedorn/",
icon: linkedin
},
{
url: "https://gitlab.com/brycedorn",
icon: gitlab
......
......@@ -64,7 +64,7 @@ body {
bottom: 0;
display: flex;
position: absolute;
justify-content: space-around;
justify-content: space-evenly;
width: 100%;
height: 60px;
z-index: 99;
......@@ -74,10 +74,23 @@ body {
display: flex;
}
@media (max-width: 400px) {
flex-wrap: wrap;
height: 120px;
svg {
margin: 0 20px;
}
}
svg {
fill: #fff;
fill: #eee;
height: 40px;
width: 40px;
&:hover {
fill: #fff;
}
}
}
......@@ -92,6 +105,10 @@ body {
svg {
fill: #aaa;
&:hover {
fill: #fff;
}
}
}
......
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Buy Me A Coffee icon</title><path d="M6.898 0L5.682 2.799H3.877v2.523h.695L5.277 9.8H4.172l1.46 8.23.938-.01L7.512 24h8.918l.062-.4.88-5.58.888.01 1.46-8.231h-1.056l.705-4.477h.756V2.8h-1.918L16.99 0H6.898zm.528.805h9.043l.771 1.78H6.652l.774-1.78zm-2.75 2.797H19.32v.92H4.676v-.92zm.453 6.998h13.635l-1.176 6.62-5.649-.06-5.636.06-1.174-6.62z"/></svg>
\ No newline at end of file
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>GitLab icon</title><path d="M4.844.904a1.007 1.007 0 00-.955.692l-2.53 7.783c0 .007-.005.012-.007.02L.07 13.335a1.437 1.437 0 00.522 1.607l11.072 8.045a.566.566 0 00.67-.004l11.074-8.04a1.436 1.436 0 00.522-1.61l-1.26-3.867a.547.547 0 00-.031-.104l-2.526-7.775a1.004 1.004 0 00-.957-.684.987.987 0 00-.949.69l-2.406 7.408H8.203l-2.41-7.408a.987.987 0 00-.943-.69h-.006zm-.006 1.42l2.174 6.678H2.674l2.164-6.678zm14.328 0l2.168 6.678h-4.342l2.174-6.678zm-10.594 7.81h6.862l-2.15 6.618L12 20.693 8.572 10.135zm-5.515.005h4.322l3.086 9.5-7.408-9.5zm13.568 0h4.326l-6.703 8.588-.709.914 2.959-9.108.127-.394zM2.1 10.762l6.978 8.947-7.818-5.682a.305.305 0 01-.112-.341l.952-2.924zm19.8 0l.952 2.922a.305.305 0 01-.11.341v.002l-7.82 5.68.025-.035 6.953-8.91Z"/></svg>
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn icon</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
\ No newline at end of file
......@@ -76,10 +76,10 @@ module.exports = {
new HtmlWebpackPlugin({
title: 'bryce.io',
description: 'I write code.',
image: 'https://www.bryce.io/assets/sauropod.png',
image: 'https://www.bryce.io/assets/favicon.png',
url: 'https://bryce.io',
template: 'src/index.html',
favicon: 'src/img/sauropod.png'
favicon: 'src/img/favicon.png'
}),
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment