Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sacred-g/interactive-coding
showcases a portfolio by creating workboxes and displaying css code in realtime while rendering markdown and inserting a iframe. Allows user to edit the code and see changes in realtime
https://github.com/sacred-g/interactive-coding
babel bluebird-promise css iframe javascript livecoding markdownm personal-website portfolio projects stylesheets
Last synced: 13 days ago
JSON representation
showcases a portfolio by creating workboxes and displaying css code in realtime while rendering markdown and inserting a iframe. Allows user to edit the code and see changes in realtime
- Host: GitHub
- URL: https://github.com/sacred-g/interactive-coding
- Owner: Sacred-G
- Created: 2024-07-17T09:30:01.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-26T03:27:28.000Z (6 months ago)
- Last Synced: 2024-11-14T19:48:58.564Z (2 months ago)
- Topics: babel, bluebird-promise, css, iframe, javascript, livecoding, markdownm, personal-website, portfolio, projects, stylesheets
- Language: JavaScript
- Homepage: https://interactive-coding.vercel.app/
- Size: 13.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# Interactive Portfolio Website
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.
## Features
- Animated text writing effect
- Interactive code-like interface
- Flippable work and PGP sections
- Markdown rendering
- Embedded iframe for additional content
## Technologies Used
- 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
## Prerequisites
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](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) for VS Code)
## Installation and Setup
1. Clone the repository:
2. Navigate to the project directory:
3. Install the dependencies: npm install
4. Build the project:
5. 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.
## Usage
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
## Customization
To customize the content:
1. Modify the `work.txt` file to change the main content
2. Update the `pgp.txt` file to change the PGP section content
3. Adjust the styles in the CSS files located in the `styles` directory
## Contributing
Contributions to this project are welcome. Please follow these steps:
1. Fork the repository
2. Create a new branch: `git checkout -b feature-branch-name`
3. Make your changes and commit them: `git commit -m 'Add some feature'`
4. Push to the original branch: `git push origin feature-branch-name`
5. Create the pull request
## License
This project uses the following license: [MIT License](LICENSE.md).
## Contact
If you want to contact me, you can reach me at `[email protected]`.
## Acknowledgements
- Inspired by [STRML](https://github.com/STRML)
- [Markdown-it](https://github.com/markdown-it/markdown-it) for Markdown rendering
- [Bluebird](https://github.com/petkaantonov/bluebird) for Promises