Gift for my friend
Gift for my friend

Gift for my friend

A website that records and showcases my friends' and my experiences in 2025.Also it is a Christmas gift for my best friend.

by Xiaoman Lu xiaoman.lu.24@stu.hainan-biuh.edu.cn

Portfolio/Blog

Description

This is a private memorial website created to record and showcase the shared experiences of me and my closest friend throughout 2025. The site serves as a heartfelt Christmas gift, bridging the physical distance between us and allowing me—someone who struggles to express emotions verbally—to convey how much I cherish our friendship. The website features four core sections: a homepage with a warm Christmas-themed welcome message, three seasonal subpages (Winter, Summer, and Combined Spring & Autumn), and a password-protected secret page. The seasonal subpages organize our memories based on 2025’s seasons—Spring and Autumn are merged due to limited in-person time during school, while Winter and Summer highlight our trips and daily moments together, complete with photos and detailed narratives. A unique feature allows users to swipe left on the right-hand side of each seasonal page, creating a film-like browsing experience to revisit memories. The password-protected section reveals my unspoken heartfelt messages to my friend once the correct code is entered. I built the site using semantic HTML5 for clear structure, modern CSS to craft a warm and nostalgic visual style, and vanilla JavaScript to implement key interactions. The swipe function on seasonal pages is powered by JavaScript event listeners, while the password validation feature uses basic JS logic to control access to the secret page. The design follows a responsive approach, ensuring the site displays beautifully on both desktop and mobile devices, so my friend can revisit our memories anytime, anywhere. The visual design embraces a cozy, nostalgic aesthetic with a soft beige background and deep brown text, complemented by gentle photo filters that enhance the warm atmosphere. I chose a rounded, handwritten-style font for headings to add a personal touch, paired with a clean sans-serif font for body text to ensure readability. The layout prioritizes simplicity and emotional resonance, with ample white space and intuitive navigation that keeps the focus on our shared memories and the heartfelt message behind the site.

Desktop Homepage

Desktop Screenshot

Mobile Homepage

Mobile Screenshot

Open Graph Image

Open Graph Image

Favicon

Favicon