-
Notifications
You must be signed in to change notification settings - Fork 0
/
portject-ff.html
132 lines (126 loc) · 5.87 KB
/
portject-ff.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Final Fantasy VII Project</title>
<meta name="description" content="Hi, My Name is Brendon O'Neill. I am Front-end developer and Graphic Designer, I'm passionate
about improving my development and design skills as well as teaching people about Web
Development / Programming.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="header-project-ff7 header-project">
<nav class="projects-nav">
<div class="nav-project-home">
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</div>
<div class="nav-logo-container">
<a href="index.html"><img height="564" width="494" src="./images/webp/logo.webp" alt="website logo"></a>
</div>
<div class="nav-darkmode-container">
<button class="dark-mode-button" aria-label="dark mode toggle">
<span class="dark-mode-toggle toggle-dark">
<img class="image-toggle" src="images/moon.svg" alt="dakrmode indicator" width="15" height="15">
</span>
</button>
</div>
</nav>
</header>
<main class="projects-container">
<div class="hero-links">
<ul>
<li><a href="https://www.linkedin.com/in/brendon-o-neill/" aria-label="Visit my LinkedIn"
target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li><a href="https://github.com/BrendonONeill" target="_blank" aria-label="Visit mu GitHub"> <i
class="fab fa-github"></i>
</a></li>
<li><a href="cv/Brendon-O-Neill-02-10-2023.pdf" aria-label="Download my CV"> <i class="fas fa-file"></i>
</a></li>
</ul>
</div>
<div class="projects-buttons-container">
<h1>Final Fantasy VII Website</h1>
<ul>
<li><a href="project-gamer-data.html">1</a></li>
<li><a href="project-kanji.html">2</a></li>
<li><a href="project-bugtracking.html">3</a></li>
<li><a href="project-animi.html">4</a></li>
<li><a href="project-portfolio.html">5</a></li>
<li class="button-padding-active">6</li>
<li><a href="project-ui-gallery.html">7</a></li>
</ul>
</div>
<div class="live-buttons">
<a href="https://github.com/BrendonONeill/Final-Fantasy-VII-Website" target="_blank"
class="btn btn-github"><i class="fab fa-github"></i> GitHub</a>
<a href="https://brendononeill.github.io/Final-Fantasy-VII-Website/main.html" target="_blank"
class="btn btn-live"><i class="fas fa-eye"></i> Live Preview</a>
</div>
<div class="project-sections">
<h2>Description</h2>
<p>This is a site I created to test out my website layout using flexbox and css grid without a framework
support and custom css. The
style of the website is based on Final Fantasy 7 from the ps1 I wanted to mimic the style of the UI
in the game it is a basic site that is similar to the menu UI and manual that use to come with ps1
games.</p>
</div>
<div class="project-sections">
<h2>Software / Languages</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
</ul>
</div>
<div class="project-sections">
<h2>Lessons Learned</h2>
<p>Better understanding of grid and flexbox</p>
</div>
<div class="project-sections">
<h2>Future features</h2>
<p>To flesh out the website a bit more with a few more animations to bring the site more to life</p>
</div>
<div class="project-sections">
<h2>Deployment</h2>
<p>Deployed on GitHub Pages</p>
</div>
<div class="project-sections">
<h2>Working On / Research</h2>
<p>Clean up UI</p>
</div>
</main>
<footer>
<div class="footer-section">
<p class="footer-list-heading">Projects</p>
<ul>
<li> <a href="project-gamer-data.html">Gamer-Data</a></li>
<li> <a href="project-kanji.html">Kanji Study</a></li>
<li> <a href="project-bugtracking.html">Bug Tracking App</a> </li>
<li> <a href="project-animi.html">Animi-Data</a></li>
<li> <a href="project-portfolio.html">Portfolio</a></li>
<li><a href="portject-ff.html">Final Fantasy VII Website</a></li>
<li><a href="project-ui-gallery.html">UI-Gallery</a></li>
</ul>
</div>
<div class="footer-section">
<ul class="social">
<li><a href="https://www.linkedin.com/in/brendon-o-neill/" target="_blank"> <i
class="fab fa-linkedin"></i> LinkedIn</a></li>
<li> <a href="https://github.com/BrendonONeill" target="_blank"> <i class="fab fa-github"></i>
GitHub</a> </li>
<li> <a href="cv/Brendon-O-Neill-02-10-2023.pdf" download> <i class="fas fa-file"></i> CV</a> </li>
</ul>
</div>
<div class="footer-section footer-name">
<p>Brendon O'Neill 2024</p>
</div>
</footer>
<script src="js/indexAnimation.js" async defer></script>
</body>
</html>