-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
318 lines (306 loc) · 20.1 KB
/
portfolio.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WORK Ana Garcia Peña</title>
<link rel="icon" href="./assets/icons/svg/10.svg" type="image/x-icon" />
<link rel="manifest" href="/manifest.json">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./css/typos.css" />
</head>
<body>
<!-- Navbar -->
<div id="custom-cursor"></div>
<header class="navbar">
<nav>
<div class="navbar-content">
<ul>
<li>
<a href="index.html#home"><button>Home</button></a>
</li>
<li>
<a href="index.html#get-to-know-me"
><button>Get to know me</button></a
>
</li>
<li>
<a href="index.html#portfolio"><button>Work</button></a>
</li>
<li>
<a href="index.html#get-in-contact"
><button>Get in contact</button></a
>
</li>
</ul>
</div>
</nav>
</header>
<!---------------- Main Sections -------------------->
<main>
<!-- Índice -->
<div class="index">
<ul class="index-list">
<li>
<a href="#section1">Visual Identity</a>
</li>
<li>
<a href="#section2">Print Design</a>
</li>
<li>
<a href="#section3">Web Design</a
><span class="vector-index">↘</span>
</li>
<li>
<a href="#section4">Illustration</a>
</li>
</ul>
<object
data="https://ik.imagekit.io/garciaanita/7.svg?updatedAt=1736255257571"
type="image/svg+xml"
class="moving-vector"
></object>
</div>
<!------------ barra color ------------>
<div class="color-bar"></div>
<div class="color-bar2"></div>
<div class="color-bar3"></div>
<!------------ Sección 1 ------------>
<section id="section1" class="portfolio-section">
<div class="text-and-images">
<!-- Contenedor del texto -->
<div class="text-content">
<h2 class="section-title">Visual Identity.</h2>
<p class="section-description">
Projects focused on branding with a distinctive personality. Each
proposal reflects a balance between simplicity and detail, with
the aim of building coherent and meaningful visual identities. The
exploration of new forms and approaches seeks to strengthen the
identity of each brand, bringing freshness and creativity.
</p>
</div>
<!-- Contenedor de las imágenes -->
<div class="image-grid">
<div
class="image-item"
onclick="showTooltip(this, 'CREATION AND DESIGN OF CORPORATE VISUAL IDENTITY FOR THE NEW SUSTAINABILITY COMMISSION. The Sustainability Commission is a coalition of leading companies committed to sustainable development. Its purpose is to promote responsible business practices aligned with the UNs 2030 Agenda goals. It serves as an international and multisectoral meeting point, fostering collaboration and knowledge exchange in the areas of Sustainability, Business, and Governance (ESG).')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/Comisio%CC%81n.jpg?updatedAt=1736353474683"
alt="Image 1"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, 'GRAPHIC AND VISUAL LINE DESIGN FOR AMENITIES AT THOMPSON MADRID HOTEL. Thompson Madrid, part of the prestigious Hyatt luxury hotel chain, is known for delivering exclusive and sophisticated experiences that blend modern elegance with local cultural touches. For the opening of its boutique in Madrid, the hotel sought to develop a line of merchandise that captures the vibrant and rich essence of the city.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/tote%20bag2.jpg?updatedAt=1736344187773"
alt="Image 2"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, 'REBRANDING FOR CHILDRENS FASHION STORE VUVALU. Building on the legacy of PEÑA, Vuvalu emerges as a brand exclusively specializing in childrens ceremonial fashion, led by the second generation of the founding family. This new direction focuses on offering a carefully curated line for baptisms, flower girl and ring bearer attire, and first communions, while preserving the tradition of quality and attention to detail that has defined the brand since its inception.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/indiv%20sticker.jpg?updatedAt=1736342305805"
alt="Image 3"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, 'CREATION AND DESIGN OF A NEW LINE OF ARTISANAL BEERS FOR MAHOU. Hijas de Casimiro Mahou celebrates tradition and femininity with a design inspired by the Art Nouveau movement. The name connects directly to Mahous 19th-century origins, when Casimiro Mahou transitioned from producing paints and ice to brewing beer, establishing one of Spains most iconic brands. Paying homage to the original Hijos de Casimiro Mahou, this new line represents a modern evolution, embracing values like craftsmanship, creativity, and sophistication. The Art Nouveau style reflects the period when the brand first expanded, merging historical roots with contemporary appeal.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/Hijas%20Casimiro%20Mahou%203.jpg?updatedAt=1736344187858"
alt="Image 4"
/>
</div>
</div>
</div>
<div id="tooltip" class="tooltip hidden"></div>
</section>
<!--------- Sección 2 ---------->
<section id="section2" class="portfolio-section">
<div class="text-and-images">
<!-- Contenedor del texto -->
<div class="text-content">
<h2 class="section-title">Print Design.</h2>
<p class="section-description">
Projects focused on visual and typographic composition for print and digital media. Each proposal aims to achieve a balance between aesthetics and functionality, emphasizing the importance of detail in organizing information. The projects reflect a thoughtful approach to readability and the reader's experience, with creative solutions that add value to every editorial piece.
</p>
</div>
<!-- Contenedor de las imágenes -->
<div class="image-grid">
<div
class="image-item"
onclick="showTooltip(this, 'GRAPHIC CAMPAIGN FOR WORLD FOOD DAY. This project involved the development of a graphic campaign for World Food Day, featuring two creative pieces. Designed in A2 format, the materials utilized both sides of the sheet, with the reverse folding into an eight-part informational brochure. The goal was to create a visually distinctive commemorative poster that encouraged the audience to keep it beyond the event. The design balanced coherence, professionalism, and modernity, aiming to connect emotionally with the audience through an accessible and appealing approach.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/IG%20BYGA2-01%20Medium.jpeg?updatedAt=1736360713625"
alt="Image 1"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, 'CREATION AND DESIGN OF A FANZINE DEDICATED TO THE WORKS OF MIKE FLANAGAN. This fanzine was crafted in an A3 folded format, divided into eight A5-sized pages on one side of the A3 sheet, with the reverse side dedicated to an A3 poster. Designed in a horizontal layout, the fanzine features a carefully curated selection of disruptive yet clean and versatile typographic styles, ensuring seamless combinations and a polished visual appeal.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/Fanzine-poster-05%20Medium.jpeg?updatedAt=1736361564108"
alt="Image 2"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, 'CREATION AND LAYOUT OF A MAGAZINE ABOUT DESIGN. Etherea is an editorial project that explores the influence of nature and organic forms on contemporary design, covering disciplines such as architecture, product design, and fashion design. The primary goal of the magazine is to highlight how natural elements inspire and transform current design practices through a clean, balanced, and carefully structured editorial layout.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/3y4.jpg?updatedAt=1736344190821"
alt="Image 3"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, 'DESIGN OF A LEAFLET FOR A MUSEUMS PRIVATE TOURS. This project involved the creation of a booklet-style leaflet designed to promote the Museums exclusive private tours. The format features five and a half panels, with the final half-panel adding a unique touch of originality and serving as a semi-closure for the piece. The layout prioritizes a neat, clean, and structured organization of content, ensuring easy readability and a seamless flow of information. The design concept draws inspiration from an elegant and minimalist aesthetic, evoking a sense of professionalism and sophistication that aligns with the exclusivity of the Museums offerings.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/Screenshot%202025-01-08%20at%2019.48.45.png?updatedAt=1736362225585"
alt="Image 4"
/>
</div>
</div>
</div>
<div id="tooltip" class="tooltip hidden"></div>
</section>
<!--------Sección 3-------->
<section id="section3" class="portfolio-section">
<div class="text-and-images">
<!-- Contenedor del texto -->
<div class="text-content">
<h2 class="section-title">Digital Design.</h2>
<p class="section-description">
Projects focused on creating intuitive and visually appealing interfaces. They explore innovative solutions while always prioritizing usability and visual consistency in digital environments.
</p>
</div>
<!-- Contenedor de las imágenes -->
<div class="image-grid">
<div
class="image-item"
onclick="showTooltip(this, 'CREATION OF A WEBSITE ON CIRCULAR ECONOMY. This project addresses the challenges faced by the packaging industry within the beauty and skincare sector in the context of the circular economy, focusing on issues such as excessive plastic usage, complex designs, and non-recyclable materials. Traditionally, packaging in this sector has relied heavily on single-use plastics and non-recyclable wraps, contributing significantly to ocean pollution, ecosystem degradation, and landfill waste.The aim is to steer the industry toward a more sustainable model, where resources are kept in use for as long as possible, reducing environmental impact and promoting a more circular and regenerative system. To contribute to this solution, a website has been developed as an informational hub designed to educate and guide the industry towards more sustainable practices.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/ipad.jpg?updatedAt=1736362319398"
alt="Image 1"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, 'CREATION OF A WEBSITE AS A PERSONAL PORTFOLIO. I designed this website as my personal portfolio to present myself as a graphic designer. The goal was to create a creative and eye-catching page, while maintaining a balance to avoid overstatement. I complemented it with my own touch by using neutral and elegant tones, aiming for a sophisticated, professional aesthetic that reflects my design sensibility. This platform serves as a cohesive representation of my work, showcasing my skills and style in a visually engaging yet refined manner.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/Untitled%20design.jpg?updatedAt=1736362923292"
alt="Image 2"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, 'CREATION OF A 3D COMPOSITION. Crystal Desert is a 3D diorama that encapsulates a desert landscape within an aquarium, where the elements are crafted from glass and semi-crystalline materials. This project aims to evoke a sense of mystery and elegance through the interplay of transparency and light, creating a surreal and otherworldly desert environment. The contrast between the rugged intensity of a natural desert and the delicate qualities of glass offers a visually captivating and unique experience. Inspired by the idea of portraying natural landscapes using unconventional materials, this composition explores the beauty of glass and semi-transparent elements to redefine the perception of the desert.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/Ultra%20FINALVIEW.%20Desert%20Diorama%20Edit2.jpeg?updatedAt=1736367188321"
alt="Image 3"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, '3D LETTER REPRESENTATION. Inspired by the concept of 360 Days of Type, this project reimagines the letter N as a functional design object. The goal is to merge typography with product design, transforming the letter into a piece that is both functional and artistic. The design explores the intersection of aesthetics and utility, creating an object that serves multiple purposes: as a sculptural art piece, a soft ambient light source, and a support for floral arrangements.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/Screenshot%202025-01-08%20at%2021.12.56.png?updatedAt=1736367188398"
alt="Image 4"
/>
</div>
</div>
</div>
<div id="tooltip" class="tooltip hidden"></div>
</section>
<!--------Sección 4 ------------>
<section id="section4" class="portfolio-section">
<div class="text-and-images">
<!-- Contenedor del texto -->
<div class="text-content">
<h2 class="section-title">Illustration.</h2>
<p class="section-description">
A collection of projects that explore visual creativity through drawing and image capture. It showcases a variety of techniques aimed at bringing originality and expressiveness to both graphic and photographic work.
</p>
</div>
<!-- Contenedor de las imágenes -->
<div class="image-grid">
<div
class="image-item"
onclick="showTooltip(this, 'CONCEPTUAL ILLUSTRATION FOR JOT DOWN MAGAZINE ARTICLES. This project involved creating conceptual illustrations for three articles in Jot Down magazine: Chess in Outer Space, The Marine Dispensary, and How to Be a Successful Cryptolay. Each illustration aimed to visually represent the essence of the article on a full-page spread. The design process utilized collage techniques and a pastel color palette. The approach combined conceptual and abstract elements to creatively reflect the innovative themes of each article.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/IMG_2041.JPG?updatedAt=1736366773096"
alt="Image 1"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, 'CONCEPTUAL ILLUSTRATION FOR JOT DOWN MAGAZINE ARTICLES. This project involved creating conceptual illustrations for three articles in Jot Down magazine: Chess in Outer Space, The Marine Dispensary, and How to Be a Successful Cryptolay. Each illustration aimed to visually represent the essence of the article on a full-page spread. The design process utilized collage techniques and a pastel color palette. The approach combined conceptual and abstract elements to creatively reflect the innovative themes of each article.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/IMG_2044%20Medium.jpeg?updatedAt=1736367664974"
alt="Image 2"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, 'ILLUSTRATED CAMPAIGN FOR FOUR SEASONS AND VEUVET CLICQUOT CO-BRANDING. This project focuses on a series of illustrations created for a co-branding campaign between Four Seasons and Veuve Clicquot Champagne. The campaign is designed for three iconic locations of the luxury hotel chain: Marrakech, the French Riviera, and New York. The goal is to capture the essence of each luxurious destination, as well as the elegance and sophistication of the Champagne, reflecting an aesthetic that resonates with an exclusive audience aged between 35 and 60, with refined tastes.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/IMG_2615%20Medium.jpeg?updatedAt=1736367462207"
alt="Image 3"
/>
</div>
<div
class="image-item"
onclick="showTooltip(this, 'ILLUSTRATED CAMPAIGN FOR FOUR SEASONS AND VEUVET CLICQUOT CO-BRANDING. This project focuses on a series of illustrations created for a co-branding campaign between Four Seasons and Veuve Clicquot Champagne. The campaign is designed for three iconic locations of the luxury hotel chain: Marrakech, the French Riviera, and New York. The goal is to capture the essence of each luxurious destination, as well as the elegance and sophistication of the Champagne, reflecting an aesthetic that resonates with an exclusive audience aged between 35 and 60, with refined tastes.')"
>
<img
src="https://ik.imagekit.io/garciaanita/CONTENT%20PORTFOLIO/IMG_2617%20Medium.jpeg?updatedAt=1736367462238"
alt="Image 4"
/>
</div>
</div>
</div>
<div id="tooltip" class="tooltip hidden"></div>
</section>
<!------------ barra color ------------>
<div class="color-bar4"></div>
<!----------- Footer ---------------->
<footer>
<div class="footer-container">
<p class="copyright">
© 2024 By Garciaanita. All Rights Reserved.
</p>
<div class="social-icons">
<a href="https://www.instagram.com/bygarciaanita/" target="_blank">
<img src="./assets/icons/instagram/favicon.ico" alt="Instagram" />
</a>
<a href="https://www.behance.net" target="_blank">
<img src="./assets/icons/behance/favicon.ico" alt="Behance" />
</a>
<a href="https://github.com/garciaanita/awd" target="_blank">
<img src="./assets/icons/github/favicon.ico" alt="Github" />
</a>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>