Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zaCKoZAck0/customizable-portfolio
A fully customizable portfolio website made with Next.js 14, contentlayer, Tailwind CSS, Framer Motion and shadcn/ui.
https://github.com/zaCKoZAck0/customizable-portfolio
contentlayer framer-motion nextjs nextjs14 portfolio-website shadcn-ui tailwindcss
Last synced: 1 day ago
JSON representation
A fully customizable portfolio website made with Next.js 14, contentlayer, Tailwind CSS, Framer Motion and shadcn/ui.
- Host: GitHub
- URL: https://github.com/zaCKoZAck0/customizable-portfolio
- Owner: zaCKoZAck0
- Created: 2024-08-22T17:04:33.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2025-02-08T11:04:48.000Z (3 days ago)
- Last Synced: 2025-02-08T11:24:53.519Z (3 days ago)
- Topics: contentlayer, framer-motion, nextjs, nextjs14, portfolio-website, shadcn-ui, tailwindcss
- Language: TypeScript
- Homepage: https://zackozack.xyz
- Size: 1.35 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Portfolio
### [Portfolio URL](https://zackozack.xyz)
A fully customizable, professional portfolio website made with:
- Next.js
- Tailwind CSS
- Framer Motion
- Contentlayer
- shadcn/ui
## Features
- **Fully customizable** with Contentlayer.
- **Dynamic content without a server** or database.
- Added **Blogs**.
- Precise and fluid **animations** with Framer Motion.
- Add / edit projects, blog posts, and more with **MDX**.
- **Typesafe** and secure.
- **Optimized** for **performance**.
- **OpenGraph** and **Twitter card** support.
- **Linting and Formatting** for enhanced developer experience.
- **Pre-rendered pages** for fast loading.
- (WIP) Integration with Github / Leetcode API.
- (WIP) Github commit graph and top repositories.
- (WIP) Realtime Leetcode rank and contest history.
- (WIP) SEO optimized.
- (WIP) Custom not-found page.
### Blog Features
- Pre-rendered blog pages as HTML.
- Syntax highlighting Code blocks.
- Custom Components.
- Code blocks (with syntax highlighting)
- Auto generated 'Table of Contents' and navigation.
- Auto generate slug for routing.
- Callouts
- (WIP) ai generated summary
- (WIP) OpenGraph images.
- (WIP) SEO optimized.
- (WIP) Custom components for Youtube, etc.
- Intellegent blog search.
- Auto generated blog history table.
- Contact Page with customizable Email template.
## Routes
```bash
/
/about-me
/blogs
/blogs/[slug]
/contact
/projects
```
## Adding / Editing Content
Edit / add `.mdx` files inside `src/content` directory to edit / add content to porfolio.
### Content Folder Structure
```bash
src/
content/
profile/
projects/
blogs/
```
- `profile/`: add only single `.mdx` file, used for user related data (name, links etc.)
- `projects/`: add project metadata and description.
- `blogs/`: add blog and metadata for each blog
#### Profile Schema (Required)
```mdx
username: // Alias or first name
fullName: // Full Name
headline: // A headline for website description
blogHeadline: // Headline for blog footer, can be same as headline
links: // Array of links
- platform: // platform name
url: // your profile url
alias: // username (visible as link text)
formalImage: // your professional headshot
profileImage: // a casual photograph for blog
role: // role in cyrrent org
company: // current org
```
## Runnning Locally
1. Clone the repository
```bash
pnpm install
```
2. Generate pages from Contentlayer
```bash
pnpm build:content
```
3. Running the project
```bash
pnpm dev
```
Deploy on Vercel:
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FzaCKoZAck0%2Fcustomizable-portfolio&project-name=my-portfolio&repository-name=my-portfolio&demo-title=My%20Portfolio&demo-description=Portfolio%20and%20Blog%20website%20made%20with%20Next.js&demo-url=https%3A%2F%2Fzackozack.xyz)
**Please ⭐ star this repo, if you found this project helpful**