Files
Portfol/templates/index.html
T
2026-06-24 15:34:55 +08:00

210 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- link rel="icon" type="image/png" href="assets/img/ico.png" -->
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/ico.png') }}">
<!-- =====Bulma===== -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<!-- =====BOX ICONS===== -->
<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.css' rel='stylesheet'>
<title>My Portfolio</title>
</head>
<body>
<!-- ===== HEADER ===== -->
<header class="l-header">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<!-- logos -->
<div class="navbar-item logo">
<a><strong>My Portfolio</strong></a>
</div>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navBarMain">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navBarMain" class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
{% if logged_in %}
<div class="navbar-item">
<a href="/games" class="navbar-item has-text-black nav__link" onclick="hide_nav()"><strong>Games</strong></a>
</div>
<div class="navbar-item">
<a href="/logout" class="navbar-item has-text-black nav__link" onclick="hide_nav()"><strong>Logout</strong></a>
</div>
{% else %}
<div class="navbar-item">
<a href="/login" class="navbar-item has-text-black nav__link" onclick="hide_nav()"><strong>Login</strong></a>
</div>
{% endif %}
<div class="navbar-item">
<a href="#home" class="navbar-item has-text-black nav__link" onclick="hide_nav()"><strong>Home</strong></a>
</div><div class="navbar-item">
<a href="#about" class="navbar-item has-text-black nav__link" onclick="hide_nav()"><strong>About</strong></a>
</div><div class="navbar-item">
<a href="#skills" class="navbar-item has-text-black nav__link" onclick="hide_nav()"><strong>Skills</strong></a>
</div><div class="navbar-item">
<a href="#cert" class="navbar-item has-text-black nav__link" onclick="hide_nav()"><strong>Certifications</strong></a>
</div>
</div>
</div>
</nav>
</header>
<main class="l-main">
<!--===== HOME =====-->
<section class="section home" id="home">
<div class="container">
<div class="columns is-vcentered">
<div class="column is-6 home__data">
<h1 class="title is-1 has-text-black">
Hi, I'm<br>
<span class="has-text-link">Ace Lorenz Gallo</span>
</h1>
<h3 class="subtitle is-3">
Computer Engineering Student.
</h3>
<div class="buttons">
<a href="mailto:acelorenzgallo@gmail.com" class="button is-link is-large">
Email Me
</a>
</div>
</div>
<div class="column is-6 has-text-centered home__img">
<svg class="home__blob" viewBox="0 0 479 467" xmlns="http://www.w3.org/2000/svg" style="width: 100%; max-width: 450px;">
<mask id="mask0" mask-type="alpha">
<path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
</mask>
<g mask="url(#mask0)">
<path fill="#3273dc" d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
<image class="home__blob-img" x="35" y="70" href="{{ url_for('static', filename='img/profil2.jpg') }}" width="400" height="400" />
</g>
</svg>
</div>
</div>
</div>
</section>
<!--===== ABOUT =====-->
<section class="about section" id="about">
<h2 class="section-title has-text-link is-2 title">About</h2>
<div class="about__container bd-grid">
<div class="about__img">
<img src="{{ url_for('static', filename='img/about2.jpg') }}" alt="">
</div>
<div>
<h2 class="subtitle is-2 about__subtitle">Im Ace Lorenz Gallo, </h2>
<p class="about__text ">I am a Computer Engineering student with a strong passion for coding and problem-solving. I enjoy tackling complex challenges and continuously improving my skills, which has led me to win a coding competition. Im currently focused on expanding my knowledge in software development and exploring new technologies to grow as a developer. My goal is to become a successful software engineer, and I bring dedication, curiosity, and a driven mindset to every project I take on.</p>
</div>
</div>
</section>
<!--===== SKILLS =====-->
<section class="skills section" id="skills">
<h2 class="section-title has-text-link is-2 title">Skills</h2>
<div class="skills__container bd-grid">
<div>
<h2 class="skills__subtitle subtitle is-2">My Skills</h2>
<p class="skills__text">I work with a range of programming languages, with my strongest skills centered around problem-solving and coding.</p>
<div class="skills__data">
<div class="skills__names">
<span class="skills__name">C++</span>
</div>
<div class="skills__bar skills__cpp"></div>
<div>
<span class="skills__percentage">75%</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<span class="skills__name">C</span>
</div>
<div class="skills__bar skills__c"></div>
<div>
<span class="skills__percentage">70%</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<span class="skills__name">PYTHON</span>
</div>
<div class="skills__bar skills__python"></div>
<div>
<span class="skills__percentage">55%</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<span class="skills__name">ALGORITHMS</span>
</div>
<div class="skills__bar skills__algorithms"></div>
<div>
<span class="skills__percentage">72%</span>
</div>
</div>
</div>
<div>
<img src="{{ url_for('static', filename='img/github.png') }}" alt="" class="skills__img">
</div>
</div>
</section>
<!--===== WORK =====-->
<section class="work section" id="cert">
<h2 class="section-title has-text-link is-2 title">Certifications</h2>
<div class="work__container bd-grid">
<a href="{{ url_for('static', filename='img/imgcert/akunicert.jpg') }}" download="Akuni_Project_Certificate.jpg" class="work__img">
<img src="{{ url_for('static', filename='img/imgcert/akunicert.jpg') }}" alt="Akuni Project Certificate">
</a>
<a href="{{ url_for('static', filename='img/imgcert/htmlcert.jpg') }}" download="HTML_Essentials_Certificate.jpg" class="work__img">
<img src="{{ url_for('static', filename='img/imgcert/htmlcert.jpg') }}" alt="HTML Essentials Certificate">
</a>
<a href="{{ url_for('static', filename='img/imgcert/icpepcert.jpg') }}" download="ICPEP_Championship_Certificate.jpg" class="work__img">
<img src="{{ url_for('static', filename='img/imgcert/icpepcert.jpg') }}" alt="ICPEP Championship Certificate">
</a>
<a href="{{ url_for('static', filename='img/imgcert/icpepwebcert.jpg') }}" download="ICPEP_Webinar_Certificate.jpg" class="work__img">
<img src="{{ url_for('static', filename='img/imgcert/icpepwebcert.jpg') }}" alt="ICPEP Webinar Certificate">
</a>
<a href="{{ url_for('static', filename='img/imgcert/javacert.jpg') }}" download="JavaScript_Essentials_Certificate.jpg" class="work__img">
<img src="{{ url_for('static', filename='img/imgcert/javacert.jpg') }}" alt="JavaScript Essentials Certificate">
</a>
</div>
</section>
</main>
<!--===== FOOTER =====-->
<footer class="footer">
<p class="footer__title"> My Socials</p>
<div class="footer__social">
<a href="https://www.facebook.com/ExelentHA" target="_blank" class="footer__icon"><i class='bx bxl-facebook' ></i></a>
<a href="https://www.instagram.com/exelentha" target="_blank" class="footer__icon"><i class='bx bxl-instagram' ></i></a>
<a href="https://github.com/ExelentHA/" target="_blank" class="footer__icon"><i class='bx bxl-github'></i></a>
</div>
<p class="footer__copy">&#169; 2026 Ace Lorenz Gallo. All rights reserved.</p>
</footer>
<!--===== SCROLL REVEAL =====-->
<script src="https://unpkg.com/scrollreveal"></script>
<!--===== MAIN JS =====-->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>