first commit

.gitignore

@@ -0,0 +1,4 @@
+*.lock
+public/
+resources/
+isableFastRander/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "themes/hugo-creative-portfolio-theme"]
+	path = themes/hugo-creative-portfolio-theme
+	url = https://github.com/kishaningithub/hugo-creative-portfolio-theme

README.md

@@ -0,0 +1,33 @@
+# NancyPortfolio
+
+This is a git repository for the FlareBlog. The Blog is based on [Hugo](https://gohugo.io/) and [Creative portfolio theme for hugo](https://github.com/kishaningithub/hugo-creative-portfolio-theme) theme.
+
+## Run in local
+
+Clone the repository:
+
+```bash
+git clone https://github.com/JamesFlare1212/NancyPortfolio.git
+```
+
+Then, install Hugo.
+
+For Linux:
+```bash
+wget https://github.com/gohugoio/hugo/releases/download/v0.122.0/hugo_extended_0.122.0_linux-amd64.deb
+dpkg -i hugo_extended_0.122.0_linux-amd64.deb
+```
+
+For MacOS:
+```bash
+brew install hugo
+```
+
+Server the blog locally:
+
+```bash
+cd NancyPortfolio
+hugo server
+```
+
+Open the browser and go to `http://localhost:1313/` to see the blog.

archetypes/default.md

@@ -0,0 +1,5 @@
++++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = true
++++

archetypes/portfolio.md

@@ -0,0 +1,11 @@
++++
+slug = ""
+showonlyimage = false
+draft = false
+image = ""
+date = {{ .Date }}
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+description = ""
+summary = ""
+weight = 0
++++

content/portfolio/blind-contour-drawing-exercise/index.md

@@ -0,0 +1,29 @@
++++
+slug = "blind-contour-drawing-exercise"
+showonlyimage = false
+draft = false
+image = "portfolio/blind-contour-drawing-exercise/featured.avif"
+date = "2023-08-31T18:25:22+05:30"
+title = "Blind Contour Drawing Exercise"
+description = "A blind contour exercise, we were grouped in pairs and drew a blind contour portrait for each other."
+summary = "This was a blind contour exercise, we were grouped in pairs and drew a blind contour portrait for each other."
+weight = 0
++++
+
+> Published 2023/08/31 at 7:35 pm
+
+## Introduction
+
+This was a blind contour exercise, we were grouped in pairs and drew a blind contour portrait for each other. And we repeated the whole process for another group. After we were done, we did a small group critique on our works. We gave our first sensation on the works and discussed the "thinking" in the works.
+
+{{< gallery >}}
+  {{< figure src="portfolio/blind-contour-drawing-exercise/Contour-line-1.avif" caption="Nancy: done by Fanny" >}}
+  {{< figure src="portfolio/blind-contour-drawing-exercise/Contour-line-2.avif" caption="Nancy: done by Shiyuan" >}}
+  {{< figure src="portfolio/blind-contour-drawing-exercise/Contour-line-3.avif" caption="Shiyuan: done by Fanny" >}}
+  {{< figure src="portfolio/blind-contour-drawing-exercise/Contour-line-4.avif" caption="Fanny: done by Fanny" >}}
+{{< /gallery >}}
+{{< load-photoswipe >}}
+
+## Reflection
+
+I'm a bit drawing too fast during the exercise, therefore I didn't have a clear overview of my whole drawing and result in a massive line drawing. I should slow my pace next time and draw it in a more careful way.

content/portfolio/bridges/letter-of-advice/index.md

@@ -0,0 +1,74 @@
++++
+slug = "bridges-letter-of-advice"
+showonlyimage = false
+draft = false
+image = "portfolio/bridges/bridges-letter-of-advice/letter-to-Mina.avif"
+date = 2023-09-25T19:40:58-04:00
+title = 'Letter of Advice'
+description = "A formal letter full of advice to Mina."
+summary = ""
+weight = 0
++++
+
+> Published 2023/09/25 at 9:20 pm
+
+## Interview
+
+**10 Interview Questions**
+
+- How do your hobbies or interests shape the people you spend time with in public?
+- Can you share a moment when you felt out of place in a social situation, and how did you handle it?
+- What kind of events or gatherings do you enjoy most, and why?
+- Have you ever had to adapt your behavior based on the people you were with in a public space?
+- How do your friends influence your social activities and interactions?
+- Do you think your neighborhood or where you grew up has influenced your social identity? How?
+- What's an example of a challenge you've faced when trying to fit into a new group or community?
+- How do you use social media in your daily life, and how does it impact your social interactions?
+- How do you express your social identity through your clothing, appearance, or personal style, and what messages do you aim to convey?
+- Have you ever encountered stereotypes or biases related to your social identity, and how did you respond to them?
+
+**Interview Audio**
+
+<audio controls>
+  <source src="Minas-response-to-Nancy.m4a" type="audio/aac">
+  Your browser does not support the audio element.
+</audio>
+
+## Letter of advice for Mina
+
+Dear Mina,
+
+Thank you for opening up in our recent interview about the difficulties you've faced fitting into both Taiwan and the United States after going to high school abroad. I appreciate you sharing so candidly about feeling caught between two cultures no matter where you go.
+
+This is a challenging situation, but remember - your unique background is a gift! You have been exposed to different perspectives and ways of life that most people will never experience. The key is learning how to embrace both sides of yourself, rather than feeling you have to choose one over the other.
+
+Try not to put pressure on yourself to conform to any one culture or friend group. As you realized in high school, the best approach is often to proudly share things from your own background to enrich your current environment, instead of solely trying to fit in. Appreciate and celebrate the diversity within yourself.
+
+Realize too that everyone struggles with issues of identity and belonging, especially during the teenage years. Many of your peers, even if they appear to "fit in", are just putting on masks to hide their own insecurities. You have the chance to inspire others to embrace their uniqueness. Lead with compassion - both for others and yourself.
+
+When you feel isolated or like you don't belong, try to shift your perspective. Instead of focusing on fitting in, focus on the chance to learn. Observe how others interact and communicate. Be curious. You have the incredible opportunity to build bridges across cultures and see the world in a way few people can. Every moment is a chance to gain insight into a new perspective. Lean into this mindset, and loneliness will fade into interest and empathy.
+
+Remember that identity and belonging are complex, ever-changing things. You do not have to force yourself into a box or permanently choose one culture over another. Humans are wonderfully adaptable creatures, so have faith in your ability to gradually find your place, in Taiwan or America or anywhere else life takes you. It won't happen overnight, but little by little you will create a community and find activities and interests that excite you.
+
+Most importantly, know that you are enough just as you are. You do not need to prove your worth to anyone. Stay grounded in your values, embrace the adventure of life, and let your unique identity bloom. The right people and opportunities will be drawn to your authenticity. Follow your deepest interests - whether that be art, music, writing, or anything else that stirs your spirit. Seek out new experiences that spark your curiosity. Stay open and eager to learn. Lead with empathy, compassion, and sincerity in all your interactions. If you do these things, connections and opportunities will naturally blossom around you.
+
+Your rich blend of Taiwanese and American cultures is something to be proud of. You have an insider's view into both Eastern and Western worlds - their traditions, values, and perspectives. This is a precious gift if you embrace it fully. When you feel torn between two sides of yourself, remember that everything you've experienced makes you who you are. Your mixed background shaped your unique interests, insights, and talents. Let it be your guide as you navigate new environments, not something that confuses your sense of identity. Share the best of both cultures, appreciate the woven threads of your history that make you a vibrant tapestry.
+
+You are at the start of a great adventure. Trust the journey! Have compassion for yourself and others, embrace the colorful mosaic within you, and life will reveal its wonders. I believe in you!
+
+With love and encouragement,  
+Nancy
+
+{{< figure src="portfolio/bridges/bridges-letter-of-advice/letter-to-Mina.avif" width=480px caption="Letter of advice for Mina" >}}
+
+## Reflection
+
+During my writing on the project, I found that this is the first time I have written such a formal letter full of advice to someone, and I have never written a letter and given such official advice before. Therefore, when I picked up the pen, I pondered for a long time and was a little nervous about what would happen if what I wrote offended my partner and what would happen if my suggestions were useless. Finally, I tried to listen to the audio of our interview repeatedly, and then started from what I felt most. I tried to empathize with my partner's difficulties, and what would I do if I were in her situation. And my mind just exploded from there.
+
+Based on my suggestions to my partner, I began to use design thinking at my studio class. First, I defined the difficulties of my partner and the methods I gave, and then ideate them. The letter I wrote to my partner became a very strong basement for the define and ideation process in the design thinking for my studio class.
+
+{{< figure src="portfolio/bridges/bridges-letter-of-advice/mindmap.avif" width=768px caption=" " >}}
+
+For the making part of this project, I'm pretty good at origami, but I had a different feeling when I folded the envelope and put the letter in. When I first printed the letter, it was just a normal writing assignment, no different from the previous ones. But when I folded it and put it in the envelope, its state changed completely. It is no longer a simple assignment, but a real letter. It is my sincere advice to my partner.
+
+The interview part, also the research part of the whole project, is the place where we really get to know each other. I‘ve been a little scared before a formal interview. I'm not a particularly social, talkative person, but as the interview progressed I tried to focus more on the problem itself rather than my own state. Concentration is a very magical thing, you will enter a state of "only the person in front of you is with you", so that you can better resonate with her, to understand her, to stand in her point of view to think, solve problems.

content/portfolio/bridges/shifting-identities/index.md

@@ -0,0 +1,101 @@
++++
+slug = "bridges-shifting-identities"
+showonlyimage = false
+draft = false
+image = "portfolio/bridges/bridges-shifting-identities/explored-present-1.avif"
+date = "2023-09-06T18:25:22+05:30"
+title = "Shifting Identities"
+description = "Bridge 1, shifting identities: past, present and future identity exploration."
+summary = "This was a blind contour exercise, we were grouped in pairs and drew a blind contour portrait for each other."
+weight = 0
++++
+
+> Published 2023/09/06 at 10:45 pm
+
+## Mind Map
+
+{{< gallery >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/my-past.avif" caption="Past" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/my-present.avif" caption="Present" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/my-future.avif" caption="Future" >}}
+{{< /gallery >}}
+{{< load-photoswipe >}}
+
+## Description for Each Character
+
+### For My Past
+
+First of all, I made the overall color tone retro to show that this is what happened in the past. The color scheme leans towards warmth, and I'm adorned with thick clothing, hats, and scarves, which not only reflects my weak constitution because of heart surgery, but also my attachment to warmth. Simultaneously, my posture exudes a reserved and shy demeanor, reflecting my previous introverted and timid.
+
+### For My Present
+
+At present, due to the change of geography and the influence of the environment, I set the overall style to be more realistic. The overall posture has become more relaxed because my personality has gradually become cheerful. I wore light clothes, and the pale white color contrasted with the darker background of New York, showing that I was in New York but had not fully integrated into it. In addition, I used a combination of virtual and real in one of the photos to give the impression that I was shifting.
+
+### For My Future
+
+Here I completely changed into black clothes, took off my glasses and put on makeup and manicure to reflect the maturity of my personality. I used a strong light to give a sense of unreality, to show that these photos take place in the future. During the shooting process, I covered half of my face in the shadow, so as to reflect the two sides of the future, both the beautiful yearning for the future and the concerns about the future.
+
+{{< gallery >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/past-1.avif" caption="Past 1" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/present-1.avif" caption="Present 1" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/future-1.avif" caption="Future 1" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/past-2.avif" caption="Past 2" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/present-2.avif" caption="Present 2" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/future-2.avif" caption="Future 2" >}}
+{{< /gallery >}}
+
+## Shifting Identities Symbolism & Context Explored
+
+### For My Past
+
+{{< gallery >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/explored-past-1.avif" caption="Past" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/my-past.avif" caption="Past" >}}
+{{< /gallery >}}
+
+My introverted personality is partly caused by Chinese collectivism, where everyone is a subset of a larger group. Everyone needs to compromise or work hard for the sake of the collective honor, and at the same time, one person's mistake leads to the punishment of all. In this environment, I gradually dare not have my own opinion, I become a cog in a big system. Therefore, I copied and pasted my own pictures to highlight that there is little difference between the individual and the collective.
+
+At the same time, I use the flower as a metaphor, a metaphor that looks beautiful but is actually a cover for the problem. As the subject, my eyes are covered with blue flowers, showing that I do not dare to make eye contact with others. Meanwhile, it also covers every nail of my hand, reflecting my traditional family concept that girls should not put too much emphasis on dressing themselves.And behind me, myself, also the collective, eyes covered with red eyes flowers. They contrast sharply with the blue flowers on my eyes, reflecting a sense that I am constantly being watched collectively.
+
+As a supplementary background, the decorative blue and white porcelain plate is a kind of memory of my childhood. Since I can remember, the plates at home have been blue and white porcelain patterns, which records my memories of every meal table from childhood to adulthood.
+
+### For My Present
+
+{{< gallery >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/explored-present-1.avif" caption="Present" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/my-present.avif" caption="Present" >}}
+{{< /gallery >}}
+
+At present, everything is not so complicated now.
+
+I chose a photo of me walking slowly up the New York subway and divided the photo into three parts based on it. The section behind me is a collage of my hometown, whose paths I have integrated and connected with the stairway up. The lower left corner is a collage of New York City, and the upper left corner is a collage of street signs.
+
+I wanted to show that I was shifting from my hometown to an entirely different city that never sleeps, and that the signpost above me represented that I was now standing at the crossroads of fate.
+
+## Final
+
+{{< gallery >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/final-past.avif" caption="Past" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/final-present.avif" caption="Present" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/final-future.avif" caption="Future" >}}
+{{< /gallery >}}
+
+{{< figure src="portfolio/bridges/bridges-shifting-identities/final-revision.avif" width="768px" caption="Final Revision" >}}
+
+I initiated this project based on my mind maps. At the outset, I delved into creating separate photos to represent different aspects of my past and present. During the critique phase, I received valuable feedback that prompted a reevaluation of my approach. One key observation was the need to strengthen the connection between the two pictures and enhance their cohesion and continuity. This could be achieved through adjustments in tone style and resizing the central portrait elements, as both were positioned at the center. Additionally, I was advised to diversify the elements in my past photo and introduce variations in the repetitive background, emphasizing the individuality within collectivism. For the present photo, suggestions included refining the blurry edges, organizing the collage arrangement of my hometown logically, and aligning the buildings in line with directional signs to depict the current situation more effectively. Following with my future photo, I created a continues line through the triptych, in order to show the connection with these three photos. Meanwhile, I want to express a sense of the future vision of me would be looking back all the paths I’ve walked in order to reach the future.
+
+## Reflection
+
+What I learned from the project activity was I learned how to get depth in to myself, how to explore those ego and inner self, I learned the functions of triptych, like how it works as a series of artworks.
+
+What was the most successful about my project was the original photos taken at the first stage, it gave me a very good starting point and a well-built foundation for the following parts. It was the first time for me to explore different customs that reflect different stages of me, and I tried to express myself from composing different gestures.
+
+The challenge I had was to make the style of the triptych more cohesive, I kind of making the three vision of myself way too separated, they are good to see as individual but not good enough to see as a whole.
+
+If I did this project again I would change my way of doing photoshop, instead of doing the pieces separately, I would rather start all of them together, and kind of giving a standard tone for each other.
+
+## Final Critique "Notes and Changes"
+
+I got mostly positive reviews, which made me feel really grateful. Allen thinks that the color of my container fits my work very well. Although at first glance, there are a mixed colors which made him confused, but after a closer look, he feels that the colors of each part are actually linked together to form a harmonious. Ali is very fond of my future one, he said it's kind of out of reality, the closure I used made me out of body, but my spirit is still moving through my body. Mina said she found I have a strong focal point, both the future and past one are facing to the middle, and there is a continuous line directed from the left to right and a reflected red circle at the background.
+
+There still can be a bit improvement, the past one is a bit too cold compare to the other ones. As a result, I will change the tone of my past version in order to increase the continuity.

content/portfolio/bridges/true-stories/index.md

@@ -0,0 +1,55 @@
++++
+slug = "bridges-true-stories"
+showonlyimage = false
+draft = false
+image = "portfolio/bridges/bridges-true-stories/the-poster.avif"
+date = 2023-09-11T19:15:18-04:00
+title = 'True Stories'
+description = "Bridge 1: True Stories. A collection of three captivating short stories inspired by the work of Sophie Calle."
+summary = "This blog post showcases a collection of three captivating short stories inspired by the work of Sophie Calle, each accompanied by a unique image. The author reflects on the power of words and the impact of combining concise storytelling with abstract visuals."
+weight = 0
++++
+
+> Published 2023/09/11 at 8:22 pm
+
+{{< gallery >}}
+  {{< figure src="portfolio/bridges/bridges-true-stories/hide-and-seek.avif" caption="Hide and Seek" >}}
+  {{< figure src="portfolio/bridges/bridges-true-stories/going-up.avif" caption="Going Up!" >}}
+  {{< figure src="portfolio/bridges/bridges-true-stories/the-poster.avif" caption="The Poster" >}}
+{{< /gallery >}}
+{{< load-photoswipe >}}
+
+## Hide and Seek
+
+When I decided to play hide and seek, I suddenly had a wonderful idea and thanks to some handy fabric. And the result? Well, let's just say it's a total quirk that's left everyone scratching their heads.
+
+Imagine this: I'm looking for a place to hide myself, and suddenly I feel like as long as I can't see anyone else, no one can see me. So I carefully wrapped my head in the fabric and let it pour down in a magical way, forming the strangest shapes.
+
+Since then, the nature of the hide-and-seek has changed. It was no longer a game, but an evaluation and discussion of my performance art. Some compared it to a black, twisted ice cream cone with swirls and contours that rival any frozen food. Others sweared it is a mysterious tree whose black head shoots straight up into the sky.
+
+My masterpiece, whatever it is, was proof of the absurdity of art. It encourages viewers to delve into abstraction, question what exactly they're looking at, and appreciate the joy that unfolds when artists hide behind their own art. Even if I was just playing hide-and-seek at first.
+
+
+## Going Up!
+
+With each laborious step up the staircase in the New York City subway, the environment around me underwent a dramatic transformation. What had begun as a narrow, dimly lit underpass gradually gave way to a bright, expansive vista. Emerging from the subterranean shadows, my eyes struggled to adjust to the sudden onslaught of sunlight. My brow furrowed, and my palms began to glisten with a hint of nervous sweat. I pursed my lips, attempting to acclimate to my new surroundings, as the faint scent of rubbish still lingered in the air, now masked by the overpowering perfume of hurried urbanites passing by.
+
+Amidst this sensory overload, my thoughts swirled with uncertainties. Could I summon the courage to lift my head, to face the sun, to embrace New York City's vibrant chaos?
+
+Suddenly, the flickering subway light above me ceased its dance and cast a steady, guiding beam forward. My gaze fixed on that beacon, and with newfound resolve, I decided to ascend. I was determined to rise above my doubts and uncertainties. "I believe I'm going up well," I whispered to myself, a mantra of aspiration that echoed in my mind as I ventured forth into the unknown, ready to conquer the challenges and opportunities that awaited in the city that never sleeps.
+
+## The Poster
+
+On the bustling streets of New York, I find myself standing in a sea of people, each rushing past me, lost in their own world. The energy of the city surges around me, reminding me constantly of its relentless pace. Across the street, a towering skyscraper hung a dazzling poster of a model, her lithe body elegantly writhing in seductive poses, dressed in elaborate outfits designed to capture the essence of glamour.
+
+Instead of feeling the typical inadequacy and anxiety, I am overcome by a profound transformation. In that moment, I am no longer just a spectator; I become the architect of my own future. I have the power to shape my own destiny. I feel my fists clenched, my faith strengthened, my determination maintained
+
+Staring at that charming poster, I no longer feel inferior. Instead, I see an opportunity, a gateway to my own potential. That poster would have been a sign, a sign that I had the power to shape not only my future, but the world around me. Just as an artist shapes the image of that model, I can shape my own life, my own ambitions and my own destiny.
+
+## Reflection
+
+During my writing on the project, I had a new perspective on words. Previously, I had relegated words to the status of mere conveyors of information, often viewing them as simplistic instruments for statement, description, or as supplements to visual imagery. However, as I embarked on the creative journey of weaving literature alongside my visual compositions, a striking revelation began to crystalize: words possessed an inherent power that could, at times, rise to dominance. It can have interesting reversals, it can be an affirmation of the will, or it can be a call for the future. This newfound insight forced me to reexamine my previously held assumptions about the nature of writing, leaving me with a profound appreciation for the multifaceted and potent nature of words.
+
+For this project, I did not use materials that I had not used before, so there is not much that can be reflect in this section. However, when I used keynote for typesetting, my ideas began to change according to my typesetting, such as the length of the article and the composition of the picture.
+
+For the researching part,  When I read this book, “Sophie Calle - True Stories” I was surprised by the magic that unfolded within its pages. It taught me that even a simple picture combined with concise words could carry the enchantment of a full-fledged novel. The book approached storytelling from a unique angle, using abstract yet intriguing images and wrapping things up with sentences that left you thinking deeply. What struck me most was how quickly it drew me into the protagonist's world. I found myself feeling what they felt and contemplating the same thoughts they did.  It was like a direct connection to their experiences and emotions. This book showed me that simplicity, when done right, can have a profound impact on readers. It proved that brevity, combined with thoughtful imagery and endings, can deliver an immersive and thought-provoking experience akin to that of a much longer novel.

content/portfolio/memoir-critique-notes/index.md

@@ -0,0 +1,24 @@
++++
+slug = "memoir-critique-notes"
+showonlyimage = false
+draft = false
+image = ""
+date = 2023-09-14T19:32:14-04:00
+title = 'Memoir Critique Notes'
+description = "Critique Notes of SHIFTING IDENTITIES"
+summary = ""
+weight = 0
++++
+
+> Published 2023/09/14 at 7:41 pm
+
+The photos I presented to my classmates are:
+
+{{< gallery >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/final-past.avif" caption="Past" >}}
+  {{< figure src="portfolio/bridges/bridges-shifting-identities/final-present.avif" caption="Present" >}}
+{{< /gallery >}}
+
+What I heard in critique was, first of all, the connection between the two pictures is not strong enough, the cohesive and continuity can be improved by changing the tone style and try to make the person into the approximate size cause both of my portrait are showing in the middle. After that, for my past photo, the variety of elements can be increased, also there can be a bit change on the repetitive  background, like even though they are in collectivism, there is a small individuals between each other. While for the present photo, the blurry edge should be cut off, and the collage arrangement of my hometown on the right can be more ordered and logical. And for the New York part, trying to make the building following the direction as the sign showed in order to enforce the present situtaion.
+
+It was helpful because, the critique gives me a different perspective of my artwork and there are so many suggestion I can adopt to improve my work. What I plan to do next is following the suggestions that I think are useful and improve them on my photo. For my past one, I may rearrange the composition, like making the center object smaller, also add more meaningful stuff from my childhood. Meanwhile, I may change bit of the repetitive background and make them more intriguing. For my present photo, I would focus more on the rearrangement of both city collage.

hugo.toml

@@ -0,0 +1,98 @@
+baseurl = "https://www.nancyflare.com/"
+title = "Nancy's Portfolio"
+theme = "hugo-creative-portfolio-theme"
+languageCode = "en-us"
+# Enable comments by entering your Disqus shortname
+disqusShortname = ""
+# Enable Google Analytics by entering your tracking code
+googleAnalytics = ""
+
+[params]
+  selfHosted = true
+  # Style options: default (pink), blue, green, pink, red, sea, violet
+  # Use custom.css for your custom styling
+  style = "sea" # Available options are: default (pink), blue, green, pink, red, sea, violet.
+  description = "A simple portfolio for showcasing work. Made with love by Nancy Xue."
+  copyright = "©2024 Nancy Xue"
+  sidebarAbout = [
+    "I am a student of Parsons School of Design",
+    "Originally from China, currently based in United States."
+  ]
+  # Contact page
+     # Since this template is static, the contact form uses www.formspree.io as a
+     # proxy. The form makes a POST request to their servers to send the actual
+     # email. Visitors can send up to a 1000 emails each month for free.
+     #
+     # What you need to do for the setup?
+     #
+     # - set your email address under 'email' below
+     # - upload the generated site to your server
+     # - send a dummy email yourself to confirm your account
+     # - click the confirm link in the email from www.formspree.io
+     # - you're done. Happy mailing!
+  #email = "you@yoursite.com"
+
+    # Optional Matomo analytics (formerly piwik)
+      # [params.analytics.matomo]
+      #  URL = "https://stats.example.com"
+      #  ID = "42"
+      #  # Track all subdomains with "*.example.com" (Optional)
+      #  domain = "www.example.com"
+      #  # Optional integrity check hash
+      #  hash = ""
+
+  # Nav links in the side bar
+  [[params.navlinks]]
+  name = "Home"
+  url = "portfolio/"
+  home = true
+  [[params.navlinks]]
+  name = "About"
+  url = "about/"
+  [[params.navlinks]]
+  name = "Get in touch"
+  url = "contact/"
+  [params.social]
+  #facebook      = "full page or profile url in facebook"
+  #googleplus    = "full profile url in googleplus"
+  email         = "xuey855@newschool.edu"
+  #twitter       = "full profile url in twitter"
+  linkedin      = "https://www.linkedin.com/in/yinan-xue-a04493291/"
+  #stackoverflow = "full profile url in stackoverflow"
+  instagram     = "https://www.instagram.com/yiiinannnnn/"
+  #github        = "full profile url in github"
+  #gitlab        = "full profile url in gitlab"
+  #youtube       = "full profile url in youtube"
+  #whatsapp      = "wa.me service link"
+
+[markup]
+  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
+  [markup.highlight]
+    ########## necessary configurations ##########
+    # https://github.com/hugo-fixit/FixIt/issues/43
+    codeFences = true
+    lineNos = true
+    lineNumbersInTable = true
+    noClasses = false
+    ########## necessary configurations ##########
+    guessSyntax = true
+  # Goldmark is from Hugo 0.60 the default library used for Markdown
+  [markup.goldmark]
+    [markup.goldmark.extensions]
+      definitionList = true
+      footnote = true
+      linkify = true
+      strikethrough = true
+      table = true
+      taskList = true
+      typographer = true
+    [markup.goldmark.renderer]
+      # whether to use HTML tags directly in the document
+      unsafe = true
+
+[outputs]
+  home = ["HTML", "RSS", "JSON"]
+  page = ["HTML", "MarkDown"]
+  section = ["HTML", "RSS"]
+  taxonomy = ["HTML"]
+  term = ["HTML", "RSS"]

layouts/partials/head.html

@@ -0,0 +1,33 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+{{ with .Site.Title }}<title>{{ . }}</title>{{ end }}
+{{ with .Site.Params.description }}<meta name="description" content="{{ . }}">{{ end }}
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="{{ "css/bootstrap.min.css" | absURL }}">
+<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,700,400italic">
+<link rel="stylesheet" href="{{ "css/font-awesome.min.css" | absURL }}">
+<link rel="stylesheet" href="{{ "css/owl.carousel.css" | absURL }}">
+<link rel="stylesheet" href="{{ "css/owl.theme.css" | absURL }}">
+<!-- Theme stylesheet, if possible do not edit this stylesheet -->
+{{ with .Site.Params.style }}
+  <link href="{{ printf "css/style.%s.css" . | absURL }}" rel="stylesheet" id="theme-stylesheet">
+{{ else }}
+  <link href="{{ "css/style.default.css" | absURL }}" rel="stylesheet" id="theme-stylesheet">
+{{ end }}
+ <!-- Responsivity for older IE -->
+<!-- Just in case -->
+  {{ `
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+  ` | safeHTML }}
+
+<!-- Custom stylesheet - for your changes -->
+<link href="{{ "css/custom.css" | absURL }}" rel="stylesheet">
+<link rel="shortcut icon" href="{{ "img/favicon.png" | absURL }}">
+{{ with .OutputFormats.Get "RSS" }}
+  {{ printf `<link href="%s" rel="%s" type="%s" title="%s" />` .Permalink .Rel .MediaType.Type $.Site.Title | safeHTML }}
+{{ end }}
+{{ template "_internal/google_analytics.html" . }}
+<script async src="https://track.jamesflare.com/script.js" data-website-id="226742b8-6efb-4be9-8f8f-d297df42401c"></script>

layouts/partials/sidebar.html

@@ -0,0 +1,23 @@
+<div id="sidebar" class="col-xs-6 col-sm-4 col-md-3 sidebar-offcanvas">
+    <div class="sidebar-content">
+      <h1 class="sidebar-heading"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
+      {{ range .Site.Params.sidebarAbout }}
+        <p class="sidebar-p">{{ . | safeHTML }}</p>
+      {{ end }}
+      <ul class="sidebar-menu">
+        {{ range .Site.Params.navlinks }}
+          <li><a href="{{ absURL .url }}">{{ .name }}</a></li>
+        {{ end }}
+      </ul>
+      {{ partial "social_buttons_in_sidebar.html" . }}
+  
+      <div class="copyright">
+        <p class="credit">
+          {{ with .Site.Params.copyright }}
+            {{ . | safeHTML }} | Powered by <a href="https://gohugo.io" target="_blank">Hugo</a>
+          {{ end }}
+        </p>
+      </div>
+    </div>
+  </div>
+  

layouts/shortcodes/figure.html

@@ -0,0 +1,29 @@
+<!--
+Put this file in /layouts/shortcodes/figure.html
+NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+-->
+<!-- count how many times we've called this shortcode; load the css if it's the first time -->
+{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href={{ "css/hugo-easy-gallery.css" | relURL }} />{{ end }}
+{{- $.Page.Scratch.Add "figurecount" 1 -}}
+<!-- use either src or link-thumb for thumbnail image -->
+{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
+<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
+  <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+    <div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
+      <img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
+    </div>
+    {{ with .Get "link" | default (.Get "src") }}<a href="{{ . | relURL }}" itemprop="contentUrl"></a>{{ end }}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+      <figcaption>
+        {{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
+        {{- if or (.Get "caption") (.Get "attr")}}
+          <p>
+            {{- .Get "caption" -}}
+            {{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
+          </p>
+        {{- end }}
+      </figcaption>
+    {{- end }}
+  </figure>
+</div>

layouts/shortcodes/gallery.html

@@ -0,0 +1,41 @@
+<!--
+Put this file in /layouts/shortcodes/gallery.html
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+-->
+<!-- count how many times we've called this shortcode; load the css if it's the first time -->
+{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href={{ "css/hugo-easy-gallery.css" | relURL }} />{{ end }}
+{{- $.Page.Scratch.Add "figurecount" 1 }}
+{{ $baseURL := .Site.BaseURL }}
+<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
+	{{- with (.Get "dir") -}}
+		<!-- If a directory was specified, generate figures for all of the images in the directory -->
+		{{- $files := readDir (print "/static/" .) }}
+		{{- range $files -}}
+			<!-- skip files that aren't images, or that include the thumb suffix in their name -->
+			{{- $thumbext := $.Get "thumb" | default "-thumb" }}
+			{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
+			{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}<!-- is the current file an image? -->
+			{{- if and $isimg (not $isthumb) }}
+				{{- $caption :=  .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
+				{{- $linkURL := print $baseURL ($.Get "dir") "/" .Name | absURL }}<!-- absolute URL to hi-res image -->
+				{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
+				{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? --> 
+				{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
+				<div class="box">
+				  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+				    <div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
+				      <img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
+				    </div>
+			      <figcaption>
+		          <p>{{ $caption }}</p>
+			      </figcaption>
+				    <a href="{{ $linkURL }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
+				  </figure>
+				</div>
+			{{- end }}
+		{{- end }}
+	{{- else -}}
+		<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
+	  {{ .Inner }}
+	{{- end }}
+</div>

layouts/shortcodes/load-photoswipe-theme.html

@@ -0,0 +1,75 @@
+<!--
+Put this file in /layouts/shortcodes/load-photoswipe.html
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+-->
+
+<!-- prevent this shortcode from being loaded more than once per page -->
+{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
+  {{ $.Page.Scratch.Set "photoswipeloaded" 1 }}
+
+<!-- these files are loaded in the theme footer
+<script src="/js/load-photoswipe.js"></script>
+-->
+
+<!-- Photoswipe css/js libraries -->
+{{- if .Site.Params.selfHosted -}}
+<link rel="stylesheet" href="/css/photoswipe/photoswipe.min.css" />
+<link rel="stylesheet" href="/css/photoswipe/default-skin.min.css" />
+{{- else -}}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />
+{{- end -}}
+
+<!-- these files are loaded in the theme footer
+<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
+-->
+
+<!-- Root element of PhotoSwipe. Must have class pswp. -->
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+<!-- Background of PhotoSwipe.
+     It's a separate element, as animating opacity is faster than rgba(). -->
+<div class="pswp__bg"></div>
+<!-- Slides wrapper with overflow:hidden. -->
+<div class="pswp__scroll-wrap">
+    <!-- Container that holds slides.
+      PhotoSwipe keeps only 3 of them in DOM to save memory.
+      Don't modify these 3 pswp__item elements, data is added later on. -->
+    <div class="pswp__container">
+      <div class="pswp__item"></div>
+      <div class="pswp__item"></div>
+      <div class="pswp__item"></div>
+    </div>
+    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+    <div class="pswp__ui pswp__ui--hidden">
+    <div class="pswp__top-bar">
+      <!--  Controls are self-explanatory. Order can be changed. -->
+      <div class="pswp__counter"></div>
+      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+      <button class="pswp__button pswp__button--share" title="Share"></button>
+      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+      <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
+      <!-- element will get class pswp__preloader--active when preloader is running -->
+      <div class="pswp__preloader">
+        <div class="pswp__preloader__icn">
+          <div class="pswp__preloader__cut">
+            <div class="pswp__preloader__donut"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+      <div class="pswp__share-tooltip"></div>
+    </div>
+    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+    </button>
+    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+    </button>
+    <div class="pswp__caption">
+      <div class="pswp__caption__center"></div>
+    </div>
+    </div>
+    </div>
+</div>
+{{ end }}

layouts/shortcodes/load-photoswipe.html

@@ -0,0 +1,72 @@
+<!--
+Put this file in /layouts/shortcodes/load-photoswipe.html
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+-->
+
+<!-- prevent this shortcode from being loaded more than once per page -->
+{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
+  {{ $.Page.Scratch.Set "photoswipeloaded" 1 }}
+
+<script src={{ "js/load-photoswipe.js" | relURL }}></script>
+
+<!-- Photoswipe css/js libraries -->
+{{- if .Site.Params.selfHosted -}}
+<link rel="stylesheet" href="/css/photoswipe/photoswipe.min.css" />
+<link rel="stylesheet" href="/css/photoswipe/default-skin.min.css" />
+<script src="/js/photoswipe/photoswipe.min.js"></script>
+<script src="/js/photoswipe/photoswipe-ui-default.min.js"></script>
+{{- else -}}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
+{{- end -}}
+
+<!-- Root element of PhotoSwipe. Must have class pswp. -->
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+<!-- Background of PhotoSwipe.
+     It's a separate element, as animating opacity is faster than rgba(). -->
+<div class="pswp__bg"></div>
+<!-- Slides wrapper with overflow:hidden. -->
+<div class="pswp__scroll-wrap">
+    <!-- Container that holds slides.
+      PhotoSwipe keeps only 3 of them in DOM to save memory.
+      Don't modify these 3 pswp__item elements, data is added later on. -->
+    <div class="pswp__container">
+      <div class="pswp__item"></div>
+      <div class="pswp__item"></div>
+      <div class="pswp__item"></div>
+    </div>
+    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+    <div class="pswp__ui pswp__ui--hidden">
+    <div class="pswp__top-bar">
+      <!--  Controls are self-explanatory. Order can be changed. -->
+      <div class="pswp__counter"></div>
+      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+      <button class="pswp__button pswp__button--share" title="Share"></button>
+      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+      <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
+      <!-- element will get class pswp__preloader--active when preloader is running -->
+      <div class="pswp__preloader">
+        <div class="pswp__preloader__icn">
+          <div class="pswp__preloader__cut">
+            <div class="pswp__preloader__donut"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+      <div class="pswp__share-tooltip"></div>
+    </div>
+    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+    </button>
+    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+    </button>
+    <div class="pswp__caption">
+      <div class="pswp__caption__center"></div>
+    </div>
+    </div>
+    </div>
+</div>
+{{ end }}

static/css/custom.css

@@ -0,0 +1,19 @@
+/* your styles go here */
+.row {
+    display: flex;
+    justify-content: center;
+  }
+
+.gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+.box {
+    margin: 0 auto;
+  }
+
+audio {
+    width: 100%;
+  }

static/css/hugo-easy-gallery.css

@@ -0,0 +1,172 @@
+/*
+Put this file in /static/css/hugo-easy-gallery.css
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+*/
+
+
+/*
+Grid Layout Styles
+*/
+.gallery {
+    overflow: hidden;
+    margin: 0 auto 24px;
+    max-width: 768px;
+}
+.gallery .box {
+    float: left;
+    position: relative;
+    /* Default: 1 tile wide */
+    width: 100%;
+    padding-bottom: 100%; 
+}
+@media only screen and (min-width : 480px) {
+    /* Tablet view: 2 tiles */
+    .gallery .box {
+        width: 50%;
+        padding-bottom: 50%;
+    }
+}
+@media only screen and (min-width : 520px) {
+    /* Small desktop / ipad view: 3 tiles */
+    .gallery .box {
+        width: 33.3%;
+        padding-bottom: 33.3%; /*  */
+    }
+}
+@media only screen and (min-width : 9999px) {
+   /* Medium desktop: 4 tiles */
+   .box {
+      width: 25%;
+      padding-bottom: 25%;
+   }
+}
+
+/*
+Transition styles
+*/
+.gallery.hover-transition figure,
+.gallery.hover-effect-zoom .img, 
+.gallery:not(.caption-effect-appear) figcaption,
+.fancy-figure:not(.caption-effect-appear) figcaption {
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+}
+/*
+figure styles
+*/
+figure {
+    position:relative; /* purely to allow absolution positioning of figcaption */
+    overflow: hidden;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+}
+.gallery figure {
+    position: absolute;
+    left: .3rem;
+    right: .3rem;
+    top: .3rem;
+    bottom: .3rem;
+}
+.gallery.hover-effect-grow figure:hover {
+    transform: scale(1.05);
+}
+.gallery.hover-effect-shrink figure:hover {
+    transform: scale(0.95);
+}
+.gallery.hover-effect-slidedown figure:hover {
+    transform: translateY(.3rem);
+}
+.gallery.hover-effect-slideup figure:hover {
+    transform: translateY(-.3rem);
+}
+
+/*
+img / a styles
+*/
+
+.gallery .img {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+
+    /* ======================================================================== */
+    /* NOTE: "cover" is like 'fill' mode, "contain" preserves image dimensions in the thumbnail */
+    /* ======================================================================== */
+    background-size: contain;
+    background-size: cover;
+    /* ======================================================================== */
+
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+}
+.gallery.hover-effect-zoom figure:hover .img {
+    transform: scale(1.05);
+}
+.gallery img {
+    display: none; /* only show the img if not inside a gallery */
+}
+figure a {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+/*
+figcaption styles
+*/
+.gallery figcaption,
+.fancy-figure figcaption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #000;
+    color: #FFF;
+    text-align: center;
+    font-size: 75%; /* change this if you want bigger text */
+    font-weight: bold;
+    background: rgba(255, 255, 255, 0.75);
+    opacity: 1;
+    cursor: pointer;
+}
+.gallery.caption-position-none figcaption,
+.fancy-figure.caption-position-none figcaption  {
+    display: none;
+}
+.gallery.caption-position-center figcaption,
+.fancy-figure.caption-position-center figcaption {
+    top: 0;
+    padding: 40% .3rem;
+}
+.gallery.caption-position-bottom figcaption,
+.fancy-figure.caption-position-bottom figcaption {
+    padding: .3rem;
+}
+.gallery.caption-effect-fade figure:not(:hover) figcaption,
+.gallery.caption-effect-appear figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
+    background: rgba(0, 0, 0, 0);
+    opacity: 0;
+}
+.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
+    margin-bottom: -100%;
+}
+.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption  {
+    top: 100%;
+}
+figcaption p {
+    margin: 0 auto 24px; /* override style in theme */
+    text-align: center;
+}
+

static/css/photoswipe/default-skin.min.css

@@ -0,0 +1,482 @@
+/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
+/*
+
+	Contents:
+
+	1. Buttons
+	2. Share modal and links
+	3. Index indicator ("1 of X" counter)
+	4. Caption
+	5. Loading indicator
+	6. Additional styles (root element, top bar, idle state, hidden state, etc.)
+
+*/
+/*
+	
+	1. Buttons
+
+ */
+/* <button> css reset */
+.pswp__button {
+  width: 44px;
+  height: 44px;
+  position: relative;
+  background: none;
+  cursor: pointer;
+  overflow: visible;
+  -webkit-appearance: none;
+  display: block;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  float: right;
+  opacity: 0.75;
+  -webkit-transition: opacity 0.2s;
+          transition: opacity 0.2s;
+  -webkit-box-shadow: none;
+          box-shadow: none; }
+  .pswp__button:focus, .pswp__button:hover {
+    opacity: 1; }
+  .pswp__button:active {
+    outline: none;
+    opacity: 0.9; }
+  .pswp__button::-moz-focus-inner {
+    padding: 0;
+    border: 0; }
+
+/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
+.pswp__ui--over-close .pswp__button--close {
+  opacity: 1; }
+
+.pswp__button,
+.pswp__button--arrow--left:before,
+.pswp__button--arrow--right:before {
+  background: url(default-skin.png) 0 0 no-repeat;
+  background-size: 264px 88px;
+  width: 44px;
+  height: 44px; }
+
+@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
+  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
+  .pswp--svg .pswp__button,
+  .pswp--svg .pswp__button--arrow--left:before,
+  .pswp--svg .pswp__button--arrow--right:before {
+    background-image: url(default-skin.svg); }
+  .pswp--svg .pswp__button--arrow--left,
+  .pswp--svg .pswp__button--arrow--right {
+    background: none; } }
+
+.pswp__button--close {
+  background-position: 0 -44px; }
+
+.pswp__button--share {
+  background-position: -44px -44px; }
+
+.pswp__button--fs {
+  display: none; }
+
+.pswp--supports-fs .pswp__button--fs {
+  display: block; }
+
+.pswp--fs .pswp__button--fs {
+  background-position: -44px 0; }
+
+.pswp__button--zoom {
+  display: none;
+  background-position: -88px 0; }
+
+.pswp--zoom-allowed .pswp__button--zoom {
+  display: block; }
+
+.pswp--zoomed-in .pswp__button--zoom {
+  background-position: -132px 0; }
+
+/* no arrows on touch screens */
+.pswp--touch .pswp__button--arrow--left,
+.pswp--touch .pswp__button--arrow--right {
+  visibility: hidden; }
+
+/*
+	Arrow buttons hit area
+	(icon is added to :before pseudo-element)
+*/
+.pswp__button--arrow--left,
+.pswp__button--arrow--right {
+  background: none;
+  top: 50%;
+  margin-top: -50px;
+  width: 70px;
+  height: 100px;
+  position: absolute; }
+
+.pswp__button--arrow--left {
+  left: 0; }
+
+.pswp__button--arrow--right {
+  right: 0; }
+
+.pswp__button--arrow--left:before,
+.pswp__button--arrow--right:before {
+  content: '';
+  top: 35px;
+  background-color: rgba(0, 0, 0, 0.3);
+  height: 30px;
+  width: 32px;
+  position: absolute; }
+
+.pswp__button--arrow--left:before {
+  left: 6px;
+  background-position: -138px -44px; }
+
+.pswp__button--arrow--right:before {
+  right: 6px;
+  background-position: -94px -44px; }
+
+/*
+
+	2. Share modal/popup and links
+
+ */
+.pswp__counter,
+.pswp__share-modal {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+      user-select: none; }
+
+.pswp__share-modal {
+  display: block;
+  background: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  position: absolute;
+  z-index: 1600;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease-out;
+          transition: opacity 0.25s ease-out;
+  -webkit-backface-visibility: hidden;
+  will-change: opacity; }
+
+.pswp__share-modal--hidden {
+  display: none; }
+
+.pswp__share-tooltip {
+  z-index: 1620;
+  position: absolute;
+  background: #FFF;
+  top: 56px;
+  border-radius: 2px;
+  display: block;
+  width: auto;
+  right: 44px;
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+  -webkit-transform: translateY(6px);
+      -ms-transform: translateY(6px);
+          transform: translateY(6px);
+  -webkit-transition: -webkit-transform 0.25s;
+          transition: transform 0.25s;
+  -webkit-backface-visibility: hidden;
+  will-change: transform; }
+  .pswp__share-tooltip a {
+    display: block;
+    padding: 8px 12px;
+    color: #000;
+    text-decoration: none;
+    font-size: 14px;
+    line-height: 18px; }
+    .pswp__share-tooltip a:hover {
+      text-decoration: none;
+      color: #000; }
+    .pswp__share-tooltip a:first-child {
+      /* round corners on the first/last list item */
+      border-radius: 2px 2px 0 0; }
+    .pswp__share-tooltip a:last-child {
+      border-radius: 0 0 2px 2px; }
+
+.pswp__share-modal--fade-in {
+  opacity: 1; }
+  .pswp__share-modal--fade-in .pswp__share-tooltip {
+    -webkit-transform: translateY(0);
+        -ms-transform: translateY(0);
+            transform: translateY(0); }
+
+/* increase size of share links on touch devices */
+.pswp--touch .pswp__share-tooltip a {
+  padding: 16px 12px; }
+
+a.pswp__share--facebook:before {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: -12px;
+  right: 15px;
+  border: 6px solid transparent;
+  border-bottom-color: #FFF;
+  -webkit-pointer-events: none;
+  -moz-pointer-events: none;
+  pointer-events: none; }
+
+a.pswp__share--facebook:hover {
+  background: #3E5C9A;
+  color: #FFF; }
+  a.pswp__share--facebook:hover:before {
+    border-bottom-color: #3E5C9A; }
+
+a.pswp__share--twitter:hover {
+  background: #55ACEE;
+  color: #FFF; }
+
+a.pswp__share--pinterest:hover {
+  background: #CCC;
+  color: #CE272D; }
+
+a.pswp__share--download:hover {
+  background: #DDD; }
+
+/*
+
+	3. Index indicator ("1 of X" counter)
+
+ */
+.pswp__counter {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 44px;
+  font-size: 13px;
+  line-height: 44px;
+  color: #FFF;
+  opacity: 0.75;
+  padding: 0 10px; }
+
+/*
+	
+	4. Caption
+
+ */
+.pswp__caption {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  min-height: 44px; }
+  .pswp__caption small {
+    font-size: 11px;
+    color: #BBB; }
+
+.pswp__caption__center {
+  text-align: left;
+  max-width: 420px;
+  margin: 0 auto;
+  font-size: 13px;
+  padding: 10px;
+  line-height: 20px;
+  color: #CCC; }
+
+.pswp__caption--empty {
+  display: none; }
+
+/* Fake caption element, used to calculate height of next/prev image */
+.pswp__caption--fake {
+  visibility: hidden; }
+
+/*
+
+	5. Loading indicator (preloader)
+
+	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
+
+ */
+.pswp__preloader {
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -22px;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease-out;
+          transition: opacity 0.25s ease-out;
+  will-change: opacity;
+  direction: ltr; }
+
+.pswp__preloader__icn {
+  width: 20px;
+  height: 20px;
+  margin: 12px; }
+
+.pswp__preloader--active {
+  opacity: 1; }
+  .pswp__preloader--active .pswp__preloader__icn {
+    /* We use .gif in browsers that don't support CSS animation */
+    background: url(preloader.gif) 0 0 no-repeat; }
+
+.pswp--css_animation .pswp__preloader--active {
+  opacity: 1; }
+  .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
+    -webkit-animation: clockwise 500ms linear infinite;
+            animation: clockwise 500ms linear infinite; }
+  .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
+    -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
+            animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
+
+.pswp--css_animation .pswp__preloader__icn {
+  background: none;
+  opacity: 0.75;
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  margin: 0; }
+
+.pswp--css_animation .pswp__preloader__cut {
+  /* 
+			The idea of animating inner circle is based on Polymer ("material") loading indicator 
+			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
+		*/
+  position: relative;
+  width: 7px;
+  height: 14px;
+  overflow: hidden; }
+
+.pswp--css_animation .pswp__preloader__donut {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #FFF;
+  border-radius: 50%;
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: none;
+  margin: 0; }
+
+@media screen and (max-width: 1024px) {
+  .pswp__preloader {
+    position: relative;
+    left: auto;
+    top: auto;
+    margin: 0;
+    float: right; } }
+
+@-webkit-keyframes clockwise {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg); } }
+
+@keyframes clockwise {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg); } }
+
+@-webkit-keyframes donut-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0); }
+  50% {
+    -webkit-transform: rotate(-140deg);
+            transform: rotate(-140deg); }
+  100% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0); } }
+
+@keyframes donut-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0); }
+  50% {
+    -webkit-transform: rotate(-140deg);
+            transform: rotate(-140deg); }
+  100% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0); } }
+
+/*
+	
+	6. Additional styles
+
+ */
+/* root element of UI */
+.pswp__ui {
+  -webkit-font-smoothing: auto;
+  visibility: visible;
+  opacity: 1;
+  z-index: 1550; }
+
+/* top black bar with buttons and "1 of X" indicator */
+.pswp__top-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 44px;
+  width: 100%; }
+
+.pswp__caption,
+.pswp__top-bar,
+.pswp--has_mouse .pswp__button--arrow--left,
+.pswp--has_mouse .pswp__button--arrow--right {
+  -webkit-backface-visibility: hidden;
+  will-change: opacity;
+  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+
+/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
+.pswp--has_mouse .pswp__button--arrow--left,
+.pswp--has_mouse .pswp__button--arrow--right {
+  visibility: visible; }
+
+.pswp__top-bar,
+.pswp__caption {
+  background-color: rgba(0, 0, 0, 0.5); }
+
+/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
+.pswp__ui--fit .pswp__top-bar,
+.pswp__ui--fit .pswp__caption {
+  background-color: rgba(0, 0, 0, 0.3); }
+
+/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
+.pswp__ui--idle .pswp__top-bar {
+  opacity: 0; }
+
+.pswp__ui--idle .pswp__button--arrow--left,
+.pswp__ui--idle .pswp__button--arrow--right {
+  opacity: 0; }
+
+/*
+	pswp__ui--hidden class is added when controls are hidden
+	e.g. when user taps to toggle visibility of controls
+*/
+.pswp__ui--hidden .pswp__top-bar,
+.pswp__ui--hidden .pswp__caption,
+.pswp__ui--hidden .pswp__button--arrow--left,
+.pswp__ui--hidden .pswp__button--arrow--right {
+  /* Force paint & create composition layer for controls. */
+  opacity: 0.001; }
+
+/* pswp__ui--one-slide class is added when there is just one item in gallery */
+.pswp__ui--one-slide .pswp__button--arrow--left,
+.pswp__ui--one-slide .pswp__button--arrow--right,
+.pswp__ui--one-slide .pswp__counter {
+  display: none; }
+
+.pswp__element--disabled {
+  display: none !important; }
+
+.pswp--minimal--dark .pswp__top-bar {
+  background: none; }

static/css/photoswipe/default-skin.svg

@@ -0,0 +1 @@
+<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>

static/css/photoswipe/photoswipe.min.css

@@ -0,0 +1,179 @@
+/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
+/*
+	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
+*/
+/* pswp = photoswipe */
+.pswp {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  -ms-touch-action: none;
+  touch-action: none;
+  z-index: 1500;
+  -webkit-text-size-adjust: 100%;
+  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
+  -webkit-backface-visibility: hidden;
+  outline: none; }
+  .pswp * {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box; }
+  .pswp img {
+    max-width: none; }
+
+/* style is added when JS option showHideOpacity is set to true */
+.pswp--animate_opacity {
+  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
+  opacity: 0.001;
+  will-change: opacity;
+  /* for open/close transition */
+  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+
+.pswp--open {
+  display: block; }
+
+.pswp--zoom-allowed .pswp__img {
+  /* autoprefixer: off */
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in; }
+
+.pswp--zoomed-in .pswp__img {
+  /* autoprefixer: off */
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab; }
+
+.pswp--dragging .pswp__img {
+  /* autoprefixer: off */
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing; }
+
+/*
+	Background is added as a separate element.
+	As animating opacity is much faster than animating rgba() background-color.
+*/
+.pswp__bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  will-change: opacity; }
+
+.pswp__scroll-wrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; }
+
+.pswp__container,
+.pswp__zoom-wrap {
+  -ms-touch-action: none;
+  touch-action: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0; }
+
+/* Prevent selection and tap highlights */
+.pswp__container,
+.pswp__img {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+      user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none; }
+
+.pswp__zoom-wrap {
+  position: absolute;
+  width: 100%;
+  -webkit-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+  /* for open/close transition */
+  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
+          transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+
+.pswp__bg {
+  will-change: opacity;
+  /* for open/close transition */
+  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
+
+.pswp--animated-in .pswp__bg,
+.pswp--animated-in .pswp__zoom-wrap {
+  -webkit-transition: none;
+  transition: none; }
+
+.pswp__container,
+.pswp__zoom-wrap {
+  -webkit-backface-visibility: hidden; }
+
+.pswp__item {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow: hidden; }
+
+.pswp__img {
+  position: absolute;
+  width: auto;
+  height: auto;
+  top: 0;
+  left: 0; }
+
+/*
+	stretched thumbnail or div placeholder element (see below)
+	style is added to avoid flickering in webkit/blink when layers overlap
+*/
+.pswp__img--placeholder {
+  -webkit-backface-visibility: hidden; }
+
+/*
+	div element that matches size of large image
+	large image loads on top of it
+*/
+.pswp__img--placeholder--blank {
+  background: #222; }
+
+.pswp--ie .pswp__img {
+  width: 100% !important;
+  height: auto !important;
+  left: 0;
+  top: 0; }
+
+/*
+	Error message appears when image is not loaded
+	(JS option errorMsg controls markup)
+*/
+.pswp__error-msg {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  line-height: 16px;
+  margin-top: -8px;
+  color: #CCC; }
+
+.pswp__error-msg a {
+  color: #CCC;
+  text-decoration: underline; }

static/js/load-photoswipe.js

@@ -0,0 +1,74 @@
+/*
+Put this file in /static/js/load-photoswipe.js
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+*/
+/* Show an alert if this js file has been loaded twice */
+if (window.loadphotoswipejs) {
+    window.alert("You've loaded load-photoswipe.js twice. See https://github.com/liwenyip/hugo-easy-gallery/issues/6")
+} 
+var loadphotoswipejs = 1
+
+/* TODO: Make the share function work */
+
+document.addEventListener('DOMContentLoaded', function() {
+    var items = []; // array of slide objects that will be passed to PhotoSwipe()
+    // for every figure element on the page:
+    document.querySelectorAll('figure').forEach(function($figure, index) {
+        if ($figure.className == 'no-photoswipe') return true;  // ignore any figures where class="no-photoswipe"
+        var $a     = $figure.querySelector('a'),
+            $img   = $figure.querySelector('img'),
+            $src   = $a.href,
+            $title = $img.alt,
+            $msrc  = $img.src;
+        // if data-size on <a> tag is set, read it and create an item
+        if ($a.dataset.size) {
+            var $size = $a.dataset.size.split('x');
+            var item = {
+                src   : $src,
+                w     : $size[0],
+                h     : $size[1],
+                title : $title,
+                msrc  : $msrc
+            };
+            console.log("Using pre-defined dimensions for " + $src);
+            // if not, set temp default size then load the image to check actual size
+        } else {
+            var item = {
+                src		: $src,
+                w		: 400, // temp default size
+                h 		: 300, // temp default size
+                title 	: $title,
+                msrc	: $msrc
+            };
+            console.log("Using default dimensions for " + $src);
+            // load the image to check its dimensions
+            // update the item as soon as w and h are known (check every 30ms)
+            var img = new Image(); 
+            img.src = $src;
+            var wait = setInterval(function() {
+                var w = img.naturalWidth,
+                    h = img.naturalHeight;
+                if (w && h) {
+                    clearInterval(wait);
+                    item.w = w;
+                    item.h = h;
+                    console.log("Got actual dimensions for " + img.src);
+                }
+            }, 30);
+        }
+        // Save the index of this image then add it to the array
+        items.push(item);
+        // Event handler for click on a figure
+        $figure.addEventListener('click', function(event) {
+            event.preventDefault();  // prevent the normal behaviour i.e. load the <a> hyperlink
+            // Get the PSWP element and initialize it with the desired options
+            var $pswp = document.querySelector('.pswp');
+            var options = {
+                index: index,
+                bgOpacity: 0.8,
+                showHideOpacity: true
+            }
+            new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
+        }, false);
+    });
+}, false);