https://github.com/t2ne/t2ne.github.io

GitHub.io website code with Skills, an About section, Contact Information and much more.
https://github.com/t2ne/t2ne.github.io

github-pages-website javascript lit lit-element webpack workflows

Last synced: 12 months ago
JSON representation

GitHub.io website code with Skills, an About section, Contact Information and much more.

• Host: GitHub
• URL: https://github.com/t2ne/t2ne.github.io
• Owner: t2ne
• Created: 2024-10-26T11:06:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-13T17:13:40.000Z (12 months ago)
• Last Synced: 2025-02-13T18:21:40.414Z (12 months ago)
• Topics: github-pages-website, javascript, lit, lit-element, webpack, workflows
• Language: HTML
• Homepage: http://t2ne.eu/
• Size: 271 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# t2ne Portfolio Website

![t2ne.github.io](https://socialify.git.ci/t2ne/t2ne.github.io/image?description=1&font=Source+Code+Pro&language=1&name=1&owner=1&pattern=Charlie+Brown&theme=Dark)

This is the source code for **t8ne**'s online portfolio, designed to showcase skills, interests, and contact information interactively and dynamically. Built with `LitElement`, this site features a responsive interface, smooth transitions, and a typing animation on the homepage. The website also has 2 secretly built-in games.

## 🎲 Demo

The site starts with a splash screen that fades away after loading, revealing a homepage with typing animation and smooth transitions between sections: **Home**, **About**, **Skills**, and **Contact**.

## 🎨 Features

- **Splash Screen**: An introductory screen displayed when the site loads.

- **Typing Animation**: The **Home** section displays a typing effect for phrases.

- **Smooth Transitions**: Each portfolio section (Home, About, Skills, Contact) uses a smooth transition effect when navigating.

- **Responsive Design**: The interface adapts for mobile and desktop.

- **Social Media Icons**: Interactive icons for GitHub, LinkedIn, Spotify, Chess, YouTube, and Steam in the footer.

## 🛠️ Technologies Used

- **LitElement**: To build efficient Web Components.

- **HTML5 & CSS3**: Layout and styles, including responsive design.

- **JavaScript**: Site logic and typing animation.

## 📂 Code Structure

The main component is defined in `index.js`, with the following code flow:

1. **Splash Screen**: Displayed until the `splashScreenRemoved` event is fired.

2. **Typing Animation**: Starts after the splash screen and upon loading the "Home" section.

3. **Section Navigation**: Includes *Home*, *About*, *Skills*, and *Contact*, each with dynamic content.

4. **Blinking Cursor**: The cursor only blinks when text is complete (not during typing or deleting).

5. **Social Media Footer**: Interactive social media icons in the footer link to external platforms.

## 📖 Installation & Usage

1. Clone the repository:

   ```bash

   git clone https://github.com/t2ne/t2ne.github.io.git

   cd t2ne.github.io