https://github.com/eliaz5536/portfolio

Three.JS Portfolio
https://github.com/eliaz5536/portfolio

javasript portfolio threejs

Last synced: 11 months ago
JSON representation

Three.JS Portfolio

• Host: GitHub
• URL: https://github.com/eliaz5536/portfolio
• Owner: eliaz5536
• License: mit
• Created: 2025-04-21T16:26:53.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-21T21:12:15.000Z (about 1 year ago)
• Last Synced: 2025-05-14T15:19:27.513Z (about 1 year ago)
• Topics: javasript, portfolio, threejs
• Language: JavaScript
• Homepage: https://eliaz5536.github.io/portfolio/
• Size: 2.19 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Three.JS Portfolio

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![Threejs](https://img.shields.io/badge/threejs-black?style=for-the-badge&logo=three.js&logoColor=white) ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white) ![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white)

Inspired by the _PlayStation 4_ UI design, built with Three.JS with vanilla JavaScript and CSS for refined animations and transitions. 

The portfolio can be accessed and viewed separately by each section such as

- **Projects**

- **About**

- **Contact**

You can access the portfolio through this following link: https://eliaz5536.github.io/portfolio/

![ezgif-1411d9aafa940f](https://github.com/user-attachments/assets/a5ecde5c-38e0-46ab-83e9-c893680aeb75)

![ezgif-405ac189864eaa](https://github.com/user-attachments/assets/87eda2d9-f458-4f5c-be9f-08601c661e34)

# Inspiration

The UI Design stem from the combination of PlayStation 4's minimal skeuomorphic design and PlayStation 2's 3D interactive animations.

# Technology

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

Manipulates real-time search queries through filtering using HTML elements and capturing text content when selecting a query.

![Threejs](https://img.shields.io/badge/threejs-black?style=for-the-badge&logo=three.js&logoColor=white)

Physics engine for animating meshes, lighting and scene transitions using Tween.JS, with addition of manipulating the lighting and object elements using vanilla JavaScript.

![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)

Lightweight build tool for scaling web application with React framework for ensuring cross-compatibility with desktop and mobile. 

![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white) 

Package Manager for installing, running and building dependencies of the suitable package version that is compatible with HTML5/CSS3 & other dependencies.

# Features

## **Toggle Dark Mode**

Dark mode can be toggled by clicking on the top right corner to change its appearance and lighting of the page.

![ezgif-25a929dee79f7e](https://github.com/user-attachments/assets/a7afab59-c6d2-49a4-837b-be860a4777fa)

  

## **Change Layout Style**

You can change the layout style of result queries real-time through **Portfolio** section.

![ezgif-200b62b125d9d3](https://github.com/user-attachments/assets/3e84cae4-eae2-43af-a8a7-d7f7d71b790e)

## **Search Filter**

You can change filter search queries to specify your search.

![ezgif-1b01fac052b802](https://github.com/user-attachments/assets/254bf69f-2aa6-46d6-a8a1-8107b04a6d23)

## **Accessible Github Projects**

GitHub projects can be accessed after clicking on the selected query you want to view.

![ezgif-1981b8ea19ba90](https://github.com/user-attachments/assets/ed84f419-2b8e-4cdb-8993-50030e589d82)

# License

The project is licensed under the MIT License.