A personal website showcasing my portfolio, link shortner, and contact information. 🌐
My personal website is a platform to showcase my skills, projects, blog posts, and provide a means for visitors to contact me. It serves as an online representation of my professional identity and acts as a central hub for all my online presence. 🚀
- Home Page: An introduction to who I am and an overview of my skills and areas of expertise. 🏠
- Portfolio: A collection of my projects, including descriptions, screenshots, and links to live demos or GitHub repositories. 💼
- Link Shortner: You can shorten your links using the format hoseinwave.ir/instagram. When a user clicks on the shortened link, the app will automatically redirect them to the specific destination you have defined in
src/utils/constants.jsx. ✍️ - Contact: A contact form or links to my social media profiles, allowing visitors to get in touch with me easily. 📧
- Responsive Design: The website is designed to be responsive, ensuring a seamless experience across different devices. 📱
To run the personal website locally, follow these steps:
- Clone the repository:
git clone https://github.com/ho3einwave/personal-website-react.git - Navigate to the project directory:
cd personal-website-react - Install dependencies:
npm install - Start the development server:
npm run dev - Open your web browser and visit
http://localhost:5173to view the website. 🌐
To make the contact form work, you'll need to follow these steps:
- Go to the ReCaptcha Admin Console and sign in with your Google account.
- Register a new site by providing a label and domain name.
- Once registered, you receive a Captcha key and Captcha secret- Open the
src/utils/constants.jsxfile in your project and replace the value ofrecaptcha_keywith your Captcha key. - In the Netlify panel for your site, go to "Site Configuration" > "Environment Variables" > "Add a Variable" and add a new environment variable named
RECAPTCHA_SECRETwith the value of your Captcha secret.
- Obtain the Discord webhook URL where you want to receive the contact form submissions.
- In the Netlify panel for your site, go to "Site Configuration" > "Environment Variables" > "Add a Variable" and add a new environment variable named
DISCORD_WEBHOOKwith the value of your Discord webhook URL.
Once you have completed these steps, your contact form should be ready to use. When a user submits the form, the data will be validated using ReCaptcha and then sent to the specified Discord webhook URL.
Make sure to save your changes and redeploy your site for the updates to take effect.
Feel free to customize the instructions based on your specific setup or requirements. ✨
Once the website is up and running, you can explore different sections:
- On the home page, you will find an introduction to who I am and an overview of my skills and expertise. 🏠
- The portfolio section showcases my projects. Clicking on a project will provide more details, including descriptions, screenshots, and links to live demos or GitHub repositories. 💼
- With the link shortener feature, you can shorten other links using your own domain.✍️
- To contact me, you can use the contact form or find links to my social media profiles. 📧
Feel free to navigate through the website, explore my portfolio, read my blog posts, and get in touch! 🌟
Certainly! Here's an updated customization section with emojis added:
The personal website project is designed to be easily customizable to suit your specific needs. You can follow the instructions below to customize the website according to your preferences:
-
Personalize Content: 📝 Open the project files and update the content to reflect your own information. Modify the text, images, and links in the relevant sections such as the home page, portfolio, and contact sections. Add your own projects, or any other content you want to showcase.
-
Styling and Theming: 🎨 Customize the website's appearance by modifying the CSS styles (in
src/index.css) andtailwind.config.jsfile. You can change colors, fonts, spacing, or any other visual aspects to match your personal branding or preferred design. -
Layout and Structure: 🏗️ Adjust the website layout and structure to meet your requirements. You can modify the navigation menu, add or remove sections, or rearrange the order of elements to create a layout that suits your needs.
-
Configuration Options: ⚙️ Explore the project configuration files to customize various aspects of the website. For example, you can update the contact form settings, add or remove social media links, or configure the blog post display settings.
Feel free to experiment and make the necessary changes to make the personal website truly your own. Don't hesitate to explore the codebase and leverage your web development skills to add new features or functionalities.
Remember to document any customizations you make for future reference or for the benefit of other contributors.
Please note that while customizing the personal website, it is important to ensure compliance with the project's license and any applicable laws or regulations.
Enjoy customizing your personal website and make it a reflection of your unique identity and style! 🌟🚀
Thank you, SklyerX, for your invaluable support throughout this project. Your expertise, dedication, and positive attitude made a significant impact. 🌟
I appreciate your guidance, ideas, and feedback, which elevated the project's quality. Your belief in me and willingness to help were truly inspiring. 🤝
If you'd like to contribute to my personal website, I appreciate your interest! Here's how you can get involved:
- Report any issues or bugs by creating a new issue in the repository. 🐛
- Suggest improvements or new features by creating a new issue and describing your ideas. 💡
- Fork the repository, make changes, and submit a pull request for review. 🛠️
Please follow the guidelines in the CONTRIBUTING.md file for a smooth collaboration process.
The personal website project is licensed under the MIT License. Feel free to use and modify the code for your own personal website. Attribution is appreciated but not required. 📝
Feel free to further customize the sections, add more emojis, or modify the content as per your preferences. Good luck with your personal website! 🌟