update catalog pages
All checks were successful
Hugo / build (push) Successful in 17s

This commit is contained in:
brooke 2024-07-22 23:36:44 -04:00
parent b1392da4ab
commit 372b7cb3fc
7 changed files with 30 additions and 116 deletions

View file

@ -4,7 +4,6 @@ date: 2024-05-22T12:47:43-04:00
art: art:
- main: /img/art/thumb/oya.webp - main: /img/art/thumb/oya.webp
title: Oyá title: Oyá
listOrder: 1
status: Sold status: Sold
description: | description: |
"Oyá" is an aluminum sculpture inspired by the powerful goddess and Orisha in Yoruba mythology that represents storms, transformation, leadership, and protection. She serves as a tribute to relentless female strength and resilience. The sculpture incorporates elements such as the bo staff, tornado-inspired gele, and a poised passé relevé pose to symbolize her warrior spirit and femininity. After a recent rare and destructive tornado in Tallahassee, the sculpture and neighboring buildings were remarkably unharmed. "Oyá" not only demonstrates physical durability but also embodies a spiritual strength that mirrors the resilience of the surrounding community. She stands as a beacon of liberation and unity for all who encounter her presence. "Oyá" is an aluminum sculpture inspired by the powerful goddess and Orisha in Yoruba mythology that represents storms, transformation, leadership, and protection. She serves as a tribute to relentless female strength and resilience. The sculpture incorporates elements such as the bo staff, tornado-inspired gele, and a poised passé relevé pose to symbolize her warrior spirit and femininity. After a recent rare and destructive tornado in Tallahassee, the sculpture and neighboring buildings were remarkably unharmed. "Oyá" not only demonstrates physical durability but also embodies a spiritual strength that mirrors the resilience of the surrounding community. She stands as a beacon of liberation and unity for all who encounter her presence.
@ -25,7 +24,6 @@ art:
- main: /img/art/thumb/angeltrumpet.webp - main: /img/art/thumb/angeltrumpet.webp
title: Angel Trumpets title: Angel Trumpets
listOrder: 2
status: status:
description: | description: |
"Angel Trumpets'' embodies our collaborative exploration, crafted in partnership with textile artist Caitlin Gallo. Suspended 30ft high from branches, three 12ft Angel Trumpet flowers, intricately fashioned from organically hand-dyed fabric and welded steel frames, draw inspiration from South American traditions where these flowers symbolize communication with the departed. Our installation invites contemplation of the delicate balance between earthly existence and spiritual connection, evoking a sense of awe and inviting viewers to reflect on cultural symbolism and the beauty of the natural world. "Angel Trumpets'' embodies our collaborative exploration, crafted in partnership with textile artist Caitlin Gallo. Suspended 30ft high from branches, three 12ft Angel Trumpet flowers, intricately fashioned from organically hand-dyed fabric and welded steel frames, draw inspiration from South American traditions where these flowers symbolize communication with the departed. Our installation invites contemplation of the delicate balance between earthly existence and spiritual connection, evoking a sense of awe and inviting viewers to reflect on cultural symbolism and the beauty of the natural world.
@ -41,7 +39,6 @@ art:
- main: /img/art/thumb/continuum.webp - main: /img/art/thumb/continuum.webp
title: Continuum title: Continuum
listOrder: 3
status: status:
description: | description: |
“Continuum” embodies the profound journey of existence shaped by generations of love, resilience, and sacrifice. Crafted from metal flat bar and industrial pipes, this piece symbolizes the passage of life and the strength of matriarchal families. Each curve and line represents the interconnected threads of countless lives—births endured, parenting struggles overcome, and economic challenges faced—that intricately weave together to form the continuum of life. It celebrates the serendipitous nature of our existence, reflecting on how every detail over thousands of years has aligned perfectly to shape our lives today, honoring the enduring legacy of feminine strength and perseverance. “Continuum” embodies the profound journey of existence shaped by generations of love, resilience, and sacrifice. Crafted from metal flat bar and industrial pipes, this piece symbolizes the passage of life and the strength of matriarchal families. Each curve and line represents the interconnected threads of countless lives—births endured, parenting struggles overcome, and economic challenges faced—that intricately weave together to form the continuum of life. It celebrates the serendipitous nature of our existence, reflecting on how every detail over thousands of years has aligned perfectly to shape our lives today, honoring the enduring legacy of feminine strength and perseverance.
@ -53,7 +50,6 @@ art:
- main: /img/art/thumb/solace.webp - main: /img/art/thumb/solace.webp
title: Solace title: Solace
listOrder: 4
status: status:
description: | description: |
In crafting this piece, I sought to capture a fleeting yet profound moment of tenderness. Using hand-bent copper wire, I delicately shaped the contours of two faces intertwined in a serene embrace. One face gently leans forward, pressing a soft kiss upon the forehead of the other, evoking a sense of quiet affection and connection. Through the simplicity of a single line, I aimed to convey the depth of emotion and the beauty found in intimate human interactions. This artwork invites viewers to contemplate the subtleties of love and the gentle power of a caring touch, encapsulated in the fluidity and grace of wire sculpture. In crafting this piece, I sought to capture a fleeting yet profound moment of tenderness. Using hand-bent copper wire, I delicately shaped the contours of two faces intertwined in a serene embrace. One face gently leans forward, pressing a soft kiss upon the forehead of the other, evoking a sense of quiet affection and connection. Through the simplicity of a single line, I aimed to convey the depth of emotion and the beauty found in intimate human interactions. This artwork invites viewers to contemplate the subtleties of love and the gentle power of a caring touch, encapsulated in the fluidity and grace of wire sculpture.
@ -64,7 +60,6 @@ art:
- main: /img/art/thumb/dragonfieldscope.webp - main: /img/art/thumb/dragonfieldscope.webp
title: Dragonfleidoscope title: Dragonfleidoscope
listOrder: 5
status: status:
description: | description: |
Dragonfleidoscope" is an interactive eight-foot kaleidoscope sculpture that blends industrial strength with vibrant, nature-inspired beauty. Crafted from welded steel trusses forming a triangular prism, this collaborative piece features colorful bike rims decorated with crochet patterns by textile artist and life partner, Caitlin Gallo. These rims, bolted to threaded pipes, spin to create mesmerizing tessellations. Positioned to face the sunset, the kaleidoscope's colors shift throughout the day, captivating viewers with its dynamic interplay of light. A four-foot metal dragonfly perches atop the structure, complemented by laser-cut metal cattails, echoing the natural theme. With 32,000 attendees at the festival, "Dragonfleidoscope" invites a playful, childlike sense of wonder, encouraging participants to rediscover the magic of their surroundings through a joyous dance of light and imagination. Dragonfleidoscope" is an interactive eight-foot kaleidoscope sculpture that blends industrial strength with vibrant, nature-inspired beauty. Crafted from welded steel trusses forming a triangular prism, this collaborative piece features colorful bike rims decorated with crochet patterns by textile artist and life partner, Caitlin Gallo. These rims, bolted to threaded pipes, spin to create mesmerizing tessellations. Positioned to face the sunset, the kaleidoscope's colors shift throughout the day, captivating viewers with its dynamic interplay of light. A four-foot metal dragonfly perches atop the structure, complemented by laser-cut metal cattails, echoing the natural theme. With 32,000 attendees at the festival, "Dragonfleidoscope" invites a playful, childlike sense of wonder, encouraging participants to rediscover the magic of their surroundings through a joyous dance of light and imagination.
@ -87,7 +82,6 @@ art:
- main: /img/art/thumb/dragonfly.webp - main: /img/art/thumb/dragonfly.webp
title: Dragonfly title: Dragonfly
listOrder: 6
status: status:
description: | description: |
“Dragonfly” embodies the essence of my journey from school to discovering my true calling as an artist, capturing the rugged style of my early construction days. Crafted from repurposed elements from Lively Tech, this piece reflects my roots in welding and fabrication. Drawing from the raw beauty of industrial design, it portrays the grace and elegance of its subject, delicately perched in a moment of stillness. As my first creation in metal art, it symbolizes the beginning of my exploration into artistic expression, where every curve and line tells a story of newfound passion and creativity. Through this sculpture, viewers are invited to explore the interplay of strength and delicacy, discovering unexpected beauty in its rustic texture and refined forms. “Dragonfly” embodies the essence of my journey from school to discovering my true calling as an artist, capturing the rugged style of my early construction days. Crafted from repurposed elements from Lively Tech, this piece reflects my roots in welding and fabrication. Drawing from the raw beauty of industrial design, it portrays the grace and elegance of its subject, delicately perched in a moment of stillness. As my first creation in metal art, it symbolizes the beginning of my exploration into artistic expression, where every curve and line tells a story of newfound passion and creativity. Through this sculpture, viewers are invited to explore the interplay of strength and delicacy, discovering unexpected beauty in its rustic texture and refined forms.
@ -102,7 +96,6 @@ art:
- main: /img/art/thumb/eternalbliss.webp - main: /img/art/thumb/eternalbliss.webp
title: Eternal Bliss title: Eternal Bliss
listOrder: 7
status: status:
description: | description: |
"Eternal Bliss" embodies the essence of tranquility and introspection, crafted from layers of skateboard decks transformed into a serene representation. Through meticulous carving and shaping, I sculpted closed eyes that evoke a blissful trance, inviting viewers to contemplate the depths of inner peace amid life's tumultuous rhythms. This sculpture is an ongoing transformative journey, much like my own path of artistic expression. As I continue to shape and refine its form, I seek to capture that elusive moment of clarity and completion, mirroring the lifelong search for eternal bliss. Each layer, fused together with epoxy and shaped with care, reflects the resilience and beauty found in embracing creativity as a sanctuary from the demands of a busy world. "Eternal Bliss" invites viewers to find solace and inspiration in the quietude of artistic contemplation, reminding us of the eternal quest for harmony and tranquility in our lives. "Eternal Bliss" embodies the essence of tranquility and introspection, crafted from layers of skateboard decks transformed into a serene representation. Through meticulous carving and shaping, I sculpted closed eyes that evoke a blissful trance, inviting viewers to contemplate the depths of inner peace amid life's tumultuous rhythms. This sculpture is an ongoing transformative journey, much like my own path of artistic expression. As I continue to shape and refine its form, I seek to capture that elusive moment of clarity and completion, mirroring the lifelong search for eternal bliss. Each layer, fused together with epoxy and shaped with care, reflects the resilience and beauty found in embracing creativity as a sanctuary from the demands of a busy world. "Eternal Bliss" invites viewers to find solace and inspiration in the quietude of artistic contemplation, reminding us of the eternal quest for harmony and tranquility in our lives.
@ -117,7 +110,6 @@ art:
- main: /img/art/thumb/karenia.webp - main: /img/art/thumb/karenia.webp
title: Karenia title: Karenia
listOrder: 8
status: status:
description: | description: |
"Karenia" is an industrial interpretation of Florida's diminishing underwater landscapes, crafted from thin, bent steel resembling seaweed growing from concrete rock. The square steel pieces at the tips signify the declining water quality caused by red tides, which result from chemical runoff from farming, factories, and sewage treatment plants. Named after Karenia brevis, the algae responsible for Florida's harmful red tides, this piece highlights the devastating impact of these toxic blooms on marine life and human health. "Karenia" serves as a stark reminder of the urgent need for sustainable practices to protect our fragile aquatic ecosystems. "Karenia" is an industrial interpretation of Florida's diminishing underwater landscapes, crafted from thin, bent steel resembling seaweed growing from concrete rock. The square steel pieces at the tips signify the declining water quality caused by red tides, which result from chemical runoff from farming, factories, and sewage treatment plants. Named after Karenia brevis, the algae responsible for Florida's harmful red tides, this piece highlights the devastating impact of these toxic blooms on marine life and human health. "Karenia" serves as a stark reminder of the urgent need for sustainable practices to protect our fragile aquatic ecosystems.
@ -128,7 +120,6 @@ art:
- main: /img/art/thumb/nocturnus.webp - main: /img/art/thumb/nocturnus.webp
title: Nocturnus title: Nocturnus
listOrder: 9
location: Suwannee Hulaween location: Suwannee Hulaween
status: status:
description: | description: |
@ -144,7 +135,6 @@ art:
- main: /img/art/thumb/invisiblehand.webp - main: /img/art/thumb/invisiblehand.webp
title: The Invisible Hand title: The Invisible Hand
listOrder: 10
status: status:
description: | description: |
"The Invisible Hand" represents the relentless sacrifice of the working man under the weight of corporate greed. The severed hand, stripped to its bones and veins, symbolizes the lifeblood drained from laborers by an unfeeling system. Poured aluminum, resembling spilled blood, flows over the hand, a stark reminder of the human cost buried beneath the pursuit of profit. This work challenges the viewer to confront the unseen forces that exploit and discard the common man, urging a reflection on the true price of progress and prosperity. "The Invisible Hand" represents the relentless sacrifice of the working man under the weight of corporate greed. The severed hand, stripped to its bones and veins, symbolizes the lifeblood drained from laborers by an unfeeling system. Poured aluminum, resembling spilled blood, flows over the hand, a stark reminder of the human cost buried beneath the pursuit of profit. This work challenges the viewer to confront the unseen forces that exploit and discard the common man, urging a reflection on the true price of progress and prosperity.
@ -157,7 +147,6 @@ art:
- main: /img/art/thumb/rift.webp - main: /img/art/thumb/rift.webp
title: The Rift title: The Rift
listOrder: 11
status: status:
description: | description: |
"The Rift" is a visual exploration of connection and separation, captured in the elegant simplicity of two copper wire hands reaching out to one another. One hand extends palm down, the other palm up, symbolizing giving and receiving, yearning and restraint. Housed in a custom-built wooden frame, the piece's true essence emerges through its shadows. As light moves, the shadows of the hands create an illusion of motion, portraying a perpetual yet unfulfilled embrace. This dynamic interplay highlights the tension of human connection, inviting viewers to reflect on the beauty and sorrow of relationships that feel both deeply connected and incomplete. "The Rift" is a visual exploration of connection and separation, captured in the elegant simplicity of two copper wire hands reaching out to one another. One hand extends palm down, the other palm up, symbolizing giving and receiving, yearning and restraint. Housed in a custom-built wooden frame, the piece's true essence emerges through its shadows. As light moves, the shadows of the hands create an illusion of motion, portraying a perpetual yet unfulfilled embrace. This dynamic interplay highlights the tension of human connection, inviting viewers to reflect on the beauty and sorrow of relationships that feel both deeply connected and incomplete.
@ -170,7 +159,6 @@ art:
- main: /img/art/thumb/visage.webp - main: /img/art/thumb/visage.webp
title: Visage title: Visage
listOrder: 12
status: Sold status: Sold
description: | description: |
"Visage” captures the essence of human perception through fragmented abstraction. Constructed from hand-bent copper wire, the sculpture delicately assembles individual elements of the face into a unified yet fragmented whole. Whether viewed head-on or from the side, the arrangement invites a dynamic interaction, as if the figure is perpetually engaging with the viewer. This piece explores the nuanced interplay between perception and presence, illustrating how minimalistic forms can evoke a profound sense of connection and introspection. "Visage” captures the essence of human perception through fragmented abstraction. Constructed from hand-bent copper wire, the sculpture delicately assembles individual elements of the face into a unified yet fragmented whole. Whether viewed head-on or from the side, the arrangement invites a dynamic interaction, as if the figure is perpetually engaging with the viewer. This piece explores the nuanced interplay between perception and presence, illustrating how minimalistic forms can evoke a profound sense of connection and introspection.
@ -182,7 +170,6 @@ art:
- main: /img/art/thumb/sinuous.webp - main: /img/art/thumb/sinuous.webp
title: Sinuous title: Sinuous
listOrder: 13
status: status:
description: | description: |
"Sinuous" captures the elegance and fluidity of the female form through a single, unbroken line of hand-bent copper wire. The sculpture outlines a curvy figure in a moment of coyness, glancing back over her shoulder. The warm, earthy tones of the copper wire add an organic quality, emphasizing the natural curves and playful posture that convey both strength and vulnerability. This piece celebrates the beauty of minimalism, where each bend and curve contributes to an expression of grace and subtle allure, symbolizing the uninterrupted flow of life and the elegance in every twist and turn of our journey. "Sinuous" captures the elegance and fluidity of the female form through a single, unbroken line of hand-bent copper wire. The sculpture outlines a curvy figure in a moment of coyness, glancing back over her shoulder. The warm, earthy tones of the copper wire add an organic quality, emphasizing the natural curves and playful posture that convey both strength and vulnerability. This piece celebrates the beauty of minimalism, where each bend and curve contributes to an expression of grace and subtle allure, symbolizing the uninterrupted flow of life and the elegance in every twist and turn of our journey.
@ -192,7 +179,6 @@ art:
- main: /img/art/thumb/reverie.webp - main: /img/art/thumb/reverie.webp
title: Reverie title: Reverie
listOrder: 14
status: status:
description: | description: |
"Reverie" captures a moment of intimate tranquility between two individuals, outlined in a single, continuous line of hand-bent copper wire. Seated side by side, bare and unguarded, they gaze at the night sky, wrapped in the embrace of friendship and solace. The resin-coated steel circle symbolizes the full moon, casting a gentle glow over their shared moment of peace, free from the world's judgments and troubles. This piece reflects the serene beauty of connection and the quiet strength found in moments of togetherness, inviting viewers to find solace in the simplicity and depth of human bonds under the moonlit sky. "Reverie" captures a moment of intimate tranquility between two individuals, outlined in a single, continuous line of hand-bent copper wire. Seated side by side, bare and unguarded, they gaze at the night sky, wrapped in the embrace of friendship and solace. The resin-coated steel circle symbolizes the full moon, casting a gentle glow over their shared moment of peace, free from the world's judgments and troubles. This piece reflects the serene beauty of connection and the quiet strength found in moments of togetherness, inviting viewers to find solace in the simplicity and depth of human bonds under the moonlit sky.
@ -202,7 +188,6 @@ art:
- main: /img/art/thumb/steelhedge.webp - main: /img/art/thumb/steelhedge.webp
title: Steel Hedgehog title: Steel Hedgehog
listOrder: 15
status: status:
description: | description: |
The “steel hedgehog” emerges as a compelling symbol of defiance, embodying a fusion of fortitude and resistance against the backdrop of state militarization. Surrounded by growing authoritarian and fascist regimes, Czechoslovakia stood as a democratic republic with a relatively strong and active leftist movement, including a significant Communist Party presence. Czech hedgehogs originated from a history of rapid deployment in the 1930s with around 200,000 of these steel sentinels made for Czechoslovakias border fortifications to protect the young republic from hostile neighbors. These steel structures serve not only as physical barriers but also as metaphors for collective action in times of need, hinting at the potential for communities to unite swiftly against oppressive forces, perhaps even forming impromptu defenses against tanks as needed. From their origins as local defenses to their transformative role in challenging state militarization, steel hedgehogs evoke a sense of defiance intertwined with communal empowerment, becoming symbols of resistance and creative opposition. This artistic exploration captures the duality of strength and solidarity, resilience and challenge, prompting viewers to contemplate unified action and collaborative resistance against authoritarian threats. The “steel hedgehog” emerges as a compelling symbol of defiance, embodying a fusion of fortitude and resistance against the backdrop of state militarization. Surrounded by growing authoritarian and fascist regimes, Czechoslovakia stood as a democratic republic with a relatively strong and active leftist movement, including a significant Communist Party presence. Czech hedgehogs originated from a history of rapid deployment in the 1930s with around 200,000 of these steel sentinels made for Czechoslovakias border fortifications to protect the young republic from hostile neighbors. These steel structures serve not only as physical barriers but also as metaphors for collective action in times of need, hinting at the potential for communities to unite swiftly against oppressive forces, perhaps even forming impromptu defenses against tanks as needed. From their origins as local defenses to their transformative role in challenging state militarization, steel hedgehogs evoke a sense of defiance intertwined with communal empowerment, becoming symbols of resistance and creative opposition. This artistic exploration captures the duality of strength and solidarity, resilience and challenge, prompting viewers to contemplate unified action and collaborative resistance against authoritarian threats.
@ -213,7 +198,6 @@ art:
- main: /img/art/thumb/vitality.webp - main: /img/art/thumb/vitality.webp
title: Vitality title: Vitality
listOrder: 16
status: status:
description: | description: |
"Vitality" embodies the essence of life through a single-line sculpture. Crafted from delicate hand-bent copper wire, it forms an anatomical heart framed within an industrial steel pipe, reminiscent of the protective pericardial cavity surrounding this vital organ. This juxtaposition of materials symbolizes the delicate balance between strength and fragility, reflecting the steel's protective embrace around our vulnerable core. "Vitality" embodies the essence of life through a single-line sculpture. Crafted from delicate hand-bent copper wire, it forms an anatomical heart framed within an industrial steel pipe, reminiscent of the protective pericardial cavity surrounding this vital organ. This juxtaposition of materials symbolizes the delicate balance between strength and fragility, reflecting the steel's protective embrace around our vulnerable core.
@ -223,7 +207,6 @@ art:
- main: /img/art/thumb/steelmagnolia.webp - main: /img/art/thumb/steelmagnolia.webp
title: Steel Magnolia title: Steel Magnolia
listOrder: 17
status: status:
description: | description: |
"Steel Magnolia" represents a pivotal moment in my hard-earned welding career. Amidst the challenges and long hours at a school construction site, I unearthed a discarded base plate bearing the scars of its industrial history—originally welded to an underground pipe, now transformed into a canvas for a meticulously handcrafted magnolia flower. Shaped from copper wire with intricate care, the sculpture harmonizes the raw, torch-cut steel backdrop with the delicate beauty of the flower. It symbolizes the resilience and grace of a 'Steel Magnolia'—women who embody both delicate sensitivity and unwavering toughness in the face of adversity. Inspired deeply by my mother's lifelong dedication as an educator, 'Steel Magnolia' celebrates her influence and the enduring fortitude of women who navigate life's challenges with their unique version of poise and dignity. "Steel Magnolia" represents a pivotal moment in my hard-earned welding career. Amidst the challenges and long hours at a school construction site, I unearthed a discarded base plate bearing the scars of its industrial history—originally welded to an underground pipe, now transformed into a canvas for a meticulously handcrafted magnolia flower. Shaped from copper wire with intricate care, the sculpture harmonizes the raw, torch-cut steel backdrop with the delicate beauty of the flower. It symbolizes the resilience and grace of a 'Steel Magnolia'—women who embody both delicate sensitivity and unwavering toughness in the face of adversity. Inspired deeply by my mother's lifelong dedication as an educator, 'Steel Magnolia' celebrates her influence and the enduring fortitude of women who navigate life's challenges with their unique version of poise and dignity.
@ -234,7 +217,6 @@ art:
- main: /img/art/thumb/revelation.webp - main: /img/art/thumb/revelation.webp
title: Revelation title: Revelation
listOrder: 18
status: status:
description: | description: |
“Revelation” embodies a transformative journey, born out of a unique challenge and a limited timespan. This sculpture, crafted from rough-cut scrap metal, captures the essence of discovery and growth in my artistic career. Inspired by an old concept drawing, its single-line abstract face reflects a surprised expression, symbolizing the awe and wonder found in unexpected moments of creation. Through this sculpture, I seek to convey the beauty and serendipity of artistic exploration, where limitations become catalysts for boundless creativity. “Revelation” embodies a transformative journey, born out of a unique challenge and a limited timespan. This sculpture, crafted from rough-cut scrap metal, captures the essence of discovery and growth in my artistic career. Inspired by an old concept drawing, its single-line abstract face reflects a surprised expression, symbolizing the awe and wonder found in unexpected moments of creation. Through this sculpture, I seek to convey the beauty and serendipity of artistic exploration, where limitations become catalysts for boundless creativity.

View file

@ -1,7 +1,7 @@
<div <div
class="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4" class="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4"
> >
{{ range .Params.art }} {{ if ne .item "" }} {{ range $index, $element := .Params.art }} {{ if ne .item "" }}
<div class="relative flex flex-col bg-white rounded-lg border p-4 relative"> <div class="relative flex flex-col bg-white rounded-lg border p-4 relative">
<img <img
loading="lazy" loading="lazy"
@ -25,7 +25,7 @@
{{ end }} {{ end }}
</div> </div>
<div class="grid grid-cols-1 place-items-end"> <div class="grid grid-cols-1 place-items-end">
<a class="w-full" href="#modal-{{ .listOrder | urlize }}"> <a class="w-full" href="#modal-{{ $index | urlize }}">
<button <button
type="button" type="button"
class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200" class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200"
@ -35,7 +35,7 @@
</a> </a>
</div> </div>
<div <div
id="modal-{{ .listOrder | urlize }}" id="modal-{{ $index | urlize }}"
class="fixed z-10 inset-0 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" class="fixed z-10 inset-0 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity"
aria-labelledby="modal-title" aria-labelledby="modal-title"
role="dialog" role="dialog"
@ -51,7 +51,7 @@
>&#8203;</span >&#8203;</span
> >
<div <div
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle self-center sm:max-w-lg w-full" class="border inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle self-center sm:max-w-lg w-full"
> >
<div <div
class="bg-white max-h-[80vh] overflow-y-scroll overflow-x-hidden px-4 pt-5 pb-4 sm:p-6 sm:pb-4" class="bg-white max-h-[80vh] overflow-y-scroll overflow-x-hidden px-4 pt-5 pb-4 sm:p-6 sm:pb-4"
@ -65,26 +65,14 @@
<div <div
class="columns-1 gap-2 sm:columns-2 sm:gap-4 [&>div:not(:first-child)]:mt-4" class="columns-1 gap-2 sm:columns-2 sm:gap-4 [&>div:not(:first-child)]:mt-4"
> >
{{ range .gallery }} {{ range $index, $element := .gallery }}
<div <div class="relative ease-in-out duration-200 transition-all">
class="relative ease-in-out duration-200 transition-all"
>
<img <img
id="img-{{ $index }}"
loading="lazy" loading="lazy"
class="rounded-lg w-full" class="rounded-md w-full"
src="{{ .image }}" src="{{ .image }}"
/> />
<button class="absolute right-2 top-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="fill-black w-6 h-6 bg-white p-1 rounded-sm"
>
<path
d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"
/>
</svg>
</button>
</div> </div>
{{ end }} {{ end }}
</div> </div>
@ -145,53 +133,6 @@
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const modalButtons = document.querySelectorAll(".grid-cols-1 a"); const modalButtons = document.querySelectorAll(".grid-cols-1 a");
const closeButtons = document.querySelectorAll("#close-modal"); const closeButtons = document.querySelectorAll("#close-modal");
const modals = document.querySelectorAll(".fixed");
const radioButtons = document.querySelectorAll(
'input[type="radio"][name="category"]'
);
function filterItems(category) {
console.log("Filtering items for category:", category);
const items = document.querySelectorAll(".grid > div");
items.forEach((item) => {
const itemCategory = item.querySelector(".bg-blue-100");
if (!category || itemCategory.textContent === category) {
item.classList.remove("hidden");
} else {
item.classList.add("hidden");
const modalId = item.id.replace("modal-", "");
const modal = document.getElementById(modalId);
if (modal) modal.classList.add("hidden");
}
});
}
function updateUrl(category) {
const url = window.location.href.split("#")[0];
const newUrl = category ? `${url}#${category}` : url;
window.history.replaceState({}, "", newUrl);
}
const category = window.location.hash.substring(1);
console.log("Initial category:", category);
filterItems(category);
window.addEventListener("hashchange", function () {
const newCategory = window.location.hash.substring(1);
console.log("New category:", newCategory);
filterItems(newCategory);
});
radioButtons.forEach((radio) => {
radio.addEventListener("change", function () {
const category = this.value;
console.log("Selected category:", category);
updateUrl(category);
filterItems(category);
});
});
modalButtons.forEach((button) => { modalButtons.forEach((button) => {
button.addEventListener("click", function (e) { button.addEventListener("click", function (e) {
@ -209,15 +150,5 @@
modal.classList.add("hidden"); modal.classList.add("hidden");
}); });
}); });
if (category) {
const radioToSelect = document.querySelector(
`input[type="radio"][name="category"][value="${category}"]`
);
if (radioToSelect) {
radioToSelect.checked = true;
filterItems(category);
}
}
}); });
</script> </script>

View file

@ -31,12 +31,22 @@
{{ $title := print .Site.Title " | " .Title }} {{ if .IsHome }}{{ $title = {{ $title := print .Site.Title " | " .Title }} {{ if .IsHome }}{{ $title =
.Site.Title }}{{ end }} .Site.Title }}{{ end }}
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest"> <link rel="manifest" href="/site.webmanifest" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> <link
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png"> rel="icon"
type="image/png"
sizes="192x192"
href="/android-chrome-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="512x512"
href="/android-chrome-512x512.png"
/>
</head> </head>

View file

@ -46,7 +46,9 @@
/> />
{{ else }} {{ else }}
<div class="w-full h-52 rounded-md object-cover border-2 border-gray-200 bg-gray-100"></div> <div
class="w-full h-52 rounded-md object-cover border-2 border-gray-200 bg-gray-100"
></div>
{{ end }} {{ end }}
<div class="px-1 pt-4"> <div class="px-1 pt-4">
@ -163,24 +165,13 @@
> >
{{ range .gallery }} {{ range .gallery }}
<div <div
class="relative hover:scale-105 ease-in-out duration-200 transition-all hover:shadow-2xl" class="relative"
> >
<img <img
loading="lazy" loading="lazy"
class="rounded-lg w-full" class="rounded-md w-full"
src="{{ .image }}" src="{{ .image }}"
/> />
<button class="absolute right-2 top-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="fill-black w-6 h-6 bg-white p-1 rounded-sm"
>
<path
d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"
/>
</svg>
</button>
</div> </div>
{{ end }} {{ end }}
</div> </div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 639 KiB

After

Width:  |  Height:  |  Size: 486 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 549 KiB

After

Width:  |  Height:  |  Size: 409 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 455 KiB

After

Width:  |  Height:  |  Size: 328 KiB