developerFolio
Safe Release
Simplemente cambie src/portfolio.js para obtener su cartera personal. Personalice el tema de la cartera utilizando su propio esquema de color a nivel mundial en el archivo src/_globalColor.scss . Siéntase libre de usarlo como es o personalizarlo tanto como desee.
Si desea contribuir y mejorar mucho para otros usuarios, eche un vistazo a los problemas.
¿Creó algo increíble para su bifurcación de la cartera y quiere compartirlo? Siéntase libre de abrir una solicitud de extracción.
✔️ Resumen y sobre mí
✔️ Habilidades
✔️ Educación
✔️ Experiencia laboral
✔️ Proyectos de código abierto conectados con GitHub
✔️ Grandes proyectos
✔️ Logros y certificaciones?
✔️ Blogs
✔️ Talks
✔️ Podcast
✔️ Contáctame
✔️ Twitter Timeline
✔️ Perfil de Github
Para ver un ejemplo en vivo, haga clic aquí .
Estas instrucciones le darán una copia del proyecto en funcionamiento en su máquina local para fines de desarrollo y prueba.
Necesitará git y node.js (que viene con NPM) instalados en su computadora o usar Docker.
[email protected] or higher
[email protected] or higher
[email protected] or higher
1) BUILD IMAGE : docker build -t developerfolio:latest .
2) RUN IMAGE: docker run -t -p 3000:3000 developerfolio:latest
Desde su línea de comando, clon y ejecutar desarrollador:
# Clone this repository
git clone https://github.com/saadpasta/developerFolio.git
# Go into the repository
cd developerFolio
# Setup default environment variables
# For Linux
cp env.example .env
# For Windows
copy env.example .env
# Install dependencies
npm install
# Start a local dev server
npm startGenere un token de acceso personal GitHub clásico siguiendo estas instrucciones (asegúrese de no seleccionar ningún alcance, simplemente genere un token simple). Si está utilizando acciones de GitHub para implementar su cartera, puede omitir esta sección.
Nota: Configuración de variables de entorno antes de implementar su cartera es muy recomendable ya que algunos componentes dependen de los datos de API.
- DeveloperFolio
- node_modules
- public
- src
- .env < -- create it here
- env.example < -- this is the base file
- .gitignore
- package-lock.json
- package.jsonREACT_APP_GITHUB_TOKEN y asigne su token github así, también agregue su nombre de usuario como GITHUB_USERNAME // .env
REACT_APP_GITHUB_TOKEN = " YOUR GITHUB TOKEN HERE "
GITHUB_USERNAME = " YOUR GITHUB USERNAME "
USE_GITHUB_DATA = " true " Establezca showGithubProfile en verdadero o falso para mostrar el perfil de contacto usando GitHub, predeterminado a False.
ADVERTENCIA: Trate a sus tokens como contraseñas y manténgalas en secreto. Cuando trabaje con la API, use tokens como variables de entorno en lugar de codificarlas en sus programas.
Nota: La sección de proyectos de código abierto solo muestra elementos fijados de su github. Si está viendo algo como se muestra a continuación, siga estas instrucciones.
Si la solución anterior todavía no funciona, visite la página Wiki.
Opcionalmente, puede vincular la sección de blogs a su cuenta de usuario mediano:
MEDIUM_USERNAME y asigne su nombre de usuario medio // .env
MEDIUM_USERNAME = " YOUR MEDIUM USERNAME "MEDIUM_USERNAME en .github/workflows/deploy.yml Establezca displayMediumBlogs en True o False en Portofolio.js para mostrar blogs medianos obtenidos, predeterminados a verdadero.
/src/portfolio.js y modifíquelo según sus necesidades. También deberá modificar index.html para cambiar el título y los metadatos para proporcionar un SEO preciso para su cartera personal. /* Change this file to get your Personal Porfolio */
const greeting = {
/* Your Summary And Greeting Section */
title : "Hi all I'm Saad" ,
subTitle : emoji ( "A passionate Full Stack Software Developer " ) ,
resumeLink : "https://drive.google.com/file/d/1ofFdKF_mqscH8WvXkSObnVvC9kK7Ldlu/view?usp=sharing"
} ;
const socialMediaLinks = {
/* Your Social Media Link */
github : "https://github.com/saadpasta" ,
linkedin : "https://www.linkedin.com/in/saadpasta/" ,
gmail : "[email protected]" ,
gitlab : "https://gitlab.com/saadpasta" ,
facebook : "https://www.facebook.com/saad.pasta7"
} ;
const skillsSection = { ... . }
const techStack = { ... . }
const workExperience = { ... . }
const openSource = { ... . }
const bigProjects = { ... . }
const achievementSection = { ... . }
const blogSection = { ... . }
const contactInfo = { ... . }
const twitterDetails = { ... } Para cargar su propio currículum, simplemente cargue un PDF a src/containers/greeting/resume y cambie el nombre del PDF para resume.pdf .
¿Para agregar emoji? En los textos en Portfolio.js , use la función emoji() y pase el texto que necesita como argumento. Esto ayudaría a mantener los emojis compatibles en diferentes navegadores y plataformas.
Puede elegir un lottie y descargarlo en formato JSON de sitios como este. En src/assets/lottie , reemplace el archivo JSON Lottie que desea alterar con el mismo nombre de archivo. Si desea cambiar las opciones de Lottie, vaya a src/components/displayLottie/DisplayLottie.js y cambie el objeto defaultOptions , puede remitir los documentos de Lottie-React para obtener más información sobre el objeto defaultOptions .
Inserte su nombre de usuario de Twitter en portfolio.js para mostrar su actividad reciente en su página.
const twitterDetails = {
userName : "Your Twitter Username"
} ; Nota: No use el símbolo @ al agregar nombre de usuario.
Cuando haya terminado con la configuración, debe alojar su sitio web en línea. Recomendamos encarecidamente leer la implementación en GitHub Pages Docs para React.
Primero debe habilitar las acciones de GitHub para el repositorio que usa.
El perfil y la información del repositorio de GitHub solo se crean en el momento de la implementación y el sitio debe ser redistribuido si se debe actualizar esa información. Por lo tanto, se configura un trabajo de cron configurable que implementa su sitio cada semana, de modo que una vez que actualice su perfil en GitHub, se muestra en su cartera. También puede activarlo manualmente usando el evento workflow_dispatch , vea esta guía sobre cómo hacerlo.
Esta sección lo guía para implementar su cartera en las páginas GitHub.
Navegue a package.json e ingrese su nombre de dominio en lugar de https://developerfolio.js.org/ en homepage Variable. Por ejemplo, si desea que su sitio sea https://<your-username>.github.io/developerFolio , agregue lo mismo a la sección de la página de inicio de package.json .
En resumen, también puede agregar /devloperFolio a package.json , ya que ambos son exactamente los mismos. Al hacerlo, le dice create-react-app que agregue los activos de la ruta en consecuencia.
Opcionalmente, configure el dominio. Puede configurar un dominio personalizado con páginas GitHub agregando un archivo CNAME al public/ carpeta.
Siga la guía para configurar las páginas GitHub de los documentos oficiales de CRA aquí.
También puede alojar directamente con Netlify vinculando su propio repositorio.
Para obtener más información, lea el alojamiento en Netlify.
Si puede ayudarnos con estos. No dude en abrir una solicitud de extracción.
Conéctese con LinkedIn para obtener resumen, habilidades, educación y experiencia
Mudarse a Gatsby
Agregar más secciones
Pasta saad | Kartik Choudhary | Naveen MK | Muhammad Hasham |
Gracias a estas maravillosas personas (Key Emoji):
Fawad Ali ? | Dasun Navoda | Brian Teeman | Rajkumar S | Codificador delgado | Mohamed Sayyaf | Ashutosh Hathidara |
Rizwan Jamal ⚡️ | Muhammad Hasham | Ujjawal Joshi | Palak Sethi | Vinicius Barbosa | Bharat Kammakatla ? | Garima Singh |
Henry Heng ? | Pulkit Banta ? | Akshay kumar ? | Amna Ejaz ? | Paras nagpal | Garg de Sparsh | Aashutosh rathi |
Abhishek kashyap ? | Lucas VC Nicolau | Bradley C. Herrin ? | Zekinah Lecaros | inventar | Arshad Ahmed | Xiaohui liu ? |
Seungyeon-Lee | Najam shehzad | Randy Jesus Real Srsen | Tamojit das | Waren Gonzaga | Benjamin burgués | Keshav Jain |
Hanzla | Yogesh rathod | Kunal Mundada | Anubhav gupta | Vatsal Dave | Elvis Ciuffetelli | Scott Jellen ? |
Karthik Mohan ? | mhowell11 | gajanandh ? | Joohyukkim | Auriculares rojos ? | Sunit Roy ? | Atir nayab ? |
Shehriyar Qureshi | respeto | Brayden ? | Canciu Costin | Atharv Singh | Ishan Khandelwal | Sergey Lyapustin |
Camila Pozas | Sai Teja ? | Vinit hemadri | Njong Emy | Tamal Das | Dunsin | Muneeb Ahmed |
Qais Attarwala |
