MDB 5 Academic Portfolio Template

Academic website created via this template

Built with Bootstrap 5 + Material Design 2.0 UI Kit (💗 by its creators) and Font Awesome 6 Pro.

Features

Brand-new designs for Course Work, Publication, and Academic Service sections.

Course Work Section

Publication Section

Service Section

This template exhibits superior performance even after incorporating a large-sized WebP file.

Google Lighthouse Screenshot

---

Usage

If you don't need any customization, simply download index.html and main.js from the distribution folder and modify contents in index.html. Make sure to place both files in the same folder. Webpack is only needed if you want further customization.

Color Scheme

Please follow the color scheme for MDBootstrap when changing or adding colors.

Webpack

Installation

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.

Dev Server

npm run start

Build

npm run build

Features:

• Bundling via Webpack 5.74.0
• ES6+ Support via babel-cli v7.18.10
• SASS Support via sass-loader v13.0.2
• Linting via eslint-webpack-plugin v3.2.0
• Unit Testing via jest v29.0.1
• Code Formatting via prettier v2.7.1

Files structure:

mdbootstrap-academic/
├── dist/
│   └── index.html
├── src/
│   ├── js/
│   └── scss/
├── webpack.config.js
└── package.json

MDB UI KIT

Importing JS modules

You can import the entire library or just individual modules:

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module
import { Input as CustomInput } from 'mdb-ui-kit'; // module with custom name

In this project, I imported Collapse, Tooltip, Ripple, Carousel. You can remove Tooltip and Carousel if you are not using these UI components.

Importing CSS file

To import MDB stylesheet please use the following syntax:

@import '~mdb-ui-kit/css/mdb.min.css';