An academic portfolio template built with Material Design for Bootstrap 5 (💗 by its creators) and Font Awesome 7 Pro.
Brand-new designs for Coursework, Publication, and Academic Service sections.
 |
|---|
| Coursework Section |
 |
|---|
| Publication Section |
 |
|---|
| Service Section |
To enhance loading times, all large photos are shown on a photo slider page featuring an animated blooming flower background. See live example.
 |
|---|
| Screenshot of the Photo Slider Page |
This template underwent thorough tree shaking and achieved a perfect performance score, even with the inclusion of a large-sized WebP file.
 |
|---|
| Google Lighthouse Screenshot |
If no customization is required, just download index.html, main.css and main.js from the distribution folder, then modify the content in index.html. Ensure both files are placed in the same folder. Webpack is only necessary for additional customization. For the photo slider, download photos.html, photos.css, and photos.js.
Please follow the color scheme for MDBootstrap when changing or adding colors.
npm install
A free version of MDB UI Kit and a paid version of Font Awesome are already included as a dependencies, in package.json. Upgrade to paid or downgrade to free as you like.
npm run start
npm run build
- Bundling via Webpack 5.98.0
- SASS Support via sass-loader v16.0.5
- Unit Testing via jest v29.0.1
mdbootstrap-academic/
├── dist/
│ └── index.html
├── src/
│ ├── js/
│ └── scss/
├── webpack.config.js
└── package.json
In this project, I imported Collapse, Tooltip, Ripple, Carousel. You can
remove Tooltip and
Carousel if you are not using these UI components.
You can import the entire library (not recommended):
import * as mdb from 'mdb-ui-kit'; // lib
or just individual modules:
import { Input } from 'mdb-ui-kit'; // module
import { Input as CustomInput } from 'mdb-ui-kit'; // module with custom name
You can modify my imports in main.scss, as recommended by MDB's guide.
Alternatively, you can import the entire MDB stylesheet:
@import '~mdb-ui-kit/css/mdb.min.css';