🚀 Daniel Baier - Interactive Terminal Portfolio

An immersive full-screen terminal experience with stunning 3D animations and Matrix-style effects. This portfolio showcases modern web development skills through an interactive command-line interface.

👨‍💻 About Daniel Baier

Web Developer | Full-Stack Engineer

Experienced web developer proficient in all stages of advanced web development. Knowledgeable in user interface, testing, and debugging processes.

Expert in installation, testing, and maintenance of web systems with extensive experience across multiple technology stacks including Laravel, Vue.js, Apache, and MySQL.

Skilled in effective self-management for independent projects and collaborative teamwork.

Contact:

📧 Email: daniel@baier.ch
📍 Location: Ch. des Lilas 2, Switzerland
📱 Phone: 079 / 947 05 42
🌐 Website: devbaier.ch

💼 Professional Experience

Alltitude SA, Lausanne (Freelance)

May 2021 - Present

Web development with Laravel and Vue.js
MySQL database design and optimization
Full-stack application development

Digicomp Academy AG, Zürich

Oct 2018 - Aug 2020

Developed Digicomp website with Laravel and Vue.js
MySQL database implementation
New infrastructure development on AWS

Swiss China World Silk Road Association

Jul 2017 - Sep 2018

Internet presence management
Hosting, domains, email, and web server administration
Consultation on products and training for Swiss staff

Ioware AG, Düdingen

Apr 2016 - Jul 2017

Program development with Selectline COM interface
SQL database development
Mobile application development with Webix

macmac AG, Marly

Mai 2014 - Mai 2016

Website development based on Joomla
HTML, PHP, JavaScript
MySQL database management

🎓 Education

École des Arches, Lausanne

2009 - 2013

Computer Science Studies (Informatiklehre)

École Lemania, Lausanne

2007 - 2009

Maturität C (not completed)

💻 Technical Skills

Expert Knowledge

HTML / CSS 3       ████████████████████ 100%
PHP / MySQL        ████████████████████ 100%
Laravel            ███████████████████░  95%
Vue.js             ███████████████████░  95%
Git                ███████████████████░  95%

Proficient In

React              █████████████████░░░  85%
Next.js            █████████████████░░░  85%
JavaScript (ES6+)  █████████████████░░░  85%
Node.js            ████████████████░░░░  80%
Three.js           ███████████████░░░░░  75%

Additional Skills

Photoshop
Atlassian Tools (Jira, Confluence)
Scrum / Agile methodologies
AWS (Amazon Web Services)
API Development & Integration
WebGL / 3D Graphics
Framer Motion
TypeScript

🌍 Languages

Language	Level
🇩🇪 Deutsch	Native (Muttersprache)
🇫🇷 Français	Native (Muttersprache)
🇬🇧 English	C2 (Fluent)

🎮 This Terminal Portfolio

What Makes It Special

This portfolio is not just a website - it's an interactive experience that demonstrates advanced web development capabilities through:

Full-Screen Terminal Interface
- No traditional navigation
- Command-line driven exploration
- Real terminal features (tab completion, history)
9+ Simultaneous 3D Animations
- Matrix rain effects (2 types)
- Connected particle network
- Mouse-following sphere
- Pulsing energy rings
- 5 rotating geometric shapes
- Triple grid tunnel
- Dynamic lighting
Interactive Features
- Tab autocomplete
- Command history (↑/↓ arrows)
- Mouse-reactive 3D elements
- Easter eggs and hidden commands

Technology Stack

Frontend:

Next.js 15.1.4
React 19.0.0
Chakra UI 2.10.4
Framer Motion 11.15.0

3D Graphics:

Three.js
React Three Fiber
React Three Drei

Styling:

SCSS Modules
CSS Animations
Custom effects (scanlines, CRT monitor simulation)

Development:

TypeScript ready
Git version control
Modern ES6+ JavaScript
Responsive design

Performance

⚡ 60 FPS smooth animations
📦 431 KB bundle (includes 3D libraries)
📱 Mobile optimized
🌐 Cross-browser compatible
♿ Accessible terminal interface

🚀 Getting Started

Prerequisites

Node.js >= 20.16.0
npm >= 10.8.1

Installation

# Clone the repository
git clone https://github.com/yourusername/devbaier.ch.git

# Navigate to directory
cd devbaier.ch

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:3005

Build for Production

# Create production build
npm run build

# Start production server
npm start

🎯 Terminal Commands

Navigation Commands

home          # Return to homepage
about         # Learn about Daniel
skills        # Display technical skills
projects      # Portfolio projects
contact       # Contact information
experience    # Work history

System Commands

help          # Show all commands
clear / cls   # Clear terminal
whoami        # Display current user
date          # Show current date/time
ls            # List files
cat [file]    # Read file contents
echo [text]   # Echo text back

Fun Commands (Easter Eggs)

matrix              # Enter the Matrix 🟢
hack                # Hacking simulation ⚠️
konami              # Konami code 🎮
sudo make me a sandwich  # XKCD reference 🥪
cat secret.txt      # Access denied 🔒

Tips

Press Tab for autocomplete
Use ↑/↓ arrows for command history
Move your mouse to see interactive 3D effects
Type commands to discover hidden features!

🎨 3D Effects Breakdown

1. Matrix Rain (Canvas Overlay)

Classic falling green characters
Real-time canvas animation
30 FPS performance
Subtle 15% opacity

2. Matrix Rain (3D Lines)

100 falling line segments in 3D space
Random speeds and lengths
Infinite loop animation

3. Connected Particle Network

150 particles moving in 3D
Dynamic line connections between nearby particles
Creates living neural network effect
Distance-based rendering

4. Mouse Follower Sphere

Wireframe sphere tracks mouse cursor
Real-time 3D position conversion
Smooth following animation
Interactive feedback

5. Pulsing Energy Rings

3 concentric torus rings
Sine wave scaling animation
Continuous rotation
Decreasing opacity with distance

6. Floating Geometric Shapes

Five different shapes with unique behaviors:

Octahedron - 8-sided diamond
Icosahedron - 20-sided sphere (×2)
Torus - Donut shape
Tetrahedron - 4-sided pyramid

Each shape:

Rotates at unique speed
Floats with sine/cosine waves
Sways independently
Wireframe with green glow

7. Triple Grid Tunnel

Floor grid (scrolling infinitely)
Left wall grid
Right wall grid
Creates "flying through cyberspace" effect

8. Dynamic Lighting

Main point light (green)
Secondary point light (green)
Ambient light
Creates depth and glow effects

9. Gradient Atmosphere

Black → Dark Green → Black
Adds depth perception
Enhances mood

📁 Project Structure

devbaier.ch/
├── components/
│   └── Terminal/
│       ├── FullScreenTerminal.js       # Main terminal component
│       ├── FullScreenTerminal.module.scss
│       ├── Background3D.js             # 3D effects
│       ├── MatrixRainOverlay.js        # Canvas Matrix rain
│       ├── MatrixRainOverlay.module.scss
│       └── useTypingEffect.js          # Typing animation hook
├── pages/
│   ├── _app.js                         # App wrapper
│   ├── index.js                        # Homepage (terminal)
│   ├── about.js                        # Traditional about page
│   └── projects.js                     # Traditional projects page
├── styles/
│   └── globals.css                     # Global styles
├── public/                             # Static assets
├── package.json                        # Dependencies
├── next.config.js                      # Next.js config
└── README.md                           # This file

🎯 Key Features

User Experience

✅ Full-screen immersive terminal
✅ Real terminal features (autocomplete, history)
✅ Interactive 3D background
✅ Mouse-reactive elements
✅ Easter eggs and hidden commands
✅ Smooth 60 FPS animations

Technical Excellence

✅ Modern React 19
✅ Next.js 15 with SSR
✅ WebGL 3D graphics
✅ Performance optimized
✅ Mobile responsive
✅ Cross-browser compatible
✅ TypeScript ready

Visual Design

✅ Matrix/Cyberpunk aesthetic
✅ CRT monitor effects
✅ Scanline simulation
✅ Screen flicker effect
✅ Green glow effects
✅ Wireframe 3D shapes

🔧 Configuration

Customize Colors

Edit components/Terminal/FullScreenTerminal.module.scss:

// Change terminal color from green to blue
$terminal-color: #00d4ff; // Instead of #00ff41

Add New Commands

Edit components/Terminal/FullScreenTerminal.js:

const COMMANDS = {
  mycommand: {
    description: 'My custom command',
    execute: () => ({
      output: ['Your output here']
    })
  }
}

Modify 3D Effects

Edit components/Terminal/Background3D.js:

Adjust particle count
Change rotation speeds
Add more shapes
Modify colors and opacity

📊 Browser Support

Browser	Version	Status
Chrome	Latest	✅ Full support
Firefox	Latest	✅ Full support
Safari	Latest	✅ Full support
Edge	Latest	✅ Full support
Mobile Safari	iOS 14+	✅ Optimized
Chrome Mobile	Latest	✅ Optimized

🐛 Troubleshooting

3D Effects Not Showing?

Check WebGL support in browser
Try a different browser
Check console for errors
Ensure GPU acceleration is enabled

Performance Issues?

Reduce particle count in Background3D.js
Disable some effects on mobile
Check GPU capabilities
Close other tabs/applications

Build Errors?

# Clear cache and rebuild
rm -rf .next node_modules
npm install
npm run build

📝 License

🤝 Contact

Daniel Baier Web Developer | Full-Stack Engineer

📧 Email: daniel@baier.ch
🌐 Website: devbaier.ch
📍 Location: Switzerland
💼 LinkedIn: linkedin.com/in/danielbaier
🐙 GitHub: github.com/devbaier

🎊 Final Words

This terminal portfolio represents the intersection of technical skill, creative design, and interactive experience. It showcases:

10+ years of web development experience
Expertise in modern JavaScript frameworks (React, Vue.js, Next.js)
Full-stack capabilities (Frontend + Backend + Database)
3D graphics programming with WebGL/Three.js
Performance optimization and best practices
Multilingual capabilities (German, French, English)

Type help in the terminal to begin your journey! 🚀

Built with 💚 using Next.js, React, Three.js, and lots of coffee ☕

Name		Name	Last commit message	Last commit date
Latest commit History 67 Commits
.claude		.claude
.github/workflows		.github/workflows
components		components
pages		pages
public		public
styles		styles
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
Dockerfile		Dockerfile
README.md		README.md
docker-compose.yml		docker-compose.yml
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
theme.js		theme.js
wrangler.toml		wrangler.toml

Folders and files

Latest commit

History

Repository files navigation

🚀 Daniel Baier - Interactive Terminal Portfolio

👨‍💻 About Daniel Baier

💼 Professional Experience

Alltitude SA, Lausanne (Freelance)

Digicomp Academy AG, Zürich

Swiss China World Silk Road Association

Ioware AG, Düdingen

macmac AG, Marly

🎓 Education

École des Arches, Lausanne

École Lemania, Lausanne

💻 Technical Skills

Expert Knowledge

Proficient In

Additional Skills

🌍 Languages

🎮 This Terminal Portfolio

What Makes It Special

Technology Stack

Performance

🚀 Getting Started

Prerequisites

Installation

Build for Production

🎯 Terminal Commands

Navigation Commands

System Commands

Fun Commands (Easter Eggs)

Tips

🎨 3D Effects Breakdown

1. Matrix Rain (Canvas Overlay)

2. Matrix Rain (3D Lines)

3. Connected Particle Network

4. Mouse Follower Sphere

5. Pulsing Energy Rings

6. Floating Geometric Shapes

7. Triple Grid Tunnel

8. Dynamic Lighting

9. Gradient Atmosphere

📁 Project Structure

🎯 Key Features

User Experience

Technical Excellence

Visual Design

🔧 Configuration

Customize Colors

Add New Commands

Modify 3D Effects

📊 Browser Support

🐛 Troubleshooting

3D Effects Not Showing?

Performance Issues?

Build Errors?

📝 License

🤝 Contact

🎊 Final Words

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages