FATHIRAZ-HOMEPAGE

❯ A dynamic portfolio homepage showcasing multiple JavaScript and CSS frameworks

Built with the tools and technologies:

Table of Contents

• 📍 Overview
• 👾 Features
• 📂 Repository Structure
• 🧩 Modules
• 🚀 Getting Started
  • 🔖 Prerequisites
  • 📦 Installation
  • 🤖 Usage
• 📌 Project Roadmap
• 📸 Screenshot
• 🤝 Contributing
• 🎗 License
• 🙌 Acknowledgments

---

📍 Overview

This project is a dynamic portfolio homepage that showcases multiple JavaScript and CSS frameworks. As a Backend Engineer exploring modern frontend development, this project demonstrates the ability to work with various technologies while providing a unique experience for visitors. The homepage features a dynamic framework selection, allowing users to choose which JavaScript and CSS frameworks they want to see in action.

---

👾 Features

• Dynamic Framework Selection: Users can choose between different JavaScript and CSS frameworks.
• Monorepo Structure: Uses Npm Workspaces for efficient dependency management.
• Multiple Applications:
  • React Application (frontend)
  • Express.js Application (backend service)
• Framework Options:
  • JavaScript Frameworks: React (default), Vue 3 (soon), Svelte (soon)
  • CSS Frameworks: Bootstrap (default), Bulma, Tailwind, Uikit (soon), Foundation (soon)
• Professional Showcase: Displays experience timeline, technology stack, and contact details.

---

📂 Repository Structure

└── fathiraz-homepage/
├── README.md
├── package.json
├── .yarnrc.yml
├── packages
│ ├── api
│ │ ├── src
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ ├── package.json
│ │ └── vercel.json
│ ├── react-app
│ │ ├── src
│ │ │ ├── shared
│ │ │ │ ├── components
│ │ │ │ │ ├── App
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── AppBootstrap.tsx
│ │ │ │ │ └── Resume
│ │ │ │ │   ├── index.ts
│ │ │ │ │   └── ResumeBootstrap.tsx
│ │ │ │ └── utils
│ │ │ │   └── Helper.tsx
│ │ │ ├── App.tsx
│ │ │ └── main.tsx
│ │ ├── index.html
│ │ ├── tsconfig.json
│ │ ├── tsconfig.node.json
│ │ ├── package.json
│ │ ├── postcss.config.js
│ │ ├── tailwind.config.ts
│ │ └── vite.config.ts
│ └── shared
│   └── components
│     └── bootstrap
│       └── index.ts
├── public
│ ├── config.json
│ ├── images
│ └── resume.json

🧩 Modules

Root

File	Summary
package.json	Defines the project dependencies and scripts for the root of the monorepo.
.yarnrc.yml	Yarn configuration file specifying the node-modules linker.

packages/react-app

File	Summary
tsconfig.json	TypeScript configuration for the React application.
tsconfig.node.json	TypeScript configuration for Node.js environment in the React app.
vite.config.ts	Vite configuration file for the React application.
tailwind.config.ts	Tailwind CSS configuration file.
postcss.config.js	PostCSS configuration file.
package.json	Defines the dependencies and scripts for the React application.
index.html	The main HTML file that serves as the entry point for the React application.
src/App.tsx	Main React component that renders the application.
src/main.tsx	Entry point for the React application.

packages/react-app/src/shared

File	Summary
components/App/index.ts	Exports App components.
components/App/AppBootstrap.tsx	Bootstrap-styled App component.
components/Resume/index.ts	Exports Resume components.
components/Resume/ResumeBootstrap.tsx	Bootstrap-styled Resume component.
utils/Helper.tsx	Helper utilities for the React application.

packages/api

File	Summary
src/index.ts	Main entry point for the Express.js API application.
tsconfig.json	TypeScript configuration for the API application.
vercel.json	Configuration file for deploying the API on Vercel.
package.json	Defines the dependencies and scripts for the API application.

packages/shared

File	Summary
components/bootstrap/index.ts	Exports shared Bootstrap components.

---

🚀 Getting Started

🔖 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (version 18 or higher)
• npm (usually comes with Node.js)

📦 Installation

Build the project from source:

1. Clone the fathiraz-homepage repository:

❯ git clone https://github.com/fathiraz/fathiraz-homepage

2. Navigate to the project directory:

❯ cd fathiraz-homepage

3. Install the required dependencies for each package:

❯ npm install --workspace api && npm install --workspace react-app

🤖 Usage

Execute the test suite using the following command:

1. Start the API server:

❯ npm run dev --workspace api

2. In a new terminal, start the React application:

❯ npm run dev --workspace react-app

3. Open your browser and navigate to http://127.0.0.1:5173?css=bootstrap to view the application.

---

📌 Project Roadmap

Framework Options

• JavaScript Frameworks:
  • React App: React JS framework (default main application)
  • Vue App: Vue JS framework
  • Svelte App: Svelte JS framework
• CSS Frameworks:
  • Bootstrap: Bootstrap CSS framework
  • Bulma: Bulma CSS framework
  • Tailwind: Tailwind CSS framework
  • Uikit: Uikit CSS framework
  • Foundation: Foundation CSS framework

---

📸 Screenshot

---

🤝 Contributing

Contributions are welcome! Here are several ways you can contribute:

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

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/fathiraz/fathiraz-homepage

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.

Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

---

🎗 License

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

---

🙌 Acknowledgments

• Thanks to all the open-source projects and their contributors that made this project possible.
• Special thanks to the React, Vue, and Svelte communities for their excellent documentation and resources.
• Appreciation to the creators and maintainers of Bootstrap, Bulma, Tailwind, Uikit, and Foundation for their fantastic CSS frameworks.

Return