MonoSlate Portfolio 🎨

A modern, minimalist portfolio template built with Gatsby
View Live »

Quickstart · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Project Description
   • Built With
3. Getting Started
   • Prerequisites
   • Installation
4. Usage
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

This a black & white theme portfolio website template that you can quickly setup and customize to make it your own. The design is sleek yet well-organized with multiple sections to suit your needs regardless of which background you come from.

This project is a fork of v4 of Brittany Chiang's portfolio website which is quite awesome. Make sure to check that out as well.

The key features are:

• Sleek Design: Modern, minimalist and consistent design
• Organized Section: Offers essential sections that suits everyone which are easy and intuitive to nagivate
• 🎨 Stunning Design - Clean, modern black & white aesthetic
• Customizable Content: Effortlessly update your content and sections with zero coding work.
• Free Hosting: Quickly and easily deploy your portfolio website for free on Netlify or Github Pages.

(back to top)

Built With

• 
• 

(back to top)

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

Make sure that you have Node.js installed as it would help in running the Gatsby server and yarn for installing the dependencies.

Installation

1. Clone the repo

   git clone https://github.com/biswajit-k/MonoSlate.git

2. Install the Gatsby CLI

   npm install -g gatsby-cli

3. Install dependencies

   yarn

4. Start the development server

   npm start

Finally, below services will be running-

• Website: http://localhost:8000
• GraphiQL Server: http://localhost:8000/___graphql

Building For Production

1. Generate a full static production build

   npm run build

2. Preview the site as it will appear once deployed

   npm run serve

(back to top)

Folder Structure

├── gatsby-config.js
├── gatsby-node.js
├── prettier.config.js
├── .babelrc
├── .editorconfig
├── .eslintrc
├── README.md
├── LICENSE
├── package.json
└── content
      └── about
      └── draft
      └── jobs
      └── posts
      └── projects
      └── resume
└── src
      └── components
        ├── icons
        ├── sections
        ├── *layout files*
      └── fonts
      └── hooks
      └── images
        └── icons
        ├── logo.png
      └── pages
      └── styles
            ├── GlobalStyle.js
            ├── variables.js
      └── templates
      └── utils
      ├── config.js
└── static
      ├── resume.pdf

Below are some details for important files you would deal with while customizing the template for your use-

content folder contains all your personal details that would be automatically fetched and reflected on the website. Also the config.js file inside src folder with your details.

src folder contains all the source files for any customization.

• images folder contains logo images
• components folder contains the layout files like header, footer, etc
• pages folder contains all the pages of the website. You can add your own page folder which would be accessible at https://localhost:8000/<folder-name>
• styles folder contains the common styling used in the website. For customizations, you would mostly work with GlobalStyle.js and variables.js files.

static folder contains all the static files you would want to serve in your website. These can also be assible at https://localhost:8000/<file-name> directly.

gatsby-config.js and gatsby-node.js files contain some other details like plugins and metadata that you might want to look at.

Note

If you wish to just modify the content and keep the design same. You just have to modify content, static folders and config.js file. That's it.

(back to top)

Future Improvements

code refactor - redundant, Extraneous code, featured section design,
The template is ready to be used, however like always, there are scope of improvements that I see which I have listed down below-

Code Refactoring

There is a lot of code, especially styling which is redundant. Also, some parts of extraneous code exist.

Template Usability

Current template is provides good flexibility in customizing content overall. However, some improvements can be made to improve it further like option to add custom logo, flexibility in changing design, re-arranging sections like lego blocks adn more.

Improving Accessibility

General HTML need to be replaced with semantic version, navigating sections through keyboard navigation, use of ARIA attributes and other practices for improving accessibility need to be implemented.

Featured Section Design

I want to have a different design for the featured section on the home page, the current one don't completely sync with the overall design.

Apart from that, I am open to more suggestions, you can always open an issue and we can discuss and build on it further.

See the contribution section on how yo propose improvements.

(back to top)

🤝Contributing

Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

🪪License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

🫙Contact

(back to top)

Don't forget to give the project a star! Thanks again!