Skip to content

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

Notifications You must be signed in to change notification settings

Sacred-G/interactive-coding

Repository files navigation

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 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.

Contact

If you want to contact me, you can reach me at your-email@example.com.

Acknowledgements

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published