davidlruizc / personal-portfolio

My own portfolio

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Gatsby Starter Portfolio Minimal

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

Gatsby Starter Portfolio Minimal Screenshot


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. Medium articles

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.

    gatsby new portfolio-minimal https://github.com/konstantinmuenster/gatsby-starter-portfolio-minimal
    
  3. Start the site in develop mode.

    cd portfolio-minimal
    gatsby develop
    
  4. Open the source code and start editing!


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


About

My own portfolio

License:MIT License


Languages

Language:JavaScript 100.0%