Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
- Theme UI-based theming
- react-spring parallax effect
- CSS Animations on Shapes
- Light/Dark mode
Clone the repo and run:
npm install
gatsby develop
Key | Default Value | Description |
---|---|---|
basePath |
/ |
Root url for the theme |
mdx |
true |
Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off) |
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `@mizandev/gatsby-mport`,
options: {
// basePath defaults to `/`
basePath: `/sideproject`,
},
},
],
};
In addition to the theme options, there are a handful of items you can customize via the siteMetadata
object in your site's gatsby-config.js
// gatsby-config.js
module.exports = {
siteMetadata: {
// Used for the title template on pages other than the index site
siteTitle: `Mizan M`,
// Default title of the page
siteTitleAlt: `Web & App Dev`,
// Can be used for e.g. JSONLD
siteHeadline: `Amazing Web & App creation with React, Angular, Laravel or WordPress`,
// Will be used to generate absolute URLs for og:image etc.
siteUrl: `https://mizan.dev`,
// Used for SEO
siteDescription: `Hi, I'm Mizan. I create aesthetic web & app experience for companies of all sizes`,
// Will be set on the <html /> tag
siteLanguage: `en`,
// Used for og:image and must be placed inside the `static` folder
siteImage: `/static/images/banner_512x512.png`,
// Twitter Handle
author: `@mizandev`,
},
};
Please read the guide Shadowing in Gatsby Themes to understand how to customize the this theme! Generally speaking you will want to place your files into src/gatsby-mport
to shadow/override files. The Theme UI config can be configured by shadowing its files in src/gatsby-plugin-theme-ui/
.
The content of the page is managed by .mdx
files inside the theme's sections
folder. You can edit the files by shadowing them in your site.
These files are available: intro.mdx
, projects.mdx
, about.mdx
, contact.mdx
mdx`:
# Hi, I'm Jane Doe
I'm creating noice web experiences for the next generation of consumer-facing companies
The other headings should be
<h2>
headings!
You also have access to the <ProjectCard />
component/shortcode which is used in the projects.mdx
section. The component takes the props title
(string), link
(string), bg
(string) and children
(React.ReactNode).