https://github.com/type0-1/website-portfolio-v2

A revamped iteration of my old website portfolio using React, Vite, Vitest, GSAP and Tailwind. The README.md includes a Software Design Document and Component Tests carried out.
https://github.com/type0-1/website-portfolio-v2

chai css documentation greensock-animation-platform gsap html javascript react tailwindcss vite vitest wireframe

Last synced: 22 days ago
JSON representation

A revamped iteration of my old website portfolio using React, Vite, Vitest, GSAP and Tailwind. The README.md includes a Software Design Document and Component Tests carried out.

• Host: GitHub
• URL: https://github.com/type0-1/website-portfolio-v2
• Owner: type0-1
• Created: 2024-07-02T13:07:48.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-24T10:38:03.000Z (4 months ago)
• Last Synced: 2024-10-02T06:22:10.018Z (about 1 month ago)
• Topics: chai, css, documentation, greensock-animation-platform, gsap, html, javascript, react, tailwindcss, vite, vitest, wireframe
• Language: JavaScript
• Homepage: https://samsonoloruntola.netlify.app/
• Size: 24 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Website Portfolio Revamp

Welcome to the revamped version of my portfolio website! This iteration leverages modern, industry-grade technologies to provide a more dynamic and engaging experience. Below, you'll find an overview of the technologies used, the testing strategies implemented, and additional documentation to help you understand the development process.

## Technologies Used

* `React:` For building the user interface.

* `Vite:` For fast and efficient development.

* `Vitest:` For testing React components.

* `HTML:` For structuring the web content.

* `TailwindCSS:` For styling the application.

* `JavaScript:` For adding interactivity.

* `GSAP:` For creating smooth animations.

## Testing Strategy

Inside the root of this repository, you can find component tests ensuring that:

* ``Functionality:`` Each component operates correctly based on provided inputs.

* ``Expected Values:`` Components have the correct div elements and character values.

* ``Correct Div Amount:`` Specific sections have the correct number of divs.

## Code Documentation

The codebase is extensively commented to help you understand:

* ``GSAP Methods:`` Detailed but concise explanations of the GSAP methods used to create various animations.

* ``HTML and TailwindCSS:`` Insights into the structure and styling of the components.

## Software Design Document

Included in this repository is a comprehensive Software Design Document. This document outlines the entire process from planning to deployment, including:

* ``Project Goals:`` The objectives behind the project.

* ``Benefits:`` Business and personal advantages of the project.

* ``Wireframing:`` Initial design sketches.

* ``UI & UX Considerations:`` Design decisions to enhance user experience.

* ``Implementation:`` Step-by-step development process.

* ``Testing and Deployment:`` Methods and strategies used to test and deploy the website.

This document serves as a practice in creating and refining future Software Design Documents, offering an in-depth look at the project's development.

## Current Status

Both the website and the Software Design Document are now completed. Version 1.0

## Software Design Document

The Software Design Document, which includes details on planning, implementation, tech stack, flowcharts, wireframing, testing, and UI & UX considerations, can be found [here](https://docs.google.com/document/d/1yzzPMPEkCv0HUanihb0-XPzGV6Z8txedYXVlUFerpM8/edit?usp=sharing). This document is also discussed in my GitHub README to provide further insights into the project development process.