https://github.com/tib0/tib0-portfolio
This project is a showcase made with ❤️🔥, 👓 and 💻. It is a customizable portfolio. It display my professional path.
https://github.com/tib0/tib0-portfolio
daisyui graymatter nextjs portfolio react tsparticles
Last synced: 2 months ago
JSON representation
This project is a showcase made with ❤️🔥, 👓 and 💻. It is a customizable portfolio. It display my professional path.
- Host: GitHub
- URL: https://github.com/tib0/tib0-portfolio
- Owner: tib0
- Created: 2024-01-10T13:43:11.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T18:08:55.000Z (12 months ago)
- Last Synced: 2025-08-03T02:36:50.792Z (2 months ago)
- Topics: daisyui, graymatter, nextjs, portfolio, react, tsparticles
- Language: TypeScript
- Homepage: https://tib0-portfolio.netlify.app/
- Size: 7.23 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tib0-portfolio
This project is a showcase made with ❤️🔥, 👓 and 💻. It is a customizable portfolio. It display my professional path.
### [Demo available here.](https://folio.tib0.com)
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
I used the following library to achieve my goals:
- React
- Gray Matter
- DaisyUI
- tsParticles
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Particles
Display a moving web behind hero section. Interactive, made from tsParticle sample.
## Data stored in md files
I've used Gray Matter to read from markdown files. We used this library to behave as a headless CMS.
> **tib0-portfolio\_data\experiences**
>
> ```
> type ExperienceType = {
> slug: string;
> title: string;
> year: string;
> excerpt: string;
> date: string;
> skills: [string];
> };
> ```
> **tib0-portfolio\_data\projects** md files store
>
> ```
> type ProjectType = {
> slug: string;
> title: string;
> date: string;
> coverImages: [string];
> excerpt: string;
> skills: [string];
> };
> ```
## Use of local storage
I store locally a value wether dark mode is activated or not.
## Hooks
I've used three hooks here to gain informations about device used, theme selected (light or dark) and to factorize local storage usage.
> **tib0-portfolio\hooks**
> - useDeviceDetect
> - usePersistentStorageValue
> - useThemeDetect
## Serving
The site is served with [Netlify](https://www.netlify.com) services.
## Thanks
- **Vercel** sample blog :
- **Free Code Camps** hooks article :
- **Radizon** storage :
- **Daisy UI** :
- **tsParticles** :