273 lines
11 KiB
HTML
273 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
<title>iPortfolio Bootstrap Template - Index</title>
|
|
<meta content="" name="description">
|
|
<meta content="" name="keywords">
|
|
|
|
<!-- Favicons -->
|
|
<link href="assets/img/favicon.png" rel="icon">
|
|
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
|
|
|
|
<!-- Vendor CSS Files -->
|
|
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
|
|
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
|
|
|
|
<!-- Template Main CSS File -->
|
|
<link href="assets/css/style.css" rel="stylesheet">
|
|
|
|
<!-- =======================================================
|
|
* Template Name: iPortfolio - v3.10.0
|
|
* Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
|
|
* Author: BootstrapMade.com
|
|
* License: https://bootstrapmade.com/license/
|
|
======================================================== -->
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ======= Mobile nav toggle button ======= -->
|
|
<i class="bi bi-list mobile-nav-toggle d-xl-none"></i>
|
|
|
|
<!-- ======= Header ======= -->
|
|
<header id="header">
|
|
<div class="d-flex flex-column">
|
|
|
|
<div class="profile">
|
|
<img src="https://images.unsplash.com/photo-1512486130939-2c4f79935e4f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="" class="img-fluid rounded-circle">
|
|
<h1 class="text-light"><a href="index.html">xxx 果沒致</a></h1>
|
|
<div class="social-links mt-3 text-center">
|
|
<a href="#" class="twitter">
|
|
<i class="bx bxl-twitter"></i>
|
|
</a>
|
|
<a href="#" class="facebook">
|
|
<i class="bx bxl-facebook"></i>
|
|
</a>
|
|
<a href="#" class="instagram">
|
|
<i class="bx bxl-instagram"></i>
|
|
</a>
|
|
<a href="#" class="google-plus">
|
|
<i class="bx bxl-skype"></i>
|
|
</a>
|
|
<a href="#" class="linkedin">
|
|
<i class="bx bxl-linkedin"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<nav id="navbar" class="nav-menu navbar">
|
|
<ul>
|
|
<li>
|
|
<a href="#hero" class="nav-link scrollto active"><i class="bx bx-home"></i>
|
|
<span>Home</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i>
|
|
<span>About</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#game-of-life" class="nav-link scrollto"><i class="bx bx-file-blank"></i>
|
|
<span>about game of life</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/game" class="nav-link scrollto"><i class="bx bx-file-blank"></i>
|
|
<span>Game of Life</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav><!-- .nav-menu -->
|
|
</div>
|
|
</header><!-- End Header -->
|
|
|
|
<!-- ======= Hero Section ======= -->
|
|
<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
|
|
<div class="hero-container" data-aos="fade-in">
|
|
<h1>self introduction 問水法</h1>
|
|
<p>I'm <span class="typed" data-typed-items="
|
|
helloworld1,
|
|
你 好 嗎,
|
|
真係非常多謝,
|
|
thank you very much,
|
|
どうもありがとうございます,
|
|
非常感謝您
|
|
"></span></p>
|
|
</div>
|
|
</section><!-- End Hero -->
|
|
|
|
<main id="main">
|
|
|
|
<!-- ======= About Section ======= -->
|
|
<section id="about" class="about">
|
|
<div class="container">
|
|
|
|
<div class="section-title">
|
|
<h2>About Me</h2>
|
|
<p>Magnam dolores commodi suscipit. </p>
|
|
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem.</p>
|
|
<p>Sit sint consectetur velit. Quisquam quos quisquam cupiditate.</p>
|
|
<p>Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
|
|
<p>
|
|
待進變果沒致友環健問水法代人苦天。
|
|
業立臺四即文善公作有往，等怕準命小電個。
|
|
査今聞光洋後化外財強主職。
|
|
</p>
|
|
<p>
|
|
待進變果沒致友環健問水法代人苦天。
|
|
業立臺四即文善公作有往，等怕準命小電個。
|
|
査今聞光洋後化外財強主職。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4" data-aos="fade-right">
|
|
<img src="assets/img/profile-img.jpg" class="img-fluid" alt="">
|
|
</div>
|
|
<div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
|
|
<h3>UI/UX Designer & Web Developer. 健問水法代</h3>
|
|
<p class="fst-italic">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua.
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<ul>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>Birthday:</strong> <span>1 May 1995</span></li>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>Website:</strong> <span>www.example.com</span></li>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>Phone:</strong> <span>+123 456 7890</span></li>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>City:</strong> <span>New York, USA</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<ul>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>30</span></li>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>Master</span></li>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>PhEmailone:</strong> <span>email@example.com</span></li>
|
|
<li><i class="bi bi-chevron-right"></i> <strong>Freelance:</strong> <span>Available</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis.
|
|
Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia repellendus itaque neque. Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa magni laudantium dolores.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section><!-- End About Section -->
|
|
|
|
<!-- ======= game-of-life Section ======= -->
|
|
<section id="game-of-life" class="resume">
|
|
<div class="container">
|
|
|
|
<div class="section-title">
|
|
<h2>Introduction to Game of Life</h2>
|
|
|
|
<div style="padding: 1rem 0">
|
|
<p style="padding: 1rem 0; font-weight: 800">
|
|
Conway's Game of Life</p>
|
|
<p>Conway's game of life is a zero-player game that is created by the English Computer Scientist and Mathematician John Horton Conway. </p>
|
|
<p>
|
|
It is very typical programming problem because of the simplicity, beauty and inherent complexity of this problem.</p>
|
|
|
|
</div>
|
|
<div>
|
|
<p style="padding: 1rem 0; font-weight: 800">
|
|
Here are the rules of Game of life:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>If a box has life and it has less than 2 neighbors. It dies of loneliness. The box becomes lifeless next generation.</li>
|
|
<li>If a box has life and it has more than 3 neighbors. It dies of overpopulation. The box becomes lifeless next generation.</li>
|
|
<li>If a box has life and it has 2 to 3 neighbors. Nothing changes for this box.</li>
|
|
<li>If a box has no life and it has 3 neighbors, the box in next generation fills with life because of reproduction.</li>
|
|
<li>It seems pretty simple rule. But it gives unexpectedly complex behavior.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-title">
|
|
<h2>About Game of Life Enhanced</h2>
|
|
|
|
<div style="padding: 1rem 0">
|
|
<p>Now that you have finished our code along. </p>
|
|
<p>It is time for you to unleash your creativity to continue on this project.</p>
|
|
|
|
<p style="padding: 1rem 0; font-weight: 800">Here are some of the topics that you need to work on:</p>
|
|
<ul>
|
|
<li>Landing Page for your Game of Life project. It should be a different html file from the Game of life page.</li>
|
|
<li>A simple page to introduce yourself</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div>
|
|
<p style="padding: 1rem 0; font-weight: 800">
|
|
Here are some of the topics that you should attempt to work on:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>Control speed of the Game of Life. (Checkout framerate, you can use slider to control the framerate )</li>
|
|
<li>Allow users to change the rules of survival.</li>
|
|
<li>Allow users to change the rules of reproduction.</li>
|
|
<li>Start/Stop the Game of life</li>
|
|
<li>Multiple colors of life on the same board.</li>
|
|
<li>Darken colors for stable life.</li>
|
|
<li>Random initial states</li>
|
|
<li>Well-known patterns of Game of Life to select from (Examples: Gosper Glider Gun, Glider, Lightweight train).</li>
|
|
<li>Use Keyboard to control the cursor to place the life</li>
|
|
<li>Resize board on windows resize (Check out windowsResized)</li>
|
|
<li>Switching between different styles.</li>
|
|
<li>Anything else that you could think of.</li>
|
|
<li>Let's build your own 2-D lives!</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</section><!-- End game-of-life Section -->
|
|
|
|
</main><!-- End #main -->
|
|
|
|
<!-- ======= Footer ======= -->
|
|
<footer id="footer">
|
|
<div class="container">
|
|
|
|
</div>
|
|
</footer><!-- End Footer -->
|
|
|
|
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
|
|
|
|
<!-- Vendor JS Files -->
|
|
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
|
|
<script src="assets/vendor/aos/aos.js"></script>
|
|
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
|
|
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
|
|
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
|
|
<script src="assets/vendor/typed.js/typed.min.js"></script>
|
|
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
|
|
<script src="assets/vendor/php-email-form/validate.js"></script>
|
|
|
|
<!-- Template Main JS File -->
|
|
<script src="assets/js/main.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |