Repository: Gothsec/Portfolio Branch: main Commit: 95f20bf31f37 Files: 23 Total size: 60.9 KB Directory structure: gitextract_3ahugtvb/ ├── .github/ │ ├── FUNDING.yml │ └── dependabot.yml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── astro.config.mjs ├── package.json ├── src/ │ ├── React/ │ │ ├── LetterGlitch.tsx │ │ ├── LikeButton.tsx │ │ └── SkillsList.tsx │ ├── components/ │ │ ├── contact.astro │ │ ├── footer.astro │ │ ├── home.astro │ │ ├── logoWall.astro │ │ ├── nav.astro │ │ └── projects.astro │ ├── env.d.ts │ ├── firebase.ts │ ├── layouts/ │ │ └── Layout.astro │ └── pages/ │ └── index.astro ├── tailwind.config.mjs └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms github: Gothsec patreon: # Replace with a single Patreon username open_collective: # Replace with a single Open Collective username ko_fi: # Replace with a single Ko-fi username tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry liberapay: # Replace with a single Liberapay username issuehunt: # Replace with a single IssueHunt username lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry polar: # Replace with a single Polar username buy_me_a_coffee: # Replace with a single Buy Me a Coffee username thanks_dev: # Replace with a single thanks.dev username custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] ================================================ FILE: .github/dependabot.yml ================================================ # To get started with Dependabot version updates, you'll need to specify which # package ecosystems to update and where the package manifests are located. # Please see the documentation for all configuration options: # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file version: 2 updates: - package-ecosystem: "npm" # See documentation for possible values directory: "/" # Location of package manifests schedule: interval: "daily" ================================================ FILE: .gitignore ================================================ # build output dist/ # generated types .astro/ # dependencies node_modules/ # logs npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* # environment variables .env .env.production # macOS-specific files .DS_Store # jetbrains setting folder .idea/ ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. ## Our Standards Examples of behavior that contributes to a positive environment for our community include: * Demonstrating empathy and kindness toward other people * Being respectful of differing opinions, viewpoints, and experiences * Giving and gracefully accepting constructive feedback * Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience * Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: * The use of sexualized language or imagery, and sexual attention or advances of any kind * Trolling, insulting or derogatory comments, and personal or political attacks * Public or private harassment * Publishing others' private information, such as a physical or email address, without their explicit permission * Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. ## Scope This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at oscarandreshernandezpineda@gmail.com. All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the reporter of any incident. ## Enforcement Guidelines Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: ### 1. Correction **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. **Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. ### 2. Warning **Community Impact**: A violation through a single incident or series of actions. **Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. ### 3. Temporary Ban **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. **Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within the community. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity). [homepage]: https://www.contributor-covenant.org For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations. ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2025 Oscar Hernandez Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # Portfolio ![OscarHernandez-portfolio](https://github.com/user-attachments/assets/e284a42b-15c5-495c-99c7-ad5c1eb3bbe7) ![Deploy Status](https://img.shields.io/badge/Deploy-Vercel-black?style=flat&logo=vercel) --- [Demo](https://oscarhernandez.vercel.app/) [Astro Themes](https://astro.build/themes/details/dark-minimal/) [ReactBits Showcase](https://www.reactbits.dev/showcase) The component `` was taken from [ReactBits.dev](https://www.reactbits.dev/) ## **Stack** ### **Frontend** ![Astro](https://img.shields.io/badge/Astro-FF5D01?logo=astro&logoColor=white) ![Tailwind](https://img.shields.io/badge/Tailwind_CSS-38B2AC?logo=tailwind-css&logoColor=white) ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white) ### **Tools** ![Figma](https://img.shields.io/badge/Figma-F24E1E?logo=figma&logoColor=white) ![Prettier](https://img.shields.io/badge/Prettier-F7B93E?logo=prettier&logoColor=black) ![Canva](https://img.shields.io/badge/Canva-c900c3?logo=canva&logoColor=white) ### **Show your favorite Spotify album (or your own)** ![Spotify](https://img.shields.io/badge/Spotify-06cc1a?logo=spotify&logoColor=white) 1. Choose your Spotify album 2. Access the share options 3. Select 'copy embed code' ``` ``` 4. Insert the embed code on footer.astro That's it! ## **Project structure** ``` public/ └── svg/ src/ ├── Components/ | ├── contact.astro | ├── footer.astro | ├── home.astro | ├── logoWall.astro | ├── nav.astro | └── projects.astro ├── layouts/ | └── Layout.astro ├── React/ | ├── LetterGlitch.tsx | ├── LikeButton.tsx | └── SkillsList.tsx └── pages/ └── index.astro ``` ## **Local configuration** 1. Clone the repo: ``` git clone https://github.com/Gothsec/Astro-portfolio ``` 2. Install dependencies: ``` npm install ``` 3. Start the development server: ``` npm run dev ``` > **Important Notice:** > This project is licensed under the [MIT License](https://opensource.org/licenses/mit). > According to the license terms, any redistribution (including compiled or modified versions), you **must** retain the original copyright > notice and the full license text. Copyright © 2026 Oscar Hernandez. All rights reserved. ================================================ FILE: astro.config.mjs ================================================ // @ts-check import { defineConfig } from "astro/config"; import tailwind from "@astrojs/tailwind"; import react from "@astrojs/react"; // https://astro.build/config export default defineConfig({ integrations: [tailwind(), react()], vite: { resolve: { alias: { "@": "/src", "@components": "/src/components", }, }, }, output: "static", build: { inlineStylesheets: "auto", }, server: { host: true, port: 4321, }, }); ================================================ FILE: package.json ================================================ { "name": "portfolio", "type": "module", "version": "0.0.1", "scripts": { "dev": "astro dev", "start": "astro dev", "build": "astro check && astro build", "preview": "astro preview", "astro": "astro" }, "dependencies": { "@astrojs/check": "^0.9.9", "@astrojs/react": "^5.0.4", "@astrojs/tailwind": "^6.0.2", "@fontsource-variable/montserrat": "^5.2.8", "@types/react": "^19.1.16", "@types/react-dom": "^19.1.9", "astro": "^5.18.1", "firebase": "^12.12.1", "ogl": "^1.0.11", "react": "^19.0.0", "react-dom": "^19.0.0", "sharp": "^0.34.5", "typescript": "^5.9.3" }, "devDependencies": { "@types/node": "^25.6.0", "prettier": "^3.8.3", "prettier-plugin-astro": "^0.14.1" } } ================================================ FILE: src/React/LetterGlitch.tsx ================================================ import { useRef, useEffect } from "react"; const LetterGlitch = ({ glitchColors = ["#5e4491", "#A476FF", "#241a38"], glitchSpeed = 33, centerVignette = false, outerVignette = false, smooth = true, }: { glitchColors: string[]; glitchSpeed: number; centerVignette: boolean; outerVignette: boolean; smooth: boolean; }) => { const canvasRef = useRef(null); const animationRef = useRef(null); const letters = useRef< { char: string; color: string; targetColor: string; colorProgress: number; }[] >([]); const grid = useRef({ columns: 0, rows: 0 }); const context = useRef(null); const lastGlitchTime = useRef(Date.now()); const fontSize = 16; const charWidth = 10; const charHeight = 20; const lettersAndSymbols = [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "!", "@", "#", "$", "&", "*", "(", ")", "-", "_", "+", "=", "/", "[", "]", "{", "}", ";", ":", "<", ">", ",", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ]; const getRandomChar = () => { return lettersAndSymbols[ Math.floor(Math.random() * lettersAndSymbols.length) ]; }; const getRandomColor = () => { return glitchColors[Math.floor(Math.random() * glitchColors.length)]; }; const hexToRgb = (hex: string) => { const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, (m, r, g, b) => { return r + r + g + g + b + b; }); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16), } : null; }; const interpolateColor = ( start: { r: number; g: number; b: number }, end: { r: number; g: number; b: number }, factor: number, ) => { const result = { r: Math.round(start.r + (end.r - start.r) * factor), g: Math.round(start.g + (end.g - start.g) * factor), b: Math.round(start.b + (end.b - start.b) * factor), }; return `rgb(${result.r}, ${result.g}, ${result.b})`; }; const calculateGrid = (width: number, height: number) => { const columns = Math.ceil(width / charWidth); const rows = Math.ceil(height / charHeight); return { columns, rows }; }; const initializeLetters = (columns: number, rows: number) => { grid.current = { columns, rows }; const totalLetters = columns * rows; letters.current = Array.from({ length: totalLetters }, () => ({ char: getRandomChar(), color: getRandomColor(), targetColor: getRandomColor(), colorProgress: 1, })); }; const resizeCanvas = () => { const canvas = canvasRef.current; if (!canvas) return; const parent = canvas.parentElement; if (!parent) return; const dpr = window.devicePixelRatio || 1; const rect = parent.getBoundingClientRect(); canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; canvas.style.width = `${rect.width}px`; canvas.style.height = `${rect.height}px`; if (context.current) { context.current.setTransform(dpr, 0, 0, dpr, 0, 0); } const { columns, rows } = calculateGrid(rect.width, rect.height); initializeLetters(columns, rows); drawLetters(); }; const drawLetters = () => { if (!context.current || letters.current.length === 0) return; const ctx = context.current; const { width, height } = canvasRef.current!.getBoundingClientRect(); ctx.clearRect(0, 0, width, height); ctx.font = `${fontSize}px monospace`; ctx.textBaseline = "top"; letters.current.forEach((letter, index) => { const x = (index % grid.current.columns) * charWidth; const y = Math.floor(index / grid.current.columns) * charHeight; ctx.fillStyle = letter.color; ctx.fillText(letter.char, x, y); }); }; const updateLetters = () => { if (!letters.current || letters.current.length === 0) return; // Prevent accessing empty array const updateCount = Math.max(1, Math.floor(letters.current.length * 0.05)); for (let i = 0; i < updateCount; i++) { const index = Math.floor(Math.random() * letters.current.length); if (!letters.current[index]) continue; // Skip if index is invalid letters.current[index].char = getRandomChar(); letters.current[index].targetColor = getRandomColor(); if (!smooth) { letters.current[index].color = letters.current[index].targetColor; letters.current[index].colorProgress = 1; } else { letters.current[index].colorProgress = 0; } } }; const handleSmoothTransitions = () => { let needsRedraw = false; letters.current.forEach((letter) => { if (letter.colorProgress < 1) { letter.colorProgress += 0.05; if (letter.colorProgress > 1) letter.colorProgress = 1; const startRgb = hexToRgb(letter.color); const endRgb = hexToRgb(letter.targetColor); if (startRgb && endRgb) { letter.color = interpolateColor( startRgb, endRgb, letter.colorProgress, ); needsRedraw = true; } } }); if (needsRedraw) { drawLetters(); } }; const animate = () => { const now = Date.now(); if (now - lastGlitchTime.current >= glitchSpeed) { updateLetters(); drawLetters(); lastGlitchTime.current = now; } if (smooth) { handleSmoothTransitions(); } animationRef.current = requestAnimationFrame(animate); }; useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; context.current = canvas.getContext("2d"); resizeCanvas(); animate(); let resizeTimeout: NodeJS.Timeout; const handleResize = () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { cancelAnimationFrame(animationRef.current as number); resizeCanvas(); animate(); }, 100); }; window.addEventListener("resize", handleResize); return () => { cancelAnimationFrame(animationRef.current!); window.removeEventListener("resize", handleResize); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [glitchSpeed, smooth]); return (
{outerVignette && (
)} {centerVignette && (
)}
); }; export default LetterGlitch; ================================================ FILE: src/React/LikeButton.tsx ================================================ import React, { useState, useEffect } from "react"; import { doc, onSnapshot, updateDoc, increment } from "firebase/firestore"; import { db } from "../firebase"; const LikeButton = () => { const [likes, setLikes] = useState(0); const [isLiked, setIsLiked] = useState(false); const [isClient, setIsClient] = useState(false); const [isAnimating, setIsAnimating] = useState(false); const [isProcessing, setIsProcessing] = useState(false); useEffect(() => { setIsClient(true); const storedIsLiked = localStorage.getItem("websiteIsLiked"); if (storedIsLiked) { setIsLiked(storedIsLiked === "true"); } // Listen for realtime updates from Firestore const likeDocRef = doc(db, "likes", "counter"); const unsubscribe = onSnapshot(likeDocRef, (docSnap) => { if (docSnap.exists()) { const currentLikes = docSnap.data().likes; // Only update if the server value is different (prevents overwrite during optimistic update) setLikes((prev) => { const newLikes = Math.max(0, currentLikes); return newLikes; }); } }); return () => unsubscribe(); }, []); const handleLike = async () => { if (isProcessing || isLiked) return; // Optimistic Update const previousLikes = likes; setLikes((prev) => prev + 1); setIsLiked(true); setIsAnimating(true); localStorage.setItem("websiteIsLiked", "true"); // Reset animation after it finishes setTimeout(() => setIsAnimating(false), 600); try { setIsProcessing(true); const likeDocRef = doc(db, "likes", "counter"); await updateDoc(likeDocRef, { likes: increment(1), }); } catch (error) { console.error("Error updating likes:", error); // Rollback on error setLikes(previousLikes); setIsLiked(false); localStorage.removeItem("websiteIsLiked"); } finally { setIsProcessing(false); } }; if (!isClient) return null; const borderColorClass = isLiked ? "border-[var(--sec)]" : "border-[var(--white-icon)]"; return (
); }; export default LikeButton; ================================================ FILE: src/React/SkillsList.tsx ================================================ import React, { useState } from "react"; const CategoryIcons = { "Web Development": ( ), "Mobile Development": ( ), "UI/UX Design & Prototyping": ( ), }; const SkillsList = () => { const [openItem, setOpenItem] = useState(null); const skills = { "Web Development": [ "Single Page Applications (SPAs)", "Landing pages and business websites", "Portfolio websites", ], "Mobile Development": [ "Mobile-friendly web apps", "React Native mobile apps", ], "UI/UX Design & Prototyping": [ "UI design with Figma & Canva", "UX research & improvements", "Prototyping for websites & mobile apps", ], }; const toggleItem = (item: string) => { setOpenItem(openItem === item ? null : item); }; return (

What I do?

    {Object.entries(skills).map(([category, items]) => (
  • toggleItem(category)} className="md:w-[400px] w-full bg-[#1414149c] rounded-2xl text-left hover:bg-opacity-80 transition-all border border-[var(--white-icon-tr)] cursor-pointer overflow-hidden" >
    {CategoryIcons[category]}
    {category}
      {items.map((item, index) => (
      •
    • {item}
      • ))}
    • ))}
); }; export default SkillsList; ================================================ FILE: src/components/contact.astro ================================================

Let's talk

Contact

Have a question or a project in mind? Feel free to reach out.

Location: Colombia, Valle del cauca
================================================ FILE: src/components/footer.astro ================================================ --- import LikeButton from "../React/LikeButton.tsx"; const currentYear = new Date().getFullYear(); ---
{ [ { href: "https://github.com/gothsec", icon: '', label: "GitHub", }, { href: "https://linkedin.com/in/hernandezoscar-dev", icon: '', label: "LinkedIn", }, { href: "https://mail.google.com/mail/?view=cm&fs=1&to=oscarandreshernandezpineda@gmail.com&su=Hey%20Oscar!", icon: '', label: "Email", }, ].map((link) => (
)) }
{ [ { desc: "Built with", name: "Astro", icon: "/svg/astro.svg", alt: "Astro Logo", }, { desc: "Styled with", name: "TailwindCSS", icon: "/svg/tailwindcss.svg", alt: "TailwindCSS Logo", }, { desc: "Deployed on", name: "Vercel", icon: "/svg/vercel.svg", alt: "Vercel Logo", }, ].map((tech) => (
{tech.desc} {tech.alt} {tech.name}
)) }

Copyright © {currentYear} Oscar Hernandez. All rights reserved.

================================================ FILE: src/components/home.astro ================================================ --- import LetterGlitch from "../React/LetterGlitch.tsx"; import LogoWall from "../components/logoWall.astro"; import SkillsList from "../React/SkillsList.tsx"; ---

Hi, I'm Oscar Hernandez

Software
Developer

Transforming ideas into interactive and seamless digital experiences with cutting-edge frontend development.

================================================ FILE: src/components/logoWall.astro ================================================ --- const technologies = [ "astro", "vue", "react", "typeScript", "tailwindcss", "next", "nodejs", "HTML5", "CSS3", "javaScript", "git", "supabase", "mysql", "bash", ]; ---
{ [...technologies, ...technologies].map((tech, index) => (
= technologies.length ? "true" : "false"} > {tech} {tech.charAt(0).toUpperCase() + tech.slice(1)}
)) }
================================================ FILE: src/components/nav.astro ================================================ --- interface NavItem { label: string; href: string; icon: string; } const navItems: NavItem[] = [ { label: "Home", href: "#home", icon: ``, }, { label: "Projects", href: "#projects", icon: ``, }, { label: "Contact", href: "#contact", icon: ``, }, ]; ---
================================================ FILE: src/components/projects.astro ================================================ --- import { Image } from "astro:assets"; import svgl from "../../public/svgl.png"; import stockin from "../../public/stockin.png"; import moviesfordevs from "../../public/moviesfordevs.png"; import velez from "../../public/velez.png"; interface Project { title: string; image: ImageMetadata; link: string; preview: string; status: string; } const projects: Project[] = [ { title: "MoviesForDevs", image: moviesfordevs as ImageMetadata, link: "https://github.com/gothsec/MoviesForDevs", preview: "https://movies-for-devs.vercel.app", status: "Deployed", }, { title: "StockIn", image: stockin as ImageMetadata, link: "https://github.com/gothsec/stockin-demo", preview: "https://stockin-demo.vercel.app", status: "On Development", }, { title: "Svgl.app", image: svgl as ImageMetadata, link: "https://github.com/pheralb/svgl", preview: "https://svgl.app", status: "Contributor", }, { title: "Rifas Velez Web", image: velez as ImageMetadata, link: "https://github.com/Buga-Software/rifasvelez-web", preview: "https://www.rifasvelez.com", status: "Deployed", }, ]; ---

My work

Projects

{ projects.map((project) => (
{project.title}

{project.title}

{project.status}
)) }
More projects on
================================================ FILE: src/env.d.ts ================================================ /// ================================================ FILE: src/firebase.ts ================================================ import { initializeApp } from 'firebase/app'; import { getFirestore } from 'firebase/firestore'; const firebaseConfig = { apiKey: import.meta.env.FIREBASE_API_KEY, authDomain: import.meta.env.PUBLIC_FIREBASE_AUTH_DOMAIN, projectId: import.meta.env.PUBLIC_FIREBASE_PROJECT_ID, storageBucket: import.meta.env.PUBLIC_FIREBASE_STORAGE_BUCKET, messagingSenderId: import.meta.env.PUBLIC_FIREBASE_MESSAGING_SENDER_ID, appId: import.meta.env.PUBLIC_FIREBASE_APP_ID, }; const app = initializeApp(firebaseConfig); export const db = getFirestore(app); ================================================ FILE: src/layouts/Layout.astro ================================================ --- interface Props { title: string; } const { title } = Astro.props; --- {title} | Software Developer ================================================ FILE: src/pages/index.astro ================================================ --- import Layout from "@/layouts/Layout.astro"; import Nav from "@/components/nav.astro"; import Home from "@/components/home.astro"; import Projects from "@/components/projects.astro"; import Contact from "@/components/contact.astro"; import Footer from "@/components/footer.astro"; ---