portfolio website <!doctype html>
<title>Home — PAPI</title> PAPI
🌙
Menu
<div class="dropdown">
- 📞 Contact Page
- ✉️ Email Us
- 📱 Call Us
</div>
</div>
</nav>
I build futuristic, accessible web experiences — focused on performance and delightful interactions.
<div class="hero-right" data-aos="fade-left">
<div class="card glass">
<h3>Featured</h3>
<p>Interactive Portfolio — network particles, AOS, typewriter, dark mode.</p>
<a class="small-link" href="projects.html">See projects →</a>
</div>
<div class="stats">
<div class="stat" data-aos="zoom-in" data-aos-delay="450">
<strong>Few </strong>
<span>Years Experience</span>
</div>
<div class="stat" data-aos="zoom-in" data-aos-delay="550">
<strong>30+</strong>
<span>Projects</span>
</div>
</div>
</div>
</section>
<section class="skills container" data-aos="fade-up">
<h3>Skills</h3>
<div class="skill-grid">
<div class="skill">HTML</div>
<div class="skill">CSS (Flexbox, Grid)</div>
<div class="skill">JavaScript</div>
<div class="skill">React</div>
<div class="skill">UX Design</div>
</div>
</section>
<!-- Graphic Designs Carousel -->
<div class="carousel-inner rounded-4 shadow-lg">
<div class="carousel-item active">
<img src="/IMAGES/advertisement flyer.jpg" class="d-block w-100" alt="Design 1">
</div>
<div class="carousel-item">
<img src="/IMAGES/El’s Luxe.jpg" class="d-block w-100" alt="Design 2">
</div>
<div class="carousel-item">
<img src="/IMAGES/Sista Adwoa’s Luxe Bags jpeg.jpg" class="d-block w-100" alt="Design 3">
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#designCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#designCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<!-- Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#designCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#designCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#designCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
<div class="projects-row">
<article class="project-card" data-aos="flip-left">
<img src="https://placehold.co/600x400?text=Project+1" alt="project 1" />
<h4>Melanin Hospital (Live)</h4>
<p>Healthcare landing site. Live demo available.</p>
<div class="project-links">
<a class="btn small" href="https://melanin-hosptal.netlify.app/" target="_blank" rel="noopener">Live Demo</a>
<a class="btn small btn-outline" href="#">View Code</a>
</div>
</article>
<article class="project-card" data-aos="flip-right">
<img src="https://placehold.co/600x400?text=Project+2" alt="project 2" />
<h4>Project Two</h4>
<p>Interactive UI concept.</p>
<div class="project-links">
<a class="btn small" href="#">Live Demo</a>
<a class="btn small btn-outline" href="#">View Code</a>
</div>
</article>
</div>
</section>
© PAPI — Built with ❤️
<div class="socials">
<a href="#">GitHub</a>
<a href="#">LinkedIn</a>
<a href="solopappy76@gmail.com">✉️ Email Us</a>
<a href="tel:+233541190485">📱 Call Us</a>
</div>