diff --git a/index.html b/index.html
index 2c05a5a..fc2d4da 100644
--- a/index.html
+++ b/index.html
@@ -2,40 +2,523 @@
 <html lang="cs">
 <head>
     <meta charset="UTF-8">
-    <title>Zdenek Kreml</title>
-    <link rel="stylesheet" type="text/css" href="styly.css">
-    <script src="https://kit.fontawesome.com/88bcdf51c5.js" crossorigin="anonymous"></script>
+    <title>Zdenek Kreml - Terminal</title>
     <script defer src="https://analytics.oscloud.cz/script.js" data-website-id="4502ff41-0479-41c1-8b7a-5a108565137a"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            background: #0a0a0a;
+            color: #00ff41;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 14px;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        
+        .terminal {
+            max-width: 1200px;
+            margin: 20px auto;
+            background: #000;
+            border: 2px solid #333;
+            border-radius: 8px;
+            box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
+        }
+        
+        .terminal-header {
+            background: #1a1a1a;
+            padding: 10px 15px;
+            border-bottom: 1px solid #333;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .terminal-buttons {
+            display: flex;
+            gap: 6px;
+        }
+        
+        .btn {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+        }
+        
+        .btn-close { background: #ff5f56; }
+        .btn-minimize { background: #ffbd2e; }
+        .btn-maximize { background: #27ca3f; }
+        
+        .terminal-title {
+            color: #666;
+            font-size: 12px;
+            margin-left: 10px;
+        }
+        
+        .terminal-body {
+            padding: 20px;
+            min-height: 70vh;
+        }
+        
+        .prompt {
+            color: #00ff41;
+            margin-bottom: 10px;
+        }
+        
+        .user {
+            color: #ff6b6b;
+        }
+        
+        .host {
+            color: #4ecdc4;
+        }
+        
+        .path {
+            color: #ffe66d;
+        }
+        
+        .ascii-art {
+            color: #00ff41;
+            font-size: 14px;
+            margin: 20px auto;
+            white-space: pre;
+            text-align: center;
+            line-height: 1.4;
+            border: 3px double #00ff41;
+            padding: 25px;
+            background: rgba(0, 255, 65, 0.05);
+            max-width: 500px;
+            font-weight: bold;
+        }
+        
+        .typewriter {
+            overflow: hidden;
+            border-right: 2px solid #00ff41;
+            white-space: nowrap;
+            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+        }
+        
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #00ff41 }
+        }
+        
+        .menu {
+            margin: 30px 0;
+        }
+        
+        .menu-item {
+            display: block;
+            color: #00ff41;
+            text-decoration: none;
+            padding: 8px 0;
+            border-left: 3px solid transparent;
+            transition: all 0.3s ease;
+            margin: 5px 0;
+        }
+        
+        .menu-item:hover {
+            color: #fff;
+            border-left-color: #00ff41;
+            background: rgba(0, 255, 65, 0.1);
+            padding-left: 10px;
+        }
+        
+        .menu-item::before {
+            content: "$ ";
+            color: #666;
+        }
+        
+        .content-section {
+            display: none;
+            margin: 20px 0;
+            border: 1px solid #333;
+            border-radius: 4px;
+            background: rgba(0, 255, 65, 0.05);
+        }
+        
+        .content-section.active {
+            display: block;
+            animation: fadeIn 0.5s ease-in;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .content-header {
+            background: #1a1a1a;
+            padding: 10px 15px;
+            border-bottom: 1px solid #333;
+            color: #4ecdc4;
+            font-weight: bold;
+        }
+        
+        .content-body {
+            padding: 15px;
+        }
+        
+        .link-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 15px;
+            margin: 15px 0;
+        }
+        
+        .link-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 12px;
+            background: rgba(0, 255, 65, 0.1);
+            border: 1px solid #333;
+            border-radius: 4px;
+            color: #00ff41;
+            text-decoration: none;
+            transition: all 0.3s ease;
+        }
+        
+        .link-item:hover {
+            background: rgba(0, 255, 65, 0.2);
+            border-color: #00ff41;
+            transform: translateX(5px);
+        }
+        
+        .icon {
+            font-size: 16px;
+            width: 20px;
+            text-align: center;
+        }
+        
+        .status-bar {
+            background: #1a1a1a;
+            padding: 8px 15px;
+            border-top: 1px solid #333;
+            font-size: 12px;
+            color: #666;
+            display: flex;
+            justify-content: space-between;
+        }
+        
+        .matrix-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.1;
+        }
+        
+        .glitch {
+            animation: glitch 2s infinite;
+        }
+        
+        @keyframes glitch {
+            0%, 100% { transform: translate(0); }
+            20% { transform: translate(-1px, 1px); }
+            40% { transform: translate(-1px, -1px); }
+            60% { transform: translate(1px, 1px); }
+            80% { transform: translate(1px, -1px); }
+        }
+        
+        .footer {
+            text-align: center;
+            padding: 20px;
+            border-top: 1px solid #333;
+            color: #666;
+            font-size: 12px;
+        }
+        
+        .footer a {
+            color: #00ff41;
+            text-decoration: none;
+        }
+        
+        .footer a:hover {
+            text-decoration: underline;
+        }
+        
+        @media (max-width: 768px) {
+            .terminal {
+                margin: 10px;
+                border-radius: 0;
+            }
+            
+            .terminal-body {
+                padding: 15px;
+            }
+            
+            .ascii-art {
+                font-size: 8px;
+            }
+            
+            .link-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
 </head>
 <body>
-    <header>
-        <h1>Zdenek Kreml</h1>
-        <img src="profilovka/archos.jpg" alt="Můj obrázek">
-        <h2>O mně</h2>
-    </header>
+    <canvas class="matrix-bg" id="matrix"></canvas>
     
-    <div class="centered-text">
-        <p>Jsem členem komunity <a href="https://arch-linux.cz" target="_blank">Arch Linux CZ</a> a nadšeným podporovatelem open source. I když se zajímám o Arch Linux, servery, které spravuji, běží na Ubuntu a Debianu. Mám zkušenosti s hostováním a správou různých komunitních platforem a open source aplikací.</p>
-        <p>Moje záliba v technologiích sahá od operačních systémů jako Arch Linux až po bezpečnostně orientované mobilní platformy jako GrapheneOS.</p>
-        <p>Jako <strong>Open Source Nadšenec</strong>, věřím v sílu otevřeného softwaru a jsem aktivním přispěvatelem do jeho komunity.</p>
-    </div>
-    
-    <main class="flex-container">
-        <a href="#" class="flex-item" onclick="showContent('social')">Sociální sítě</a>
-        <a href="#" class="flex-item" onclick="showContent('opensource')">Open Source</a>
-        <a href="#" class="flex-item" onclick="showContent('contact')">Kontakt</a>
-        <a href="#" class="flex-item" onclick="showContent('projects')">Mé projekty</a>
-    </main>
-    
-    <div id="dynamic-content"></div>
-    
-    <footer>
-    <p>
-        <a href="/" class="name-link" style="text-decoration: none; color: inherit;">&copy; 2024 Zdenek Kreml</a> 
-        | <a href="https://git.arch-linux.cz/Archos/web_zkreml" target="_blank"><i class="fab fa-git-alt"></i> Gitea</a>
-    </p>
-    </footer>
+    <div class="terminal">
+        <div class="terminal-header">
+            <div class="terminal-buttons">
+                <div class="btn btn-close"></div>
+                <div class="btn btn-minimize"></div>
+                <div class="btn btn-maximize"></div>
+            </div>
+            <div class="terminal-title">zkreml@arch:~</div>
+        </div>
+        
+        <div class="terminal-body">
+            <div class="prompt">
+                <span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~</span>$
+            </div>
+            
+            <div class="ascii-art">
+ZDENEK KREML
+~ System Administrator ~
 
-    <script src="skripty.js"></script>
+[***] Arch Linux Enthusiast
+[***] Open Source Contributor  
+[***] Community Server Admin
+            </div>
+            
+            <div class="typewriter glitch">
+                > Arch Linux enthusiast | Open Source contributor | System administrator
+            </div>
+            
+            <div style="margin: 30px 0;">
+                <div class="prompt">
+                    <span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~</span>$ whoami
+                </div>
+                <p style="margin: 10px 0; color: #4ecdc4;">
+                    Jsem členem komunity Arch Linux CZ a nadšeným podporovatelem open source.<br>
+                    Spravuji servery na Ubuntu/Debianu a hostuju různé komunitní platformy.<br>
+                    Zajímám se o bezpečnost, decentralizaci a GrapheneOS.
+                </p>
+            </div>
+            
+            <div class="prompt">
+                <span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~</span>$ ls -la /home/zkreml/
+            </div>
+            
+            <div class="menu">
+                <a href="#" class="menu-item" data-section="social">social_networks/</a>
+                <a href="#" class="menu-item" data-section="opensource">open_source/</a>
+                <a href="#" class="menu-item" data-section="projects">projects/</a>
+                <a href="#" class="menu-item" data-section="contact">contact/</a>
+            </div>
+            
+            <div id="social" class="content-section">
+                <div class="content-header">
+                    <span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~/social_networks</span>$ cat social.txt
+                </div>
+                <div class="content-body">
+                    <div class="link-grid">
+                        <a href="https://mastodon.arch-linux.cz/@archos" class="link-item">
+                            <span class="icon">🐘</span>
+                            <span>Mastodon</span>
+                        </a>
+                        <a href="https://pixelfed.cz/i/web/profile/441194050239729665" class="link-item">
+                            <span class="icon">📷</span>
+                            <span>Pixelfed</span>
+                        </a>
+                        <a href="https://twitter.com/archos_linux" class="link-item">
+                            <span class="icon">🐦</span>
+                            <span>Twitter</span>
+                        </a>
+                        <a href="https://www.facebook.com/zdendys75/" class="link-item">
+                            <span class="icon">📘</span>
+                            <span>Facebook</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            
+            <div id="opensource" class="content-section">
+                <div class="content-header">
+                    <span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~/open_source</span>$ cat README.md
+                </div>
+                <div class="content-body">
+                    <div class="link-grid">
+                        <a href="https://git.arch-linux.cz/Archos" class="link-item">
+                            <span class="icon">🌿</span>
+                            <span>Gitea Repository</span>
+                        </a>
+                        <a href="https://arch-linux.cz" class="link-item">
+                            <span class="icon">🐧</span>
+                            <span>Arch Linux CZ</span>
+                        </a>
+                        <a href="https://keyoxide.org/EBAB6510473A1F1C34AEC4C0FA7A7D45E7FC2AB1" class="link-item">
+                            <span class="icon">🔐</span>
+                            <span>Keyoxide Profile</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            
+            <div id="projects" class="content-section">
+                <div class="content-header">
+                    <span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~/projects</span>$ ls -la
+                </div>
+                <div class="content-body">
+                    <div class="link-grid">
+                        <a href="https://finance.oscloud.cz/" class="link-item">
+                            <span class="icon">📊</span>
+                            <span>Finance OSCloud</span>
+                        </a>
+                        <a href="https://web.mxchat.cz" class="link-item">
+                            <span class="icon">💬</span>
+                            <span>MXChat Community</span>
+                        </a>
+                        <a href="https://mamutovo.cz" class="link-item">
+                            <span class="icon">🐘</span>
+                            <span>Mamutovo Instance</span>
+                        </a>
+                        <a href="https://vhsky.cz" class="link-item">
+                            <span class="icon">📹</span>
+                            <span>PeerTube Channel</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            
+            <div id="contact" class="content-section">
+                <div class="content-header">
+                    <span class="user">zkreml</span>@<span class="host">arch</span>:<span class="path">~/contact</span>$ cat contact.txt
+                </div>
+                <div class="content-body">
+                    <div class="link-grid">
+                        <a href="https://matrix.to/#/@archos:mxchat.cz" class="link-item">
+                            <span class="icon">💬</span>
+                            <span>Matrix Chat</span>
+                        </a>
+                        <a href="mailto:email@zkreml.cz" class="link-item">
+                            <span class="icon">✉️</span>
+                            <span>Email</span>
+                        </a>
+                        <a href="xmpp:archos@arch-linux.cz" class="link-item" title="XMPP: archos@arch-linux.cz">
+                            <span class="icon">💭</span>
+                            <span>XMPP</span>
+                        </a>
+                        <a href="https://keys.openpgp.org/vks/v1/by-fingerprint/EBAB6510473A1F1C34AEC4C0FA7A7D45E7FC2AB1" class="link-item">
+                            <span class="icon">🔑</span>
+                            <span>GPG Key</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="status-bar">
+            <span>Connected to mxchat.cz</span>
+            <span id="status-time"></span>
+        </div>
+        
+        <div class="footer">
+            <p>
+                <a href="/">&copy; 2024 Zdenek Kreml</a> 
+                | <a href="https://git.arch-linux.cz/Archos/web_zkreml">Source Code</a>
+                | Built with ❤️ and Terminal love
+            </p>
+        </div>
+    </div>
+
+    <script>
+        // Matrix rain effect
+        const canvas = document.getElementById('matrix');
+        const ctx = canvas.getContext('2d');
+        
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        
+        const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
+        const charArray = chars.split('');
+        
+        const fontSize = 14;
+        const columns = canvas.width / fontSize;
+        
+        const drops = [];
+        for (let x = 0; x < columns; x++) {
+            drops[x] = 1;
+        }
+        
+        function drawMatrix() {
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            ctx.fillStyle = '#00ff41';
+            ctx.font = fontSize + 'px monospace';
+            
+            for (let i = 0; i < drops.length; i++) {
+                const text = charArray[Math.floor(Math.random() * charArray.length)];
+                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+                
+                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                    drops[i] = 0;
+                }
+                drops[i]++;
+            }
+        }
+        
+        setInterval(drawMatrix, 50);
+        
+        // Menu functionality
+        const menuItems = document.querySelectorAll('.menu-item');
+        const contentSections = document.querySelectorAll('.content-section');
+        
+        menuItems.forEach(item => {
+            item.addEventListener('click', (e) => {
+                e.preventDefault();
+                
+                // Hide all sections
+                contentSections.forEach(section => {
+                    section.classList.remove('active');
+                });
+                
+                // Show selected section
+                const targetSection = document.getElementById(item.dataset.section);
+                if (targetSection) {
+                    targetSection.classList.add('active');
+                }
+            });
+        });
+        
+        // Status bar clock
+        function updateTime() {
+            const now = new Date();
+            const timeString = now.toLocaleTimeString('cs-CZ');
+            document.getElementById('status-time').textContent = timeString;
+        }
+        
+        updateTime();
+        setInterval(updateTime, 1000);
+        
+        // Resize canvas on window resize
+        window.addEventListener('resize', () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        });
+        
+        // Typing sound effect (optional)
+        document.addEventListener('keydown', () => {
+            // Could add terminal typing sounds here
+        });
+    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
