Di dalam portofolio Corentin Bernadou: tata letak gaya Swiss, geometri WebGL, dan gerakan yang bijaksana – Beragampengetahuan

Membangun portofolio adalah salah satu proyek paling menantang bagi desainer atau pengembang mana pun. Anda tidak akan pernah puas sepenuhnya dengan hasilnya. Setiap pengulangan menimbulkan pertanyaan baru, dan prosesnya dapat dengan mudah menjadi putaran pemikiran ulang dan pembangunan kembali yang tiada akhir.

Tahun ini menandai babak baru bagi saya karena saya menjadi pengembang lepas dan ini terasa seperti waktu yang tepat untuk mendesain ulang portofolio saya – rilis baru pertama saya dalam enam tahun. Proyek ini memberi saya kesempatan untuk mengeksplorasi ide-ide baru, mendorong batasan teknis, dan memikirkan kembali cara saya mempresentasikan karya saya.

Dalam studi kasus ini, saya akan berbagi wawasan tentang proses kreatif, keputusan desain, dan tantangan teknis di balik proyek ini.

A. Filsafat dan pengalaman

Tujuan utama portofolio ini adalah menciptakan ruang untuk memamerkan proyek dan eksperimen WebGL yang telah saya kembangkan selama beberapa bulan terakhir. Sejak awal, saya ingin mengintegrasikan WebGL dengan cara yang halus. Idenya adalah untuk menemukan keseimbangan antara mempertahankan antarmuka 2D yang jelas dan mudah dibaca sambil menambahkan kedalaman dan pergerakan pada lingkungan 3D.

Proyek ini dimulai dengan sketsa sederhana di buku catatan, yang membantu saya dengan cepat menentukan struktur dan alur pengguna sebelum melanjutkan ke tahap desain dan pengembangan.

B. Inspirasi dan Desain

Dengan latar belakang desain, saya menantang diri saya sendiri untuk membuat antarmuka sendiri. Prosesnya panjang dan terkadang menuntut. Ini melibatkan banyak pengulangan dan banyak penyempurnaan sebelum saya mencapai arah yang saya sukai.

Saya selalu memiliki minat terhadap tipografi dan poster tipografi. Hal ini tentu saja membuat saya tertarik pada sistem grafis yang kuat dan komposisi tipografi yang ekspresif. Arah visual banyak meminjam dari gaya Swiss, dengan palet warna oranye, putih dan hitam yang sengaja dibatasi.

Sebagian besar inspirasi saya berasal dari pengalaman offline. Saya menghabiskan banyak waktu di toko buku untuk melihat-lihat buku desain, lukisan, dan fotografi, mempelajari tata letak dan sistem pencetakannya. Saya suka menghabiskan waktu bermain-main dengan grid, margin, dan pilihan tipe, lalu menerjemahkan ide-ide tersebut ke dalam web. Referensi ini membantu menciptakan identitas visual yang jelas dan konsisten. Saya juga menelusuri referensi di Pinterest, tempat saya sering mencari inspirasi.

Pada saat yang sama, saya ingin memperkenalkan dimensi 3D menggunakan WebGL, yang merupakan bidang yang telah saya jelajahi selama berbulan-bulan. Salah satu tantangan utamanya adalah menemukan keseimbangan yang tepat antara pendekatan eksperimental dan estetika editorial yang lebih terstruktur.

Untuk halaman beranda, ini diterjemahkan ke dalam geometri 3D keseluruhan dengan pratinjau semua proyek saya. Prosesnya melibatkan beberapa iterasi, mencoba tata letak dan interaksi yang berbeda sebelum sampai pada versi final. Berikut ini sekilas berbagai iterasi yang telah saya uji:

3. Tinjauan Perkembangan

Sejak awal, saya ingin memiliki kendali penuh atas proses pengembangan, jadi saya memutuskan untuk menghindari penggunaan kerangka kerja dan membangun portofolio hanya menggunakan JavaScript biasa. Hal ini membuat tumpukan tetap ringan dan membantu saya lebih memahami setiap bagian basis kode. Saya juga menerapkan sistem perutean PJAX sederhana untuk mencapai transisi halaman animasi yang mulus.

Untuk penataan gaya, saya mengandalkan metode SCSS dan BEM untuk menjaga kode tetap modular dan dapat dipelihara. Semua data halaman disimpan dalam JSON, memberikan fleksibilitas tanpa memerlukan CMS atau generator situs statis.

Untuk komponen WebGL, saya menggunakan Three.js dengan GLSL untuk mencapai geometri 3D dan visualisasi interaktif. GSAP menangani semua animasi di seluruh portofolio, sementara Lenis memastikan pengalaman pengguliran yang lancar.

Struktur proyek

Portofolio diatur sedemikian rupa sehingga tetap modular dan mudah dipelihara. Data halaman disimpan dalam JSON, sementara komponen WebGL, modul JavaScript yang dapat digunakan kembali, dan gaya SCSS dipisahkan dengan rapi ke dalam direktori khusus. Struktur ini memudahkan untuk mengulangi dan menskalakan proyek dari waktu ke waktu.

Berikut ini ikhtisar struktur proyek:

src/
├── data/                          # JSON data for each page
│   ├── about.json                 
│   ├── archive.json               
│   └── ...                        
├── glsl/                          # GLSL shaders
│   ├── archive/                   
│   │   ├── fragment.glsl          
│   │   └── vertex.glsl            
│   ├── modules/                   # Reusable GLSL modules (noise, utils)
│   ├── work/                      
│   └── ...                        
├── js/                            # Client-side JavaScript
│   ├── index.js                   # Main app entry point
│   ├── animations/                # GSAP page transitions & preloader
│   ├── components/                # Reusable UI components
│   │   ├── Availability.js        # Availability status badge
│   │   ├── Cross.js               # Interactive cross cursor
│   │   ├── Dimensions.js          # Viewport dimensions tracker
│   │   ├── GridHelper.js          # Dev grid overlay
│   │   ├── GridRules.js           # Grid rule lines
│   │   ├── LocaleTime.js          # Local time display
│   │   ├── ScrollIndicator.js     # Scroll progress indicator
│   │   ├── ViewSwitcher.js        # List/Overview view toggle
│   │   └── ...                    
│   ├── pages/                     # Page controllers
│   │   ├── About.js               
│   │   ├── Archive.js             
│   │   └── ...                    
│   ├── utils/                     # Helpers (Lerp, Easings, Routing…)
│   └── webgl/                     # WebGL renders
│       ├── Canvas.js              
│       ├── archive/               
│       ├── index/                 
│       ├── overview/              
│       └── work/                  
└── scss/                          # SCSS styles

D. Animasi dan Aksi

Pada bagian ini saya akan memperkenalkan beberapa konsep gerak yang saya gunakan dalam proyek saya.

aturan jaringan

Untuk meningkatkan pengeditan dan estetika antarmuka yang sempurna, saya memperkenalkan telur Paskah interaktif kecil. Saat pengguna mengklik tanda silang di tengah, serangkaian aturan kisi secara dinamis membuat judul beranda.

Berikut pratinjaunya:

Idenya sederhana: Saya mengambil posisi elemen yang diberi tag dengan aturan data menggunakan getBoundingClientRect()lalu secara dinamis menghasilkan empat baris, satu di setiap sisi, diposisikan berdasarkan transformasi untuk membingkai elemen.

melaksanakan

Skrip menghitung kotak pembatas elemen dan membuat panduan horizontal dan vertikal yang diposisikan relatif terhadap area pandang.

<!-- Main title -->
<h1>A</h1>

<!-- Button -->
<button type="button" aria-label="Toggle grid rules">Toggle</button>

<!-- Rules: 4 rules created in JavaScript -->
<div class="grid-rules"></div>

class App {
  constructor() {
    // DOM
    this.DOM = {
      button: document.querySelector("button"),
      title: document.querySelector("h1"),
      guidesContainer: document.querySelector(".grid-rules"),
    }

    // States
    this.isActive = false

    // Listeners
    this.createGuides()
  }

  /**
   * Guides
   */

  createGuides() {
    this.DOM.guidesContainer.innerHTML = ""

    const rect = this.DOM.title.getBoundingClientRect()
    const positions = [
      { type: "horizontal", pos: rect.top },
      { type: "horizontal", pos: rect.bottom },
      { type: "vertical", pos: rect.left },
      { type: "vertical", pos: rect.right },
    ]

    positions.forEach(({ type, pos }) => {
      const guide = document.createElement("div")
      guide.className = `grid-rules__guide grid-rules__guide--${type}`

      gsap.set(guide, {
        x: type === "vertical" ? pos : 0,
        y: type === "horizontal" ? pos : 0,
        opacity: this.isActive ? 1 : 0,
      });

      this.DOM.guidesContainer.appendChild(guide)
    })
  }
}

Setiap panduan adalah a 1px Garis yang membentang seluruh lebar (secara horizontal) atau tinggi (vertikal) area pandang. Kontainer dipasang pada area pandang, dan panduannya benar-benar terletak di dalamnya:

.grid-rules {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.grid-rules__guide {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;

  &--horizontal {
    width: 100%;
    height: 1px;
  }

  &--vertical {
    width: 1px;
    height: 100%;
  }
}

Interaksi dan animasi

Gunakan GSAP untuk mengubah visibilitas panduan dengan mengklik tombol, sehingga garis memudar masuk dan keluar dengan lancar.

addEventListeners() {
  this.DOM.button.addEventListener("click", this.handleClick);
}

handleClick(event) {
  event.preventDefault();

  this.isActive = !this.isActive;

  gsap.to(".grid-rules__guide", {
    opacity: this.isActive ? 1 : 0,
    duration: 0.5,
  });
}

Ini adalah versi sederhana dari sistem yang diterapkan pada tugas akhir, yang dapat Anda jelajahi di sini:

Pengalih navigasi

Interaksi mikro sering kali memainkan peran kunci dalam membentuk pengalaman pengguna secara keseluruhan. Untuk navigasi utama, saya menerapkan pengalih topeng dinamis yang mengikuti kursor dan menyesuaikan dengan lebar tautan yang dilayangkan.

Saat pengguna mengarahkan kursor ke item navigasi, masker akan mengubah ukurannya dengan mulus dan memposisikan ulang agar sesuai dengan dimensi tautan, sehingga menciptakan umpan balik yang lebih responsif dan taktil.

Berikut pratinjaunya:

konsep

Interaksinya bergantung pada pelacakan kotak pembatas elemen yang dilayangkan dan memperbarui ukuran serta posisi topeng yang sesuai. Daripada menggunakan status hover statis, masker bertindak sebagai indikator visual bersama yang bertransisi antar tautan.

Ini akan membuat:

• Hierarki visual yang lebih kuat.
• Umpan balik navigasi yang lebih lancar.
• Pengalaman navigasi yang lebih dinamis dan editorial.

melaksanakan

Sistem mendengarkan peristiwa hover pada tautan navigasi, mengambil dimensinya menggunakan metode berikut getBoundingClientRect()dan memperbarui transformasi dan ukuran topeng agar sesuai dengan elemen aktif.

Transisi antar status diinterpolasi untuk menjaga gerakan tetap mulus dan responsif terhadap pergerakan kursor.

<nav class="navigation">
  <ul class="navigation__list">
    <li class="navigation__item">
      <a class="navigation__link" href="#">Home</a>
    </li>
    <li class="navigation__item">
      <a class="navigation__link" href="#">About</a>
    </li>
  </ul>

  <div class="navigation__mask"></div> <!-- We animate this element -->
</nav>

updateMaskPosition(target, duration = 0) {
  const targetRect = target.getBoundingClientRect()
  const navRect = this.DOM.navigation.getBoundingClientRect()

  const x = targetRect.left - navRect.left
  const y = targetRect.top - navRect.top
  const { width, height } = targetRect

  gsap.to(this.DOM.navigationMask, {
    x,
    y,
    width,
    height,
    duration,
    ease: "power3.out",
  })
}

hasil

Pendekatan ini menciptakan pengalaman gerakan berkelanjutan di mana navigasi terasa reaktif dibandingkan berbasis negara, sehingga meningkatkan keseluruhan bahasa gerakan portofolio produk.

Lihat versi sederhana yang saya buat untuk portofolio saya:

E. Kontak terakhir

Sentuhan akhir seringkali merupakan bagian paling menantang dari sebuah proyek. Bahkan setelah menyempurnakan desain, animasi, dan interaksi, saya masih merasa ada sesuatu yang hilang, sesuatu yang akan membantu proyek ini menonjol dari karya pengembang dan desainer lainnya.

Untuk lebih mendorong sistem aturan grid, saya memperkenalkan fitur penggaris interaktif yang terinspirasi oleh Figma. Pengguna dapat menempatkan penandanya langsung di antarmuka dan menempatkannya di mana pun mereka mau. Fitur ini memperkuat arah editorial situs secara keseluruhan sekaligus mengubah tata letaknya menjadi pengalaman interaktif.

Untuk memperluas ide ini lebih jauh, saya juga menambahkan kemampuan untuk menggunakan pintasan keyboard (Option + G) untuk mengubah grid tata letak yang digunakan di seluruh situs, memungkinkan pengguna untuk mengungkapkan struktur dasar desain. Ini adalah alat yang saya gunakan secara pribadi di setiap proyek untuk memastikan keselarasan dan presisi, dan menurut saya akan menyenangkan jika alat ini juga tersedia bagi pengguna.

Fitur-fitur halus namun menarik ini membantu memberikan portofolio identitas yang lebih kuat. Mereka menjembatani kesenjangan antara alat desain dan pengalaman pengguna serta menekankan pentingnya struktur, presisi, dan eksperimen dalam proyek.

F. Kesimpulan dan pembelajaran

Portofolio ini merupakan tonggak penting dalam perjalanan saya sebagai desainer dan pengembang. Ini memberi saya kesempatan untuk mengeksplorasi ide-ide baru, menerapkan metode desain editorial yang saya sukai, dan melanjutkan eksperimen WebGL saya.

Sepanjang proses tersebut, saya harus terus-menerus menyeimbangkan eksperimen dan kegunaan, serta memikirkan dengan hati-hati tentang apa yang membuat suatu interaksi bermakna, bukan hanya sekadar tampilan saja.

Portofolio bukanlah produk jadi, melainkan taman bermain yang terus berkembang, ruang untuk eksplorasi, eksperimen, dan pertumbuhan secara terus-menerus.

Saya harap Anda menikmati studi kasus ini. Jika Anda memiliki pertanyaan atau masukan, jangan ragu untuk menghubungi kami!