A simple, dark mode portfolio template built with TailwindCSS, Next.js, and Framer Motion.
Designed and Developed by Sarah De Witt.
- Personal Introduction and Summary
- About Me
- Projects Grid
- Contact and Socials
Check out the live demo here.
- Clone the repository:
git clone https://github.com/yourusername/portfolio-template.git
cd portfolio-template
-
Install the dependencies:
# Using npm npm install # Using yarn yarn install
Start the development server:
```bash
# Using npm
npm run dev
# Using yarn
yarn dev
```
Open your browser and navigate to http://localhost:3000
. You should see your portfolio site running.
To create an optimized production build:
```bash
# Using npm
npm run build
# Using yarn
yarn build
```
This will create a /.next
folder with the production build.
To run the project in production mode:
```bash
# Using npm
npm run start
# Using yarn
yarn start
```
.
├── app # Layout, page and globals.css files
├── components # Components organised according to Atomic Design
│ ├── atoms # Basic building blocks
│ ├── molecules # Blocks that contain atoms
│ └── organisms # Sections of the website
├── public # Static files
│ └── images
├── utils # Utility functions
│ ├── AnchorsHeader.ts # Anchors in the header
│ ├── ContactSocials.ts # Contact and socials information
│ └── ProjectInfo.ts # Project information in project grid
├── .prettierrc # Prettier configuration file
├── .gitignore # Git ignore files
├── next.config.mjs # Next.js configuration file
├── tailwind.config.ts # TailwindCSS configuration
└── package.json # Project dependencies and scripts
To customize the TailwindCSS configuration, edit the tailwind.config.js
file.
You can add animations using Framer Motion by importing and using its components and hooks in your React components. Refer to the Framer Motion documentation for more details.
You can deploy this Next.js project to Vercel, Netlify, or any other static site hosting service.
-
Install the Vercel CLI:
npm install -g vercel
-
Deploy the project:
vercel
Follow the prompts to complete the deployment.
Contributions are welcome! Please open an issue or submit a pull request.