My profile

Styling excellence, code consistency, user engagement.

Table of Contents

• Table of Contents
• Overview
• Features
• Project Structure
  • Project Index
• Getting Started
  • Prerequisites
  • Installation
  • Usage
  • Testing
• Contributing
• License
• Acknowledgments

---

Overview

**Overview:

my-profile is a dynamic portfolio project that empowers software developers to showcase their skills, projects, and contact information with flair. Its interactive features include animated cards, theme toggles, and typing animations, enhancing user engagement. Tailored for developers seeking a visually appealing and interactive online presence, my-profile offers a seamless platform to highlight their work and connect with visitors.

---

Features

	Feature	Summary
⚙️	Architecture	Utilizes TypeScript for strong typing and enhanced developer experience. Configured with Vite for fast development and optimized builds. Follows a component-based architecture for reusability and maintainability.
🔩	Code Quality	ESLint setup enforcing best practices and code consistency. Integration with Prettier for code formatting. Utilizes TypeScript for type safety and improved code quality.
📄	Documentation	Extensive TypeScript documentation with 10 TypeScript files. Package.json and package-lock.json defining project dependencies and scripts. GitHub Actions workflows for automated deployment and hosting.
🔌	Integrations	Firebase Hosting configuration for serving the web application. GitHub Actions for CI/CD workflows and deployment automation. Integration with Tailwind CSS for styling and theming.
🧩	Modularity	Components.json defining project configuration for styles and TypeScript setup. Utilizes module aliases for easy imports and code organization. Context API for managing theme state and data across the application.
🧪	Testing	Test commands available using npm for running tests. Utilizes Jest or React Testing Library for testing components and functionality. Ensures test coverage for critical parts of the application.
⚡️	Performance	Optimized build process with Vite for fast development and production builds. Lazy loading of components for improved initial load times. Performance monitoring tools integrated for tracking and optimizing performance metrics.
🛡️	Security	Firebase Hosting configuration for secure serving of the web application. Code quality checks with ESLint and Prettier for secure and consistent codebase. Dependency management with locked versions in package-lock.json for stability and security.
📦	Dependencies	Package.json defining project dependencies including React, Tailwind CSS, and various UI libraries. Locked versions managed in package-lock.json for consistency and stability. Utilizes npm for package management and dependency installation.

---

Project Structure

└── my-profile/
    ├── .github
    │   └── workflows
    ├── README.md
    ├── components.json
    ├── eslint.config.js
    ├── firebase.json
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── public
    │   └── icon.png
    ├── src
    │   ├── App.css
    │   ├── App.tsx
    │   ├── assets
    │   ├── components
    │   ├── contexts
    │   ├── index.css
    │   ├── lib
    │   ├── main.tsx
    │   └── vite-env.d.ts
    ├── tailwind.config.js
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    └── vite.config.ts

Project Index

MY-PROFILE/

__root__

components.json	- Defines project configuration for styles, aliases, and TypeScript setup - Specifies Tailwind CSS settings, file paths, and module aliases for components, utilities, and hooks - Facilitates consistent styling and easy module imports across the codebase.
eslint.config.js	- Defines ESLint configuration for TypeScript and React projects, leveraging recommended rules and plugins for error checking and code formatting - Integrates with Prettier and enforces best practices for React hooks and components.
firebase.json	Configure Firebase hosting settings to serve the web application from the 'dist' directory and rewrite all URLs to 'dist/index.html'.
index.html	Defines the main HTML structure for the project, setting up the initial layout and linking to the main TypeScript file for functionality.
package-lock.json	- The `package-lock.json` file in the project structure defines the dependencies and their versions required for the `my-profile` project - It ensures that the project uses specific versions of packages like `@radix-ui/react-dropdown-menu`, `@radix-ui/react-icons`, `@radix-ui/react-slot`, `class-variance-authority`, `clsx`, and `embla-carousel-react` - This file plays a crucial role in managing and locking the dependencies to maintain consistency and stability within the project architecture.
package.json	- Define project dependencies and scripts for development, building, linting, and previewing - Key dependencies include React, Tailwind CSS, and various UI libraries - The package.json file outlines project metadata, scripts, and dependencies essential for development and deployment workflows.
postcss.config.js	Configures PostCSS plugins Tailwind CSS and Autoprefixer for the project's build process.
tailwind.config.js	- Define Tailwind CSS configuration for project theming, including dark mode, content sources, and custom color palette - Extends theme with border radius and color variables - Integrates Tailwind CSS plugin for animations.
tsconfig.app.json	- Defines TypeScript compiler options for the project, specifying target version, module resolution, and linting rules - Maps custom paths for imports and sets up strict type checking - Configures the project to use ES2020 features and React JSX syntax - The file ensures consistent compilation and adherence to coding standards across the codebase.
tsconfig.json	Defines project structure and module paths for TypeScript compilation, ensuring proper resolution of imports across the codebase.
tsconfig.node.json	- Configures TypeScript compiler options for ES2022 target with strict linting rules and bundler mode for module resolution - Includes Vite configuration file for the project.
vite.config.ts	- Configures Vite to resolve paths using aliases for easier imports within the project - Sets up React plugin and defines project configuration.

.github

workflows

firebase-hosting-merge.yml	- Automates deployment to Firebase Hosting upon merging changes to the main branch - Utilizes GitHub Actions to build and deploy the project, ensuring seamless updates to the live channel - The workflow integrates Firebase tools for efficient hosting management.
firebase-hosting-pull-request.yml	- Automate deployment to Firebase Hosting for pull requests, ensuring seamless preview of changes - Utilizes GitHub Actions to build and deploy the project, triggered on pull requests - Maintains permissions for necessary actions and integrates with Firebase services for deployment.

src

App.css	- Define the styling for the root element and container, ensuring centralized alignment and responsiveness - Implement flexbox properties for layout control, with media queries for smaller screens - Customize the profile image with specific dimensions and styling attributes.
App.tsx	- Implements a dynamic portfolio showcasing a software developer's profile, projects, and contact links - Utilizes animations, theming, and a carousel component for an interactive user experience - Integrates icons for social media and email, with the ability to toggle between light and dark themes.
index.css	- Defines global styles and color variables for the project, ensuring consistent design across components - Sets typography, color scheme, and button styles - Handles light and dark mode styling based on user preference - Organizes Tailwind CSS utilities and base styles for a cohesive user interface.
main.tsx	- Initialize the React application by rendering the main component within a strict mode - This file sets up the root element for the application and renders the main App component, ensuring a robust and secure rendering environment.
vite-env.d.ts	Defines Vite client types for the project, enhancing development experience and enabling seamless integration with Vite's build tooling.

components

animated-card.tsx	- Implements an interactive animated card component using React and Framer Motion - Allows users to flip the card to reveal hidden content, creating an engaging user experience within the project's component architecture.
header.tsx	Defines the Header component responsible for rendering the project's header section.
mode-toggle.tsx	- Implements a mode toggle component that allows users to switch between light, dark, and system themes - The component includes a button with icons for sun and moon, providing visual feedback for theme selection - The dropdown menu offers options to switch themes with corresponding labels.
typing-animation.tsx	- Implements a typing animation component using Framer Motion and React to display text character by character - The component dynamically types out the provided text with a blinking cursor effect, enhancing user engagement and visual appeal within the project's UI components.

ui

button.tsx	- Defines and exports a Button component with various visual styles and sizes - Utilizes class-variance-authority for managing button variants - The component can be rendered as a button element or a slot based on the 'asChild' prop - Enables easy customization of button appearance and behavior within the project's UI components.
carousel.tsx	- Enables creation of interactive carousels with navigation controls and slide management - Facilitates seamless scrolling between items in a horizontal or vertical orientation - Supports customization through various options and plugins - Enhances user experience by providing intuitive navigation and accessibility features.
dropdown-menu.tsx	- Facilitates creation of customizable dropdown menus with various interactive elements like items, checkboxes, and radio buttons - Enables seamless integration of dropdown functionality into React components, enhancing user experience and interface interactivity within the project architecture.

contexts

theme-provider.tsx

- Enables dynamic theming based on user preference or system settings - Manages theme state and provides a context for theme-related data across the application - Supports customization of default theme and storage options - Facilitates seamless integration of theme switching functionality within the project's UI components.

lib

utils.ts

Enhances class value merging for Tailwind CSS classes by combining utility functions clsx and twMerge, optimizing class value handling in the project architecture.

---

Getting Started

Prerequisites

Before getting started with my-profile, ensure your runtime environment meets the following requirements:

• Programming Language: TypeScript
• Package Manager: Npm

Installation

Install my-profile using one of the following methods:

Build from source:

1. Clone the my-profile repository:

❯ git clone https://github.com/lmarcosss/my-profile

2. Navigate to the project directory:

❯ cd my-profile

3. Install the project dependencies:

Using npm  

❯ npm install

Usage

Run my-profile using the following command: Using npm  

❯ npm start

Testing

Run the test suite using the following command: Using npm  

❯ npm test

---

Contributing

• 💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
• 🐛 Report Issues: Submit bugs found or log feature requests for the my-profile project.
• 💡 Submit Pull Requests: Review open PRs, and submit your own PRs.

Contributing Guidelines

1. Fork the Repository: Start by forking the project repository to your github account.
2. Clone Locally: Clone the forked repository to your local machine using a git client.

   git clone https://github.com/lmarcosss/my-profile

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

   git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear message describing your updates.

   git commit -m 'Implemented new feature x.'

6. Push to github: Push the changes to your forked repository.

   git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

---

License

This project is licensed under the MIT License. For more details, refer to the LICENSE file.

---

Acknowledgments

• List any resources, contributors, inspiration, etc. here.

---