https://github.com/ibra-kdbra/three.js-portfolio

My portfolio
https://github.com/ibra-kdbra/three.js-portfolio

canvas gltf html react-fiber tailwindcss threejs vitejs

Last synced: 5 days ago
JSON representation

My portfolio

• Host: GitHub
• URL: https://github.com/ibra-kdbra/three.js-portfolio
• Owner: ibra-kdbra
• Created: 2023-06-05T11:26:41.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-06-16T18:50:54.000Z (over 1 year ago)
• Last Synced: 2023-06-16T20:32:23.585Z (over 1 year ago)
• Topics: canvas, gltf, html, react-fiber, tailwindcss, threejs, vitejs
• Language: JavaScript
• Homepage: https://ibra-kdbra.netlify.app
• Size: 18.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 3D Portfolio

![Portfolio Screenshot](/public/assets/readme_assets/screenshot.png)

3D Portfolio is my personal portfolio website created using Next.js, Tailwind CSS, Three.js, React Three Fiber, and a collection of other technologies. This website showcases my skills, experiences, projects, and allows users to contact me. It also offers a dark and light theme to enhance the user experience.

## Table of Contents

- [3D Portfolio](#3d-portfolio)

  - [Table of Contents](#table-of-contents)

  - [Features](#features)

  - [Technologies Used](#technologies-used)

  - [Packages Used](#packages-used)

  - [Getting started](#getting-started)

  - [Project Structure](#project-structure)

## Features

-   **About Me**: A brief introduction about myself.

-   **Experience**: Highlighted my work experience.

-   **Skills**: Listed my skills and expertise.

-   **Projects**: Showcased my projects.

-   **Contact**: Provided a contact form for users to get in touch with me.

-   **Responsive Design**: The website is fully responsive to provide an optimal experience on all devices.

-   **Dark and Light Themes**: Users can switch between dark and light themes to suit their preferences.

## Technologies Used

-   [Next.js](https://nextjs.org)

-   [React](https://reactjs.dev)

-   [Tailwind CSS](https://tailwindcss.com)

-   [Three.js](https://threejs.org)

-   [React Three Fiber](https://github.com/pmndrs/react-three-fiber)

## Packages Used

-   [react-parallax-tilt](https://www.npmjs.com/package/react-parallax-tilt)

-   [react-type-animation](https://www.npmjs.com/package/react-type-animation)

-   [react-vertical-timeline-component](https://www.npmjs.com/package/react-vertical-timeline-component)

## Getting started

1. Install the project dependencies:

```bash

npm install

```

2. To run the development server:

```bash

npm run dev

```

Open your web browser and visit http://localhost:3000 to see the website in action during development.

## Project Structure

The project structure is organized as follows:

-   `components`: React components used to build different sections of the portfolio.

-   `styles`: Styles and theme configurations, including the dark and light themes.

-   `public`: Static assets, such as images and fonts.

-   `pages`: Individual pages of the website.

-   `utils`: Utility functions or helper scripts.