Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
jeffjadulco committed Aug 16, 2020
2 parents 7983118 + 4c6a8c2 commit 8bfc061
Show file tree
Hide file tree
Showing 15 changed files with 305 additions and 100 deletions.
49 changes: 36 additions & 13 deletions src/assets/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,11 @@
--color-text-tertiary: #4a5568;
--color-text-on-accent: #f7fafc;

--color-text-footer-primary: #2d3748;
--color-text-footer-secondary: #718096;

--color-fill-primary: #b1d9f6;
--color-fill-secondary: #edf2f7;
--color-fill-tertiary: #f7fafc;

--color-gradient-accent1: rgba(49, 130, 206, 1);
--color-gradient-accent2: rgba(79, 209, 197, 1);

--color-code-background: #edf2f7;
--color-code-text: #2d3748;
Expand All @@ -49,24 +48,23 @@

.dark {
--color-bg-accent: #81e6d9;
--color-bg-primary: #2d3748;
--color-bg-secondary: #283141;
--color-bg-primary: #1a202c;
--color-bg-secondary: #161b25;
--color-bg-accent-hover: #4fd1c5;

--color-text-accent: #81e6d9;
--color-text-primary: #f7fafc;
--color-text-secondary: #e2e8f0;
--color-text-tertiary: #a0aec0;
--color-text-on-accent: #234e52;

--color-text-footer-primary: #2d3748;
--color-text-footer-secondary: #2d3748;
--color-text-on-accent: #1a202c;

--color-fill-primary: #81e6d9;
--color-fill-secondary: #283141;
--color-fill-tertiary: #283141;
--color-fill-secondary: #161b25;

--color-code-background: #283141;
--color-gradient-accent1: rgba(49, 130, 206, 1);
--color-gradient-accent2: rgba(79, 209, 197, 1);

--color-code-background: #161b25;
--color-code-text: #edf2f7;
--color-code-comment: #718096;
--color-code-punctuation: #edf2f7;
Expand Down Expand Up @@ -136,3 +134,28 @@ aside.sticky {
scroll-behavior: smooth;
}
}

.accent-gradient {
background: var(--color-bg-accent);
background: -moz-linear-gradient(
45deg,
var(--color-gradient-accent2) 0%,
var(--color-gradient-accent1) 100%
);
background: -webkit-linear-gradient(
45deg,
var(--color-gradient-accent2) 0%,
var(--color-gradient-accent1) 100%
);
background: linear-gradient(
45deg,
var(--color-gradient-accent2) 0%,
var(--color-gradient-accent1) 100%
);
background-size: 200%;
transition: background-position 0.5s ease-out;
}

.accent-gradient:hover {
background-position: right center;
}
28 changes: 23 additions & 5 deletions src/components/atoms.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const BlogTitleInfo = ({ timeToRead, date, datetime }) => {

export const Heading = ({ children }) => {
return (
<h2 className="relative mt-12 mb-3 text-2xl font-semibold text-accent">
<h2 className="relative mt-12 mb-3 text-2xl font-bold text-accent">
{children}
</h2>
)
Expand All @@ -52,7 +52,7 @@ export const SubHeading = ({ children }) => {

export const Paragraph = ({ children }) => {
return (
<p className=" max-w-screen-md mb-4 font-normal text-base leading-relaxed md:leading-normal text-secondary">
<p className=" max-w-screen-md mb-4 font-normal text-base leading-relaxed md:leading-normal text-tertiary">
{children}
</p>
)
Expand All @@ -61,9 +61,9 @@ export const Paragraph = ({ children }) => {
export const InlinePageLink = ({ to, children, title = "Link" }) => {
return (
<Link to={to} title={title}>
<span className="font-medium text-base text-accent hover:text-accent hover:underline">
<a className="font-medium text-base text-accent hover:text-accent hover:underline">
{children}
</span>
</a>
</Link>
)
}
Expand Down Expand Up @@ -98,6 +98,24 @@ export const ExtLink = ({ children, link, newTab }) => {
}
}

export const ProjectLink = ({ label, url }) => {
return (
<span className="font-medium text-tertiary hover:text-accent">
<a href={url} target="_blank" rel="noopener noreferrer">
{label}
<svg
viewBox="0 0 20 20"
fill="currentColor"
className="inline-block w-4 h-4 mb-1"
>
<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path>
<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path>
</svg>
</a>
</span>
)
}

export const Button = ({ children, link, width }) => {
let padding = "px-4 py-2"

Expand All @@ -109,7 +127,7 @@ export const Button = ({ children, link, width }) => {
padding = "px-20 py-2"
}

const className = `${padding} rounded bg-accent hover:bg-hover-accent focus:bg-hover-accent text-on-accent`
const className = `${padding} rounded accent-gradient text-on-accent`

return (
<a
Expand Down
2 changes: 1 addition & 1 deletion src/components/contact.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ExtLink, Button } from "./atoms"
export const Contact = () => {
return (
<div className="mt-32 full-width-container bg-secondary">
<div className="container max-w-screen-xl mx-auto pt-10 pb-12 text-gray-900">
<div className="container max-w-screen-xl mx-auto pt-16 text-gray-900">
<h1 className="text-3xl font-semibold text-center text-primary">
Get in touch{" "}
<span role="img" aria-label="wave">
Expand Down
9 changes: 2 additions & 7 deletions src/components/footer.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from "react"
import { NavLink, BlobFooter } from "./atoms"
import { NavLink } from "./atoms"

const Footer = _ => {
return (
<footer className="relative w-full h-56 text-secondary overflow-hidden">
<footer className="relative w-full h-56 text-secondary overflow-hidden bg-secondary">
<div className="container h-full md:max-w-screen-md lg:max-w-screen-xl m-auto px-5 md:px-20 pb-12 pt-24">
<div className="container flex-col justify-between md:space-y-8">
<nav className="hidden lg:flex flex-row items-center space-x-6 justify-center md:justify-end text-sm">
Expand Down Expand Up @@ -125,11 +125,6 @@ const Footer = _ => {
</div>
</div>
</div>
<div className="container md:max-w-screen-md lg:max-w-screen-xl m-auto px-5 md:px-20 flex justify-center md:justify-end">
<div className="mt-16">
<BlobFooter />
</div>
</div>
</footer>
)
}
Expand Down
9 changes: 1 addition & 8 deletions src/components/layout.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
/**
* Layout component that queries for data
* with Gatsby's useStaticQuery component
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/

import React from "react"
import PropTypes from "prop-types"

Expand All @@ -19,7 +12,7 @@ const Layout = ({ children, activePage, footer = true }) => {
<ThemeProvider>
<MobileNav />
<Header activePage={activePage} />
<main className="min-h-screen container m-auto px-5 mt-16 sm:px-12 md:px-20 pb-24 max-w-screen-xl">
<main className="container m-auto px-5 mt-16 sm:px-12 md:px-20 max-w-screen-xl">
{children}
</main>
{footer && <Footer />}
Expand Down
2 changes: 1 addition & 1 deletion src/components/newsletter.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Button } from "./atoms"
export const Newsletter = () => {
return (
<div className="mt-32 full-width-container bg-secondary">
<div className="container max-w-screen-xl mx-auto pt-10 pb-12 text-gray-900">
<div className="container max-w-screen-xl mx-auto pt-16 text-gray-900">
<h1 className="px-4 text-3xl font-semibold text-center text-primary">
Subscribe to my Newsletter{" "}
<span role="img" aria-label="letter with love">
Expand Down
58 changes: 58 additions & 0 deletions src/components/projectGrid.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from "react"
import projects from "../data/projects"
import { ProjectLink } from "./atoms"

const ProjectGrid = ({ showHeading }) => {
return (
<section className="">
{showHeading && (
<h2 className="mt-32 font-normal text-accent tracking-widestest">
PROJECTS
</h2>
)}
<ul className="mt-3 -mx-5 grid md:grid-cols-2 gap-6 md:gap-6">
{projects.map(project => {
return (
<li
key={project.title}
className="py-5 px-6 relative group md:bg-secondary hover:bg-secondary"
>
<div className="flex justify-between space-x-3 sm:space-x-0 pb-10">
<div>
<h3 className="text-xl font-semibold text-primary group-hover:text-accent">
<a
href={project.slug}
target="_blank"
rel="noopener noreferrer"
>
{project.title}
</a>
</h3>
<h4 className="font-base text-tertiary pr-3">
{project.description}
</h4>
<div className="flex items-center justify-start space-x-4 absolute bottom-0 mb-5">
{project.links.map(link => {
return (
<ProjectLink
key={link.url}
label={link.label}
url={link.url}
/>
)
})}
</div>
</div>
<span className="mt-1 text-sm sm:text-base text-tertiary">
{project.year}
</span>
</div>
</li>
)
})}
</ul>
</section>
)
}

export default ProjectGrid
30 changes: 2 additions & 28 deletions src/components/projectList.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,5 @@
import React from "react"

const MockProjects = [
{
slug: "https://jeffjadulco.com/",
title: "jeffjadulco.com",
description: "My personal website made with React and Gatsby.",
year: "2020",
},
{
slug: "https://jeffjads-todo-app-react.netlify.app/",
title: "to do app",
description: "My first time with React",
year: "2020",
},
{
slug: "https://github.com/jeffjadulco/unity-guid-regenerator",
title: "unity-guid-regenerator",
description: "An editor tool I made to regenerate GUID of Unity assets",
year: "2020",
},
{
slug: "https://globalgamejam.org/2016/games/abducktion",
title: "Abducktion",
description: "Global Game Jam 2016 entry. Made with friends.",
year: "2016",
},
]
import projects from "../data/projects"

const ProjectList = ({ showHeading }) => {
return (
Expand All @@ -36,7 +10,7 @@ const ProjectList = ({ showHeading }) => {
</h2>
)}
<ul className="mt-3 divide-y divide-subtle">
{MockProjects.map(project => {
{projects.map(project => {
return (
<li key={project.title} className="py-3">
<a href={project.slug} target="_blank" rel="noopener noreferrer">
Expand Down
36 changes: 36 additions & 0 deletions src/components/skillGrid.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from "react"
import { Heading } from "./atoms"

const SkillGrid = ({
heading = "",
description = "",
categories = [],
className = "",
}) => {
return (
<section className={`${className} mb-4`}>
<Heading>{heading}</Heading>
<p className="-mt-3 mb-8 text-tertiary">{description}</p>
<ul className="mt-3 grid md:grid-cols-2 col-gap-10 row-gap-10">
{categories.map(category => {
return (
<li key={category.title}>
<div>
<h3 className="text-xl font-semibold text-primary group-hover:text-accent">
{category.title}
</h3>
<ul className="mt-1 space-y-2">
{category.skills.map(skill => {
return <li className="text-tertiary">{skill}</li>
})}
</ul>
</div>
</li>
)
})}
</ul>
</section>
)
}

export default SkillGrid
Loading

1 comment on commit 8bfc061

@vercel
Copy link

@vercel vercel bot commented on 8bfc061 Aug 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.