Skip to content

Commit fbbcbcb

Browse files
German44German44
committed
finish Contact
1 parent 643a67a commit fbbcbcb

File tree

9 files changed

+123
-86
lines changed

9 files changed

+123
-86
lines changed

‎public/pictures/ArgentumDesing.png

311 KB
Loading

‎src/App.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Contact from '../src/components/contact/Contact'
66
import Work from '../src/components/works/Work'
77
import './App.css'
88
import NavBar from './components/navbar/NavBar'
9+
import Footer from './components/footer/Footer'
910

1011

1112
function App() {
@@ -22,8 +23,9 @@ function App() {
2223
<NavBar />
2324
<About />
2425
<Work />
25-
{/* <Contact /> */}
26-
<div className='h-[135px]'></div>
26+
<Contact />
27+
<Footer />
28+
{/* <div className='h-[135px]'></div> */}
2729
</div>
2830
)
2931
}

‎src/components/contact/Contact.jsx

+24-75
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,38 @@
1-
import { motion } from "framer-motion"
2-
import { fadeIn } from "../../utils/variants"
3-
import ContactForm from "./ContactForm";
41

2+
import ContactForm from "./ContactForm";
3+
import DividerTag from "../dividerTag/DividerTag";
4+
import FooterContact from "./FooterContact";
55

66
// Reemplaza 'ID_DEL_ARCHIVO' con el ID real de tu archivo en Google Drive
7-
const googleDriveFileId = '1LTja5061INTTENK-pJXuo0nfOeaoabEa';
7+
// const googleDriveFileId = "1LTja5061INTTENK-pJXuo0nfOeaoabEa";
88

99
// Construye el enlace de descarga directa desde Google Drive
10-
const googleDriveDownloadLink = `https://drive.google.com/uc?export=download&id=${googleDriveFileId}`;
10+
// const googleDriveDownloadLink = `https://drive.google.com/uc?export=download&id=${googleDriveFileId}`;
1111

1212
const Contact = () => {
1313
return (
14-
15-
16-
<section id="contact" className="min-h-[86vh] mt-9 flex items-center ">
17-
<div className="container mx-auto">
18-
<div className="min-h-[75vh] relative top-6 mt-12 flex flex-col items-center justify-between gap-4 rounded-3xl bg-black/20 backdrop-blur-2xl">
19-
<div className=" w-[80%] relative min-h-[35vh] flex flex-col text-center justify-center font-secondary lg:text-left">
20-
<div className=" w-2/3 lg:absolute lg:top-0 hidden lg:h-[50%] lg:flex items-center ">
21-
<motion.div
22-
variants={fadeIn('left', 0.1)}
23-
initial='hidden'
24-
whileInView={'show'}
25-
viewport={{ once: false, amount: 0.2 }}
26-
className="lg:text-[150px] text-[90px] font-bold ">H</motion.div>
27-
<motion.div
28-
variants={fadeIn('left', 0.3)}
29-
initial='hidden'
30-
whileInView={'show'}
31-
viewport={{ once: false, amount: 0.2 }}
32-
className="lg:text-[150px] text-[90px] font-bold ">o</motion.div>
33-
<motion.div
34-
variants={fadeIn('left', 0.5)}
35-
initial='hidden'
36-
whileInView={'show'}
37-
viewport={{ once: false, amount: 0.2 }}
38-
className="lg:text-[150px] text-[90px] font-bold ">l</motion.div>
39-
<motion.div
40-
variants={fadeIn('left', 0.7)}
41-
initial='hidden'
42-
whileInView={'show'}
43-
viewport={{ once: false, amount: 0.2 }}
44-
className="lg:text-[150px] text-[90px] font-bold ">a</motion.div>
45-
<motion.div
46-
variants={fadeIn('left', 0.9)}
47-
initial='hidden'
48-
whileInView={'show'}
49-
viewport={{ once: false, amount: 0.2 }}
50-
className="lg:text-[150px] text-[90px] font-bold text-accent ">!</motion.div>
51-
</div>
52-
<div className=" w-full h-[50%] flex justify-start lg:absolute lg:bottom-0">
53-
<motion.p
54-
variants={fadeIn('top', 0.5)}
55-
initial='hidden'
56-
whileInView={'show'}
57-
viewport={{ once: false, amount: 0.2 }}
58-
className="text-2xl font-semibold text-justify ">
59-
Muchas Gracias por tomarte el tiempo para conocerme. Estoy entusiasmado por la posibilidad de trabajar juntos o colaborar en futuros proyectos.
60-
Si tienes alguna consulta o proyecto para realizar, no dudes en contactarme.
61-
<br />Saludos.
62-
</motion.p>
63-
</div>
14+
<>
15+
<section
16+
id="contact"
17+
className="min-h-[86vh] mt-9 flex items-center flex-col "
18+
>
19+
<DividerTag tag="Contact" />
20+
<div className="container mx-auto min-h-[86vh] bg-black/20 backdrop-blur-2xl rounded-xl flex flex-col justify-center items-center">
21+
<div className="w-[80%] min-h-[82vh] flex justify-center items-start flex-col ">
22+
<h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white font-primary text-center mb-10">
23+
Thanks for visiting me!
24+
</h2>
25+
<h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white font-primary text-center">
26+
Let's Connects and Work Together
27+
</h2>
28+
<ContactForm />
6429
</div>
65-
<div className=" w-[80%] min-h-[35vh] flex lg:flex-row flex-col items-center text-center lg:justify-between font-secondary lg:text-left">
66-
<div className=" lg:w-[60%] w-[100%] flex">
67-
<ContactForm />
68-
</div>
69-
<div className=" min-h-[37vh] w-[100%] flex justify-center items-center lg:items-end lg:justify-end lg:mb-4">
70-
<motion.a
71-
href={googleDriveDownloadLink}
72-
target="_blank"
73-
rel="noopener noreferrer"
74-
variants={fadeIn('left', 0.1)}
75-
initial='hidden'
76-
whileInView={'show'}
77-
viewport={{ once: false, amount: 0.7 }}
78-
className="btn lg:btn-lg"
79-
>
80-
Descargar C.V.
81-
</motion.a>
82-
</div>
30+
<div className="w-full h-full relative bottom-20">
31+
<FooterContact />
8332
</div>
8433
</div>
85-
</div>
86-
</section>
34+
</section>
35+
</>
8736
);
8837
};
8938

‎src/components/contact/ContactForm.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const ContactForm = () => {
4545
name="nombre"
4646
value={formData.nombre}
4747
onChange={handleChange}
48-
placeholder='Nombre'
48+
placeholder='Name'
4949
className="w-full px-3 py-2 border-b-2 rounded-xl bg-black/30 focus:outline-none focus:border-accent"
5050
/>
5151
</div>
@@ -68,7 +68,7 @@ const ContactForm = () => {
6868
<textarea
6969
id="message"
7070
name="message"
71-
placeholder=' Mensaje'
71+
placeholder='Message'
7272
value={formData.message}
7373
onChange={handleChange}
7474
className="w-full px-3 py-2 border-b-2 rounded-xl bg-black/30 focus:outline-none focus:border-accent"

‎src/components/contact/FooterContact.jsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from "react";
2+
3+
const FooterContact = () => {
4+
return (
5+
<>
6+
<div className="w-full h-[10vh] bg-black/50">
7+
<div className="w-full sm:w-1/3 h-full flex justify-center items-center ">
8+
<div className="flex text-[18px] lg:text-[40px] gap-x-5 sm:gap-x-8 max-w-max mx-auto lg:mx-0 items-center">
9+
<a
10+
className="social_links"
11+
target="_blank"
12+
rel="noreferrer"
13+
href="https://www.linkedin.com/in/german-ravarotto/"
14+
>
15+
<i className="fa-brands fa-linkedin"></i>
16+
</a>
17+
<a
18+
className="social_links"
19+
target="_blank"
20+
rel="noreferrer"
21+
href="https://github.com/German44"
22+
>
23+
<i className="fa-brands fa-github"></i>
24+
</a>
25+
<a
26+
className="social_links"
27+
target="_blank"
28+
rel="noreferrer"
29+
href="mailto:g44ravarotto@gmail.com"
30+
>
31+
<i className="fa-solid fa-envelope"></i>
32+
</a>
33+
<a
34+
className="social_links"
35+
target="_blank"
36+
rel="noreferrer"
37+
href="https://www.behance.net/germanravarotto1"
38+
>
39+
<i className="fa-brands fa-square-behance"></i>
40+
</a>
41+
<a
42+
className="social_links"
43+
target="_blank"
44+
rel="noreferrer"
45+
href="https://dribbble.com/german44"
46+
>
47+
<i className="fa-solid fa-basketball"></i>
48+
</a>
49+
</div>
50+
</div>
51+
</div>
52+
</>
53+
);
54+
};
55+
56+
export default FooterContact;

‎src/components/footer/Footer.jsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
3+
const Footer = () => {
4+
return (
5+
<div className="w-full h-[10vh] bg-black/50 flex justify-between items-center m-4">
6+
<h6 className="text-white text-center">
7+
Copyright © 2024
8+
</h6>
9+
<h6 className="text-white text-center m-10">
10+
Design and Developed by German Ravarotto
11+
</h6>
12+
</div>
13+
);
14+
};
15+
16+
export default Footer;

‎src/components/works/Work.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const Work = () => {
4848
>
4949
<DividerTag tag="Works" />
5050
<div className="container mx-auto min-h-[82vh] bg-black/20 backdrop-blur-2xl rounded-xl flex items-center">
51-
<div className="min-h-[82vh] w-full">
51+
<div className="min-h-[82vh] w-full flex flex-col gap-6">
5252
{projects.map((projects) => {
5353
return <WorkCards key={projects.id} projects={projects} />;
5454
})}

‎src/components/works/WorkCards.jsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ export const WorkCards = ({ projects }) => {
66
console.log(projects);
77
return (
88
<>
9-
<div className=" h-[340px] rounded-lg overflow-hidden flex flex-col justify-center items-center">
9+
<div className="h-[500px] sm:h-[340px] rounded-lg overflow-hidden flex flex-col sm:justify-center items-center ">
1010
<div className="w-[95%] h-[10%] ">
1111
<h2 className="text-white font-bold text-justify text-2xl underline">
12-
{projects.name}
12+
{projects.type}
1313
</h2>
1414
</div>
15-
<div className="w-[95%] h-[70%] m-4 bg-black/50 rounded-xl flex justify-between items-center">
16-
<div className="w-[50%] h-[90%] m-2 rounded-xl">
15+
<div className="w-[95%] h-[100%] sm:w-[95%] sm:h-[70%] m-4 bg-black/50 rounded-xl flex flex-col sm:flex-row justify-between items-center">
16+
<div className="w-full sm:w-[50%] h-[50%] sm:h-[90%] m-2 rounded-xl">
1717
<div className="w-full h-full flex flex-col justify-around">
1818
<h4 className="text-white font-bold text-justify text-3xl ">
1919
{projects.name}
@@ -39,8 +39,8 @@ export const WorkCards = ({ projects }) => {
3939
</div>
4040
</div>
4141
</div>
42-
<div className="w-[50%] h-[90%] m-2">
43-
<div className="w-full h-[140%] relative -top-20 rounded-xl hover:scale-x-105 transition duration-300 ">
42+
<div className="w-full h-[280px] sm:w-[50%] sm:h-[90%] m-2">
43+
<div className="w-full h-[140%] sm:relative sm:-top-20 rounded-xl hover:scale-x-105 transition duration-300 ">
4444
<img
4545
className="w-full h-full object-cover rounded-xl border-4 border-black hover:border-white transition duration-300"
4646
src={projects.image}

‎src/data/projects.json

+14
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
[
44
{
55
"id": 1,
6+
"type": "Frontend",
67
"name": "ClimaApp",
78
"image": "../public/pictures/ClimaApp.png",
89
"github": "https://github.com/German44/clima-app-vite.git",
@@ -12,6 +13,7 @@
1213
},
1314
{
1415
"id": 2,
16+
"type": "Frontend",
1517
"name": "E-CommerceRock",
1618
"image": "../public/pictures/E-CommerceRock.png",
1719
"github": "https://github.com/German44/E-Commerce-TWUI.git",
@@ -21,6 +23,7 @@
2123
},
2224
{
2325
"id": 3,
26+
"type": "Frontend",
2427
"name": "Agenda",
2528
"image": "../public/pictures/agenda.png",
2629
"github": "https://github.com/German44/Proyecto-final-JavaScript.git",
@@ -30,11 +33,22 @@
3033
},
3134
{
3235
"id": 4,
36+
"type": "Frontend",
3337
"name": "Portfolio",
3438
"image": "../public/pictures/portfolio-img2.png",
3539
"github": "https://github.com/German44/Portfolio-React.git",
3640
"live": "https://portfolio-react-german44.vercel.app/",
3741
"position": "left",
3842
"description": "Portfolio personal hecho en React y tailwind CSS, librerias Framer Motion y React Scroll"
43+
},
44+
{
45+
"id": 5,
46+
"type": "UX/UI",
47+
"name": "Redesing Ecommerce",
48+
"image": "../public/pictures/ArgentumDesing.png",
49+
"github": "https://github.com/German44/Portfolio-React.git",
50+
"live": "https://portfolio-react-german44.vercel.app/",
51+
"position": "right",
52+
"description": "Rediseno de Ecommerce de Joyeria"
3953
}
4054
]

0 commit comments

Comments
 (0)