This project is an interactive portfolio website that showcases skills and information through an animated, code-like interface. It uses a combination of HTML, CSS, and JavaScript to create a unique and engaging user experience.
- Animated text writing effect
- Interactive code-like interface
- Flippable work and PGP sections
- Markdown rendering
- Embedded iframe for additional content
- HTML5
- CSS3
- JavaScript (ES6+)
- Webpack for bundling
- Babel for JavaScript compatibility
- Bluebird for Promises
- Markdown library for rendering markdown content
- ClassList polyfill for better browser compatibility
Before you begin, ensure you have met the following requirements:
- You have installed Node.js and npm (Node Package Manager)
- You have a basic understanding of HTML, CSS, and JavaScript
- You have a web server to serve the static files (You can use tools like Live Server for VS Code)
- Clone the repository:
- Navigate to the project directory:
- Install the dependencies: npm install
- Build the project:
- Serve the
index.html
file using a local server. If you're using VS Code with Live Server:
- Right-click on
index.html
- Select "Open with Live Server"
Alternatively, you can use any other local server solution of your choice.
After setting up and running the project, you'll see an interactive interface that mimics a coding environment. The content will be typed out automatically, and you can interact with different sections:
- Scroll through the content
- Click on links
- Flip between plain text and rendered versions of the work and PGP sections
To customize the content:
- Modify the
work.txt
file to change the main content - Update the
pgp.txt
file to change the PGP section content - Adjust the styles in the CSS files located in the
styles
directory
Contributions to this project are welcome. Please follow these steps:
- Fork the repository
- Create a new branch:
git checkout -b feature-branch-name
- Make your changes and commit them:
git commit -m 'Add some feature'
- Push to the original branch:
git push origin feature-branch-name
- Create the pull request
This project uses the following license: MIT License.
If you want to contact me, you can reach me at your-email@example.com
.
- Inspired by STRML
- Markdown-it for Markdown rendering
- Bluebird for Promises