3D Portfolio Website: Showcase Your Work with HTML, CSS & JavaScript on GitHub

In today's digital landscape, a compelling portfolio website is a must-have for professionals across various fields, especially for those in creative industries. A well-crafted portfolio not only showcases your skills and projects but also tells your unique story. One powerful way to create an impressive portfolio is by leveraging web technologies like HTML, CSS, and JavaScript, along with GitHub for version control and hosting. Let's dive into creating a 3D portfolio website using these tools.

Before we begin, ensure you have a basic understanding of HTML, CSS, and JavaScript. Familiarity with Git and GitHub will also be beneficial. If you're new to these technologies, don't worry; there are plenty of resources available to help you learn.

Setting Up Your Project

First, let's set up our project locally and on GitHub.

1. **Initialize your local project:** Open your terminal or command prompt, navigate to your desired project directory, and initialize a new Git repository with `git init`.

Project Structure

Organize your project with a clean and intuitive folder structure. Here's a basic structure to start with:

• index.html
• styles.css
• script.js
• 3d-model/ (folder for your 3D models)

Initializing GitHub Repository

Once you've set up your local project, initialize a new repository on GitHub:

1. Log in to your GitHub account.
2. Click the '+' icon in the top-right corner and select 'New repository'.
3. Name your repository (e.g., 'my-3d-portfolio'), write a short description, and click 'Create repository'.

Creating Your 3D Portfolio

Now that our project is set up, let's start building our 3D portfolio.

1. **HTML Structure:** Begin by creating the basic HTML structure for your portfolio. Use semantic HTML5 tags to ensure accessibility and SEO friendliness.

3D Model Display

To display 3D models, you can use the <model-viewer> element from the WebXR API. This element allows users to view 3D models in their browser using WebGL. Here's a simple example:

```html ```

In this example, replace #my3DModel with the path to your 3D model file.

Styling Your Portfolio

Next, style your portfolio using CSS. You can use CSS3D transforms for creating 3D effects and animations. Here's a simple example of rotating a 3D model:

```css model-viewer { transform: rotateY(45deg); } ```

Remember to include your 3D models in your CSS using the @import rule or by setting the src attribute in your HTML.

Interactivity with JavaScript

JavaScript can add interactivity to your portfolio. For instance, you can create a hover effect to rotate the 3D model when the user hovers over it:

```javascript const modelViewer = document.querySelector('model-viewer'); modelViewer.addEventListener('mouseover', () => { modelViewer.setAttribute('animation', 'type: loop; property: rotation; to: 0 360 0; loop: infinite; dur: 10000'); }); ```

This script will make the 3D model rotate continuously when the user hovers over it.

Deploying Your Portfolio on GitHub

Once you've completed your portfolio, it's time to deploy it on GitHub.

1. **Commit and Push:** Commit your changes locally using `git add .`, `git commit -m "Your commit message"`, and push them to your GitHub repository using `git push origin main`.

GitHub Pages

GitHub Pages allows you to host your static website directly from your GitHub repository. Here's how to set it up:

1. Go to your repository on GitHub.
2. Click on the 'Settings' tab.
3. Scroll down to the 'GitHub Pages' section.
4. Select the 'main' branch as the source and click 'Save'.

Your 3D portfolio should now be live at https://yourusername.github.io/my-3d-portfolio/.

Congratulations! You've just created a stunning 3D portfolio website using HTML, CSS, JavaScript, and GitHub. This unique and engaging portfolio will help you stand out and showcase your skills effectively. Happy coding, and remember to keep iterating and improving your portfolio!