-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (87 loc) · 4.86 KB
/
index.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
<!DOCTYPE HTML>
<html>
<head>
<title>Thùy's life</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="wot-verification" content="916aa9d07639e2e77043"/>
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/parallax.css">
<link rel="stylesheet" href="style/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<!-- Navbar (sit on top) -->
<nav class="top">
<section class="bar bg-black" id="navBar">
<a class="bar-item button hide-medium hide-large opennav float-right hover-txt-color" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i>
</a>
<a href="#home" class="bar-item button hover-txt-color"><i class="fa fa-home"></i> HOME</a>
<a href="#about" class="bar-item button hover-txt-color hide-small"><i class="fa fa-user"></i> ABOUT</a>
<a href="#contact" class="bar-item button hover-txt-color hide-small"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="https://thuynt13.github.io" class="bar-item button hover-txt-color hide-small"><i class="fa fa-file-text"></i> RESUME</a>
</section>
<!-- Navbar on small screens -->
<section id="navDemo" class="bar-block bg-white hide hide-large hide-medium">
<a href="#about" class="bar-item button hover-txt-color" onclick="toggleFunction()" title="About"><i class="fa fa-user"></i></a>
<a href="#contact" class="bar-item button hover-txt-color" onclick="toggleFunction()" title="Contact"><i class="fa fa-envelope"></i></a>
<a href="https://thuynt13.github.io" class="bar-item button hover-txt-color" onclick="toggleFunction()" title="Resume"><i class="fa fa-file-text"></i></a>
</section>
</nav>
<!-- 1st Parallax Image -->
<section class="bgimg-1 display-container opacity-min" id="home">
<div class="display-middle" style="white-space:nowrap;">
<span class="mq-txt-box center-txt padding-xlarge bg-black font-xlarge wide">BE<span class="hide-small">TWIXT AND BE</span><span class="hide-medium hide-large">-TWIXT/</span>TWEEN</span>
</div>
</section>
<!-- ABOUT -->
<section class="content container padding-64" id="about">
<h3 class="center-txt">LIMINALITY</h3>
<p>Negative spaces carve the contours of their positives, defining them. Liminal spaces, the threshhold in between, merges the distinctions to create a whole, binding negative to positive. For at the threshhold, the liminal is the transition from light into the dark. It's the journey that takes you from beginning to end where the potential for growth and creativity is at its greatest.</p>
<div class="row">
<div class="col m6 center-txt padding-large">
<p class="font-xlarge"><b>Thùy Ngô</b></p><br>
<img src="images/monkeyAvatar.jpg" class="image round opacity hover-opacity-off" alt="Me" width="500" height="333">
</div>
<!-- Hide this text on small devices -->
<div class="col m6 hide-small">
<div class="quote">
<p><i>I prefer to regard transition as a process, a becoming, and in the case of rites de passage even a transformation—here an apt analogy would be water in process of being heated to boiling point, or a pupa changing from grub to moth.</i></p>
<p>- Victor W. Turner <b>Betwixt and Between: The Liminal Period in <i>Rites de Passage</i></b></p>
</div>
</div>
</div>
</section>
<!-- 2nd Parallax Image with Portfolio Text -->
<section class="bgimg-2 display-container opacity-min">
<div class="display-middle">
<div class="p-quote">
<p><i>...but it's in this endless space between the words that I'm finding myself now.<span class="hide-small"> It's a place that's not of the physical world. It's where everything else is that I didn't even know existed.</span></i></p>
<p>- Samantha from "Her"</p>
</div>
</div>
</section>
<!-- CONTACT -->
<section class="content container padding-64" id="contact">
<div class="row padding-32 section">
<div class="col m6 container section padding-xlarge">
<h3 class="center-txt">Reach me here.</h3>
<div class="font-large margin-bottom">
<i class="fa fa-envelope fa-fw hover-text-black font-xlarge margin-right"></i> Email: thuy@thuy.life<br>
</div>
</div>
</div>
</section>
<footer class="center-txt bg-black padding-64 opacity">
<a href="#home" class="button"><i class="fa fa-arrow-up margin-right"></i>To the top</a>
<div class="font-xlarge section">
<a href="https://github.com/ThuyNT13"><i class="fa fa-github icons hover-icon-darkgray"></i></a>
<a href="https://www.linkedin.com/in/thuynt13"><i class="fa fa-linkedin icons hover-icon-darkgray"></i></a>
</div>
<p>Ⓒ Thùy Ngô</p>
</footer>
<script src="script/menuToggle.js"></script>
</body>
</html>