Após muitas pessoas me procurar querendo saber como fazer portifólio decidi fazer esse com um tutorial de como mudar cada parte e ao mesmo tempo vpcê aprender um pouco mais sobre html e css.
Primeiro gostaria de pedir pra dar aquela estrelinha se ajudar em algo eu vou continuar fazendo esse tipo de conteúdo (da mo trabalho)
para pegar esse arquivo é simples, vamos clonar ele, se você ja sabe como clonar e ja clonou, pula essa parte
sobe a página até projeto e vá até o botãozinho "code"
Vamos clonar por HTTPS, então clica no HTTPS e em "Clonar com HTTPS"
agora vamos clonar pra ter o arquivo na sua máquina, vá ate o cmd(terminal)
Deixe ele aberto e abre as pastas e procure a pasta que tu quer deixar o arquivo clonado
escreva "cd" no cmd e arraste a pasta até o cmd(terminal)
clique no enter, e digite "git clone https://github.com/EliasGabriel1/portifa-comunity.git" e aperte enter
logo terminar o clone, digite "portifa-comunity"
e logo digite "code ."para abrir o projeto no vs code
Sendo assim O primeiro arquivo a alterar é o index.html
Eu tirei um tempo e comentei tudo que fiz, cada parte está comentada, iniciando então, a primeira coisa a mudar é a tag title dentro do head,
mude para seu nome, portifólio - seu nome, ou qualquer coisa que você goste, esse title iráaparecer em cima da aba do projeto, assim:
dentro do head possui também uma tag assim:
Sendo assim, pegue sua imagem que deseja por la em cima, e transforme em um favicon, pelo site http://www.favicon.pro/pt/
troque no caminho content>img o favicon para aparecer o seu, lembrese de trocar, e por com o mesmo nome que esta na tag falado acima
logo explicando como fora feito o menu mobile e o desktop foi comentado no código, são dois, pois um é do mobile e outro do desktop
Logo após fazer todo processo de mudança pras suas coisas, nome, profissão e a frase de impacto, é hora de trocar a imagem coloque uma imagem de preferencia no tamanho de 500x500 no diretorio content>img
Mude os projetos em destaque, e os posts principais do blog, coloque os principais que voce fez, mesmo sendo muito simples, coloque uma imagem de destaque e um pequeno texto e o ano
Em sequencia dos trabalhos principais, sempre fora imagem portifólio 1 a 4 e cada um sucessivamente com seu texto
Ao clicar na imagem voce vai ser direcionado ao trabalho 1, aonde é o que o href esta falando, logo dentro da tag
, possui o src da imagem, mude o nome da imagem colocada em content>img, de acordo com o tipo, png, ou jpg, ex
Próxima página é pages>works.html
os works funcionam da mesma maneira citada anteriormente, cada imagem que esta do lado de um texto no projeto
no codigo esta embaixo, seguindo sequencia, a imagem do 1ºprojeto é correspondente a primeira tag de img do codigo
!!! TODO O PROJETO, EXISTE MOMENTOS REPETIDOS, COMO O NOME DO TITLE É NECESSÁRIO TROCAR EM TODAS PÁGINAS SE O PROJETO MUDAR DE NOME !!!
Como falado o blog funciona da mesma maneira, cada href tem um caminho até o projeto desse blog ou work, logo irei falar mais sobre, mas altere conforme sua necessidade, apague ou comente se a quantidade de postagens for maior do que voce quer ter, para comentar basta apertar 'crtl k c' sucessivamente.
E a ultiam parte contém a página de contato, aonde é a mais simples, dentro da section possui o nome, email e github, altere conforme o seu.
e nas públicações, cada vez que existir uma nova postagem, faça um novo documento html, e coloque no href da pagina de postagem dentro do pages>blog se for blog e pages>work se for de trabalho, dessa maneira:
cada arquivo corresponde a um href, mude as imagens de acordo com o que preferir, coloque o ano da postagem e um titulo bem interessante 😉😉
e por ultimo, se isso foi minimament util, compartilhe com alguém que ta começando e quer ter um portifólio simples e descente, me siga aqui no github <3 se faltou algo, bora trocar uma ideia no instagram: Elias Gabriel