aviaryan / work

My open source projects portfolio. Built with React.

Showcase

aviaryan.in/work/

My open source projects portfolio. Built with React.

Features

• A completely dynamic portfolio
• Filter projects by title, tags, time etc
• Responsive
• Detail view to show more information about the project
• Light weight - bundle (JS + CSS) is around 130KB without any compression
• Unmatched Awesomeness

Dev

yarn install
yarn start

For deploying

yarn build
./deploy.sh

Customizing

Edit src/data/projects.js to customize the projects that are being displayed. That file contains a simple JavaScript JSON Object so it should be very easy to get started.

Libraries Used

React
React-Router
Redux
GeoPattern

Deployment

Run yarn build to generate bundle files with all the dependencies.

Then use the deploy.sh script to deploy them to gh-pages branch.

Resources

This is my first React project. I was only able to complete it because of these resources.

• [React] Build with React Interactive Tutorial
• [React] Official React Docs
• [React] List of tutorials for getting started with React
• [Setup] Minimal React Webpack Babel setup
• [Setup] Official React Installation Guides
• [Setup] Getting started with Webpack 2 - CSS
• [Setup] CSS Modules Webpack React
• [Setup] CSS with HMR
• [Routing] Router web docs
• [Setup] Resolve jsx extension in Webpack
• [Setup] Using preact
• [Redux] Redux Official Intro

Contributing

Please see CONTRIBUTING.md for contribution guidelines. 😉

Screenshots

Home page Filter

Project Detail Page

work's Issues

postcss integration

Hi there,

I've created a PR which contains the integration of PostCSS.
I've added:

• postcss,
• postcss configuration file,
• postcss-loader for webpack2,
• autoprefixer,
• autoprefixer browserlist file (even though this can be added straight in webpack, I think having this separated is better for separation of concerns)

PR here -> #5

Deploy on surge.sh

http://surge.sh/

Implement suggestions in filter

We can use an autocomplete library to show filter suggestions.

Feature Request: Add YouTube iFrame to showcase projects

To show proper functioning of the project, many times developers create a demo video.

Feature Request

A YouTube Video iFrame to display the video in the Details page, iff the user has specified certain field in the data/projects.js

My work my joy one of the best thing I go down for

add feedback on user interaction

Hi there and very nice idea,

I believe it'd nice to give the user a visual feedback when it is able to click somewhere.
I made a small change adding a shadow effect when the mouse is over a card.
I've seen that you have something similar commented out in your code.
What was you issue?

Have you considered to add PostCSS in your build setup for autoprefixer at least?
Have you considered as well to add a CSS preprocessor (Sass, or why not a PostCSS plugin bundle that would replicate Sass-like features?)

I'll open a PR (mouseover branch) though:
#3

Thanks,
Andrea

Issues with deploy.sh [Ubuntu 18.04]

Platform: Ubuntu 18.04

Issues

1. Running these commands

   work/deploy.sh

   Lines 11 to 12 in 151fd94

   	mkdir -p deploy/dist
   	cp -fR dist/ deploy/dist/

   
   makes directory structure:

deploy
├── dist
│   └── dist
│       ├── bundle.js
│       └── styles.css

2. Similarly, running these commands

   work/deploy.sh

   Lines 13 to 14 in 151fd94

   	mkdir -p deploy/img
   	cp -fR img/ deploy/img/

   
   makes directory structure

deploy
├── img
│   └── img
│       ├── github-logo.svg
│       ├── link-symbol.svg
│       └── profile.png

3. This command

   work/deploy.sh

   Line 17 in 151fd94

   cp -fR deploy/ .

   
   gives this error
   cp: 'deploy/' and './deploy' are the same file

Migrate to React 16

It would be good if we can have the project switched to React 16.