-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (116 loc) · 9.09 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" content="Photographer: Amy Chen, Seattle, Washington, Photography, Blog, Web Development, Application Developer, Length: 1 page" />
<meta name="robots" content="index,follow" />
<link rel="icon" href="./images/amy.jpg">
<title>Amy's Photography Home Page</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" media="(max-width: 550px)" href="css/style-maxwidth-550.css"/>
<link rel="stylesheet" media="(min-width: 551px) and (max-width: 991px)" href="css/style-maxwidth-991.css"/>
<style type="text/css">.no-fouc {display: none;}</style>
<script>document.documentElement.className = "no-fouc";</script>
</head>
<body ng-app="mainApp" ng-controller="amyController">
<section id="overLay"><br/></section>
<header class="me">
<h3>Amy's Bubble</h3>
<h4>This is my life</h4>
<div class="about-me-container">
<!--my bubble logo, I know it is lame-->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<ellipse cx="50%" cy="50%" rx="40%" ry="40%" fill-opacity='0.7' fill="#C2BAC0" stroke="#ecdada" stroke-opacity="0.5" stroke-width="1"/>
</svg>
<h5 data-toggle="modal" data-target="#myModal"> About me</h5>
</div>
</header>
<main class="container" id="main">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#photography" aria-controls="photography" role="tab" data-toggle="tab">My Photography</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div>
<img class="home-image-1" src="images/work-222x320_small_2x.jpg" alt="Black and White photography" />
Life happens. And, it did. An emotional roller coast at that.<br/>
My mom was diagnosed with cancer. I felt like I was being hit by a train. The thought of losing her - the center of my universe - was just shattering. I could not bring myself to imagine it. Needless to say, I was utterly devastated.<br/>
The tribulations of seeing her in pain and going through numerous rounds of chemo treatments took a toll on all of us and, in the process, changed me. I no longer believe that I am invincible.<br/>
Then, I lost something - something important. I was not prepared to deal with the aftermath. So I sunk into a rut. I did not know what to do with myself. In not so many words, I was simply lost. <br/>
In the midst of self-reflection, I turn to photography. Perhaps to find myself. Perhaps to live vicariously through my lens. Deep down, I think I am just ecstatic doing it. They say to make memories. And I am when I take photos. The thing I love about photos is that the captured moments last - unlike the ephemeral things in life that you hope can stay everlasting. <br/>
</div>
<div>
<img class="home-image-2" src="images/leaf.jpg" alt="Leaf in the park" />
And so I march on. Bringing my camera with me wherever I go. Whenever I can. Just so I can take photos. Before long, I start to see things. I notice things. I allow myself to take everything in. Seeing the extraordinary from the ordinary. Live in the moment as it has taught me. There are an abundance of things that just deserve savoring. Truly. Be it countries I have visited. Different people I have met. Cultures that I have encountered. Everything that surrounds me. There is an unspoken magic in them. As magical as the wonderland that lives in people's dreams - the territory that awaits explorations.<br/>It takes a pro to derive meanings from life. Admittedly, I am still an amateur with regards to that. I learn as I go. It is a journey that started long ago. I find that I am never at the destination. At the end, the answers that I search for may stay elusive. But at least, I can say that I have experienced as much as I possibly could.<br/>
My photography captures what I see. I hope that, by perusing through them, you will also come to feel what I feel. This is a world I created not just for myself. I want to share it with you.
<!--<img class="home-image-3" src="images/lantern.jpg" alt="Hope Lantern" />-->
</div>
</div>
<div role="tabpanel" class="tab-pane" id="photography">
<!-- <section class="row"><div class="homelink col-md-12 text-left"><span data-toggle="tooltip" data-placement="right" title="see my homecity" onclick="showHome()">🏡</span></section> -->
<!--- hide this section for now, activated by the home link -->
<!-- <section class="row home">
<figure class="col-md-12" ng-repeat="item in data.images | filter: 'mainRow'">
<picture>
<source ng-repeat="source in item.source" srcset="{{source.srcset}}" media="{{source.media}}"/>
<img ng-src="{{item.src}}" alt="{{item.alt}}">
</picture>
<figcaption>{{item.figcaption}} <a href="{{item.link}}" target="blank">🔗</a></figcaption>
</figure>
</section> -->
<section class="row">
<div class="col-md-12 subtitle">Featured Work</div>
</section>
<section class="row content">
<figure class="col-md-4" ng-repeat="item in data.images | filter: 'firstRow'">
<picture>
<source ng-repeat="source in item.source" srcset="{{source.srcset}}" media="{{source.media}}"/>
<img ng-src="{{item.src}}" alt="{{item.alt}}">
</picture>
<figcaption>{{item.figcaption}} <a href="{{item.link}}" target="blank">🔗</a></figcaption>
</figure>
</section>
<section class="row"><div id="moreLink" class="col-md-12 subtitle morelink" onclick="showMore()">More ...</div></section>
<section class="row content more" id="more">
<figure class="col-md-4" ng-repeat="item in data.images | filter: 'secondRow'">
<picture>
<source ng-repeat="source in item.source" srcset="{{source.srcset}}" media="{{source.media}}"/>
<img ng-src="{{item.src}}" alt="{{item.alt}}">
</picture>
<figcaption>{{item.figcaption}} <a href="{{item.link}}" target="blank">🔗</a></figcaption>
</figure>
</section>
</main>
<footer>
<a href="mailto:{{data.contacts.email}}">Contact </a><span>|</span>
<a href="{{data.contacts.tumblr}}" class="zocial-tumblr" target="_blank"><span>Tumblr</span></a>
<span>|</span>
<a href="{{data.contacts.flickr}}" class="zocial-flickr" target="_blank"><span>Flick</span></a>
</footer>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Hy Ya</h4>
</div>
<div class="modal-body"><p><img src="images/portrait.jpg"/>{{data.modalContent}}</p></div>
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>document.documentElement.className = "";</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>