gabspereira/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update portfolio site with latest changes

Browse Source
This commit is contained in:
Gabriel Pereira
2026-09-12 12:13:16 -03:00
parent 7ff5d41fed
commit d62ea01d62
5 changed files with 357 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1 +0,0 @@
.env

140
DEPLOY.md Normal file
View File

@@ -0,0 +1,140 @@
# Portfolio Landing Page + Git Instance Visuals
## Architecture
- **Root domain** (`https://gabrielpereira.me/`) → Portfolio landing page
- **Git subdomain** (`https://git.gabrielpereira.me/`) → Gitea/Forgejo instance
This separation means visitors hit the curated portfolio first, then choose which repository to explore.
---
## 1. Portfolio Landing Page
The file `index.html` is a self-contained, single-file portfolio landing page.
### Deployment: Static Host (Recommended)
**GitHub Pages**
- Create repo `gabrielpereira/gabrielpereira.me`
- Commit `index.html` as the repo root (or in `/docs` folder)
- Enable Pages → deploy from root (or `/docs`)
- In repo Settings → Pages, add custom domain `gabrielpereira.me`
- Add DNS A record pointing to GitHub Pages IPs
**Cloudflare Pages**
- Drag `index.html` into Cloudflare Pages dashboard
- Custom domain: `gabrielpereira.me`
**Netlify / Vercel**
- Drag the `portfolio/` folder into deploy UI
- Set custom domain to `gabrielpereira.me`
### Deployment: Self-Hosted (Nginx/Caddy)
Place `index.html` at:
```
/var/www/gabrielpereira.me/index.html
```
Nginx config:
```nginx
server {
listen 443 ssl;
server_name gabrielpereira.me;
root /var/www/gabrielpereira.me;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
server {
listen 443 ssl;
server_name git.gabrielpereira.me;
location / {
proxy_pass http://localhost:3000; # your Gitea/Forgejo
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
```
Caddyfile:
```
gabrielpereira.me {
root * /var/www/gabrielpereira.me
file_server
}
git.gabrielpereira.me {
reverse_proxy localhost:3000
}
```
---
## 2. Gitea / Forgejo Visual Improvements
The file `git-custom-header.html` contains both **CSS overrides** and an **HTML banner**.
### How to apply
**Forgejo / Gitea v1.20+ (Admin Panel)**
1. Log in as admin → Site Administration → Customizations
2. Paste the `<style>` block into "Custom Header" (or "Custom CSS" if available)
3. If your version supports HTML injection, also paste the banner `<div>` block
4. Save
**Direct file (self-hosted server access)**
Create the custom templates directory for your instance:
```bash
# For Gitea/Forgejo installed from package
sudo mkdir -p /etc/gitea/templates/custom
# Or if installed from binary in /opt
sudo mkdir -p /opt/gitea/custom/templates/custom
```
Create `header.tmpl`:
```bash
sudo tee /etc/gitea/templates/custom/header.tmpl << 'EOF'
{{/* Paste the contents of git-custom-header.html here */}}
EOF
```
Restart Gitea/Forgejo:
```bash
sudo systemctl restart gitea
# or
sudo systemctl restart forgejo
```
### What the CSS changes
- Darker, more cohesive color palette matching the portfolio page
- Repository cards with rounded corners and hover effects
- Better typography and spacing
- A subtle "Open Evidence" badge concept on the homepage
- Improved navbar and footer styling
---
## 3. DNS Configuration
| Record | Type | Target |
|--------|------|--------|
| `gabrielpereira.me` | A | Your static host IP (GitHub Pages / server / CDN) |
| `git.gabrielpereira.me` | CNAME or A | Your Gitea/Forgejo server |
---
## Files
| File | Purpose |
|------|---------|
| `index.html` | Portfolio landing page (single file, no build step) |
| `git-custom-header.html` | CSS + HTML for Gitea/Forgejo customizations |
| `DEPLOY.md` | This file — deployment instructions |

17
docker-compose.yml
View File

@@ -1,17 +0,0 @@
version: "3.8"
services:
web:
image: nginx:alpine
ports:
- "8082:80"
volumes:
- ./:/usr/share/nginx/html:ro
restart: unless-stopped
tunnel:
image: cloudflare/cloudflared:latest
command: tunnel run
environment:
- TUNNEL_TOKEN=${TUNNEL_TOKEN}
restart: unless-stopped

193
git-custom-header.html Normal file
View File

@@ -0,0 +1,193 @@
<!--
Add this to your Gitea/Forgejo Admin Panel → Customizations → Custom Header,
or place as custom/templates/custom/header.tmpl in your server config.
-->
<style>
/* ========== GITEA/FORGEJO LANDING PAGE ENHANCEMENTS ========== */
/* Only apply on the homepage / explore page */
body.page-home .ui.container:first-of-type,
body.page-explore .ui.container:first-of-type {
position: relative;
}
/* Hero banner above the repo list */
body.page-home .ui.container:first-of-type::before,
body.page-explore .ui.container:first-of-type::before {
content: '';
display: block;
background: linear-gradient(135deg, #161b22 0%, #0d1117 100%);
border: 1px solid #30363d;
border-radius: 12px;
padding: 32px;
margin-bottom: 24px;
color: #c9d1d9;
}
/* We can't inject real HTML via CSS, so we style the existing elements */
/* Make the homepage heading more prominent */
body.page-home h2.ui.header,
body.page-explore h2.ui.header {
font-size: 28px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
color: #c9d1d9 !important;
border-bottom: none !important;
}
body.page-home h2.ui.header::after,
body.page-explore h2.ui.header::after {
content: ' — Open evidence for technical review';
font-size: 14px;
font-weight: 400;
color: #8b949e;
margin-left: 12px;
}
/* Improve repository cards */
.repo-list .item {
background: #161b22 !important;
border: 1px solid #30363d !important;
border-radius: 10px !important;
padding: 20px 24px !important;
margin-bottom: 12px !important;
transition: all 0.2s ease !important;
}
.repo-list .item:hover {
border-color: #58a6ff !important;
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
/* Better repo titles */
.repo-list .repo-title {
font-size: 17px !important;
font-weight: 600 !important;
}
.repo-list .repo-title a {
color: #58a6ff !important;
transition: opacity 0.2s;
}
.repo-list .repo-title a:hover {
opacity: 0.8;
}
/* Description text */
.repo-list .description {
color: #8b949e !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin-top: 8px !important;
}
/* Topic tags */
.repo-list .repo-topic {
background: #1c2128 !important;
border: 1px solid #30363d !important;
color: #8b949e !important;
font-size: 12px !important;
font-weight: 500 !important;
padding: 3px 10px !important;
border-radius: 6px !important;
margin-right: 6px !important;
}
.repo-list .repo-topic:hover {
background: #30363d !important;
color: #c9d1d9 !important;
}
/* Stats line */
.repo-list .metas {
font-size: 13px !important;
color: #8b949e !important;
margin-top: 12px !important;
}
.repo-list .metas .text.grey {
color: #6e7681 !important;
}
/* Improve the overall background */
body {
background: #0d1117 !important;
}
.ui.segment {
background: #161b22 !important;
border-color: #30363d !important;
box-shadow: none !important;
}
/* Navbar */
.ui.menu {
background: #161b22 !important;
border-color: #30363d !important;
}
.ui.menu .item {
color: #c9d1d9 !important;
}
.ui.menu .item:hover {
background: #1c2128 !important;
color: #58a6ff !important;
}
/* Footer */
.page-content > .footer {
border-top: 1px solid #30363d !important;
background: #0d1117 !important;
color: #8b949e !important;
margin-top: 48px !important;
padding: 32px 0 !important;
}
.page-content > .footer a {
color: #58a6ff !important;
}
/* Add a subtle "portfolio" link in the navbar for visitors */
.ui.menu .right.menu::before {
content: 'Portfolio';
display: flex;
align-items: center;
padding: 0 16px;
font-size: 14px;
font-weight: 500;
color: #58a6ff;
cursor: pointer;
}
</style>
<!-- Alternative: Real custom HTML banner (if your Gitea/Forgejo supports header injection) -->
<div class="portfolio-banner" style="display: none;">
<div style="
background: linear-gradient(135deg, #161b22 0%, #0d1117 100%);
border: 1px solid #30363d;
border-radius: 12px;
padding: 28px 32px;
margin: 0 0 24px 0;
max-width: 1100px;
">
<div style="font-size: 13px; font-weight: 500; color: #58a6ff; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em;">
Open Evidence
</div>
<h1 style="font-size: 24px; font-weight: 700; color: #c9d1d9; margin: 0 0 8px 0; letter-spacing: -0.01em;">
Gabriel Pereira — AI & Data Architecture
</h1>
<p style="font-size: 14px; color: #8b949e; margin: 0; line-height: 1.6;">
Data & Analytics Solution Architect with 9 years at Siemens.
Each repository is a delivery narrative: architecture decisions, governance patterns,
and the boundary where manual work stops.
</p>
<div style="margin-top: 16px;">
<a href="https://linkedin.com/in/gabrielpereira-dev" style="color: #58a6ff; text-decoration: none; font-size: 13px; font-weight: 500; margin-right: 16px;">LinkedIn →</a>
<a href="mailto:gabriel.pereira@protonmail.com" style="color: #58a6ff; text-decoration: none; font-size: 13px; font-weight: 500;">Email →</a>
</div>
</div>
</div>

25
index.html
View File

@@ -361,7 +361,7 @@
<div class="container">
<div class="section-header">
<h2>Selected Case Studies</h2>
<span class="count">3 public repositories</span>
<span class="count">4 public repositories</span>
</div>
<div class="project-grid">
@@ -433,6 +433,29 @@
View repository →
</a>
</article>
<article class="project-card" onclick="window.open('https://git.gabrielpereira.me/gabspereira/workspace', '_blank')">
<div class="project-icon">🧪</div>
<h3>Workspace Experiments</h3>
<p>
Active experiments and utility scripts — smaller tools,
data processing pipelines, automation helpers, and
exploratory work that feeds into larger delivery patterns.
</p>
<div class="project-tags">
<span class="tag">Python</span>
<span class="tag">Scripts</span>
<span class="tag">Automation</span>
<span class="tag">PoCs</span>
</div>
<div class="project-stats">
<span>🔄 Evolving</span>
<span>📦 Utilities</span>
</div>
<a class="project-link" href="https://git.gabrielpereira.me/gabspereira/workspace" target="_blank">
View repository →
</a>
</article>
</div>
</div>
</section>