ferano.io-website/index-new.html

111 lines
4.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joseph Ferano</title>
<link rel="stylesheet" href="new.css" type="text/css">
<script src="main.js" defer></script>
</head>
<body>
<div class="container">
<header>
<h1 class="site-title">JOSEPH FERANO</h1>
<nav>
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#work">WORK</a></li>
<li><a href="#resume">RESUME</a></li>
<li><a href="#experiments">EXPERIMENTS</a></li>
<li><a href="#thoughts">THOUGHTS</a></li>
</ul>
</nav>
<div class="divider"></div>
</header>
<section class="hero">
<div class="hero-image">
<div class="slideshow" id="heroSlideshow">
<img src="./images/resized/slide-01_resized.jpg" alt="Slideshow image 1">
<img src="./images/resized/slide-02_resized.jpg" alt="Slideshow image 2">
<img src="./images/resized/slide-03_resized.jpg" alt="Slideshow image 3">
</div>
</div>
<div class="hero-content">
<h2>Versatile Software Engineer &amp; Game Programmer</h2>
<p>Building engaging experiences and robust systems across gaming,
graphics, blockchain, and web technologies. Multilingual programmer
with a diverse technical toolkit for solving complex problems.</p>
</div>
</section>
<section id="work" class="portfolio-section">
<h2 class="section-title">FEATURED GAMES</h2>
<div class="projects-grid">
<div class="project-card">
<div class="project-image">
<img src="./thumbs/24.PNG" alt="Wargate Heroes">
</div>
<div class="project-info">
<h2>Wargate Heroes</h2>
<p class="project-description">Mobile Multiplayer Online Battle Arena (MOBA)</p>
<div class="project-tech">Unity, C#, uLink, Mobile</div>
<div class="project-links">
<a href="https://www.youtube.com/watch?v=kUcSleqOLCA" target="_blank" class="project-link">Trailer</a>
<a href="https://www.youtube.com/watch?v=RLPWUH4RKd8" target="_blank" class="project-link">Gameplay</a>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="./thumbs/12.PNG" alt="Jaws.io">
</div>
<div class="project-info">
<h2>Jaws.io</h2>
<p class="project-description">Online IO game where you play as the legendary shark!</p>
<div class="project-tech">Unity, C#, Photon, Mobile</div>
<div class="project-links">
<a href="https://www.youtube.com/watch?v=uWEXo278UmQ" target="_blank" class="project-link">Trailer</a>
<a href="https://www.youtube.com/watch?v=LGnM5aAwFHw" target="_blank" class="project-link">Gameplay</a>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="./thumbs/01.PNG" alt="BreachTD">
</div>
<div class="project-info">
<h2>BreachTD</h2>
<p class="project-description">Mobile Online Multiplayer Tower Defense</p>
<div class="project-tech">Unity, C#, uLink, Mobile</div>
<div class="project-links">
<a href="https://www.youtube.com/watch?v=8wfprDgj_1Y" target="_blank" class="project-link">Trailer</a>
<a href="https://www.youtube.com/watch?v=Tlk1mdh0Btc" target="_blank" class="project-link">Gameplay</a>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="./thumbs/27.PNG" alt="Startship Troopers: Mobile Invasion">
</div>
<div class="project-info">
<h2>Startship Troopers: Invasion Mobile Infantry</h2>
<p class="project-description">Cover shooter with runner mechanics and cinematics</p>
<div class="project-tech">Unity, C#, iOS</div>
<div class="project-links">
<a href="https://www.youtube.com/watch?v=ZPdTqhgWhaQ" target="_blank" class="project-link">Trailer</a>
<a href="https://www.youtube.com/watch?v=T5DXcvSaR-w" target="_blank" class="project-link">Gameplay</a>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>&copy; Joseph Ferano 2025</p>
</footer>
</div>
</body>
</html>