First draft of SelectedProjects.astro with SVG icons for project status indicators.

This commit is contained in:
lei10003 2025-07-21 16:02:17 +02:00
parent f2ee1bf011
commit 0fc50a99ac
23 changed files with 15936 additions and 0 deletions

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# 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/

4
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,4 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

1
SVG/ligea-landing-v1.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.8 KiB

9
astro.config.mjs Normal file
View File

@ -0,0 +1,9 @@
// @ts-check
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import svelte from "@astrojs/svelte";
export default defineConfig({
integrations: [tailwind(), svelte()],
});

1502
ligea-portfolio-keys.ai Normal file

File diff suppressed because one or more lines are too long

7051
package-lock 2.json Normal file

File diff suppressed because it is too large Load Diff

7057
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

23
package.json Normal file
View File

@ -0,0 +1,23 @@
{
"name": "ligea-portfolio-keys",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/svelte": "^7.1.0",
"@astrojs/tailwind": "^6.0.2",
"@tailwindcss/vite": "^4.1.11",
"astro": "^5.10.1",
"gsap": "^3.13.0"
},
"devDependencies": {
"autoprefixer": "^10.4.21",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.17"
}
}

9
public/favicon.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>

After

Width:  |  Height:  |  Size: 749 B

1
src/assets/astro.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,6 @@
---
---
<section class="min-h-screen px-6 py-24 bg-yellow-50 text-gray-900">
<h2 class="text-4xl font-bold mb-6 text-center">Lets Work Together</h2>
<p class="text-center text-lg text-gray-600">Have a project in mind? Reach out.</p>
</section>

35
src/components/Hero.astro Normal file
View File

@ -0,0 +1,35 @@
---
---
<section class="nav-bar">
<div class="container mx-auto py-4 flex justify-start items-center py-4">
<nav class="space-x-4">
<a href="#work" class="text-gray-700 hover:text-gray-900">Work</a>
<a href="#services" class="text-gray-700 hover:text-gray-900">Services</a>
<a href="#about" class="text-gray-700 hover:text-gray-900">About</a>
<a href="#contact" class="text-gray-700 hover:text-gray-900">Contact</a>
</nav>
</div>
</section>
<section class="relative min-h-screen flex flex-col justify-center items-center bg-white px-6">
<!-- Name -->
<h1 class="text-6xl md:text-7xl font-black tracking-tight text-gray-900 mb-4">
Ligea
</h1>
<!-- Placeholder for keychain animation -->
<div class="w-48 h-48 bg-slate-200 rounded-full mb-6 animate-pulse">
<!-- Later: Animated keychain on the "g" -->
<span class="sr-only">Keychain animation placeholder</span>
</div>
<!-- Intro Paragraph -->
<p class="max-w-xl text-center text-lg text-gray-700 leading-relaxed">
I am Ligea Alexander, a data visualization and interactive design specialist who blends technical expertise, storytelling, and aesthetic intuition to make complex data accessible, engaging, and impactful. Im here to craft experiences that land emotionally, flow structurally, and spark discovery.
</p>
<!-- Scroll cue -->
<div class="absolute bottom-8 text-gray-400 animate-bounce">
↓ scroll
</div>
</section>

View File

@ -0,0 +1,63 @@
<script>
import { onMount, tick } from 'svelte';
import gsap from 'gsap';
let showHero = false;
onMount(async () => {
// Lock scroll
document.body.style.overflow = 'hidden';
// Wait until DOM is ready
await tick();
const tl = gsap.timeline({
onComplete: () => {
document.body.style.overflow = '';
showHero = true;
}
});
tl.from(".ligea", {
duration: 4,
opacity: 0,
y: 50,
ease: "power2.out"
});
tl.from(".keychain", {
duration: 3,
opacity: 0,
scale: 0.8,
ease: "back.out(1.7)"
}, "-=1.0");
gsap.to(".keychain", {
rotate: 2,
yoyo: true,
repeat: -1,
duration: 1.6,
ease: "sine.inOut"
});
});
</script>
<style>
.landing {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
}
</style>
{#if !showHero}
<section class="landing">
<h1 class="ligea text-5xl font-bold">Ligea</h1>
<div class="keychain mt-4">🔑</div>
</section>
{:else}
<slot />
{/if}

View File

@ -0,0 +1,51 @@
---
---
<section class="w-full px-6 py-8 bg-neutral-50 text-gray-900">
<h2 class="text-4xl font-bold mb-8 text-center">Selected Projects</h2>
<div class="w-full">
<table class="w-full divide-y divide-gray-200 text-sm">
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800">John Brown</td>
<td class="px-6 py-4 text-right">
<svg class="w-32 h-7 ml-auto" viewBox="0 0 115 25">
<circle cx="17.5" cy="12.5" r="12.5" fill="#3b82f6" />
<text x="17.5" y="16" text-anchor="middle" fill="white" font-size="9" font-weight="bold">1</text>
<circle cx="47.5" cy="12.5" r="12.5" fill="#10b981" />
<text x="47.5" y="16" text-anchor="middle" fill="white" font-size="9" font-weight="bold">2</text>
<circle cx="77.5" cy="12.5" r="12.5" fill="#f59e0b" />
<text x="77.5" y="16" text-anchor="middle" fill="white" font-size="9" font-weight="bold">3</text>
</svg>
</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800">Jane Smith</td>
<td class="px-6 py-4 text-right">
<svg class="w-32 h-7 ml-auto" viewBox="0 0 115 25">
<circle cx="17.5" cy="12.5" r="12.5" fill="#3b82f6" />
<text x="17.5" y="16" text-anchor="middle" fill="white" font-size="9" font-weight="bold">A</text>
<circle cx="47.5" cy="12.5" r="12.5" fill="#10b981" />
<text x="47.5" y="16" text-anchor="middle" fill="white" font-size="9" font-weight="bold">B</text>
<circle cx="77.5" cy="12.5" r="12.5" fill="#f59e0b" />
<text x="77.5" y="16" text-anchor="middle" fill="white" font-size="9" font-weight="bold">C</text>
</svg>
</td>
</tr>
<tr class="hover:bg-gray-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800">Mike Johnson</td>
<td class="px-6 py-4 text-right">
<svg class="w-32 h-7 ml-auto" viewBox="0 0 115 25">
<circle cx="17.5" cy="12.5" r="12.5" fill="#3b82f6" />
<text x="17.5" y="16" text-anchor="middle" fill="white" font-size="9" font-weight="bold">X</text>
<circle cx="47.5" cy="12.5" r="12.5" fill="#10b981" />
<text x="47.5" y="16" text-anchor="middle" fill="white" font-size="9" font-weight="bold">Y</text>
<circle cx="77.5" cy="12.5" r="12.5" fill="#f59e0b" />
<text x="77.5" y="16" text-anchor="middle" fill="white" font-size="9" font-weight="bold">Z</text>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
</section>

View File

@ -0,0 +1,6 @@
---
---
<section class="min-h-screen px-6 py-24 bg-white text-gray-900">
<h2 class="text-4xl font-bold mb-6 text-center">Services</h2>
<p class="text-center text-lg text-gray-600">Interactive card system coming soon…</p>
</section>

View File

@ -0,0 +1,6 @@
---
---
<section class="min-h-screen px-6 py-24 bg-neutral-100 text-gray-900">
<h2 class="text-4xl font-bold mb-6 text-center">What People Say</h2>
<p class="text-center text-lg text-gray-600">Testimonials will live here soon…</p>
</section>

View File

@ -0,0 +1,16 @@
---
import '../styles/global.css';
const { title = "Ligea Alexander" } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>

18
src/pages/index.astro Normal file
View File

@ -0,0 +1,18 @@
---
import Layout from '../layouts/BaseLayout.astro';
import LandingIsland from '../components/LandingIsland.svelte';
import Hero from '../components/Hero.astro';
import SelectedProjects from '../components/SelectedProjects.astro';
import Services from '../components/Services.astro';
import Testimonials from '../components/Testimonials.astro';
import Contact from '../components/Contact.astro';
---
<Layout title="Ligea Alexander">
<Hero />
<SelectedProjects />
<Services />
<Testimonials />
<Contact />
</Layout>

29
src/styles/global.css Normal file
View File

@ -0,0 +1,29 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
transition: overflow 0.5s ease-in-out;
}
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-out {
animation: fadeOut 1s ease forwards;
}
@keyframes fadeOut {
to {
opacity: 0;
transform: translateY(-50px);
}
}

8
tailwind.config.js Normal file
View File

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{html,js,astro,svelte}"],
theme: {
extend: {},
},
plugins: [],
};

5
tsconfig.json Normal file
View File

@ -0,0 +1,5 @@
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"]
}