Portfolio

This repository contains a dynamic, visually engaging personal portfolio built with React, Three.js and Tailwind CSS. It’s designed to showcase my projects, skills and development approach in an interactive and modern format.

Deployed Version

The live version is hosted at: filosoho.space.

Overview

This is a modern, interactive portfolio designed to showcase my projects and skills. Built with React, Three.js and GSAP, it features 3D animations, smooth transitions and a fully responsive design. The goal is to provide a professional and engaging user experience while demonstrating expertise in advanced web technologies.

Features

• 3D Visuals with React-Three-Fiber: The hero section and interactive elements incorporate WebGL-based animations.
• Matrix-Themed Effects: A real-time animated matrix backdrop powered by Three.js for immersive visuals.
• Project Showcases: Projects are displayed on a rotating 3D demo computer, with details shown in a container beside it, powered by React-Three-Fiber and Three.js.
• Responsive Design: Tailored for seamless experiences across desktops, tablets and mobile devices.
• Smooth Animations: Powered by GSAP for elegant transitions and interactions.
• Reusable Components: Custom-built components for buttons, loaders and layouts for maintainability.

Technologies Used

• React: JavaScript library for building user interfaces.
• Three.js: 3D rendering library for WebGL-based visual effects.
• Tailwind CSS: A utility-first CSS framework for responsive and modern design.
• React-Three-Fiber: Simplifies integration of Three.js into React applications.
• Vite: Fast development build tool.
• GSAP: Animation library for smooth transitions and effects.

Prerequisites

Before running this project, make sure you have the following installed:

• Node.js (v16 or higher)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/filosoho/portfolio.git

2. Navigate into the project directory:

   cd portfolio

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

Build and Deployment

To build the application for production:

npm run build

The output will be generated in the dist/ directory. Deploy the contents of this folder to your web server.

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch (feature/your-feature-name).
3. Commit your changes.
4. Open a pull request.

Acknowledgments

• Three.js: https://threejs.org
• React-Three-Fiber: https://docs.pmnd.rs/react-three-fiber
• Tailwind CSS: https://tailwindcss.com
• GSAP: https://greensock.com/gsap/