Artigo

Site GitHub - fasmedeiros.github.io

Fabrício de Medeiros

Para criar uma página para o seu GitHub Pages, vamos usar HTML, CSS e algumas integrações com APIs do GitHub para exibir suas estatísticas. Você precisará seguir os passos abaixo:

1. Estrutura do projeto

Crie um repositório no GitHub com o nome fabricio.github.io. No repositório, adicione os seguintes arquivos:

index.html
style.css
script.js

2. Arquivo `index.html`

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabrício de Medeiros | Portfólio</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="bg-dark text-white py-4">
        <div class="container profile">
            <img src="https://github.com/fasmedeiros.png" alt="Foto de Fabrício" class="profile-pic">
            <h1>Fabrício de Medeiros</h1>
            <p>Engenheiro de Software | Desenvolvedor Back-End | Pesquisador</p>
        </div>
    </header>
    <main class="container">
        <section id="about" class="my-4">
            <h2>Sobre Mim</h2>
            <p>Sou um desenvolvedor apaixonado por criar soluções inovadoras, com experiência em sistemas de gestão escolar, simulados online, e desenvolvimento web.</p>
        </section>
        <section id="projects" class="my-4">
            <h2>Meus Projetos</h2>
            <ul class="list-group">
                <li class="list-group-item">
                    <strong>Sistema de Gestão Escolar:</strong> Plataforma para gerenciar escolas, professores, estudantes, turmas, etc.
                </li>
                <li class="list-group-item">
                    <strong>Simulados Online:</strong> Ferramenta para criação e avaliação de simulados personalizados.
                </li>
            </ul>
        </section>
        <section id="technologies" class="my-4">
            <h2>Tecnologias</h2>
            <ul class="list-inline">
                <li class="list-inline-item badge bg-danger">HTML/CSS</li>
                <li class="list-inline-item badge bg-warning">Bootstrap</li>
                <li class="list-inline-item badge bg-primary">PHP</li>
                <li class="list-inline-item badge bg-dark">Laravel</li>
                <li class="list-inline-item badge bg-secondary">JavaScript</li>
                <li class="list-inline-item badge bg-success">Python</li>
            </ul>
        </section>
        <section id="stats" class="my-4">
            <h2>Minhas Estatísticas</h2>
            <div class="row text-center">
                <div class="col-md-6">
                    <img src="https://github-readme-stats.vercel.app/api?username=fasmedeiros&show_icons=true&theme=radical" alt="GitHub Stats">
                </div>
                <div class="col-md-6">
                    <img src="https://github-readme-streak-stats.herokuapp.com/?user=fasmedeiros&theme=radical" alt="GitHub Streak">
                </div>
            </div>
        </section>
        <section id="certificates" class="my-4">
            <h2>Certificados</h2>
            <ul class="list-group">
                <li class="list-group-item">
                    <a href="https://github.com/fasmedeiros/certificates" target="_blank" class="text-decoration-none">Ver Certificados</a>
                </li>
            </ul>
        </section>
        <section id="contact" class="my-4">
            <h2>Contatos</h2>
            <p>Email: <a href="mailto:gannba@hotmail.com">gannba@hotmail.com</a></p>
            <p>GitHub: <a href="https://github.com/fasmedeiros" target="_blank">github.com/fasmedeiros</a></p>
        </section>
    </main>
    <footer>
        <p><small>© 2024 Fabrício de Medeiros. Todos os direitos reservados.</small></p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3. Arquivo `style.css`

/* Geral */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
}

header {
    text-align: center;
    background-color: #333;
    color: #fff;
    padding: 20px 0;
}

.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid #fff;
}

h1 {
    margin: 10px 0;
    font-size: 2rem;
}

p {
    margin: 0;
}

/* Seções */
main {
    padding: 20px;
}

h2 {
    color: #333;
    border-bottom: 2px solid #333;
    display: inline-block;
    margin-bottom: 10px;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    background-color: #fff;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Estatísticas */
.stats img {
    max-width: 100%;
    margin: 10px 0;
}

/* Rodapé */
footer {
    text-align: center;
    padding: 10px;
    background-color: #333;
    color: #fff;
}

4. Arquivo `script.js`

// Fetch projects from GitHub API
async function fetchProjects() {
    const username = "fabricio"; // Substitua pelo seu username do GitHub
    const url = `https://api.github.com/users/${username}/repos?sort=updated`;

    try {
        const response = await fetch(url);
        const repos = await response.json();

        const projectsList = document.getElementById("projects-list");

        repos.forEach(repo => {
            const listItem = document.createElement("li");
            listItem.innerHTML = `
                <a href="${repo.html_url}" target="_blank">${repo.name}</a>
                <p>${repo.description || "Sem descrição"}</p>
            `;
            projectsList.appendChild(listItem);
        });
    } catch (error) {
        console.error("Erro ao buscar projetos:", error);
    }
}

fetchProjects();

5. Publicação

Faça o upload dos arquivos no repositório fabricio.github.io.
O GitHub Pages será ativado automaticamente. Acesse a página pelo endereço: https://fabricio.github.io.

Deixe um comentário

Explore, Contribua e Cresça Conosco!

Obrigado por ler o nosso artigo! Esperamos que você tenha encontrado informações valiosas e inspiradoras. Se você está empolgado para saber mais, temos uma vasta coleção de artigos sobre tópicos variados, desde tendências tecnológicas até insights sobre desenvolvimento de software. Não deixe de explorar nossas outras publicações!

Quer fazer parte da nossa comunidade?

Inscreva-se no nosso site para receber as últimas atualizações e novidades diretamente no seu e-mail. Seu cadastro é o primeiro passo para se conectar com uma rede de entusiastas e profissionais apaixonados pelo que fazem.

Tem algo a compartilhar?

Adoraríamos ouvir suas ideias, inovações e experiências! Sinta-se à vontade para escrever e enviar seus próprios artigos, códigos ou projetos. Sua contribuição é fundamental para enriquecer nosso conteúdo e ajudar outros leitores a crescer junto com você. Juntos, podemos criar um espaço de aprendizado e troca de conhecimento enriquecedor. Seu conhecimento e entusiasmo são o que fazem nossa comunidade especial.

Inscreva-se Agora | Compartilhe | Contribua com um Artigo
Continue explorando e seja parte da transformação!

Voltar