Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <style> | |
| body{ | |
| margin: 0; | |
| font-family: Arial, Helvetica, sans-serif; | |
| background-color: black; | |
| color: white; | |
| } | |
| .navbar{ | |
| display: flex; | |
| justify-content: center; | |
| background-color: #1d1a1a; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .navbar a{ | |
| color: white; | |
| text-decoration: none; | |
| margin: 0 15px; | |
| font-size: 18px; | |
| padding: 8px 12px; | |
| border-radius: 4px; | |
| transition: all 0.3s ease; | |
| } | |
| .navbar a:hover{ | |
| background-color: #464444; | |
| } | |
| .navbar a.active{ | |
| color: #f7ca3e; | |
| font-weight: bold; | |
| } | |
| #item_container_narration-ablink{ | |
| background-color: #0a0a0a; | |
| margin: 3%; | |
| } | |
| #item_container_narration-explink{ | |
| background-color: #0a0a0a; | |
| margin: 3%;} | |
| #item_container_narration-portlink{ | |
| background-color: #0a0a0a; | |
| margin: 3%;} | |
| #item_container_narration-bllink{ | |
| background-color: #0a0a0a; | |
| margin: 3%;} | |
| #item_container_narration-contlink{ | |
| background-color: #0a0a0a; | |
| margin: 3%;} | |
| .border { | |
| border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1; | |
| border-width: 4px; | |
| border-style: solid; | |
| padding: 5px; | |
| margin: 10%; | |
| margin-top: 0; | |
| } | |
| .item{ | |
| background-color: #0c0c0c; | |
| border-image: linear-gradient(to right, #cabf23 0%, #b78be9 100%) 1; | |
| border-width: 4px; | |
| border-style: solid; | |
| padding: 5px; | |
| } | |
| </style> | |
| <div class="navbar"> | |
| <a id="item_container_narration-ablink" href="#About">About</a> | |
| <a id="item_container_narration-explink" href="#Experience">Experience</a> | |
| <a id="item_container_narration-portlink" href="#Portfolio">Portfolio</a> | |
| <a id="item_container_narration-bllink" href="#Blog">Blog</a> | |
| <a id="item_container_narration-contlink" href="#Contact">Contact</a> | |
| </div> | |
| <div id="About" class="border"> | |
| <h1>About Me</h1> | |
| <p> | |
| Hi, I'm Alex—a passionate programmer and cybersecurity enthusiast. I specialize in building innovative solutions, solving complex problems, and protecting systems from potential threats. With years of experience in coding and security analysis, I've developed a deep understanding of how technology shapes our world. | |
| </p> | |
| <p> | |
| I'm skilled in Python, C++, and AI development, focusing on creating smarter and safer systems. To me, every line of code is more than just instructions—it's a tool to drive progress and an art form to shape the future. | |
| </p> | |
| <p> | |
| I believe technology holds the power to transform lives, and I'm committed to using my skills to make a meaningful impact. Let's connect and explore new ideas together! 😊 | |
| </p> | |
| <h1>What I'm Doing</h1> | |
| <div class="item"> | |
| <h2>Web design</h2> | |
| <p> | |
| I'm currently working on a web design project that involves creating a responsive and user-friendly interface for. | |
| </p> | |
| <p> | |
| The most modern and high-quality design made at a professional level. | |
| </p> | |
| </div> | |
| <div class="item"> | |
| <h2>Web development</h2> | |
| <p> | |
| I'm currently working on a web development project that involves creating a responsive and user-friendly interface for. | |
| </p> | |
| <p> | |
| High-quality development of sites at the professional level. | |
| </p> | |
| </div> | |
| <div class="item"> | |
| <h2>Mobile Apps</h2> | |
| <p> | |
| I'm currently working on a mobile app project that involves creating a responsive and user-friendly interface for. | |
| </p> | |
| <p> | |
| Professional development of applications for iOS and Android. | |
| </p> | |
| </div> | |
| <div class="item"> | |
| <h2>Chat bot</h2> | |
| <p> | |
| I'm currently working on a chat bot project that involves creating a responsive and user-friendly interface for. | |
| </p> | |
| <p> | |
| Create a chat system bot based on previously provided knowledge (RAG) | |
| </p> | |
| </div> | |
| </div> | |
| <div id="Experience" class="border"> | |
| <h1>Experience</h1> | |
| <div class="item"> | |
| <h2>Education</h2> | |
| <p> | |
| I have a degree in Computer Science from a reputable university. | |
| </p> | |
| <p> | |
| I've also completed internships in cybersecurity and software development. | |
| </p> | |
| </div> | |
| <div class="item"> | |
| <h2>Work Experience</h2> | |
| <p> | |
| I've been working as a software engineer for a tech company. | |
| </p> | |
| <p> | |
| I've developed various software solutions, including web applications and AI systems. | |
| </p> | |
| </div> | |
| <div class="item"> | |
| <p> | |
| I've also worked on various personal projects, including a chatbot and a mobile app. | |
| </p> | |
| <p> | |
| I'm currently working on a web development project that involves creating a responsive and user-friendly interface for. | |
| </p> | |
| </div> | |
| </div> | |
| <div id="Portfolio" class="border"> | |
| <h1>Portfolio</h1> | |
| <div class="item"> | |
| <p> | |
| I've developed various software solutions, including web applications and AI systems. | |
| </p> | |
| <p> | |
| Here are some of my most recent projects: | |
| </p> | |
| </div> | |
| <div class="item"> | |
| <p> | |
| I've been working on a web development project that involves creating a responsive and user-friendly interface for. | |
| </p> | |
| <p> | |
| The most modern and high-quality design made at a professional level. | |
| </p> | |
| </div> | |
| </div> | |
| <div id="Blog" class="border"> | |
| <div class="item"> | |
| <p> | |
| I've also worked on various personal projects, including a chatbot and a mobile app. | |
| </p> | |
| <p> | |
| I'm currently working on a web development project that involves creating a responsive and user-friendly interface for. | |
| </p> | |
| </div> | |
| <div class="item"> | |
| <p> | |
| I've been working on a chat bot project that involves creating a responsive and user-friendly interface for. | |
| </p> | |
| <p> | |
| Create a chat system bot based on previously provided knowledge (RAG) | |
| </p> | |
| </div> | |
| </div> | |
| <div id="Contact" class="border"> | |
| <div class="item"> | |
| <p> | |
| I'm available for freelance work, web development, and cybersecurity projects. | |
| </p> | |
| <p> | |
| Let's connect and explore new ideas together! �� | |
| </p> | |
| </div> | |
| <div class="item"> | |
| <p> | |
| You can reach me at [your email address] or [your phone number]. | |
| </p> | |
| <p> | |
| I'm always looking for opportunities to make a meaningful impact. | |
| </p> | |
| </div> | |
| </div> | |
| <script> | |
| var About_link = document.getElementById('item_container_narration-ablink'); | |
| var Experience_link = document.getElementById('item_container_narration-explink'); | |
| var Portfolio_link = document.getElementById('item_container_narration-portlink'); | |
| var Blog_link = document.getElementById('item_container_narration-bllink') | |
| var Contact_link = document.getElementById('item_container_narration-contlink'); | |
| var About_responsive = document.getElementById('About'); | |
| var Experience_responsive = document.getElementById('Experience'); | |
| var Portfolio_responsive = document.getElementById('Portfolio'); | |
| var Blog_responsive = document.getElementById('Blog'); | |
| var Contact_responsive = document.getElementById('Contact'); | |
| About_link.addEventListener('click', function() { | |
| About_link.classList.add('active'); | |
| Experience_link.classList.remove('active'); | |
| Portfolio_link.classList.remove('active'); | |
| Blog_link.classList.remove('active'); | |
| Contact_link.classList.remove('active'); | |
| About_responsive.style.display = 'block'; | |
| Experience_responsive.style.display = 'none'; | |
| Portfolio_responsive.style.display = 'none'; | |
| Blog_responsive.style.display = 'none'; | |
| Contact_responsive.style.display = 'none'; | |
| }); | |
| Experience_link.addEventListener('click', function() { | |
| Experience_link.classList.add('active'); | |
| About_link.classList.remove('active'); | |
| Portfolio_link.classList.remove('active'); | |
| Blog_link.classList.remove('active'); | |
| Contact_link.classList.remove('active'); | |
| About_responsive.style.display = 'none'; | |
| Experience_responsive.style.display = 'block'; | |
| Portfolio_responsive.style.display = 'none'; | |
| Blog_responsive.style.display = 'none'; | |
| Contact_responsive.style.display = 'none'; | |
| }); | |
| Portfolio_link.addEventListener('click', function(){ | |
| Portfolio_link.classList.add('active'); | |
| About_link.classList.remove('active'); | |
| Experience_link.classList.remove('active'); | |
| Blog_link.classList.remove('active'); | |
| Contact_link.classList.remove('active'); | |
| About_responsive.style.display = 'none'; | |
| Experience_responsive.style.display = 'none'; | |
| Portfolio_responsive.style.display = 'block'; | |
| Blog_responsive.style.display = 'none'; | |
| Contact_responsive.style.display = 'none'; | |
| }); | |
| Blog_link.addEventListener('click', function() { | |
| Blog_link.classList.add('active'); | |
| About_link.classList.remove('active'); | |
| Experience_link.classList.remove('active'); | |
| Portfolio_link.classList.remove('active'); | |
| Contact_link.classList.remove('active'); | |
| About_responsive.style.display = 'none'; | |
| Experience_responsive.style.display = 'none'; | |
| Portfolio_responsive.style.display = 'none'; | |
| Blog_responsive.style.display = 'block'; | |
| Contact_responsive.style.display = 'none'; | |
| }); | |
| Contact_link.addEventListener('click', function() { | |
| Contact_link.classList.add('active'); | |
| About_link.classList.remove('active'); | |
| Experience_link.classList.remove('active'); | |
| Portfolio_link.classList.remove('active'); | |
| Blog_link.classList.remove('active'); | |
| About_responsive.style.display = 'none'; | |
| Experience_responsive.style.display = 'none'; | |
| Portfolio_responsive.style.display = 'none'; | |
| Blog_responsive.style.display = 'none'; | |
| Contact_responsive.style.display = 'block'; | |
| }); | |
| </script> | |
| </body> | |
| </html> |