Skip to content
This repository has been archived by the owner on Aug 15, 2023. It is now read-only.

Commit

Permalink
✨ Add open source page and other tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
Griko Nibras committed Nov 12, 2018
1 parent 2f0510a commit 8419e55
Show file tree
Hide file tree
Showing 12 changed files with 490 additions and 234 deletions.
3 changes: 2 additions & 1 deletion .gitignore
@@ -1,4 +1,5 @@
.DS_Store
.env
.next
out
node_modules
out
143 changes: 84 additions & 59 deletions components/Footer.js
@@ -1,65 +1,90 @@
import React, { Component } from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import NextLink from './NextLink'
import PropTypes from 'prop-types'
import { faHeart } from '@fortawesome/free-solid-svg-icons'
import metadata from '../metadata'

const FooterSocials = () =>
metadata.links
.filter(link => link.isPrimary)
.map(c => (
<NextLink
href={c.href}
target="_blank"
className="button is-dark is-rounded"
rel="noreferrer"
aria-label={c.id}
key={c.id}>
<FontAwesomeIcon icon={c.classFontAwesome} fixedWidth />
</NextLink>
))
export default class Footer extends Component {
render() {
return (
<footer
className={`footer ${this.props.bgClass} ${this.props.textClass}`}>
<div className="container has-text-centered">
<div className="buttons">
{metadata.links
.filter(link => link.isPrimary)
.map(c => (
<NextLink
href={c.href}
target="_blank"
className={`button ${this.props.btnClass} is-rounded`}
rel="noreferrer"
aria-label={c.id}
key={c.id}>
<FontAwesomeIcon icon={c.classFontAwesome} fixedWidth />
</NextLink>
))}
</div>
<small>
Handcrafted with <FontAwesomeIcon icon={faHeart} fixedWidth /> by
myself. Copyright &copy; {new Date().getFullYear()}.<br />
Made with{' '}
<a
href="https://bulma.io/"
target="_blank"
rel="noreferrer"
className="has-text-light">
<b>Bulma</b>
</a>
{' and '}
<a
href="https://nextjs.org/"
target="_blank"
rel="noreferrer"
className="has-text-light">
<b>Next.js</b>
</a>
.<br />
<br />
Hosted on{' '}
<a
href="https://netlify.com"
target="_blank"
rel="noreferrer"
className="has-text-light">
<b>Netlify</b>
</a>
. Source available on{' '}
<a
href="https://github.com/grikomsn/landing-page"
target="_blank"
rel="noreferrer"
className="has-text-light">
<b>GitHub</b>
</a>
.
</small>
</div>
<style jsx>{`
.buttons {
justify-content: center;
}
`}</style>
</footer>
)
}
}

Footer.propTypes = {
bgClass: PropTypes.string,
btnClass: PropTypes.string,
textClass: PropTypes.string,
}

export default () => (
<footer className="footer has-background-dark has-text-light">
<div className="container has-text-centered">
<div className="buttons">
<FooterSocials />
</div>
<small>
Handcrafted with <FontAwesomeIcon icon={faHeart} fixedWidth /> by
myself. Copyright &copy; {new Date().getFullYear()}.<br />
Made with{' '}
<a
href="https://bulma.io/"
target="_blank"
rel="noreferrer"
className="has-text-light">
<b>Bulma</b>
</a>
{' and '}
<a
href="https://nextjs.org/"
target="_blank"
rel="noreferrer"
className="has-text-light">
<b>Next.js</b>
</a>
.<br />
<br />
Hosted and source code available on{' '}
<a
href="https://github.com/grikomsn/landing-page"
target="_blank"
rel="noreferrer"
className="has-text-light">
<b>GitHub</b>
</a>
.
</small>
</div>
<style jsx>{`
.buttons {
justify-content: center;
}
`}</style>
</footer>
)
Footer.defaultProps = {
bgClass: 'has-background-dark',
btnClass: 'is-dark',
textClass: 'has-text-light',
}
6 changes: 5 additions & 1 deletion components/Navbar.js
Expand Up @@ -64,11 +64,15 @@ export default class extends Component {
className={`navbar-menu ${
this.state.navbarState ? 'is-active' : ''
}`}>
<div className="navbar-end has-text-centered">
<div className="navbar-end">
<NextLink href="/" className="navbar-item">
About
</NextLink>

<NextLink href="/open-source" className="navbar-item">
Open Source
</NextLink>

<NextLink href="/socials" className="navbar-item">
Socials
</NextLink>
Expand Down
3 changes: 2 additions & 1 deletion layouts/Layout.js
Expand Up @@ -76,7 +76,8 @@ export default class Layout extends Component {
{this.props.children}
<style global jsx>{`
html,
body {
body,
::selection {
background-color: ${this.props.colorHex};
}
`}</style>
Expand Down
2 changes: 1 addition & 1 deletion metadata.js
Expand Up @@ -21,7 +21,7 @@ import {

export default {
colorHex: '#FEF380',
email: 'grikomsn@gmail.com',
email: 'hello@griko.id',
emailSecondary: 'griko@protonmail.com',
links: [
{
Expand Down
27 changes: 20 additions & 7 deletions next.config.js
@@ -1,9 +1,22 @@
const webpack = require('webpack')
const withPlugins = require('next-compose-plugins')

module.exports = withPlugins([
[require('next-offline'), {}],
[require('next-optimized-images'), {}],
[require('@zeit/next-css'), {}],
[require('@zeit/next-sass'), {}],
[require('next-purgecss'), {}],
])
module.exports = withPlugins(
[
[require('@zeit/next-css')],
[require('@zeit/next-sass')],
[require('next-offline')],
[require('next-optimized-images')],
[require('next-purgecss')],
],
{
webpack: config => {
config.plugins.push(
new webpack.EnvironmentPlugin({
GITHUB_TOKEN: process.env.GITHUB_TOKEN,
})
)
return config
},
}
)
5 changes: 4 additions & 1 deletion package.json
Expand Up @@ -16,10 +16,12 @@
"@fortawesome/free-brands-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",
"@octokit/rest": "^15.17.0",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"bulma": "^0.7.2",
"emojione": "^4.0.0",
"isomorphic-fetch": "^2.2.1",
"next": "^7.0.2",
"next-compose-plugins": "^2.1.1",
"next-ga": "^2.3.3",
Expand All @@ -31,7 +33,8 @@
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-lazyload": "^2.3.0",
"react-reveal": "^1.2.2"
"react-reveal": "^1.2.2",
"webpack": "^4.25.1"
},
"devDependencies": {
"@types/react": "^16.4.18",
Expand Down
46 changes: 28 additions & 18 deletions pages/index.js
@@ -1,6 +1,6 @@
import { Bounce, Fade } from 'react-reveal'
import React, { Component } from 'react'

import Bounce from 'react-reveal/Bounce'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Footer from '../components/Footer'
import IAmInterested from '../components/IAmInterested'
Expand All @@ -18,7 +18,9 @@ class SectionFirst extends Component {
<section className="section">
<div className="container">
<LazyLoad>
<div id="avatar" />
<Fade>
<div id="avatar" />
</Fade>
</LazyLoad>
<div className="card g-max-width">
<div className="card-content has-text-centered">
Expand Down Expand Up @@ -220,10 +222,12 @@ export default () => (
<div className="card-image">
<figure className="image">
<LazyLoad>
<img
src={require('../static/g-works-inforlabs.jpg')}
alt="Inforlabs"
/>
<Fade>
<img
src={require('../static/g-works-inforlabs.jpg')}
alt="Inforlabs"
/>
</Fade>
</LazyLoad>
</figure>
</div>
Expand Down Expand Up @@ -254,10 +258,12 @@ export default () => (
<div className="card-image">
<figure className="image">
<LazyLoad>
<img
src={require('../static/g-works-rotten-reviews.jpg')}
alt="Rotten Reviews"
/>
<Fade>
<img
src={require('../static/g-works-rotten-reviews.jpg')}
alt="Rotten Reviews"
/>
</Fade>
</LazyLoad>
</figure>
</div>
Expand Down Expand Up @@ -311,10 +317,12 @@ export default () => (
<div className="card-image">
<figure className="image">
<LazyLoad>
<img
src={require('../static/g-plugs-articles.jpg')}
alt="Development Articles"
/>
<Fade>
<img
src={require('../static/g-plugs-articles.jpg')}
alt="Development Articles"
/>
</Fade>
</LazyLoad>
</figure>
</div>
Expand Down Expand Up @@ -352,10 +360,12 @@ export default () => (
<div className="card-image">
<figure className="image">
<LazyLoad>
<img
src={require('../static/g-plugs-wallpaper.jpg')}
alt="Gadget Wallpapers"
/>
<Fade>
<img
src={require('../static/g-plugs-wallpaper.jpg')}
alt="Gadget Wallpapers"
/>
</Fade>
</LazyLoad>
</figure>
</div>
Expand Down

0 comments on commit 8419e55

Please sign in to comment.