See deployment on Netlify here 🚀
node@v16.15.0 or higher
npm@8.5.5 or higher
git@2.34.1 or higher
You can fork this project by following these steps:
- Click the "Fork" button in the upper-right corner.
- Wait for the fork to complete, which should only take a few seconds.
- Clone the forked repository to your local machine using the "git clone" command.
# Clone the repository
$ git clone https://github.com/your-name/my-portfolio
# Move into the repository
$ cd my-portfolio- Install all dependencies
$ npm install- Start the development server
$ npm startGo to /public/index.html and put your information in title and meta-description tags
<title>title</title> <meta name="description" content="your description" />Also change the favicon, logos, and change the information in the manifest.json file.
In /src/locale/locale.js You have to customize the template with your information.
The locale object has two lenguages, english(en) and spanish(es).
Modify the value of each key with your information
const locale = {
en : {
current: 'en',
...,
fullname: 'your name',
whatIDo: '...',
...
},
es : {
current: 'es',
...,
fullname: 'Tu nombre',
whatIDo: '...',
...
}
}in /src/styles/globalStyles.css you can customize the global styles of the template
Change the image me.webp in ./src/assets/images/ to a photo of you with the same filename and extension (.webp).
To modify the icons of 'languages and tools', you have to upload the icons to the /src/assets/icons folder and add the component in /src/components/Tools.jsx.
<Container id={id}>
<h3>{lang.tools}</h3>
<ul className="tools">
<li title="Javascript">
<Javascript />
</li>
<li title="Typescript">
<Typescript />
</li>
<li title="Python">
<Python />
</li>
<li title="React">
<React />
</li>
<li title="Firebase">
<Firebase />
</li>
<li title="Git">
<Git />
</li>
<li title="My custom tool">
<MyCustomTool />
</ul>
</Container>Likewise, you can modify the where I studied section by adding icons or images to /src/assets/images and adding/removing blocks with your information in src/components/Education.jsx.
<Container id={id}>
<h3>{lang.education.title}</h3>
<ul>
<li title="NameOfMyUniversity">
<a href="https://www.my-university.com/" target="_blank" rel="noreferrer">
<img
src={require("../assets/images/ImageOfMyUniversity.webp")}
alt="MyUniversity"
loading="lazy"
/>
<p>{lang.education.myUniversity}</p>
</a>
</li>
</ul>
</Container>You should also add a key-value pair with the information about your educational institution in the /src/locale/locale.js.
Like this :
const locale = {
en : {
...,
education: {
title: "Where i studied",
myUniversityName: "MyUniversityName : 2015 - 2020",
myUniversiTyName2: "MyUniversityName2 : 2020 - today",
},
},
es : {
...,
education: {
title: "Donde estudié",
myUniversityName: "MyUniversityName : 2015 - 2020",
myUniversiTyName2: "MyUniversityName2 : 2020 - actualidad",
},
},
}Go to /src/components/sections/Proyects.jsx and add objects with information about your projects inside the proyects array.
Note: Remember to also add an image with a preview of your project in /src/assets/images.
const proyects = [
{
title: "MyProyect",
imageUrl: require("../../assets/images/myCustomImage.webp"),
stack: ["Javascript", "Javascript", "Javascript"],
demoUrl: "https://MyProyectDemoUrl.com",
GithubUrl: "https://github.com/MyUsername/MyProyectRepoName",
id: "left",
},
{
.
.
.
}
]You just have to replace the file resume.pdf with your resume in /src/static/
Go to /src/components/sections/Aside.jsx and modify the items in the unordered list in the Aside component to add/remove/change the icons with your social media profiles.
import { MySocialMediaIcon } from "react-icons/fi";
<ul>
<li>
<a
href="https://www.linkToMySocialMedia.com"
title="MySocialMediaName"
target="_blank"
rel="noreferrer">
<FiMySocialMediaIcon /> //you can use icons from react-icons
</a>
</li>
<li>...</li>
</ul>;To receive emails in your inbox, you should go to the file /src/components/sections/Contact.jsx and set your email in the fetch request.
fetch("https://formsubmit.co/ajax/yourEmail@hotmail.com", { ... })You should change the logo and the loader to personalize your portfolio. You can use Figma if you want to put your name in the loader and keep the same style.
Write your name in a new Figma project using the Rampart One font family and the size you want (I recommend 220). Copy it as SVG and paste the value of the d property of the path.
Open the file /src/components/Loader.jsx and paste the d value you copied before.
Loader() {
...
return (
<LogoContainer ref={ref}>
<svg id="demo-svg" width="100%" height="100%">
<path
stroke="#64fcda"
strokeWidth="1"
fill="none"
d="past-the-value-here!" // <------------------
></path>
</svg>
</LogoContainer>
)
}Remember to do the same to customize the header logo, but decrease the font size in Figma (I recommend 40) and copy it again as SVG. Paste the d value in the file /src/assets/icons/Logo.jsx
Logo() {
...
return (
<StyledLogo href={location} id="logo">
<svg id="demo-svg" width="100%" height="25px">
<path
stroke="#64fcda"
strokeWidth="1"
fill="none"
d="paste-the-value-here" // <------------------
></path>
</svg>
</StyledLogo>
)
}Customize the footer with your information and social media on the file /src/components/layout/Footer.jsx
import { FiGithub } from 'react-icons/fi'
...
Footer() {
return (
<StyledFooter>
<p>
© Copyright 2023. Made by{" "}
<a href="https://www.your-website.com" title="your name">
Tu nombre
</a>
</p>
<ul>
<li>
<a
href="https://github.com/your-username"
title="Github"
target="_blank"
rel="noreferrer"
>
<FiGithub /> //you can use icons from react-icons
</a>
</li>
...
</ul>
</StyledFooter>
)
}Although you can modify the content entirely, please make sure to give credits to the original project and provide a link to the original repository on Github
You can deploy the project on gh-pages or any other hosting service.
To deploy on gh-pages, first change the "homepage" in the package.json file and set the path to your project on GitHub Pages or your custom domain.
{
...
"homepage": "https://your-username.github.io/my-portfolio",
...
}
Save your changes, make the commit, push to your main branch, and then run the command npm run deploy in your terminal.
$ npm run deploy| Color | Hex |
|---|---|
| Rich black |  #051021 |
| Oxford blue |  #0a192f |
| Oxford blue light |  #172a46 |
| Aquamarine |  #64fcda |
| Teal |  #087e8b |
| Periwinkle |  #c4ceed |
| Alice blue |  #e6f1ff |
| Slate gray |  #77809a |
| Light slate |  #a8bdd1 |
| White |  #d4e2fd |
React
Anime JS
Gh-pages
React-icons
React-tsparticles
scrollreveal
styled-components
Formsubmit
Contributions are welcome! Here are some ways you can contribute:
- Submit bugs and feature requests by opening an issue.
- Improve the documentation by opening a pull request.
- Add a new feature or fix a bug by opening a pull request.
This project was inspired by the work of Brittany Chiang on her V4 website.
This project is licensed under the MIT License - see the LICENSE file for details