Git Product home page Git Product logo

meoki-portfolio's Introduction

Meoki The Minimal Portfolio

A modern one-page portfolio with a clean yet expressive design.

About

A minimal design, simple but very awesome.

Thanks to Konstantin MΓΌnster for the starter.

Sections

The starter has predefined sections as well as a template that you can use to create new, custom sections.

The predefined sections are:

  1. About me
  2. Interests/Skills
  3. Projects
  4. Contact me
  5. RSS Feed articles
  6. Codepen.io pens

Features

πŸŒ› Dark Mode - Based on user's preferences.

If the user's OS is set to using dark mode, the Gatsby Starter will automatically switch to a dark theme too.

πŸ•ΉοΈ Quick and Easy Setup - Add content and deloy.

Just install the starter, add your content, and deploy it! This starter works seamlessly with hosts like Netlify.

πŸ““ Content Integration via MDX - No external CMS needed.

MDX is a Markdown format that allows you to enrich your content with React components. This makes it fully customizable without external dependencies.

🧰 Extendable Layout - Add more sections as you like.

The starter includes predefined sections as well as a template for new, custom sections. Moreover, you can add new projects to the project section without additional coding.

πŸ’… Responsive Design - With freshening animations.

The starter is designed with a mobile-first approach and looks perfect on small and large breakpoints. Moreover, it has some nice and smooth animations.

RSS Icon RSS Newsfeed - Features latest articles.

In case you want to follow some articles with RSS, the starter has a easy to RSS feed that allows you to feature your latest articles.

To see all features in action, have a look at the live demo.Just install the starter, add your content, and there you go!

How to Start

With Portfolio Minimal, you get up and running in just a few minutes.

  1. Install the Gatsby CLI.

    npm install -g gatsby-cli
    
  2. Create a new Gatsby site with the Portfolio Minimal starter.

    git clone https://github.com/meokisama/meokisama.github.io.git
    
  3. Install dependencies.

    cd meokisama.github.io
    npm install
    
  4. Start the site in develop mode.

    gatsby develop
    
  5. Open the source code and start editing!

    Good luck!

Edit Content

After you installed the starter project, you most likely want to add your own content.

Edit configuration

First, you want to edit the config file which stores the site's configuration (e.g. title, description) and social profiles.

|-- config
    |-- index.js

Navigate to the index.js file in the config folder, edit the configuration, save it, that's it!

Edit page content

Next, you can edit the content for each section you want to be displayed. By default, all sections are shown. If you want to remove certain sections from the site, check out this part of the Readme.

|-- content
    |-- imprint
    |-- index
       |-- about
       |-- contact
       ...
    ...

You find all content in the content folder (surprisingly). For content integration, the project uses MDX, a Markdown format. If you haven't worked with Markdown or MDX before, check the Markdown syntax in Gatsby's docs. They also provide further information about MDX.

To get up and running, just edit the predefined data fields in each mdx file.

Edit Theme

You find the color and font settings in the configuration file, located at: config/index.js.

Note: The usage of the splash screen can be set for each page individually in the page content directory.

Edit Page Structure

To remove or reorder predefined sections, navigate to the src/pages/index.js file. This is the home page of your site.

Each section (besides the Articles section) exists of an imported React component and a GraphQL query that is needed for data querying.

If you want to remove a section, just delete the imported React component and query.

If you want to reorder your sections, just reorder the React components inside the <Layout /> component.

Add custom sections

If you want to add your own custom sections, there is a section template you can use. You can find it in the following directory: src/components/templates

Find me around the web 🌎

  • Information in public on Blog ✍🏾
  • Sharing updates on Facebook πŸ’Ό
  • Other products on Behance πŸ“
  • Daily photos on Instagram πŸ“·
  • "Wibu" collection on Flickr πŸ‘Ύ

License

Distributed under the MIT license.

See LICENSE for more information.

Changelog

[Version 1.3.0] - 17/2/2021

  • Add Creative Coding section (To show pens you made on codepen.io)

[Version 1.2.2] - 6/1/2021

  • Effects now smoother
  • Add more E2E Test

[Version 1.2.1] - 17/11/2020

  • Fix some f*cking bug

[Version 1.2.0] - 16/11/2020

  • Add more RSS feed (Now we have 2)

[Version 1.1.0] - 3/11/2020

  • Update more platform icons
    (Behance, Github, Medium, Linkedin, Xing, Facebook, Twitter)

[Version 1.0.1] - 28/10/2020

  • Fix some bugs

meoki-portfolio's People

Contributors

meokisama avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.