diff --git a/index.html b/index.html index 0c589ec..3ca6d87 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + Eduardo Pineda | Portfolio
diff --git a/src/App.jsx b/src/App.jsx index c60c744..d6d8f51 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,7 +6,7 @@ const App = () => { {/* The app contains the routes to all the pages in the website. The navigation is handle by the navbar component. Each route has a prop that contains its corresponding page */} return ( -
+
diff --git a/src/assets/forest.mp3 b/src/assets/forest.mp3 new file mode 100644 index 0000000..47240e5 Binary files /dev/null and b/src/assets/forest.mp3 differ diff --git a/src/assets/icons/androidstudio.svg b/src/assets/icons/androidstudio.svg new file mode 100644 index 0000000..802686b --- /dev/null +++ b/src/assets/icons/androidstudio.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/books.svg b/src/assets/icons/books.svg new file mode 100644 index 0000000..4634676 --- /dev/null +++ b/src/assets/icons/books.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/bracketscurly.svg b/src/assets/icons/bracketscurly.svg new file mode 100644 index 0000000..261b1ca --- /dev/null +++ b/src/assets/icons/bracketscurly.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/chat.svg b/src/assets/icons/chat.svg new file mode 100644 index 0000000..cddea55 --- /dev/null +++ b/src/assets/icons/chat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/cpp.svg b/src/assets/icons/cpp.svg new file mode 100644 index 0000000..a5072bf --- /dev/null +++ b/src/assets/icons/cpp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/cs.svg b/src/assets/icons/cs.svg new file mode 100644 index 0000000..f9e0e18 --- /dev/null +++ b/src/assets/icons/cs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js index 38b058f..04fab1d 100644 --- a/src/assets/icons/index.js +++ b/src/assets/icons/index.js @@ -14,6 +14,19 @@ import redux from './redux.svg' import sass from './sass.svg' import tailwindcss from './tailwindcss.svg' import typescript from './typescript.svg' +import cpp from './cpp.svg' +import java from './java.svg' +import python from './python.svg' +import cs from './cs.svg' +import swift from './swift.svg' +import androidstudio from './androidstudio.svg' +import unity from './unity.svg' +import sqlserver from './sqlserver.svg' +import kotlin from './kotlin.svg' +import mobile from './mobile.svg' +import bracketscurly from './bracketscurly.svg' +import books from './books.svg' +import chat from './chat.svg' import linkedin from './linkedin.svg' import twitter from './twitter.svg' import car from './car.svg' @@ -44,6 +57,19 @@ export { sass, tailwindcss, typescript, + cpp, + java, + python, + cs, + swift, + androidstudio, + unity, + sqlserver, + kotlin, + mobile, + bracketscurly, + books, + chat, linkedin, twitter, car, diff --git a/src/assets/icons/java.svg b/src/assets/icons/java.svg new file mode 100644 index 0000000..b1cf2e3 --- /dev/null +++ b/src/assets/icons/java.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/kotlin.svg b/src/assets/icons/kotlin.svg new file mode 100644 index 0000000..0509e20 --- /dev/null +++ b/src/assets/icons/kotlin.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/mobile.svg b/src/assets/icons/mobile.svg new file mode 100644 index 0000000..8cb34ae --- /dev/null +++ b/src/assets/icons/mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/python.svg b/src/assets/icons/python.svg new file mode 100644 index 0000000..0eba843 --- /dev/null +++ b/src/assets/icons/python.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/sqlserver.svg b/src/assets/icons/sqlserver.svg new file mode 100644 index 0000000..3a09316 --- /dev/null +++ b/src/assets/icons/sqlserver.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/swift.svg b/src/assets/icons/swift.svg new file mode 100644 index 0000000..6ca8a74 --- /dev/null +++ b/src/assets/icons/swift.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/unity.svg b/src/assets/icons/unity.svg new file mode 100644 index 0000000..ffa5981 --- /dev/null +++ b/src/assets/icons/unity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/equilibrium.png b/src/assets/images/equilibrium.png new file mode 100644 index 0000000..efd9af2 Binary files /dev/null and b/src/assets/images/equilibrium.png differ diff --git a/src/assets/images/famai.png b/src/assets/images/famai.png new file mode 100644 index 0000000..9087bd9 Binary files /dev/null and b/src/assets/images/famai.png differ diff --git a/src/assets/images/fugas.png b/src/assets/images/fugas.png new file mode 100644 index 0000000..e773706 Binary files /dev/null and b/src/assets/images/fugas.png differ diff --git a/src/assets/images/gruporeforma.jpg b/src/assets/images/gruporeforma.jpg new file mode 100644 index 0000000..2d3b8e7 Binary files /dev/null and b/src/assets/images/gruporeforma.jpg differ diff --git a/src/assets/images/index.js b/src/assets/images/index.js index 156acda..a9db53e 100644 --- a/src/assets/images/index.js +++ b/src/assets/images/index.js @@ -1,15 +1,19 @@ import hero from './hero.jpg' -import meta from './meta.png' -import shopify from './shopify.png' -import starbucks from './starbucks.png' -import tesla from './tesla.png' +import silma from './silma.png' +import itesm from './itesm.svg' +import equilibrium from './equilibrium.png' +import fugas from './fugas.png' +import gruporeforma from './gruporeforma.jpg' +import famai from './famai.png' import logo from './logo.svg' export { hero, - meta, - shopify, - starbucks, - tesla, + silma, + itesm, + equilibrium, + fugas, + gruporeforma, + famai, logo } \ No newline at end of file diff --git a/src/assets/images/itesm.svg b/src/assets/images/itesm.svg new file mode 100644 index 0000000..1c4b888 --- /dev/null +++ b/src/assets/images/itesm.svg @@ -0,0 +1,59 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/assets/images/silma.png b/src/assets/images/silma.png new file mode 100644 index 0000000..ec5e4e6 Binary files /dev/null and b/src/assets/images/silma.png differ diff --git a/src/constants/index.js b/src/constants/index.js index f80fea1..1de07af 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -1,4 +1,4 @@ -import { meta, shopify, starbucks, tesla } from "../assets/images"; +import { silma, itesm, fugas, equilibrium, gruporeforma, famai } from "../assets/images"; import { car, contact, @@ -23,7 +23,20 @@ import { summiz, tailwindcss, threads, - typescript + typescript, + cpp, + java, + python, + swift, + cs, + androidstudio, + unity, + sqlserver, + kotlin, + mobile, + bracketscurly, + books, + chat } from "../assets/icons"; export const skills = [ @@ -32,11 +45,6 @@ export const skills = [ name: "CSS", type: "Frontend", }, - { - imageUrl: express, - name: "Express", - type: "Backend", - }, { imageUrl: git, name: "Git", @@ -63,105 +71,136 @@ export const skills = [ type: "Database", }, { - imageUrl: motion, - name: "Motion", - type: "Animation", + imageUrl: react, + name: "React", + type: "Frontend", }, { - imageUrl: mui, - name: "Material-UI", - type: "Frontend", + imageUrl: cpp, + name: "C++", + type: "Development", }, { - imageUrl: nextjs, - name: "Next.js", - type: "Frontend", + imageUrl: java, + name: "Java", + type: "Development", }, { - imageUrl: nodejs, - name: "Node.js", - type: "Backend", + imageUrl: python, + name: "Python 3", + type: "Development", }, { - imageUrl: react, - name: "React", - type: "Frontend", + imageUrl: swift, + name: "Swift", + type: "Development", }, { - imageUrl: redux, - name: "Redux", - type: "State Management", + imageUrl: cs, + name: "C#", + type: "Development", }, { - imageUrl: sass, - name: "Sass", - type: "Frontend", + imageUrl: androidstudio, + name: "Android Studio", + type: "Mobile Development", }, { - imageUrl: tailwindcss, - name: "Tailwind CSS", - type: "Frontend", + imageUrl: unity, + name: "Unity", + type: "Game Development", }, { - imageUrl: typescript, - name: "TypeScript", - type: "Frontend", - } + imageUrl: sqlserver, + name: "SQL Server", + type: "Database", + }, + { + imageUrl: kotlin, + name: "Kotlin", + type: "Mobile Development", + }, ]; export const experiences = [ { - title: "React.js Developer", - company_name: "Starbucks", - icon: starbucks, + title: "UI Developer", + company_name: "Equilibrium", + icon: equilibrium, iconBg: "#accbe1", - date: "March 2020 - April 2021", + date: "February 2021 - June 2021", points: [ - "Developing and maintaining web applications using React.js and other related technologies.", - "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.", - "Implementing responsive design and ensuring cross-browser compatibility.", - "Participating in code reviews and providing constructive feedback to other developers.", + "Developing a physics simulator app using SwiftUI", + "Collaborating with other college students to deliver a product that high school students can use to learn.", + "Implementing an intuitive design and ensuring cross-device compatibility.", + "Participating in code reviews and providing constructive feedback to other classmates.", ], }, { - title: "React Native Developer", - company_name: "Tesla", - icon: tesla, - iconBg: "#fbc3bc", - date: "Jan 2021 - Feb 2022", + title: "Compiler/VM Developer", + company_name: "Obiecti - Tecnológico de Monterrey", + icon: itesm, + iconBg: "#a2d2ff", + date: "February 2022 - June 2022", points: [ - "Developing and maintaining web applications using React.js and other related technologies.", - "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.", - "Implementing responsive design and ensuring cross-browser compatibility.", - "Participating in code reviews and providing constructive feedback to other developers.", + "Developing a new compiler and a virtual machine for a new programming language.", + "Collaborating with other college student to design a new programming language in one semester.", + "Implementing regular expressions, syntaxis diagrams, context-free grammar and other concepts related.", + "Implementing a virtual machine so it can read and make operations following the instructions .obj file generated of a compiler.", ], }, { - title: "Web Developer", - company_name: "Shopify", - icon: shopify, - iconBg: "#b7e4c7", - date: "Jan 2022 - Jan 2023", + title: "Android Auto Developer", + company_name: "FuGas", + icon: fugas, + iconBg: "#fc8d8d", + date: "September 2022", points: [ - "Developing and maintaining web applications using React.js and other related technologies.", - "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.", - "Implementing responsive design and ensuring cross-browser compatibility.", - "Participating in code reviews and providing constructive feedback to other developers.", + "Winner of Blue Yonder's Challenge in Hack Mty 2022.", + "Developing a car app using Android Auto, React.js and other related technologies.", + "Collaborating with other college students to self-learn and solve a challenge under 24 hours.", + "Implementing an interface easy to use so people can use it in a car without risking themselves.", ], }, { - title: "Full stack Developer", - company_name: "Meta", - icon: meta, - iconBg: "#a2d2ff", - date: "Jan 2023 - Present", + title: "Backend Developer", + company_name: "Silma", + icon: silma, + iconBg: "#accbe1", + date: "February 2023 - June 2023", points: [ - "Developing and maintaining web applications using React.js and other related technologies.", - "Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.", - "Implementing responsive design and ensuring cross-browser compatibility.", + "Developing an inventory application for books and purchase items using React.js and other related technologies.", + "Collaborating with other college students to self-learn front-end and back-end.", + "Implementing a clean design and a robust structure that can be improved later on in the future.", + "Participating in code reviews and providing feedback to other college students using SCRUM methodology with the help of a teacher.", + ], + }, + { + title: "Android Mobile Developer", + company_name: "Grupo Reforma", + icon: gruporeforma, + iconBg: "#C7F9CC", + date: "August 2023 - February 2024", + points: [ + "Developing mobile applications for Android devices using Android Studio, Kotlin and Java.", + "Collaborating with cross-functional teams to create multiple types of interactive experiences for users.", + "Implementing responsive design and ensuring a consistent content across all devices.", "Participating in code reviews and providing constructive feedback to other developers.", ], }, + { + title: "Frontend Developer", + company_name: "Famai", + icon: famai, + iconBg: "#accbe1", + date: "September 2023", + points: [ + "Project of Hack Mty 2023.", + "A search engine where it reads a file coming of multiple file sources and can make a search of crucial information to optimize processes.", + "Collaborating with other college students to self-learn and solve a challenge under 24 hours.", + "Implementing an interface using React, Open AI API, Streamlit, and some libraries of Python which include ZeroMQ and Fitz.", + ], + }, ]; export const socialLinks = [ @@ -184,45 +223,38 @@ export const socialLinks = [ export const projects = [ { - iconUrl: pricewise, + iconUrl: mobile, theme: 'btn-back-red', - name: 'Amazon Price Tracker', - description: 'Developed a web application that tracks and notifies users of price changes for products on Amazon, helping users find the best deals.', - link: 'https://github.com/adrianhajdin/pricewise', + name: 'Equilibrium', + description: 'Developing a physics simulator app using SwiftUI to help students learn and study physics concepts.', + link: 'https://github.com/aroquev00/moviles-proyecto', }, { - iconUrl: threads, + iconUrl: bracketscurly, theme: 'btn-back-green', - name: 'Full Stack Threads Clone', - description: 'Created a full-stack replica of the popular discussion platform "Threads," enabling users to post and engage in threaded conversations.', - link: 'https://github.com/adrianhajdin/threads', + name: 'Obiecti', + description: 'A compiler for a new programming language and virtual machine that it can read the .obj file generated by the compiler and follow its instructions for operations.', + link: 'https://github.com/JuanMBriones/Obiecti', }, { iconUrl: car, theme: 'btn-back-blue', - name: 'Car Finding App', - description: 'Designed and built a mobile app for finding and comparing cars on the market, streamlining the car-buying process.', - link: 'https://github.com/adrianhajdin/project_next13_car_showcase', + name: 'FuGas', + description: 'Winner of Blue Yonder\'s Challenge in Hack Mty 2022. App to analyze gas consumption. Record data directly from car with Android Auto. Visualize data analysis via web with React.', + link: 'https://devpost.com/software/fugas', }, { - iconUrl: snapgram, + iconUrl: books, theme: 'btn-back-pink', - name: 'Full Stack Instagram Clone', - description: 'Built a complete clone of Instagram, allowing users to share photos and connect with friends in a familiar social media environment.', - link: 'https://github.com/adrianhajdin/social_media_app', + name: 'Silma Inventory', + description: 'Inventory system for an independent editorial making easy manage books and purchase items as also product assortments.', + link: 'https://github.com/gpaez-ol/silma', }, { - iconUrl: estate, + iconUrl: chat, theme: 'btn-back-black', - name: 'Real-Estate Application', - description: 'Developed a web application for real estate listings, facilitating property searches and connecting buyers with sellers.', - link: 'https://github.com/adrianhajdin/projects_realestate', - }, - { - iconUrl: summiz, - theme: 'btn-back-yellow', - name: 'AI Summarizer Application', - description: 'App that leverages AI to automatically generate concise & informative summaries from lengthy text content, or blogs.', - link: 'https://github.com/adrianhajdin/project_ai_summarizer', + name: 'Famai', + description: 'A search engine which reads a file coming of multiple file sources and can make a search of crucial information to optimize processes.', + link: 'https://devpost.com/software/famai', } ]; \ No newline at end of file diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx index 04d592b..ffbe24b 100644 --- a/src/pages/Contact.jsx +++ b/src/pages/Contact.jsx @@ -60,7 +60,7 @@ const Contact = () => { const handleBlur = () => setCurrentAnimation('idle') return ( -
+
{alert.show && }

Get in Touch

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index b771157..9b51252 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,4 +1,4 @@ -import { useState, Suspense } from 'react' +import { useState, Suspense, useEffect, useRef } from 'react' import { Canvas } from '@react-three/fiber' import Loader from '../components/Loader' import Island from '../models/Island' @@ -7,13 +7,30 @@ import Dragon from '../models/Dragon' import Plane from '../models/Plane' import HomeInfo from '../components/HomeInfo' +import forest from '../assets/forest.mp3' +import { soundon, soundoff } from '../assets/icons' + const Home = () => { + const audioRef = useRef(new Audio(forest)) + audioRef.current.volume = 0.4 + audioRef.current.loop = true const [isRotating, setIsRotating] = useState() {/* The current stage of the popups, used to determine the stage of the popups */} const [currentStage, setCurrentStage] = useState(1) + const [isPlayingMusic, setIsPlayingMusic] = useState(false) + useEffect(() => { + if (isPlayingMusic) { + audioRef.current.play() + } + + return () => { + audioRef.current.pause() + } + }, [isPlayingMusic]) + {/* Adapt the app to different kind of devices adjusting scale, rotation and position of the island */} const adjustIslandForScreenSize = () => { @@ -86,6 +103,14 @@ const Home = () => { /> +
+ sound setIsPlayingMusic(!isPlayingMusic)} + /> +
) } diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx index 9abd0eb..8104b30 100644 --- a/src/pages/Projects.jsx +++ b/src/pages/Projects.jsx @@ -1,8 +1,63 @@ -import React from 'react' +import { Link } from 'react-router-dom' +import { projects } from '../constants' +import { arrow } from '../assets/icons' +import CTA from '../components/CTA' const Projects = () => { return ( -
Projects
+
+

+ My Projects +

+ +
+

I've embarked on numerous projects throughout the years, but these are the ones + I'm most proud of. I've learned a lot from each of them and + I'm excited to share them with you.

+
+
+ {projects.map((project) => ( +
+
+
+
+ Project icon +
+
+
+

+ {project.name} +

+

+ {project.description} +

+
+ + Live Link + + arrow +
+
+
+ ))} +
+
+ +
) }