My Recent products
-
Photos DLDOVERVIEW:
Developed a photographer's website with Elementor on WordPress, seamlessly integrating e-commerce and bilingual support. The project successfully brought the client's vision of showcasing nature's beauty and facilitating online product sales to life, reflecting my commitment to creative and practical implementation.
TECHNOLOGIES USED:
Wordpress, Elementor
LEARNING:
In the process of creating the website, I gained an understanding of how to use Elementor and how to input and configure products. In response to the client's preferences, additional tasks included adding watermarks to photos using Photoshop, modifying the logo with Illustrator, and configuring payment settings with Square.
【実績 / 約40時間】
写真家のウェブサイトをWordPressのElementorで作成し、Eコマースと二言語に表示を切り替えられるサイトにしました。こちらのサイトは、クライエントの写真を通して自然の美しさを紹介し、オンラインでの商品販売を促進するという、クライアントの希望に沿ったデザインを意識しました。
使用したツール
Wordpress、Elementor
Eコマースの商品の入力やSquareで支払い設定をするほかにも、ウォーターマークを写真に入れたり、Illustratorでロゴを修正をしました。Take a look
-
Conceptual Bakery WebsiteOVERVIEW:
Designed a conceptual bakery website using Flexbox and Grid for efficient layout management. The logo was crafted using Illustrator.
TECHNOLOGIES USED:
HTML, CSS, Flexbox, Grid, Responsive design photoshop and Illustrator
LEARNING:
Acquired proficiency in using Flexbox and Grid for layout, enhancing design capabilities. It achieved a flexible and aesthetically pleasing design.
【デモ / 約10時間】
FlexboxとGridを使用し、効率的なレイアウト管理を意識しました。ロゴはIllustratorを使用して作成しました。
使用したツール: HTML、CSS、Photoshop、IllustratorTake a look
-
Vanilla JSOVERVIEW:
1. Spam Protection for Contact Email (contact.html):
Implemented a JavaScript-based solution on the Contact page to prevent spam bots from easily detecting email addresses in the HTML source code. While the email address remains visible to users, it is hidden from view when inspecting the page source, reducing the risk of spam.
2. Form Validation on Contact Page (contact.html):
Employed JavaScript on the contact form to ensure that all fields are filled out before submission. If any field is left blank, the form will not be submitted, providing a user-friendly way to ensure complete and accurate information is sent.
3. Dynamic Text Change on Home Page (index.html):
Implemented a JavaScript function on the homepage to change the text "Bakery and Cafe" to "Life is short. Eat dessert first." after a 3-second delay, creating a dynamic and attention-grabbing element on the site.
4. Thumbnail Rollover Effect:
Enhanced user experience by implementing a thumbnail rollover effect. When the cursor hovers over a thumbnail, the corresponding large image is displayed, and the caption text changes to a title that matches the selected image, creating an interactive and visually appealing feature.
【デモ / 約20時間】
1. コンタクトメール（contact.html）のスパム対策： スパムボットがHTMLソースコード内のメールアドレスを簡単に検出するのを防ぐため、コンタクトページにJavaScriptベースのソリューションを実装しました。ユーザーにはメールアドレスが表示されたままですが、ページソースを検査する際には非表示になり、スパムのリスクが軽減されるようになっています。
2. お問い合わせページ（contact.html）のフォームの検証：
お問い合わせフォームにJavaScriptを採用し、送信前にすべてのフィールドが入力されていることを確認。空欄がある場合、フォームは送信されず、完全で正確な情報が送信されます。
3. トップページ（index.html）の動的テキスト変更：
トップページにJavaScript関数を実装し、「Bakery and Cafe」のテキストを「Life is short. 3秒遅れて "先にデザートを食べよう。"に変わるように設定しました。
4. サムネイルロールオーバー効果：
カーソルをサムネイルに合わせると、対応する大きな画像が表示され、キャプションテキストが選択された画像にマッチしたタイトルに変わるように設定しました。
使用したツール
HTML、CSS、JavaScriptTake a look
-
Web site with jQueryOVERVIEW:
1. Setting up a Carousel with jQuery:
Configured a carousel on the website using jQuery, providing a visually engaging way to display multiple images or content items.
2. Lightbox for Project Images:
Implemented a lightbox feature that opens images within the page when a project is clicked. This enhances user experience by allowing them to view project images without navigating away from the current page.
3. Job Opportunities in the "Careers" Section:
Created functionality where clicking on different links under the "Careers" section loads the respective content into the div#opportunity. This div, distinguished by its pale blue background, is positioned on the right side of the page. Users can easily access specific job-related information without navigating to separate pages, streamlining the job-seeking experience.
【デモ / 約17時間】
1. jQueryを使ったカルーセルの設定
2. プロジェクト画像のライトボックス
3. 「採用情報」セクションの求人情報：
「CAREERS」セクションのさまざまなリンクをクリックすると、それぞれのコンテンツがdiv#opportunityに読み込まれる機能を作成しました。このdivは淡いブルーの背景で区別され、ページの右側に配置されます。ユーザーが特定の求人関連情報に簡単にアクセスすることができるようにしました。
使用したツール
HTML、CSS、jQueryTake a look
-
Sassy Superhero Single-Page SiteOVERVIEW:
The project incorporates CSS compiled from Sass, providing a more structured and maintainable codebase. To enhance visual aesthetics, three unique and colorful themes have been implemented. Additionally, variables are employed to store font-style values, ensuring consistency and facilitating easy adjustments to the design elements. This approach not only streamlines the development process but also allows for a more dynamic and adaptable user interface.
TECHNOLOGIES USED:
HTML, CSS, Flexbox, Responsive design
LEARNING:
The project highlights the successful integration of Sass-compiled CSS, contributing to improved code structure and easier maintenance. By effectively utilizing variables, consistent font styles were achieved, allowing for seamless adjustments. The experience provided valuable insights into the advantages of preprocessors, particularly Sass. Ongoing improvements are centered around refining themes and enhancing responsiveness based on user feedback.
【デモ / 約15時間】
SassからコンパイルされたCSSを組み込み、より構造化されたメンテナンスしやすいコードベースを作成。視覚的な美しさを高めるために、3つのテーマを実装。さらに、フォントスタイルの値を格納するために変数を使用しました。
使用したツール
HTML、CSS、SASSTake a look
-
My Neighbor TotoroOVERVIEW:
Implemented light and dark modes utilizing CSS variables and JSON for a dynamic user experience. Modes are activated through the prefers-color-scheme media query, adapting to the user's device settings.
TECHNOLOGIES USED:
HTML, CSS, Bootstrap, jQuery, light & dark mode
LEARNING:
Gained hands-on experience in utilizing CSS variables and JSON for flexible styling, enabling the incorporation of both light and dark modes based on user preferences. Expanded knowledge in crafting interactive elements with jQuery, creating a dynamic and user-friendly interface.
CSS変数とJSONを利用してライトモードとダークモードを実装。メディアクエリを通してアクティブ化され、ユーザーのデバイス設定に適応するようにしました。
使用したツール
HTML、CSS、Bootstrap、jQuery、ライト＆ダークモードTake a look
-
Honeysuckle PinkOVERVIEW:
Create a one-page website using Bootstrap, following the layout from provided mock-ups. Arrange the content in the specified order across all five sections.
TECHNOLOGIES USED:
HTML, CSS, Bootstrap, Grid
LEARNING:
Learned to design a responsive navigation bar that collapses on small devices, aligns links to the right, and remains fixed while scrolling. Implemented in-page links for seamless navigation.
Mastered the creation of a carousel with 4-6 images, incorporating user controls, indicators, and left-aligned captions. Enabled automatic cycling after the initial slide, using a fade transition between images. Ensured responsiveness with the carousel disappearing on the smallest devices. Applied these skills to replicate the layouts from the provided mock-ups.
Bootstrapを使用して、5つのセクションのコンテンツを幅に応じて表示を変えるなどしたレスポンシブデザインを作成。ユーザーコントロール、インジケーター、左寄せのキャプションを組み込んだ、4～6枚の画像を使ったカルーセルも作成しました。
使用したツール
HTML, CSS, Bootstrap
Take a look
-
Hiring infoOVERVIEW:
Create a landing page of "Careers"
TECHNOLOGIES USED:
Photoshop
LEARNING:
*Only design, no coding
クライアントの希望で、IT会社のサイトの採用情報の部分を、クリック数が増えるように、ランディングページのような数か所ボタンのあるサイトを作成。20-30代のノマドワーカーに憧れている男性を想定してデザインしました。
使用したツール
Photoshop
Take a look
