Learning to build a website from 0 with gatsby and bulma
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
LICENSE
README.md
aflasio.js
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
package.json
yarn.lock

README.md

Aflasio

Description

While learning, we're trying to build a portfolio website for designer and artist.

This project was generate by Gatsby-cli using following command gatsby new Learning-Gatsby.

Todo

Basic Feature

  • Add Bulma support
  • Add top navbar
  • Add Feathericon
  • Add icon link with transparent button
  • Make top navbar sticky when scroll up
  • Animate top navbar while show or hide
  • Footer credit
  • QuickView for menu on mobile
  • Change default bulma dropdown menu on mobile to QuickView
  • Filter to handle image
  • Install Bulma Carousel
  • Move menu on the navbar to the left side.
  • Add social media icons on the right side of the navbar.
  • Replace landing page with gallery
  • Using search filter from habib-mustofa.com
  • Add bulma carousel under the box for header in the landing page

Gallery Page

  • Create Gallery page
  • Grid the post
  • 1 column on mobile, 2 on tablet, 3 on desktop, 4 column for large desktop
  • Modal for Post
  • Carousel the photos

Blog Site

  • Create Blog page
  • Grid the post
  • Modal for the post

Plan Design

Mock-up design Mock-up template

Desktop Screen

Home Gallery Modal Gallery
Gallery Modal Gallery
Blog Modal Blog
Gallery Modal Gallery

Mobile Screen

Gallery Modal Gallery
Gallery Modal Gallery
Blog Modal Blog
Gallery Modal Gallery
Search Quickview Menu
Gallery Modal Gallery