I built this portfolio in React so it would serve as a code sample.
The src directory is structured as follows:
src
├── components/ # Holds a directory for each component
│ └── Example/
│ ├── Example.jsx # JSX that makes up component
│ ├── Example.module.css # Processed as a CSS Modules file
│ └── index.js # Makes components cleaner to import
├── data/ # Holds JSON data used to populate the portfolio
│ └── example.js
└── styles/ # Holds normal CSS files (reset, variables, etc.)
└── example.css
- This application uses CSS Modules. I've suffixed my components' styles with
.module.cssso they'll be processed as such. I previously outlined the benefits of this approach here. - Components are held in a components folder with a corresponding index.js file to make them easier to import. That way, you can use syntax such as
import Example from '../Example'throughout the component library. - Instead of wiring up SCSS (which I've done in the past, with MageTools), I'm using custom properties, sometimes called "CSS variables". Once defined, custom properties can be called with
var(--name). These are supported in all modern browsers; I'm making an educated guess (based on my site's analytics data and other personal experience) that none of my typical clientele use Internet Explorer 11... or Baidu Browser. - Certain data is processed as Markdown with the popular react-markdown package. You can learn more about Markdown here.
If you want to use this portfolio as a starting point for your own, you are welcome to do so (just make sure to remove my projects and add your own).
This is a standard, non-ejected Create React App application. Therefore, you can use npm start to start it, npm build to build it, and so on. View all available commands inside package.json.
I used the wonderful react-icons extension for the icons displayed throughout the app. These icons are open source under the following licenses.