Update README, enhance HeroSection and Navbar styles, and modify Projects component technologies

Author: orellanamr

README.md

@@ -1,8 +1,63 @@
-# React + Vite
+# Rolando Orellana's Portfolio
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is the repository for Rolando Orellana's personal portfolio, developed with React and Vite. The portfolio includes sections for projects, contact, and more, with a modern and responsive design.
 
-Currently, two official plugins are available:
+## Technologies Used
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- React
+- Vite
+- Material UI
+- i18next (for internationalization)
+- Framer Motion (for animations)
+- React Intersection Observer (for visibility detection)
+- GitHub Pages (for deployment)
+
+## Features
+
+- **Fast Deployment**: Uses Vite for fast and efficient development.
+- **Internationalization**: Support for multiple languages with i18next.
+- **Responsive Design**: Adaptable to different screen sizes.
+- **Smooth Animations**: Includes smooth animations and transitions with Framer Motion.
+- **Projects Section**: Showcases featured projects with links to repositories and live previews.
+
+## Installation
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/your-username/your-repository.git
+
+2. Navigate to the project directory:
+    cd your-repository
+
+3. Install dependencies:
+   yarn install
+
+## Usage
+To start the development server:
+    yarn dev
+
+To build the project for production:
+    yarn build
+
+## Project Structure
+├── public
+│   └── index.html
+├── src
+│   ├── assets
+│   │   ├── images
+│   │   └── videos
+│   ├── components
+│   │   ├── Navbar.jsx
+│   │   ├── HeroSection.jsx
+│   │   ├── Projects.jsx
+│   │   └── Contact.jsx
+│   ├── App.jsx
+│   ├── index.jsx
+│   └── i18n.js
+├── .gitignore
+├── package.json
+├── README.md
+└── vite.config.js
+
+## Contact
+Rolando Orellana - [email protected]

src/components/HeroSection.jsx

@@ -66,7 +66,7 @@ const HeroSection = () => {
           left: 0,
           width: "100%",
           height: "100%",
-          backgroundColor: "rgba(255, 255, 255, 0.90)",
+          backgroundColor: "rgba(0, 0, 0, 0.8)",
           zIndex: -1,
         }}
       />
@@ -75,6 +75,7 @@ const HeroSection = () => {
         variant="h6"
         sx={{
           letterSpacing: 7,
+          color: "white",
           mb: 2,
           textAlign: "left",
           fontSize: { xs: "1rem", md: "1.5rem" },
@@ -86,7 +87,7 @@ const HeroSection = () => {
       <Box sx={{ display: "flex", alignItems: "center", mb: 1 }}>
         <Typography
           variant="h1"
-          color="black"
+          color="white"
           sx={{
             fontWeight: "bold",
             mr: 2,
@@ -95,7 +96,7 @@ const HeroSection = () => {
         >
           {t("hero.title.developer")}
         </Typography>
-        <Box sx={{ borderBottom: "2px solid black", width: "100%" }} />
+        <Box sx={{ borderBottom: "2px solid white", width: "100%" }} />
       </Box>
       <Box>
         <Typography
@@ -105,6 +106,7 @@ const HeroSection = () => {
           sx={{
             fontWeight: "bold",
             fontSize: { xs: "3.5rem", md: "5.5rem" },
+            letterSpacing: "1rem",
           }}
         >
           +
@@ -124,9 +126,9 @@ const HeroSection = () => {
               t("hero.title.creative"),
               t("hero.title.passionate"),
             ]}
-            speed={100}
-            eraseSpeed={80}
-            eraseDelay={2000}
+            speed={60}
+            eraseSpeed={50}
+            eraseDelay={1500}
           />
         </Typography>
       </Box>
@@ -135,6 +137,7 @@ const HeroSection = () => {
           variant="body1"
           sx={{
             mt: 4,
+            color: "rgba(230, 230, 230, 0.8)",
             fontSize: { xs: "1rem", md: "1.25rem" },
           }}
         >
@@ -163,6 +166,12 @@ const HeroSection = () => {
               borderRadius: "50px",
               px: 4,
             }}
+            onClick={() => {
+              const projectsSection = document.getElementById("projects");
+              if (projectsSection) {
+                projectsSection.scrollIntoView({ behavior: "smooth" });
+              }
+            }}
           >
             <Box></Box>
             <Box>

src/components/Navbar.jsx

@@ -48,7 +48,13 @@ const Navbar = () => {
       position="fixed"
       color="transparent"
       elevation={0}
-      sx={{ px: 2, zIndex: 1300, backgroundColor: "#FFFFFF" }}
+      sx={{
+        pt: 1,
+        px: 2,
+        zIndex: 1300,
+        backgroundColor: "#FFFFFF",
+        height: "80px",
+      }}
     >
       <Toolbar>
         <Box
@@ -58,7 +64,7 @@ const Navbar = () => {
             alignItems: "center",
             cursor: "pointer",
           }}
-          onClick={() => handleScrollToSection("home")} // Redirige al home
+          onClick={() => handleScrollToSection("home")}
         >
           <img src={logoRolando} alt="Logo" style={{ height: 40 }} />
         </Box>

src/components/Projects.jsx

@@ -26,7 +26,7 @@ const projects = [
     liveLink: "https://orellanamr.github.io/bytecode_landing/",
     image: byteCode,
     logo: byteCode_logo,
-    technologies: ["React.js", "Material UI", "JavaScript"],
+    technologies: ["React.js", "JavaScript", "Material UI", "Git"],
   },
   {
     id: 2,
@@ -37,7 +37,7 @@ const projects = [
     liveLink: "",
     image: Reco,
     logo: Reco_logo,
-    technologies: ["React.js", "Git", "RTK Query", "JavaScript"],
+    technologies: ["React.js", "RTK Query", "JavaScript", "Git"],
   },
   {
     id: 3,
@@ -47,7 +47,7 @@ const projects = [
     liveLink: "",
     image: ToDo,
     logo: todo_logo,
-    technologies: ["React.js", "Material UI", "CSS"],
+    technologies: ["React.js", "Material UI", "JavaScript"],
   },
 ];