https://github.com/odilson-dev/odilson-italis
My professional 3D Portfolio made with React + Vite and TailwindCSS
https://github.com/odilson-dev/odilson-italis
react tailwindcss typescript vite
Last synced: 20 days ago
JSON representation
My professional 3D Portfolio made with React + Vite and TailwindCSS
- Host: GitHub
- URL: https://github.com/odilson-dev/odilson-italis
- Owner: odilson-dev
- Created: 2025-01-09T18:33:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-01-04T17:46:12.000Z (5 months ago)
- Last Synced: 2026-04-11T13:26:53.968Z (about 2 months ago)
- Topics: react, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://odilson-italis.onrender.com
- Size: 35 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Odilson Italis - Portfolio
A modern, high-performance 3D portfolio website built with **React 19**, **Three.js**, and **GSAP**. This project showcases my work, skills, and experience as a Frontend and Full Stack Developer.
 _(Note: Replace with an actual preview image if available)_
## 🚀 Features
- **3D Interactive Elements**: Implemented using `React Three Fiber` and `Drei` for a truly immersive experience.
- **Smooth Animations**: Powered by `GSAP` for high-performance transitions and scroll-triggered effects.
- **Responsive Design**: Built with `Tailwind CSS 4` to ensure a seamless experience across all devices.
- **Dynamic Project Showcase**: Interactive section highlighting key projects with GitHub and Live demo links.
- **Experience Timeline**: A detailed look at my professional journey and contributions.
- **Tech Stack Visualization**: Interactive 3D models representing my core technical skills.
- **Contact Form**: Fully functional contact section integrated with `EmailJS`.
- **Testimonials**: Social proof from clients and collaborators.
## 🛠️ Tech Stack
- **Frontend**: [React 19](https://react.dev/), [TypeScript](https://www.typescriptlang.org/)
- **Styling**: [Tailwind CSS 4](https://tailwindcss.com/)
- **3D Graphics**: [Three.js](https://threejs.org/), [@react-three/fiber](https://github.com/pmndrs/react-three-fiber), [@react-three/drei](https://github.com/pmndrs/drei)
- **Animations**: [GSAP](https://gsap.com/)
- **Icons**: [Lucide React](https://lucide.dev/)
- **Build Tool**: [Vite](https://vitejs.dev/)
- **Other Tools**: [EmailJS](https://www.emailjs.com/), [Sonner](https://sonner.emilkowal.ski/)
## 📂 Project Structure
```text
src/
├── components/ # Reusable UI components (NavBar, AnimatedCounter, etc.)
├── constants/ # Static data and configuration (projects, skills, etc.)
├── sections/ # Main page sections (Hero, About, Experience, Showcase, etc.)
├── assets/ # Images, 3D models, and other static assets
├── App.tsx # Main application entry point
└── main.tsx # React DOM rendering
```
## ⚙️ Getting Started
### Prerequisites
- Node.js (v18 or higher recommended)
- npm, yarn, or pnpm
### Installation
1. Clone the repository:
```bash
git clone https://github.com/odilson-dev/odilson-italis.git
```
2. Navigate to the project directory:
```bash
cd odilson-italis
```
3. Install dependencies:
```bash
npm install
```
### Development
Run the development server:
```bash
npm run dev
```
### Build
Create a production-ready build:
```bash
npm run build
```
## 📧 Contact
Feel free to reach out if you'd like to collaborate or just say hi!
- **GitHub**: [@odilson-dev](https://github.com/odilson-dev)
- **LinkedIn**: [odilson-dev](https://linkedin.com/in/odilson-dev)
- **Twitter**: [@odilsonDev](https://twitter.com/odilsonDev)
---
Built with ❤️ by [Odilson Italis](https://github.com/odilson-dev)