<header>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Projects</a></li>
        </ul>
    </nav>
</header>

<section id="home" class="hero" style="display: flex; flex-direction: column; justify-content: space-between; height: 100vh;">
    <div class="hero-content">
        <img src="images/pic.png" alt="Yanelisa Komanisi - Software Developer">
        <h1>Hi there!</h1>
        <p>I am <span class="highlight">Yanelisa Komanisi</span></p>
        <h2>a Software Developer</h2>
        <a href="c:\Users\Yanelisa.Komanisi\Documents\Yanelisa Komanisi CV.docx" target="_blank" rel="noopener noreferrer">
            <button>Download CV</button>
          </a>
        <p>Welcome to my portfolio!</p>
    </div>
    <div class="info">
        <p>Connect with me on..</p>
        <div class="social-links">
            <a href="https://www.linkedin.com/in/komanisi-yanelisa-5a1623317/" target="_blank" rel="noopener noreferrer">
                <i class="fab fa-linkedin"></i>
            </a>
            <a href="https://github.com/YanelisaKomanisi/YanelisaK" target="_blank" rel="noopener noreferrer">
                <i class="fab fa-github"></i>
            </a>
            <a href="mailto:komanisiyanelisa@gmail.com" target="_blank" rel="noopener noreferrer">
                <i class="fas fa-envelope"></i>
            </a>
        </div>
    </div>
    
</section>


<section id="about" class="about">
    <h2>About Me</h2>
    <div class="about-content">
        <p>I'm a detail-oriented software developer passionate about writing clean, efficient code. With over 6 months of experience, I focus on both Front-end and Back-end development. I'm skilled in HTML, CSS, JavaScript, Node.js, React.js, and Python.</p>
        <p>Outside of coding, I enjoy traveling, sports, reading, and writing. These activities not only recharge my creative energies but also provide me with fresh perspectives that I bring into my development projects.</p>
        <p>My goal is to continue growing as a software developer, making a positive impact through technology and creativity.</p>
    </div>
</section>

<section id="skills" class="skills">
    <h2>Skills</h2>
    <div class="skills-list">
        <div class="technical-skills">
            <h3>Technical Skills</h3>
            <ul>
                <li><i class="fab fa-html5" style="color: #E44D26;"></i> HTML/CSS</li>
                <li><i class="fab fa-js" style="color: #F0DB4F;"></i> JavaScript</li>
                <li><i class="fab fa-python" style="color: #3776AB;"></i> Python</li>
                <li><i class="fab fa-node" style="color: #83CD29;"></i> Node.js</li>
                <li><i class="fab fa-react" style="color: #61DAFB;"></i> React.js</li>
            </ul>
        </div>
        <div class="soft-skills">
            <h3>Soft Skills</h3>
            <ul>
                <li><i class="fas fa-comments" style="color: #6C757D;"></i> Communication</li>
                <li><i class="fas fa-lightbulb" style="color: #FFD700;"></i> Problem-solving</li>
                <li><i class="fas fa-users" style="color: #007BFF;"></i> Team Collaboration</li>
                <li><i class="fas fa-handshake" style="color: #28A745;"></i> Adaptability</li>
                <li><i class="fas fa-brain" style="color: #6610f2;"></i> Critical Thinking</li>
            </ul>
        </div>
        
        
    </div>
</section>

<section id="services" class="services">
    <h1>Services</h1>
    <div class="service-items">
        <div class="service-item">
            <h2>.</h2>
            <p>I'm an intern learning programming and web design. I'm focusing on creating easy-to-use and nice-looking websites. I'm starting with the basics, making sure websites are simple to navigate and look good. I'm here to help with designing straightforward websites that people find easy to use and like how they look.</p>
            
        </div>
        <div class="service-item">
            <h3>.</h3>
            <p>I'm learning web development right now. I'm focusing on the basics of HTML, CSS, JavaScript, and Python. I can help with creating simple web pages that look good and adding basic interactive features. </p>
        </div>
    </div>
</section>

<section id="portfolio" class="portfolio">
    <div class="container">
        <h2>Projects</h2>
        <div class="portfolio-items">
            <div class="portfolio-item">
                <div class="project-info">
                    <h2>Transportation Company</h2>
                    <p>Collaborated with a transportation company to develop digital solutions optimizing logistics and operational efficiency.</p>
                    <a href="https://transportationfares.netlify.app/" target="_blank" rel="noopener noreferrer">
                        <i class="fas fa-rocket"></i> View Project
                    </a>
                </div>
            </div>
            <div class="portfolio-item">
                <div class="project-info">
                    <h3>Banking App</h3>
                    <p>I had the opportunity to lead the development of a comprehensive banking application designed to enhance financial management and user experience.</p>
                    <a href="https://capeitinitiative.sharepoint.com/:u:/s/BSG2_SoftDev_CPT_2024-Group3/EapFFdypBahAo1I8M1uXGikBhY2wthCCreTvBCNiMuDamQ?e=DuQXsk" target="_blank" rel="noopener noreferrer">
                        <i class="fas fa-landmark"></i> View Project
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="social-links">
        <a href="https://www.linkedin.com/in/komanisi-yanelisa-5a1623317/" target="_blank" rel="noopener noreferrer">
            <i class="fab fa-linkedin"></i>
        </a>
        <a href="https://github.com/YanelisaKomanisi/YanelisaK" target="_blank" rel="noopener noreferrer">
            <i class="fab fa-github"></i>
        </a>
        <a href="mailto:komanisiyanelisa@gmail.com" target="_blank" rel="noopener noreferrer">
            <i class="fas fa-envelope"></i>
        </a>
    </div>
    <p>&copy; 2024 Yanelisa Komanisi. All rights reserved.</p>
</footer>