🖼️ Project - Website One

First Website - Landing-page & Portfolio style

Introduction 🎞

site_1.mp4

1. Technologies 💻

• HTML
• CSS
• JavaScript
• GSAP

2. Coding ✨

Development of an initial website prototype featuring a minimalist portfolio style.

🤔 Understanding:

• Apply proper HTML & CSS.
• Use correct HTML syntax and CSS design.

🤓 Learning:

• Understand the connection between HTML and CSS.
• Above all, practice and enhance my skills.

🔁 Reflections

Note

In creating this initial website, I aimed to put into practice the HTML concepts I've learned, incorporating a bit of CSS during my training. I conscientiously applied various HTML concepts, adhering to development principles and maintaining a clean syntax (which is significant to me). The site includes a landing page, and an attempt at a portfolio. However, the final output will remain static for now, as I don't plan on revisiting this project in the immediate future. It served more as a foundation, a starting point for something new.

3. Features 🛠

Here are different features that I have implemented in the project:

+ @font-face {#}
  - Allows the addition of an external font.
+ .animated-links::after {#} / .animated-links:hover::after {#}
  - Adds animation to navigation links.
+ <code>@media (max-width: 1100px) {#}
  - Makes the website responsive, adapting to various formats: web, mobile, tablet.
+ <code>@keyframes fadeIn / slideIn / slideOut {#}
  - Adds animations using gsap and also JavaScript in vanilla mode.
+ gsap.registerPlugin(ScrollTrigger);
  - Initializes the "GSAP" library along with the ScrollTrigger property.

⚒ Optimizations

• Optimize the different CSS style sheets (repeated code).
• Add more animations (to explore the possibilities of GSAP and JavaScript VANILLA).

4. Run and Debug ⚙

1. Download or clone it the WebsiteOne.zip folder from the project and unzip it.
2. Open the WebsiteOne folder with a code editor of your choice.
3. Launch the file /WebsiteOne/index.html in your browser locally (you can use extensions such as Live Server, Live Preview, etc.).

---

Links:

• Github: https://github.com/Kuromaea
• Instagram: https://www.instagram.com/kuromaea/?hl=fr
• https://bento.me/kuromaea