https://github.com/builde7b0b/webgl-portfolio

Uses Three.js Javascript Library to create a 3D Portfolio Website
https://github.com/builde7b0b/webgl-portfolio

coding-interviews development javascript javascript-library portfolio-website three-js

Last synced: 16 days ago
JSON representation

Uses Three.js Javascript Library to create a 3D Portfolio Website

• Host: GitHub
• URL: https://github.com/builde7b0b/webgl-portfolio
• Owner: builde7b0b
• Created: 2023-01-09T13:39:56.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-24T07:01:28.000Z (about 1 year ago)
• Last Synced: 2024-11-23T13:15:42.444Z (3 months ago)
• Topics: coding-interviews, development, javascript, javascript-library, portfolio-website, three-js
• Language: HTML
• Homepage: https://ecbjrthreejs.netlify.app/
• Size: 30.9 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Portfolio Website with Scrollable 3D Animation using Three.js

![Example image](https://i.imgur.com/6pUBZ3z.png)

## Description

This repository contains code for a production-ready portfolio website that showcases a scrollable 3D animation using the Three.js library. The website features WebGL, CSS Grid, and a unique scrolling animation. The avatar image is a 3D cube that rotates as the user scrolls down, along with a large 3D ring that rotates continuously. Additionally, the website includes a rotating moon animation and stars throughout.

- Three.js Docs https://threejs.org/

- WebGL Overview https://youtu.be/f-9LEoYYvE4

- [Scrollable Three.js Animation](https://fireship.io/snippets/threejs-scrollbar-animation) Snippet

## Table of Contents 

- [Demo](#demo)

- [Technologies Used](#technologies-used)

- [Installation and Setup](#installation-and-setup)

- [Wireframe](#wireframe)

- [Contributing](#contributing)

- [License](#license)

## Demo 

A demo of the portfolio website is available at [[link to website](https://ecbjrdev.xyz/)]. 

## Technologies Used

The website was developed using the following technologies:

- Three.js

- WebGL

- CSS Grid

## Installation and Setup

To set up the website, follow these steps:

- Clone this repository: `git clone `

- Install dependencies:`npm install`

- Run the development server: `npm run dev`

## Contributing 

Contributions to the website are welcome. To contribute, please follow these steps:

1. Fork this repository

2. Create a new branch for your changes: `git checkout -b `

3. Make your changes and commit them: `git commit -am 'Add some feature'`

4. Push to the branch: `git push origin 

5. Submit a pull request

## License 

 This project is licensed under the MIT License.