giats.me — Personal Portfolio Website

This is the original source code for giats.me, the personal portfolio website of Evangelos Giatsidis.

I designed and built this project from scratch using modern web technologies to push the creative limits of front-end development. The site blends smooth animation, layered visuals, and technical precision to present my work in a unique and immersive way.

🏆 Multi-award-winning site, featured on major design platforms:

• 🥇 CSS Design Awards — WOTD + 3 Special Kudos
• 🥈 Awwwards — Honorable Mention
• 🥉 GSAP — Site of the Day

---

⭐ Show Some Love

If you find this project useful, inspiring, or just cool, please consider giving it a star on GitHub!
Your support helps me keep improving and sharing my work. Thank you! 🙏

---

🧠 Concept & Structure

The visual foundation of giats.me is built around a three-phase layering system:

1. The Background Phase
   A dynamic, animated 3D world rendered with React Three Fiber, serving as the visual foundation of the site.

2. The Main Website Phase
   This layer contains all the actual content — projects, about section, contact, etc. Structurally clean and minimal to let animations breathe.

3. The Fluid Animation Layer (Above All)
   A real-time fluid simulation overlays the entire interface, using mix-blend-mode and the cursor to create an interactive, artistic brush effect. It responds to user input, adding a subtle but powerful sense of depth and responsiveness.

🪟 “Window” Effect

Throughout the content layer, I created intentional cut-out sections or “windows” that act as holes in the layout, letting the background animation show through. These openings create a surreal experience where the layers visually bleed into each other, amplifying the immersive feel of the site.

---

⚙️ Tech Stack

• Framework: Next.js (React)
• 3D & Canvas: React Three Fiber
• Animation: GSAP with ScrollTrigger
• Transitions & Scroll UX: Custom GSAP-powered page transitions and smooth scroll behavior
• Styling: SCSS / CSS Modules
• Hosting: Vercel

---

📸 Assets & Privacy Notice

• Personal and client-related visuals (e.g., images, logos, portraits) have been blurred, replaced, or omitted to respect privacy and copyright.
• The full visual experience is available at giats.me.
• Do not reuse images or branding without permission.

---

📄 License & Attribution

This project is licensed under the MIT License (with attribution required).

If you use this code or parts of it, credit is required:

"Original portfolio design and development by Evangelos Giatsidis — giats.me"

You are welcome to learn from or build upon this project, but do not claim it as your own or use it commercially without permission.

---

📬 Contact

• 📧 Email: vaggelisgiats@gmail.com
• 💼 LinkedIn: linkedin.com/in/giats
• 🌐 Website: giats.me
• 🐦 X (Twitter): @Giats_

---

Thank you for checking out my portfolio. I hope this project inspires or helps you in your own creative journey.