Hi there 👋 My name is Bilgin Özkan, I am a designer & developer from Istanbul. This is my personal website where I freely have the chance
- to experiment with the latest web technologies,
- to learn new libraries and
- to expand my Javascript skills.
The structure of the website consists of components, utilities, styles and data files. The components (src/components) are building blocks of the webpage. While the most basic components (like page components) only do the DOM manipulation to be appended to the page, the advanced ones (like project component) export a powerful API. Utilities include a super basic event pus/sub library to support event based communication, an image constructor to handle the lazy loading, a basic orm to parse the json files, a router (using page.js) and other helpers. Data files are JSONs stored in the src/database and are injected directly into the build .js file. Media files are stored in Cloudinary. CSS is written in Stylus. Finally the website is heavily using GSAP.
I used NPM for dependency management and the website can be built using Webpack. The shortest way to start the website on your local machine is to build it with Webpack npm run build and run the website on webpack-dev-server with npm start
☝️ Club Greensock bonus plugins are not included in the repo. To compile the project ThrowPropsPlugin and DrawSVGPlugin should be included in the src/vendors/GSAP_Plugins folder.
Still in progress
- Chrome (v64 on macOS)
- Chrome (v64 on iOS 10.3.3/iPhone 5)
- Safari (v11.0.3 on macOS)
- Safari (on iOS 10.3.3/iPhone 5)
| z-index | Description |
|---|---|
| 150 | Loader (and its borders) |
| 120 | About me content |
| 115 | Overlays of About Me |
| 110 | Logo |
| 105 | Loader |
| 101 | Copyright |
| 100 | Project window |
| 50 | Nav social |
- Learn GSAP core and its ecosystem
- Learn SVG core API and experiment with SVG.js
- Learn basic Git (and GitKraken)
- Dive into the realm of TDD and unit tests