A modern and interactive platform presenting a collection of 32 data science projects with immersive 3D visualizations and an intuitive user interface.
- Responsive Design : Adaptive interface for all devices
- Intuitive Navigation : Sidebar menu with category filtering
- Advanced Search : Real-time search system
- Smooth Animations : Transitions and visual effects with Framer Motion
- 32 Integrated Projects : Complete collection of data science projects
- 20 Categories : Organization by expertise domains
- Enriched Details : Descriptions, technologies, and specific structures
- Quick Actions : Direct opening of projects and source code
- React 19 : Modern framework with advanced hooks
- TypeScript : Static typing for robustness
- Vite : Ultra-fast build tool
- Tailwind CSS : Utility CSS framework
- Context API : Global state management
Each project now displays a unique and realistic file structure:
📁 crypto_global_dashboard_3d/
├── 📄 README.md # Project documentation
├── 📄 requirements.txt # Python dependencies
├── 📄 app.py # Streamlit main app
├── 📁 pages/ # Streamlit pages
├── 📁 components/ # 3D components
├── 📁 data/ # Data sources
├── 📁 utils/ # Utility functions
└── 📁 assets/ # Static assets
📁 data_scientist_storytelling/
├── 📄 CV_Data_Scientist_Storytelling_FR.md # CV documentation
├── 📁 new/ # Project files
├── 📁 3d_cv/ # 3D CV components
└── 📄 README.md # Project overview
📁 data_scientist_education_switzerland/
├── 📄 README.md # Project documentation
├── 📄 index.html # Main entry point
├── 📄 styles.css # Styling
├── 📁 src/ # Source code
└── 📄 .gitignore # Git ignore
- Streamlit Architecture
- Streamlit + Python
- Three.js 3D visualization
- Real-time API integration
- Altair/Vega-Lite charts
- Data Storytelling Architecture
- Data Storytelling focus
- Business intelligence tools
- Data pipeline management
- Visualization expertise
- 3D Web Architecture
- Three.js + GSAP
- GeoJSON integration
- Plotly visualization
- Interactive 3D maps
- Real-time market data
- Interactive 3D globe
- Multiple API integrations
- Cyberpunk UI design
- Data transformation expertise
- Business intelligence
- Visualization mastery
- Communication skills
- 3D Swiss cantons
- Educational KPIs
- Interactive storytelling
- Responsive design
- API Integration : CoinCap, Binance, Etherscan
- Real-time Processing : Live market data
- 3D Visualization : Interactive globe
- Dashboard Display : Streamlit interface
- Data Collection : Business intelligence
- Story Development : Narrative creation
- Visualization : Interactive charts
- Communication : Stakeholder delivery
- Educational Data : Swiss education stats
- 3D Mapping : Canton visualization
- KPI Analysis : Educational metrics
- Interactive Display : 3D web interface
- TypeScript : Static typing and modern development
- JavaScript : Client-side interactivity
- Python : Data science and machine learning
- HTML5/CSS3 : Structure and styling
- Pandas : Data manipulation
- NumPy : Numerical calculations
- Scikit-learn : Machine learning
- Matplotlib/Seaborn : Visualizations
- Jupyter : Interactive notebooks
- React 19 : User interface
- Vite : Modern build tool
- Tailwind CSS : Utility styling
- Framer Motion : Animations
- Three.js : 3D rendering
- React Three Fiber : React integration
- GSAP : Advanced animations
- D3.js : Data visualizations
- Mapbox GL : Interactive maps
- Deck.gl : Geospatial visualizations
- D3-geo : Geographic projections
- TopoJSON : Topological data
- 32 Projects : Complete collection of data science projects
- 20 Categories : Organization by expertise domains
- React : Main framework
- TypeScript : Development language
- Node.js 18+
- npm or yarn
# Clone the repository
git clone [repository-url]
cd upframe
# Install dependencies
npm install
# Start development server
npm run dev# Build for production
npm run build
# Preview the build
npm run preview
# Serve with Node.js server
npm run serve📁 upframe/
├── 📄 README.md # Main documentation
├── 📄 package.json # Dependencies and scripts
├── 📄 vite.config.ts # Vite configuration
├── 📄 tsconfig.json # TypeScript configuration
├── 📄 index.html # HTML entry point
├── 📁 src/ # Source code
│ ├── 📁 components/ # React components
│ ├── 📁 context/ # State management
│ ├── 📁 App.tsx # Main component
│ └── 📁 main.tsx # React entry point
├── 📁 public/ # Static assets
├── 📁 dist/ # Production build
└── 📁 [32 data science projects]/ # Integrated projects
- Real-time search by project name
- Category filtering
- Intuitive interface with suggestions
- 3D charts with Three.js
- Interactive maps with Mapbox GL
- Smooth animations with GSAP
- Data visualizations with D3.js
- Modern and responsive design
- Dark/light theme
- Animations and transitions
- Intuitive navigation
- Mobile-first adaptation
- Touch-optimized interface
- Optimized performance
- Enhanced accessibility
VITE_API_URL=your-api-url
VITE_APP_TITLE=Upframe - Data Storytelling Platform- Customizable themes
- Project configuration
- External API integration
- Multi-environment deployment
# Production build
npm run build
# Compression for upload
zip -r portfolio-dist.zip dist/
# Upload via SSH
scp portfolio-dist.zip user@server:/path/to/webroot/
ssh user@server "cd /path/to/webroot && unzip portfolio-dist.zip"- Vercel : Automatic deployment
- Netlify : Continuous integration
- GitHub Pages : Free hosting
- Docker : Containerization
- Lighthouse Score : 95+ on all criteria
- Loading Time : < 2 seconds
- Bundle Size : < 500KB gzipped
- Compatibility : All modern browsers
- Fork the project
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.
- Website : https://upframe.com/
- Email : michael@germini.info
- GitHub : @michaelgermini
- YouTube : @TerminalZone404
Data Storytelling - Transform your data into captivating stories with immersive 3D visualizations and a modern interface. 🚀