All notes

Frontend & UI / Portfolio

Portfolio

A modern, responsive portfolio website built with Next.js 14, featuring glassmorphic design, 3D animations, and dark/light mode toggle.

August 6, 20257 min readTypeScript1 stars
Open the full technical write-up

��#� �T�u�h�i�n� �C�h�a�k�r�a�b�a�r�t�y� �-� �P�o�r�t�f�o�l�i�o� �W�e�b�s�i�t�e� � � � �A� �m�o�d�e�r�n�,� �r�e�s�p�o�n�s�i�v�e� �p�o�r�t�f�o�l�i�o� �w�e�b�s�i�t�e� �b�u�i�l�t� �w�i�t�h� �N�e�x�t�.�j�s� �1�4�,� �f�e�a�t�u�r�i�n�g� �g�l�a�s�s�m�o�r�p�h�i�c� �d�e�s�i�g�n�,� �3�D� �a�n�i�m�a�t�i�o�n�s�,� �a�n�d� �d�a�r�k�/�l�i�g�h�t� �m�o�d�e� �t�o�g�g�l�e�.� �S�h�o�w�c�a�s�i�n�g� �m�y� �w�o�r�k� �a�s� �a� �F�u�l�l�-�S�t�a�c�k� �D�e�v�e�l�o�p�e�r� �a�n�d� �A�I�/�M�L� �E�n�t�h�u�s�i�a�s�t�.� � � � �!�[�P�o�r�t�f�o�l�i�o� �P�r�e�v�i�e�w�]�(�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�b�a�d�g�e�/�N�e�x�t�.�j�s�-�1�4�-�b�l�a�c�k�?�s�t�y�l�e�=�f�o�r�-�t�h�e�-�b�a�d�g�e�&�l�o�g�o�=�n�e�x�t�.�j�s�)� � �!�[�T�y�p�e�S�c�r�i�p�t�]�(�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�b�a�d�g�e�/�T�y�p�e�S�c�r�i�p�t�-�0�0�7�A�C�C�?�s�t�y�l�e�=�f�o�r�-�t�h�e�-�b�a�d�g�e�&�l�o�g�o�=�t�y�p�e�s�c�r�i�p�t�&�l�o�g�o�C�o�l�o�r�=�w�h�i�t�e�)� � �!�[�T�a�i�l�w�i�n�d� �C�S�S�]�(�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�b�a�d�g�e�/�T�a�i�l�w�i�n�d��C�S�S�-�3�8�B�2�A�C�?�s�t�y�l�e�=�f�o�r�-�t�h�e�-�b�a�d�g�e�&�l�o�g�o�=�t�a�i�l�w�i�n�d�-�c�s�s�&�l�o�g�o�C�o�l�o�r�=�w�h�i�t�e�)� � �!�[�F�r�a�m�e�r� �M�o�t�i�o�n�]�(�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�b�a�d�g�e�/�F�r�a�m�e�r��M�o�t�i�o�n�-�0�0�5�5�F�F�?�s�t�y�l�e�=�f�o�r�-�t�h�e�-�b�a�d�g�e�&�l�o�g�o�=�f�r�a�m�e�r�&�l�o�g�o�C�o�l�o�r�=�w�h�i�t�e�)� � � � �#�#� �(' �F�e�a�t�u�r�e�s� � � � �-� ���U�l�t�r�a�-�m�o�d�e�r�n� �D�e�s�i�g�n���:� �G�l�a�s�s�m�o�r�p�h�i�c� �e�f�f�e�c�t�s� �w�i�t�h� �b�a�c�k�d�r�o�p� �b�l�u�r� �a�n�d� �g�r�a�d�i�e�n�t� �a�n�i�m�a�t�i�o�n�s� � �-� ���3�D� �B�a�c�k�g�r�o�u�n�d���:� �I�n�t�e�r�a�c�t�i�v�e� �3�D� �e�l�e�m�e�n�t�s� �u�s�i�n�g� �R�e�a�c�t� �T�h�r�e�e� �F�i�b�e�r� � �-� ���D�a�r�k�/�L�i�g�h�t� �M�o�d�e���:� �S�e�a�m�l�e�s�s� �t�h�e�m�e� �s�w�i�t�c�h�i�n�g� �w�i�t�h� �s�y�s�t�e�m� �p�r�e�f�e�r�e�n�c�e� �d�e�t�e�c�t�i�o�n� � �-� ���R�e�s�p�o�n�s�i�v�e� �D�e�s�i�g�n���:� �M�o�b�i�l�e�-�f�i�r�s�t� �a�p�p�r�o�a�c�h� �w�i�t�h� �b�e�a�u�t�i�f�u�l� �a�n�i�m�a�t�i�o�n�s� � �-� ���P�e�r�f�o�r�m�a�n�c�e� �O�p�t�i�m�i�z�e�d���:� �B�u�i�l�t� �w�i�t�h� �N�e�x�t�.�j�s� �1�4� �A�p�p� �R�o�u�t�e�r� �f�o�r� �o�p�t�i�m�a�l� �p�e�r�f�o�r�m�a�n�c�e� � �-� ���S�E�O� �R�e�a�d�y���:� �I�n�t�e�g�r�a�t�e�d� �w�i�t�h� �n�e�x�t�-�s�e�o� �f�o�r� �b�e�t�t�e�r� �s�e�a�r�c�h� �e�n�g�i�n�e� �v�i�s�i�b�i�l�i�t�y� � �-� ���A�n�a�l�y�t�i�c�s���:� �P�l�a�u�s�i�b�l�e� �A�n�a�l�y�t�i�c�s� �i�n�t�e�g�r�a�t�i�o�n� �f�o�r� �p�r�i�v�a�c�y�-�f�o�c�u�s�e�d� �t�r�a�c�k�i�n�g� � �-� ���F�o�r�m� �V�a�l�i�d�a�t�i�o�n���:� �C�o�n�t�a�c�t� �f�o�r�m� �w�i�t�h� �Z�o�d� �s�c�h�e�m�a� �v�a�l�i�d�a�t�i�o�n� � �-� ���E�m�a�i�l� �I�n�t�e�g�r�a�t�i�o�n���:� �E�m�a�i�l�J�S� �i�n�t�e�g�r�a�t�i�o�n� �f�o�r� �r�e�a�l� �e�m�a�i�l� �f�u�n�c�t�i�o�n�a�l�i�t�y� � �-� ���S�m�o�o�t�h� �A�n�i�m�a�t�i�o�n�s���:� �F�r�a�m�e�r� �M�o�t�i�o�n� �a�n�i�m�a�t�i�o�n�s� �t�h�r�o�u�g�h�o�u�t� �t�h�e� �s�i�t�e� � �-� ���P�r�o�j�e�c�t� �F�i�l�t�e�r�i�n�g���:� �I�n�t�e�r�a�c�t�i�v�e� �p�r�o�j�e�c�t� �s�h�o�w�c�a�s�e� �w�i�t�h� �c�a�t�e�g�o�r�y� �f�i�l�t�e�r�s� � �-� ���D�o�w�n�l�o�a�d�a�b�l�e� �R�e�s�u�m�e���:� �D�i�r�e�c�t� �r�e�s�u�m�e� �d�o�w�n�l�o�a�d� �f�u�n�c�t�i�o�n�a�l�i�t�y� � �-� ���B�l�o�g� �I�n�t�e�g�r�a�t�i�o�n���:� �M�D�X�-�b�a�s�e�d� �b�l�o�g� �s�y�s�t�e�m� �w�i�t�h� �s�y�n�t�a�x� �h�i�g�h�l�i�g�h�t�i�n�g� � �-� ���A�c�c�e�s�s�i�b�i�l�i�t�y���:� �W�C�A�G� �c�o�m�p�l�i�a�n�t� �w�i�t�h� �p�r�o�p�e�r� �A�R�I�A� �l�a�b�e�l�s� �a�n�d� �k�e�y�b�o�a�r�d� �n�a�v�i�g�a�t�i�o�n� � � � �#�#� �=���� �T�e�c�h� �S�t�a�c�k� � � � �#�#�#� �F�r�o�n�t�e�n�d� � �-� ���F�r�a�m�e�w�o�r�k���:� �N�e�x�t�.�j�s� �1�4� �(�A�p�p� �R�o�u�t�e�r�)� � �-� ���L�a�n�g�u�a�g�e���:� �T�y�p�e�S�c�r�i�p�t� � �-� ���S�t�y�l�i�n�g���:� �T�a�i�l�w�i�n�d� �C�S�S� � �-� ���U�I� �C�o�m�p�o�n�e�n�t�s���:� �s�h�a�d�c�n�/�u�i� �+� �R�a�d�i�x� �U�I� � �-� ���A�n�i�m�a�t�i�o�n�s���:� �F�r�a�m�e�r� �M�o�t�i�o�n� � �-� ���3�D� �G�r�a�p�h�i�c�s���:� �R�e�a�c�t� �T�h�r�e�e� �F�i�b�e�r� �+� �T�h�r�e�e�.�j�s� � � � �#�#�#� �B�a�c�k�e�n�d� �&� �T�o�o�l�s� � �-� ���F�o�r�m� �H�a�n�d�l�i�n�g���:� �R�e�a�c�t� �H�o�o�k� �F�o�r�m� �+� �Z�o�d� � �-� ���E�m�a�i�l� �S�e�r�v�i�c�e���:� �E�m�a�i�l�J�S� �f�o�r� �c�o�n�t�a�c�t� �f�o�r�m� �f�u�n�c�t�i�o�n�a�l�i�t�y� � �-� ���T�h�e�m�e� �M�a�n�a�g�e�m�e�n�t���:� �n�e�x�t�-�t�h�e�m�e�s� � �-� ���A�n�a�l�y�t�i�c�s���:� �P�l�a�u�s�i�b�l�e� � �-� ���C�o�n�t�e�n�t���:� �M�D�X� �w�i�t�h� �r�e�m�a�r�k�/�r�e�h�y�p�e� �p�l�u�g�i�n�s� � �-� ���D�e�p�l�o�y�m�e�n�t���:� �V�e�r�c�e�l� � � � �#�#�#� �D�e�v�e�l�o�p�m�e�n�t� � �-� ���L�i�n�t�i�n�g���:� �E�S�L�i�n�t� �+� �N�e�x�t�.�j�s� �c�o�n�f�i�g� � �-� ���T�y�p�e� �C�h�e�c�k�i�n�g���:� �T�y�p�e�S�c�r�i�p�t� � �-� ���P�a�c�k�a�g�e� �M�a�n�a�g�e�r���:� �n�p�m�/�y�a�r�n� � � � �#�#� �=؀� �G�e�t�t�i�n�g� �S�t�a�r�t�e�d� � � � �#�#�#� �P�r�e�r�e�q�u�i�s�i�t�e�s� � � � �-� �N�o�d�e�.�j�s� �1�8�+� � � �-� �n�p�m� �o�r� �y�a�r�n� � �-� �G�i�t� � � � �#�#�#� �I�n�s�t�a�l�l�a�t�i�o�n� � � � �1�.� ���C�l�o�n�e� �t�h�e� �r�e�p�o�s�i�t�o�r�y��� � � � � ����b�a�s�h� � � � � �g�i�t� �c�l�o�n�e� �h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�T�u�h�i�n�-�S�n�a�p�D�/�p�o�r�t�f�o�l�i�o�.�g�i�t� � � � � �c�d� �p�o�r�t�f�o�l�i�o� � � � � ���� � � � �2�.� ���I�n�s�t�a�l�l� �d�e�p�e�n�d�e�n�c�i�e�s��� � � � � ����b�a�s�h� � � � � �n�p�m� �i�n�s�t�a�l�l� � � � � �#� �o�r� � � � � �y�a�r�n� �i�n�s�t�a�l�l� � � � � ���� � � � �3�.� ���R�u�n� �t�h�e� �d�e�v�e�l�o�p�m�e�n�t� �s�e�r�v�e�r��� � � � � ����b�a�s�h� � � � � �n�p�m� �r�u�n� �d�e�v� � � � � �#� �o�r� � � � � �y�a�r�n� �d�e�v� � � � � ���� � � � �4�.� ���O�p�e�n� �y�o�u�r� �b�r�o�w�s�e�r��� � � � � �N�a�v�i�g�a�t�e� �t�o� �[�h�t�t�p�:�/�/�l�o�c�a�l�h�o�s�t�:�3�0�0�0�]�(�h�t�t�p�:�/�/�l�o�c�a�l�h�o�s�t�:�3�0�0�0�)� � � � �#�#�#� �A�v�a�i�l�a�b�l�e� �S�c�r�i�p�t�s� � � � ����b�a�s�h� � �n�p�m� �r�u�n� �d�e�v� � � � � � �#� �S�t�a�r�t� �d�e�v�e�l�o�p�m�e�n�t� �s�e�r�v�e�r� � �n�p�m� �r�u�n� �b�u�i�l�d� � � � �#� �B�u�i�l�d� �f�o�r� �p�r�o�d�u�c�t�i�o�n� � �n�p�m� �r�u�n� �s�t�a�r�t� � � � �#� �S�t�a�r�t� �p�r�o�d�u�c�t�i�o�n� �s�e�r�v�e�r� � �n�p�m� �r�u�n� �l�i�n�t� � � � � �#� �R�u�n� �E�S�L�i�n�t� � ���� � � � �#�#� �=��� �C�o�n�f�i�g�u�r�a�t�i�o�n� � � � �#�#�#� �P�e�r�s�o�n�a�l� �I�n�f�o�r�m�a�t�i�o�n� � � � �U�p�d�a�t�e� �t�h�e� �f�o�l�l�o�w�i�n�g� �f�i�l�e�s� �w�i�t�h� �y�o�u�r� �p�e�r�s�o�n�a�l� �i�n�f�o�r�m�a�t�i�o�n�:� � � � �1�.� ����s�r�c�/�a�p�p�/�l�a�y�o�u�t�.�t�s�x���� �-� �U�p�d�a�t�e� �m�e�t�a�d�a�t�a�,� �t�i�t�l�e�,� �a�n�d� �d�e�s�c�r�i�p�t�i�o�n� � �2�.� ����s�r�c�/�c�o�m�p�o�n�e�n�t�s�/�h�e�r�o�-�s�e�c�t�i�o�n�.�t�s�x���� �-� �U�p�d�a�t�e� �n�a�m�e�,� �t�i�t�l�e�,� �a�n�d� �d�e�s�c�r�i�p�t�i�o�n� � �3�.� ����s�r�c�/�c�o�m�p�o�n�e�n�t�s�/�a�b�o�u�t�-�s�e�c�t�i�o�n�.�t�s�x���� �-� �U�p�d�a�t�e� �a�b�o�u�t� �c�o�n�t�e�n�t� �a�n�d� �s�t�a�t�s� � �4�.� ����s�r�c�/�c�o�m�p�o�n�e�n�t�s�/�c�o�n�t�a�c�t�-�s�e�c�t�i�o�n�.�t�s�x���� �-� �U�p�d�a�t�e� �c�o�n�t�a�c�t� �i�n�f�o�r�m�a�t�i�o�n� �a�n�d� �s�o�c�i�a�l� �l�i�n�k�s� � �5�.� ����s�r�c�/�c�o�m�p�o�n�e�n�t�s�/�p�r�o�j�e�c�t�s�-�s�e�c�t�i�o�n�.�t�s�x���� �-� �A�d�d� �y�o�u�r� �p�r�o�j�e�c�t�s� � �6�.� ����s�r�c�/�c�o�m�p�o�n�e�n�t�s�/�s�k�i�l�l�s�-�s�e�c�t�i�o�n�.�t�s�x���� �-� �U�p�d�a�t�e� �s�k�i�l�l�s� �a�n�d� �t�e�c�h�n�o�l�o�g�i�e�s� � � � �#�#�#� �A�n�a�l�y�t�i�c�s� � � � �U�p�d�a�t�e� �t�h�e� �d�o�m�a�i�n� �i�n� ��s�r�c�/�c�o�m�p�o�n�e�n�t�s�/�a�n�a�l�y�t�i�c�s�.�t�s�x��:� � ����t�y�p�e�s�c�r�i�p�t� � �s�c�r�i�p�t�.�s�e�t�A�t�t�r�i�b�u�t�e�(�'�d�a�t�a�-�d�o�m�a�i�n�'�,� �'�y�o�u�r�-�d�o�m�a�i�n�.�c�o�m�'�)� � ���� � � � �#�#�#� �S�o�c�i�a�l� �L�i�n�k�s� � � � �U�p�d�a�t�e� �a�l�l� �s�o�c�i�a�l� �m�e�d�i�a� �l�i�n�k�s� �t�h�r�o�u�g�h�o�u�t� �t�h�e� �c�o�m�p�o�n�e�n�t�s� �w�i�t�h� �y�o�u�r� �a�c�t�u�a�l� �p�r�o�f�i�l�e�s�:� � �-� �G�i�t�H�u�b� � �-� �L�i�n�k�e�d�I�n� � �-� �T�w�i�t�t�e�r�/�X� � �-� �I�n�s�t�a�g�r�a�m� � �-� �E�m�a�i�l� � � � �#�#�#� �P�r�o�j�e�c�t� �I�m�a�g�e�s� � � � �A�d�d� �p�r�o�j�e�c�t� �i�m�a�g�e�s� �t�o� �t�h�e� ��p�u�b�l�i�c�/�p�r�o�j�e�c�t�s�/�� �d�i�r�e�c�t�o�r�y�:� � � � �1�.� ���D�o�w�n�l�o�a�d� �I�m�a�g�e�s���:� �G�e�t� �s�c�r�e�e�n�s�h�o�t�s� �f�r�o�m� �y�o�u�r� �G�i�t�H�u�b� �r�e�p�o�s�i�t�o�r�i�e�s� �o�r� �t�a�k�e� �n�e�w� �o�n�e�s� � �2�.� ���I�m�a�g�e� �N�a�m�e�s���:� �U�s�e� �t�h�e� �e�x�a�c�t� �n�a�m�e�s� �s�p�e�c�i�f�i�e�d� �i�n� �y�o�u�r� �p�r�o�j�e�c�t� �c�o�n�f�i�g�u�r�a�t�i�o�n� � �3�.� ���I�m�a�g�e� �F�o�r�m�a�t���:� �P�N�G� �o�r� �J�P�G�,� �4�0�0�x�2�5�0� �p�i�x�e�l�s� �r�e�c�o�m�m�e�n�d�e�d� � �4�.� ���F�i�l�e� �S�i�z�e���:� �K�e�e�p� �u�n�d�e�r� �5�0�0�K�B� �f�o�r� �o�p�t�i�m�a�l� �l�o�a�d�i�n�g� � � � �T�h�e� �p�o�r�t�f�o�l�i�o� �w�i�l�l� �a�u�t�o�m�a�t�i�c�a�l�l�y� �s�h�o�w� �p�l�a�c�e�h�o�l�d�e�r�s� �i�f� �i�m�a�g�e�s� �a�r�e� �n�o�t� �f�o�u�n�d�.� � � � �#�#� �� �1�0�2�4�p�x� � � � �#�#� �=؀� �D�e�p�l�o�y�m�e�n�t� � � � �#�#�#� �V�e�r�c�e�l� �(�R�e�c�o�m�m�e�n�d�e�d�)� � � � �1�.� �P�u�s�h� �y�o�u�r� �c�o�d�e� �t�o� �G�i�t�H�u�b� � �2�.� �C�o�n�n�e�c�t� �y�o�u�r� �r�e�p�o�s�i�t�o�r�y� �t�o� �V�e�r�c�e�l� � �3�.� �D�e�p�l�o�y� �a�u�t�o�m�a�t�i�c�a�l�l�y� � � � �#�#�#� �E�n�v�i�r�o�n�m�e�n�t� �V�a�r�i�a�b�l�e�s� � � � �C�r�e�a�t�e� �a� ��.�e�n�v�.�l�o�c�a�l�� �f�i�l�e� �f�o�r� �l�o�c�a�l� �d�e�v�e�l�o�p�m�e�n�t�:� � ����e�n�v� � �#� �A�n�a�l�y�t�i�c�s� � �N�E�X�T�_�P�U�B�L�I�C�_�A�N�A�L�Y�T�I�C�S�_�D�O�M�A�I�N�=�y�o�u�r�-�d�o�m�a�i�n�.�c�o�m� � � � �#� �E�m�a�i�l�J�S� �C�o�n�f�i�g�u�r�a�t�i�o�n� � �N�E�X�T�_�P�U�B�L�I�C�_�E�M�A�I�L�J�S�_�P�U�B�L�I�C�_�K�E�Y�=�y�o�u�r�_�p�u�b�l�i�c�_�k�e�y� � �N�E�X�T�_�P�U�B�L�I�C�_�E�M�A�I�L�J�S�_�S�E�R�V�I�C�E�_�I�D�=�y�o�u�r�_�s�e�r�v�i�c�e�_�i�d� � �N�E�X�T�_�P�U�B�L�I�C�_�E�M�A�I�L�J�S�_�T�E�M�P�L�A�T�E�_�I�D�=�y�o�u�r�_�t�e�m�p�l�a�t�e�_�i�d� � �N�E�X�T�_�P�U�B�L�I�C�_�E�M�A�I�L�J�S�_�T�O�_�E�M�A�I�L�=�y�o�u�r�_�e�m�a�i�l�@�e�x�a�m�p�l�e�.�c�o�m� � ���� � � � �#�#�#�#� �E�m�a�i�l�J�S� �S�e�t�u�p� � � � �1�.� ���S�i�g�n� �u�p��� �a�t� �[�E�m�a�i�l�J�S�]�(�h�t�t�p�s�:�/�/�w�w�w�.�e�m�a�i�l�j�s�.�c�o�m�/�)� � �2�.� ���C�r�e�a�t�e� �a� �s�e�r�v�i�c�e��� �(�G�m�a�i�l�,� �O�u�t�l�o�o�k�,� �e�t�c�.�)� � �3�.� ���C�r�e�a�t�e� �a�n� �e�m�a�i�l� �t�e�m�p�l�a�t�e��� �w�i�t�h� �v�a�r�i�a�b�l�e�s�:� � � � � �-� ��{�{�f�r�o�m�_�n�a�m�e�}�}�� �-� �S�e�n�d�e�r�'�s� �n�a�m�e� � � � � �-� ��{�{�f�r�o�m�_�e�m�a�i�l�}�}�� �-� �S�e�n�d�e�r�'�s� �e�m�a�i�l� � � � � �-� ��{�{�s�u�b�j�e�c�t�}�}�� �-� �E�m�a�i�l� �s�u�b�j�e�c�t� � � � � �-� ��{�{�m�e�s�s�a�g�e�}�}�� �-� �E�m�a�i�l� �m�e�s�s�a�g�e� � � � � �-� ��{�{�t�o�_�n�a�m�e�}�}�� �-� �R�e�c�i�p�i�e�n�t� �n�a�m�e� � � � � �-� ��{�{�t�i�m�e�}�}�� �-� �T�i�m�e�s�t�a�m�p� � � � � �-� ��{�{�s�i�t�e�_�u�r�l�}�}�� �-� �W�e�b�s�i�t�e� �U�R�L� � �4�.� ���G�e�t� �y�o�u�r� �c�r�e�d�e�n�t�i�a�l�s��� �a�n�d� �a�d�d� �t�h�e�m� �t�o� ��.�e�n�v�.�l�o�c�a�l�� � �5�.� ���T�e�s�t� �t�h�e� �c�o�n�t�a�c�t� �f�o�r�m��� �t�o� �e�n�s�u�r�e� �e�m�a�i�l�s� �a�r�e� �s�e�n�t� �c�o�r�r�e�c�t�l�y� � � � �#�#�#� �O�t�h�e�r� �P�l�a�t�f�o�r�m�s� � � � �T�h�e� �s�i�t�e� �c�a�n� �b�e� �d�e�p�l�o�y�e�d� �t�o� �a�n�y� �p�l�a�t�f�o�r�m� �t�h�a�t� �s�u�p�p�o�r�t�s� �N�e�x�t�.�j�s�:� � �-� �N�e�t�l�i�f�y� � �-� �R�a�i�l�w�a�y� � �-� �D�i�g�i�t�a�l�O�c�e�a�n� �A�p�p� �P�l�a�t�f�o�r�m� � �-� �A�W�S� �A�m�p�l�i�f�y� � � � �#�#� �=��� �P�e�r�f�o�r�m�a�n�c�e� � � � �-� ���L�i�g�h�t�h�o�u�s�e� �S�c�o�r�e���:� �9�5�+� �a�c�r�o�s�s� �a�l�l� �m�e�t�r�i�c�s� � �-� ���C�o�r�e� �W�e�b� �V�i�t�a�l�s���:� �O�p�t�i�m�i�z�e�d� �f�o�r� �a�l�l� �m�e�t�r�i�c�s� � �-� ���B�u�n�d�l�e� �S�i�z�e���:� �O�p�t�i�m�i�z�e�d� �w�i�t�h� �t�r�e�e� �s�h�a�k�i�n�g� � �-� ���I�m�a�g�e� �O�p�t�i�m�i�z�a�t�i�o�n���:� �N�e�x�t�.�j�s� �I�m�a�g�e� �c�o�m�p�o�n�e�n�t� �w�i�t�h� �W�e�b�P� �s�u�p�p�o�r�t� � � � �#�#� �=�'� �D�e�v�e�l�o�p�m�e�n�t� � � � �#�#�#� �C�o�d�e� �S�t�r�u�c�t�u�r�e� � � � ���� � �s�r�c�/� � �%�%�% �a�p�p�/� � � � � � � � � � � � � � � � � �#� �N�e�x�t�.�j�s� �A�p�p� �R�o�u�t�e�r� �p�a�g�e�s� � �%�%�% �c�o�m�p�o�n�e�n�t�s�/� � � � � � � � � � �#� �R�e�u�s�a�b�l�e� �R�e�a�c�t� �c�o�m�p�o�n�e�n�t�s� � �% � � �%�%�% �u�i�/� � � � � � � � � � � � � �#� �s�h�a�d�c�n�/�u�i� �c�o�m�p�o�n�e�n�t�s� � �%�%�% �l�i�b�/� � � � � � � � � � � � � � � � �#� �U�t�i�l�i�t�y� �f�u�n�c�t�i�o�n�s� � �% � � �%�%�% �u�t�i�l�s�.�t�s� � � � � � � � �#� �G�e�n�e�r�a�l� �u�t�i�l�i�t�y� �f�u�n�c�t�i�o�n�s� � �% � � �%�%�% �e�m�a�i�l�j�s�.�t�s� � � � � � �#� �E�m�a�i�l�J�S� �c�o�n�f�i�g�u�r�a�t�i�o�n� �a�n�d� �f�u�n�c�t�i�o�n�s� � �%�%�% �t�y�p�e�s�/� � � � � � � � � � � � � � �#� �T�y�p�e�S�c�r�i�p�t� �t�y�p�e� �d�e�f�i�n�i�t�i�o�n�s� � ���� � � � �#�#�#� �C�o�n�t�r�i�b�u�t�i�n�g� � � � �1�.� �F�o�r�k� �t�h�e� �r�e�p�o�s�i�t�o�r�y� � �2�.� �C�r�e�a�t�e� �a� �f�e�a�t�u�r�e� �b�r�a�n�c�h� � �3�.� �M�a�k�e� �y�o�u�r� �c�h�a�n�g�e�s� � �4�.� �A�d�d� �t�e�s�t�s� �i�f� �a�p�p�l�i�c�a�b�l�e� � �5�.� �S�u�b�m�i�t� �a� �p�u�l�l� �r�e�q�u�e�s�t� � � � �#�#� �=��� �L�i�c�e�n�s�e� � � � �T�h�i�s� �p�r�o�j�e�c�t� �i�s� �o�p�e�n� �s�o�u�r�c�e� �a�n�d� �a�v�a�i�l�a�b�l�e� �u�n�d�e�r� �t�h�e� �[�M�I�T� �L�i�c�e�n�s�e�]�(�L�I�C�E�N�S�E�)�.� � � � �#�#� �>�� �C�o�n�t�r�i�b�u�t�i�n�g� � � � �C�o�n�t�r�i�b�u�t�i�o�n�s� �a�r�e� �w�e�l�c�o�m�e�!� �P�l�e�a�s�e� �f�e�e�l� �f�r�e�e� �t�o� �s�u�b�m�i�t� �a� �P�u�l�l� �R�e�q�u�e�s�t�.� � � � �#�#�#� �D�e�v�e�l�o�p�m�e�n�t� �G�u�i�d�e�l�i�n�e�s� � � � �-� �F�o�l�l�o�w� �T�y�p�e�S�c�r�i�p�t� �b�e�s�t� �p�r�a�c�t�i�c�e�s� � �-� �U�s�e� �c�o�n�v�e�n�t�i�o�n�a�l� �c�o�m�m�i�t� �m�e�s�s�a�g�e�s� � �-� �E�n�s�u�r�e� �r�e�s�p�o�n�s�i�v�e� �d�e�s�i�g�n� �w�o�r�k�s� �o�n� �a�l�l� �d�e�v�i�c�e�s� � �-� �T�e�s�t� �d�a�r�k�/�l�i�g�h�t� �m�o�d�e� �f�u�n�c�t�i�o�n�a�l�i�t�y� � �-� �O�p�t�i�m�i�z�e� �f�o�r� �p�e�r�f�o�r�m�a�n�c�e� � � � �#�#� �=��� �S�u�p�p�o�r�t� � � � �I�f� �y�o�u� �h�a�v�e� �a�n�y� �q�u�e�s�t�i�o�n�s� �o�r� �n�e�e�d� �h�e�l�p�,� �f�e�e�l� �f�r�e�e� �t�o� �r�e�a�c�h� �o�u�t�:� � �-� �E�m�a�i�l�:� �t�u�h�i�n�c�h�a�k�r�a�b�a�r�t�y�1�4�@�g�m�a�i�l�.�c�o�m� � �-� �G�i�t�H�u�b� �I�s�s�u�e�s�:� �[�C�r�e�a�t�e� �a�n� �i�s�s�u�e�]�(�h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�T�u�h�i�n�-�S�n�a�p�D�/�p�o�r�t�f�o�l�i�o�/�i�s�s�u�e�s�)� � �-� �L�i�n�k�e�d�I�n�:� �[�C�o�n�n�e�c�t� �w�i�t�h� �m�e�]�(�h�t�t�p�s�:�/�/�l�i�n�k�e�d�i�n�.�c�o�m�/�i�n�/�t�u�h�i�n�-�c�h�a�k�r�a�b�a�r�t�y�)� � � � �#�#�#� �C�o�n�t�a�c�t� �F�o�r�m� � � � �T�h�e� �c�o�n�t�a�c�t� �f�o�r�m� �i�s� �f�u�l�l�y� �f�u�n�c�t�i�o�n�a�l� �a�n�d� �w�i�l�l� �s�e�n�d� �r�e�a�l� �e�m�a�i�l�s� �t�o� �t�h�e� �c�o�n�f�i�g�u�r�e�d� �e�m�a�i�l� �a�d�d�r�e�s�s�.� �M�a�k�e� �s�u�r�e� �t�o�:� � �1�.� �S�e�t� �u�p� �E�m�a�i�l�J�S� �c�r�e�d�e�n�t�i�a�l�s� �i�n� �y�o�u�r� �e�n�v�i�r�o�n�m�e�n�t� �v�a�r�i�a�b�l�e�s� � �2�.� �T�e�s�t� �t�h�e� �f�o�r�m� �b�e�f�o�r�e� �d�e�p�l�o�y�i�n�g� �t�o� �p�r�o�d�u�c�t�i�o�n� � �3�.� �M�o�n�i�t�o�r� �y�o�u�r� �e�m�a�i�l� �s�e�r�v�i�c�e� �f�o�r� �a�n�y� �d�e�l�i�v�e�r�y� �i�s�s�u�e�s� � � � �#�#� �=�O� �A�c�k�n�o�w�l�e�d�g�m�e�n�t�s� � � � �-� �[�s�h�a�d�c�n�/�u�i�]�(�h�t�t�p�s�:�/�/�u�i�.�s�h�a�d�c�n�.�c�o�m�/�)� �f�o�r� �t�h�e� �b�e�a�u�t�i�f�u�l� �U�I� �c�o�m�p�o�n�e�n�t�s� � �-� �[�F�r�a�m�e�r� �M�o�t�i�o�n�]�(�h�t�t�p�s�:�/�/�w�w�w�.�f�r�a�m�e�r�.�c�o�m�/�m�o�t�i�o�n�/�)� �f�o�r� �s�m�o�o�t�h� �a�n�i�m�a�t�i�o�n�s� � �-� �[�R�e�a�c�t� �T�h�r�e�e� �F�i�b�e�r�]�(�h�t�t�p�s�:�/�/�d�o�c�s�.�p�m�n�d�.�r�s�/�r�e�a�c�t�-�t�h�r�e�e�-�f�i�b�e�r�/�)� �f�o�r� �3�D� �g�r�a�p�h�i�c�s� � �-� �[�E�m�a�i�l�J�S�]�(�h�t�t�p�s�:�/�/�w�w�w�.�e�m�a�i�l�j�s�.�c�o�m�/�)� �f�o�r� �e�m�a�i�l� �f�u�n�c�t�i�o�n�a�l�i�t�y� � �-� �[�T�a�i�l�w�i�n�d� �C�S�S�]�(�h�t�t�p�s�:�/�/�t�a�i�l�w�i�n�d�c�s�s�.�c�o�m�/�)� �f�o�r� �u�t�i�l�i�t�y�-�f�i�r�s�t� �s�t�y�l�i�n�g� � �-� �[�N�e�x�t�.�j�s�]�(�h�t�t�p�s�:�/�/�n�e�x�t�j�s�.�o�r�g�/�)� �f�o�r� �t�h�e� �a�m�a�z�i�n�g� �R�e�a�c�t� �f�r�a�m�e�w�o�r�k� � �-� �[�R�a�d�i�x� �U�I�]�(�h�t�t�p�s�:�/�/�w�w�w�.�r�a�d�i�x�-�u�i�.�c�o�m�/�)� �f�o�r� �a�c�c�e�s�s�i�b�l�e� �c�o�m�p�o�n�e�n�t�s� � � � �-�-�-� � � � �� � � � �M�a�d�e� �w�i�t�h� �d'� �u�s�i�n�g� �N�e�x�t�.�j�s� �a�n�d� �T�a�i�l�w�i�n�d� �C�S�S� � � � � � � � �[�!�[�G�i�t�H�u�b� �s�t�a�r�s�]�(�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�g�i�t�h�u�b�/�s�t�a�r�s�/�T�u�h�i�n�-�S�n�a�p�D�/�p�o�r�t�f�o�l�i�o�?�s�t�y�l�e�=�s�o�c�i�a�l�)�]�(�h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�T�u�h�i�n�-�S�n�a�p�D�/�p�o�r�t�f�o�l�i�o�)� � � � �[�!�[�G�i�t�H�u�b� �f�o�r�k�s�]�(�h�t�t�p�s�:�/�/�i�m�g�.�s�h�i�e�l�d�s�.�i�o�/�g�i�t�h�u�b�/�f�o�r�k�s�/�T�u�h�i�n�-�S�n�a�p�D�/�p�o�r�t�f�o�l�i�o�?�s�t�y�l�e�=�s�o�c�i�a�l�)�]�(�h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�T�u�h�i�n�-�S�n�a�p�D�/�p�o�r�t�f�o�l�i�o�)� � �� � �

Related notes

Frontend & UI

LevelUp Habit Tracker

A local-first habit tracker that turns daily routines into a visual, gamified system.

Frontend & UI

Rasoi

The Smart Kitchen Companion for Dei Klien A 10-day rationing brain, a pantry that keeps its own books, and a meal planner that actually knows what's in the fridge.

Frontend & UI

Online Banking App

A modern, feature-rich online banking application built with Angular 15.