<commit_before>import React from "react";
import Link from "gatsby-link";
import g from "glamorous";
import { css } from "glamor";

import {rhythm} from "../utils/typography";

let bounce = css.keyframes('bounce', {
  '0%': { transform: 'scale(0.1)', opacity: 0 },
  '60%': { transform: 'scale(1.2)', opacity: 1 },
  '100%': { transform: 'scale(1)' }
});

let slideItIn = css.keyframes('slideItIn', {
  '0%': {
    marginLeft: '200%',
    width: '300%',
  },
  '100%': {
    marginLeft: '0%',
    width: '300%',
  }
});

let componentGrid = css({
  display: `grid`,
  gridTemplateColumns: `repeat(12, 8%)`,
  gridTemplateRows: `auto`,
  borderBottom: `1px solid #888`,
  width: `100%`,
  justifyContent: `space-evenly`,
});

let navHeader = css({
  marginTop: rhythm(1),
  marginBottom: rhythm(1/2),
  textAlign: `left`,
  gridColumn: `span 2`,
  "@media (max-width: 768px)": {
    gridColumn: `span 3`,
    textAlign: `center`,
  },
  animation: `${slideItIn} 2s`,
});

let logo = css({
  gridColumn: `1/7`,
  textAlign: `left`,
  "@media (max-width: 768px)": {
    gridColumn: `span 3`,
    textAlign: `left`,
  },
  "&:hover": {
  },
});

let rightLink = css({
  "@media (max-width: 768px)": {
    textAlign: `right`,
  },
});

let navLink = css({
  color: `#000`,
  fontStyle: `normal`,
  "&:hover": {
    textDecoration: `none`,
    animation: `${bounce} 3s`,
  },
});

let navLogo = css({

});



export default () => (
  <nav className={componentGrid}>
    <h6 className={`${navHeader} ${logo}`}>
      <Link className={`${navLink} ${navLogo}`} to="/"><NAME></Link>
    </h6>
    <h6 className={navHeader}>
      <Link className={navLink} to="/portfolio/">Portfolio</Link>
    </h6>
    <h6 className={navHeader}>
      <Link className={navLink} to="/blog/">Blog</Link>
    </h6>
    <h6 className={`${navHeader} ${rightLink}`}>
      <Link className={navLink} to="/about/">About</Link>
    </h6>
  </nav>
);
<commit_msg>add trippy hover elements to TopNav<commit_after>import React from "react";
import Link from "gatsby-link";
import g from "glamorous";
import { css } from "glamor";

import {rhythm} from "../utils/typography";

let pulsate = css.keyframes('pulsate', {
  '0%': { opacity: 0.8, textShadow: `0 0 25px #f80` },
  '33%': { opacity: 0.6, textShadow: `0 0 25px #0f8` },
  '66%': { opacity: 0.8, textShadow: `0 0 25px #0ff` },
  '100%': { opacity: 0.6, textShadow: `0 0 25px #80f` },
});

let slideItIn = css.keyframes('slideItIn', {
  '0%': {
    marginLeft: '200%',
    width: '300%',
  },
  '100%': {
    marginLeft: '0%',
    width: '300%',
  }
});

let componentGrid = css({
  display: `grid`,
  gridTemplateColumns: `repeat(12, 8%)`,
  gridTemplateRows: `auto`,
  borderBottom: `1px solid #888`,
  width: `100%`,
  justifyContent: `space-evenly`,
});

let navHeader = css({
  marginTop: rhythm(1),
  marginBottom: rhythm(1/2),
  textAlign: `left`,
  gridColumn: `span 2`,
  "@media (max-width: 768px)": {
    gridColumn: `span 3`,
    textAlign: `center`,
  },
  animation: `${slideItIn} 2s`,
});

let logo = css({
  gridColumn: `1/7`,
  textAlign: `left`,
  "@media (max-width: 768px)": {
    gridColumn: `span 3`,
    textAlign: `left`,
  },
  "&:hover": {
  },
});

let rightLink = css({
  "@media (max-width: 768px)": {
    textAlign: `right`,
  },
});

let navLink = css({
  color: `#000`,
  fontStyle: `normal`,
  "&:hover": {
    textDecoration: `none`,
    animation: `${pulsate} 2s ease-in-out infinite`,
  },
});

let navLogo = css({

});



export default () => (
  <nav className={componentGrid}>
    <h6 className={`${navHeader} ${logo}`}>
      <Link className={`${navLink} ${navLogo}`} to="/"><NAME></Link>
    </h6>
    <h6 className={navHeader}>
      <Link className={navLink} to="/portfolio/">Portfolio</Link>
    </h6>
    <h6 className={navHeader}>
      <Link className={navLink} to="/blog/">Blog</Link>
    </h6>
    <h6 className={`${navHeader} ${rightLink}`}>
      <Link className={navLink} to="/about/">About</Link>
    </h6>
  </nav>
);

{'fraction_non_alphanumeric': 0.22174893510398397, 'fraction_numerical': 0.04009020295665247, 'mean_word_length': 3.5832376578645238, 'pattern_counts': {'":': 10, '<': 41, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6853964', 'n_tokens_mistral': 1610, 'n_tokens_neox': 1526, 'n_words': 350}