developerFolio
Safe Release
Basta alterar src/portfolio.js para obter seu portfólio pessoal. Personalize o tema do portfólio usando seu próprio esquema de cores globalmente no arquivo src/_globalColor.scss . Sinta-se à vontade para usá-lo como é ou personalizá-lo o quanto quiser.
Se você deseja contribuir e tornar isso muito melhor para outros usuários, dê uma olhada nos problemas.
Criou algo incrível para o seu garfo do portfólio e deseja compartilhá -lo? Sinta -se à vontade para abrir um pedido de tração.
Resumo Resumo e sobre mim
✔️ Habilidades
✔️ Educação
✔️ Experiência de trabalho
✔️ Projetos de código aberto conectados ao GitHub
✔️ Grandes projetos
✔️ Realizações e certificações?
✔️ blogs
✔️ Conversas
✔️ Podcast
✔️ Entre em contato comigo
Line Linha do tempo do Twitter
Perfil Github Perfil
Para ver um exemplo ao vivo, clique aqui .
Essas instruções fornecerão uma cópia do projeto em funcionamento em sua máquina local para fins de desenvolvimento e teste.
Você precisará do git e Node.js (que vem com o NPM) instalado no seu computador ou usará o 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
Na sua linha de comando, clone e execute desenvolvedores:
# 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 startGere um token clássico de acesso pessoal do Github seguindo estas instruções (verifique se você não seleciona nenhum escopo, apenas gerar um token simples). Se você estiver usando ações do GitHub para implantar seu portfólio, poderá pular esta seção.
Nota: Configurando as variáveis de ambiente antes de implantar seu portfólio é altamente recomendado, pois alguns componentes dependem dos dados da 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 e atribua seu token github assim, também adicione seu nome de usuário como GITHUB_USERNAME // .env
REACT_APP_GITHUB_TOKEN = " YOUR GITHUB TOKEN HERE "
GITHUB_USERNAME = " YOUR GITHUB USERNAME "
USE_GITHUB_DATA = " true " Defina showGithubProfile como true ou falso para mostrar o perfil de contato usando o GitHub, padrão como false.
Aviso: trate seus tokens como senhas e mantenha -as em segredo. Ao trabalhar com a API, use tokens como variáveis de ambiente em vez de codificá -las em seus programas.
Nota: A seção de projetos de código aberto apenas mostra itens fixados do seu github. Se você está vendo algo como mostrado abaixo, siga estas instruções.
Se a solução acima ainda não funcionar, visite a página do Wiki.
Opcionalmente, você pode vincular a seção de blogs à sua conta de usuário médio:
MEDIUM_USERNAME e atribua seu nome de usuário médio // .env
MEDIUM_USERNAME = " YOUR MEDIUM USERNAME "MEDIUM_USERNAME em .github/workflows/deploy.yml Definir displayMediumBlogs como TRUE ou FALSE em Portofolio.js para exibir blogs médios buscados, padrão para TRUE.
/src/portfolio.js e modifique -o de acordo com sua necessidade. Você também precisará modificar index.html para alterar o título e os metadados para fornecer SEO preciso para seu portfólio pessoal. /* 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 fazer upload de seu próprio currículo, basta fazer upload de um pdf para src/containers/greeting/resume e renomear o pdf para resume.pdf .
Para adicionar emoji? Nos textos do Portfolio.js , use a função emoji() e passe o texto necessário como argumento. Isso ajudaria a manter os emojis compatíveis em diferentes navegadores e plataformas.
Você pode escolher uma Lottie e baixá -lo no formato JSON em sites como este. No src/assets/lottie , substitua o arquivo lottie json que você deseja alterar com o mesmo nome de arquivo. Se você deseja alterar as opções Lottie, acesse src/components/displayLottie/DisplayLottie.js e altere o objeto defaultOptions , você pode consultar os documentos Lottie-React para obter mais informações sobre o objeto defaultOptions .
Insira seu nome de usuário do Twitter no portfolio.js para mostrar sua atividade recente em sua página.
const twitterDetails = {
userName : "Your Twitter Username"
} ; Nota: Não use @ símbolo ao adicionar nome de usuário.
Quando terminar a configuração, você deve hospedar seu site online. É altamente recomendável ler a implantação nos documentos do Github Pages for React.
Primeiro, você deve habilitar, ações do GitHub para o repositório que você usa.
O perfil e as informações do repositório do GitHub são criadas apenas no momento da implantação e o site precisa ser reimplantado se essas informações precisarem ser atualizadas. Portanto, um trabalho de cron configurável é configurado que implanta seu site toda semana, para que, depois de atualizar seu perfil no Github, ele seja mostrado em seu portfólio. Você também pode acioná -lo manualmente usando o evento workflow_dispatch , consulte este guia sobre como fazer isso.
Esta seção o orienta a implantar seu portfólio nas páginas do GitHub.
Navegue até package.json e digite seu nome de domínio em vez de https://developerfolio.js.org/ na variável homepage . Por exemplo, se você deseja que seu site seja https://<your-username>.github.io/developerFolio , adicione o mesmo à seção de página inicial do package.json .
Em suma, você também pode adicionar /devloperFolio ao package.json pois ambos são exatamente iguais. Ao fazer isso, você diz create-react-app para adicionar os ativos do caminho de acordo.
Opcionalmente, configure o domínio. Você pode configurar um domínio personalizado com as páginas do GitHub adicionando um arquivo CNAME ao public/ pasta.
Siga o guia para configurar as páginas do Github dos documentos oficiais do CRA aqui.
Você também pode hospedar diretamente com o Netlify vinculando seu próprio repositório.
Para mais informações, leia a hospedagem no Netlify.
Se você pode nos ajudar com eles. Por favor, não hesite em abrir uma solicitação de tração.
Conecte -se ao LinkedIn para obter resumo, habilidades, educação e experiência
Mova -se para Gatsby
Adicione mais seções
Massas saad | Kartik Choudhary | Naveen Mk | Muhammad Hasham |
Obrigado a essas pessoas maravilhosas (key emoji):
Fawad Ali ? | Dasun Navoda | Brian Teeman | Rajkumar s | Codificador fino | 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 ? | Paráns Nagpal | Sparsh Garg | Aashutosh Rathi |
Abhishek Kashyap ? | Lucas VC Nicolau | Bradley C. Herrin ? | Zekinah Lecaros | imbated | Arshad Ahmed | Xiaohui Liu ? |
Seungyeon-Lee | Najam Shehzad | Randy Jesus Real Srsen | TAMOJIT DAS | Waren Gonzaga | Benjamin Bourgeois | Keshav Jain |
Hanzla | Yogesh Rathod | Kunal Mundada | Anubhav Gupta | Vatsal Dave | Elvis Ciuffetelli | Scott Jellen ? |
Karthik Mohan ? | Mhowell11 | Gajanandh ? | Joohyukkim | Fone de ouvido vermelho ? | Sunit Roy ? | Atir Nayab ? |
Shehriyar Qureshi | Respeito | Brayden ? | Canciu Costin | ATHARV SINGH | Ishan Khandelwal | Sergey Lyapustin |
Camila Pozas | Sai Teja ? | Vinit Hemadri | NJONG EMY | Tamal Das | Dunsin | Muneeb Ahmed |
Qais Attarwala |
