diff --git a/index.html b/index.html new file mode 100644 index 0000000..ef24659 --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + + Sean's Dev Tracker + + + + + + +
+
+

Dev Tracker

+

Documenting the journey to software engineering.

+
+ +
+

Latest Activity

+
+
+
+ +
+

Projects

+
+ +

Student Task Manager

+

Simple task tracking system for students.

+ → + + + +

Inventory Server

+

Multiplayer socket server with inventory system.

+ → + + + +

Dev Tracker

+

This website tracking my GitHub progress.

+ → + +
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..b491131 --- /dev/null +++ b/script.js @@ -0,0 +1,49 @@ +const username = "seanjoaquin"; +const repo = "devlog1"; + +async function fetchCommits() { + const container = document.getElementById("commits"); + + try { + const response = await fetch(`https://api.github.com/repos/${username}/${repo}/commits`); + if (!response.ok) throw new Error('Fetch failed'); + + const data = await response.json(); + container.innerHTML = ""; + + data.slice(0, 5).forEach((commit, index) => { + const div = document.createElement("div"); + div.className = "commit"; + + // Smooth fade-up animation + div.style.animation = `fadeUp 0.6s cubic-bezier(0.2, 0, 0, 1) forwards ${index * 0.1}s`; + div.style.opacity = "0"; + + const message = commit.commit.message; + const date = new Date(commit.commit.author.date).toLocaleDateString(undefined, { + month: 'long', day: 'numeric', year: 'numeric' + }); + + div.innerHTML = ` + ${date} +
${message}
+ `; + + container.appendChild(div); + }); + } catch (error) { + container.innerHTML = `

Unable to sync commits.

`; + } +} + +// Inject animation keyframes +const styleSheet = document.createElement('style'); +styleSheet.innerHTML = ` + @keyframes fadeUp { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } + } +`; +document.head.appendChild(styleSheet); + +fetchCommits(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0c21e61 --- /dev/null +++ b/style.css @@ -0,0 +1,200 @@ +:root { + --bg-top: #161617; + --bg-bottom: #000000; + --text: #f5f5f7; + --subtext: #86868b; + --accent: #0071e3; + --card: rgba(255, 255, 255, 0.04); + --border: rgba(255, 255, 255, 0.1); + --nav-bg: rgba(0, 0, 0, 0.75); +} + +/* FIX: Ensure overscroll on Mac/iOS stays black */ +html { + background-color: #000; + scroll-behavior: smooth; +} + +* { + box-sizing: border-box; + -webkit-font-smoothing: antialiased; +} + +body { + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; + color: var(--text); + background: radial-gradient(circle at 50% -20%, var(--bg-top) 0%, var(--bg-bottom) 80%); + background-attachment: fixed; + min-height: 100vh; + line-height: 1.47; +} + +/* Grainy noise texture */ +body::before { + content: ""; + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background-image: url("https://www.transparenttextures.com/patterns/noise.png"); + opacity: 0.05; + pointer-events: none; + z-index: 1000; +} + +/* Full-width Navigation */ +.navbar { + position: sticky; + top: 0; + width: 100%; + height: 52px; + background: var(--nav-bg); + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: saturate(180%) blur(20px); + border-bottom: 1px solid var(--border); + z-index: 100; + display: flex; + align-items: center; +} + +.nav-content { + width: 100%; + padding: 0 4%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { font-weight: 600; font-size: 19px; } + +.links a { + color: var(--text); + opacity: 0.7; + text-decoration: none; + font-size: 13px; + margin-left: 30px; + transition: opacity 0.2s ease; +} + +.links a:hover { opacity: 1; } + +/* Hero */ +.hero { + padding: 120px 22px 80px; + text-align: center; +} + +h1 { + font-size: clamp(44px, 8vw, 80px); + font-weight: 700; + letter-spacing: -0.03em; + margin: 0; + background: linear-gradient(180deg, #ffffff 30%, #86868b 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.subtitle { + font-size: clamp(18px, 3vw, 24px); + color: var(--subtext); + max-width: 600px; + margin: 20px auto 0; +} + +/* Main Sections */ +.section { + max-width: 1100px; + margin: 0 auto; + padding: 60px 22px; +} + +.section-title { + font-size: 28px; + font-weight: 600; + margin-bottom: 30px; +} + +/* Commit Cards */ +.commit { + background: var(--card); + border: 1px solid var(--border); + padding: 20px; + border-radius: 14px; + margin-bottom: 16px; + backdrop-filter: blur(10px); +} + +.commit strong { + font-size: 11px; + color: var(--accent); + text-transform: uppercase; + letter-spacing: 0.08em; +} + +/* Projects Grid */ +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 24px; +} + +.project-card { + position: relative; + background: var(--card); + border: 1px solid var(--border); + padding: 40px 30px; + border-radius: 22px; + text-decoration: none; + color: var(--text); + backdrop-filter: blur(10px); + transition: all 0.4s cubic-bezier(0.15, 0, 0.15, 1); +} + +.project-card:hover { + background: rgba(255,255,255,0.08); + transform: translateY(-8px); + border-color: rgba(255,255,255,0.3); +} + +.project-card h3 { font-size: 24px; margin: 0 0 10px 0; } +.project-card p { color: var(--subtext); font-size: 16px; margin: 0; } + +.card-arrow { + position: absolute; + bottom: 30px; + right: 30px; + opacity: 0; + transform: translateX(-10px); + transition: 0.3s; +} + +.project-card:hover .card-arrow { opacity: 1; transform: translateX(0); } + +/* Footer */ +.footer { + margin-top: 100px; + padding: 40px 4%; + border-top: 1px solid var(--border); + background: #000; +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1100px; + margin: 0 auto; +} + +.footer-left p { font-size: 12px; color: var(--subtext); margin: 0; } +.footer-right { display: flex; gap: 24px; } +.footer-right a { font-size: 12px; color: var(--subtext); text-decoration: none; transition: 0.2s; } +.footer-right a:hover { color: var(--text); } + +/* Mobile Adjustments */ +@media (max-width: 768px) { + .nav-content { padding: 0 24px; } + .hero { padding: 80px 20px; } + .projects-grid { grid-template-columns: 1fr; } + .footer-content { flex-direction: column; gap: 20px; text-align: center; } +} \ No newline at end of file