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

init

Browse Source
This commit is contained in:
Ricocc
2025-11-06 01:12:02 +08:00
commit 2b8d1d0f1d
313 changed files with 14981 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

559
src/components/sections/Explore.astro Normal file
View File

@@ -0,0 +1,559 @@
---
import SectionHeader from "@/components/elements/SectionHeader.astro";
import Matter from "@/components/ui/Matter.astro";
import Button from "@/components/ui/Button.astro";
import Tools from "../ui/Tools.astro";
interface Props {
title?: string;
description?: string;
}
const {title, description
} = Astro.props;
---
<section class="py-8 sm:py-12 md:py-16 md:pb-12 site-container">
<div class="space-y-6 sm:space-y-8 md:space-y-8">
<SectionHeader title={title} description={description}/>
</div>
<div class="explore-content w-full relative mt-6 sm:mt-8">
<div class="explore-list w-full relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
<!-- 第一列 -->
<div class="explore-column explore-column-1 w-full flex gap-3 sm:gap-4 flex-col">
<div class="explore-item bg-bg-secondary/75 dark:bg-bg-secondary-dark relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 explore-item-1 h-[200px] sm:h-[220px] md:h-[264px]"
data-aos="fade-up-sm"
data-aos-delay="500"
data-aos-duration="600"
data-aos-once="true">
<div class="content">
<h3>Design & Code</h3>
<p>Turning ideas into beautiful, functional experiences.</p>
<!-- <div class="mt-2 btn opacity-0 transition duration-300 ease-in-out">
<Button type="disabled" url="#" size="sm">
Coming Soon
</Button>
</div> -->
</div>
<div class="absolute keyboard right-[-35%] sm:right-[-50%] md:right-[-58%] bottom-0 top-0 flex items-center self-center w-[300px] sm:w-[320px] md:w-[390px] h-auto">
<img src="/assets/tools/keyboard.png" alt="Keyboard" class="w-full h-full object-cover">
</div>
</div>
<div class="explore-item bg-bg-secondary/75 dark:bg-bg-secondary-dark relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 explore-item-2 h-[180px] sm:h-[200px]"
data-aos="fade-up-sm"
data-aos-delay="600"
data-aos-duration="600"
data-aos-once="true">
<div class="content">
<h3>Faves</h3>
<p>Picked things I'm genuinely into.</p>
</div>
<div class="explore-figure game-container absolute right-0 bottom-0 top-0 w-full h-full">
<div class="absolute game right-[-21%] bottom-0 top-0 mt-[-10%] flex items-center self-center w-auto h-[100px] sm:h-[120px] md:h-[130px] z-10" data-game="1">
<img src="/assets/tools/game/05-game-cassette.png" alt="Game Cassette 5" class="w-full h-full object-cover self-center flex">
</div>
<div class="absolute game right-[-19%] bottom-0 top-0 mt-[-5%] flex items-center self-center w-auto h-[100px] sm:h-[120px] md:h-[130px] z-20" data-game="2">
<img src="/assets/tools/game/04-game-cassette.png" alt="Game Cassette 4" class="w-full h-full object-cover self-center flex">
</div>
<div class="absolute game right-[-16%] bottom-0 top-0 mt-0 flex items-center self-center w-auto h-[100px] sm:h-[120px] md:h-[130px] z-30" data-game="3">
<img src="/assets/tools/game/03-game-cassette.png" alt="Game Cassette 3" class="w-full h-full object-cover self-center flex">
</div>
<div class="absolute game right-[-13%] bottom-0 top-0 mt-[5%] flex items-center self-center w-auto h-[100px] sm:h-[120px] md:h-[130px] z-40" data-game="4">
<img src="/assets/tools/game/02-game-cassette.png" alt="Game Cassette 2" class="w-full h-full object-cover self-center flex">
</div>
<div class="absolute game right-[-10%] bottom-0 top-0 mt-[10%] flex items-center self-center w-auto h-[100px] sm:h-[120px] md:h-[130px] z-50" data-game="5">
<img src="/assets/tools/game/01-game-cassette.png" alt="Game Cassette 1" class="w-full h-full object-cover self-center flex">
</div>
</div>
</div>
</div>
<!-- 第二列 -->
<div class="explore-column explore-column-2 w-full flex gap-3 sm:gap-4 flex-col">
<div class="explore-item bg-bg-secondary/75 dark:bg-bg-secondary-dark relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 explore-item-3 h-[180px] sm:h-[200px]"
data-aos="fade-up-sm"
data-aos-delay="700"
data-aos-duration="600"
data-aos-once="true">
<div class="content">
<h3>Writing</h3>
<p>Style guides, design notes, and quick reads.</p>
<div class="mt-2 btn opacity-0 transition duration-300 ease-in-out">
<Button url="/blog" size="sm">
Blog
</Button>
</div>
</div>
<div class="explore-figure computer absolute right-[5%] sm:right-[-10%] md:right-[-7%] bottom-[14%] w-[120px] sm:w-[130px] md:w-[148px] h-auto">
<img src="/assets/tools/retro-computer.png" alt="Explore 1" class="w-full h-full object-cover z-10 relative">
<div class="computer-screen absolute inset-0 w-[92px] sm:w-[100px] md:w-[116px] h-[76px] sm:h-[86px] md:h-[96px] top-[10.5%] left-[10%] rounded-[8px] rounded-b-[3px] overflow-hidden z-20">
<video
id="explore-computer-video"
src="/assets/tools/dreamcore.mp4"
poster="/assets/tools/dreamcore.jpg"
autoplay
loop
muted
playsinline
webkit-playsinline
preload="auto"
controlslist="nodownload noplaybackrate nofullscreen noremoteplayback"
disablepictureinpicture
class="w-full h-full object-cover"
></video>
</div>
</div>
</div>
<div class="explore-item bg-bg-secondary/75 dark:bg-bg-secondary-dark explore-item-3 relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 explore-item-4 h-[200px] sm:h-[220px] md:h-[264px]"
data-aos="fade-up-sm"
data-aos-delay="800"
data-aos-duration="600"
data-aos-once="true">
<div class="content">
<h3>My Tools</h3>
<p>Design tools I built to speed up my workflow!</p>
</div>
<div class=" explore-figure absolute machine right-[5%] sm:right-[-10%] md:right-[-7%] bottom-0 top-0 flex items-center">
<Tools />
</div>
</div>
</div>
<div class="explore-column explore-column-3 w-full col-span-1 sm:col-span-2 lg:col-span-1">
<div class="explore-item bg-bg-secondary/75 dark:bg-bg-secondary-dark explore-item-3 relative overflow-hidden rounded-xl border border-primary/15 dark:border-neutral-700/50 explore-item-5"
data-aos="fade-up-sm"
data-aos-delay="900"
data-aos-duration="600"
data-aos-once="true">
<div
class="explore-figure tool-stack-box relative rounded-xl overflow-hidden w-full h-[480px] sm:h-[400px] md:h-[480px]"
data-aos="fade-up-sm"
data-aos-delay="100"
data-aos-duration="600"
data-aos-once="true"
>
<Matter />
<div class="absolute inset-0 flex items-center justify-center text-white opacity-50">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.content{
position: absolute;
bottom: 0;
left: 0;
top: 0;
max-width: 45%;
padding-left:1rem;
padding-right:0.5rem;
display: flex;
align-items: self-start;
flex-direction: column;
justify-content: center;
transition: all 0.3s ease-in-out;
z-index: 1;
}
@media (min-width: 640px) {
.content {
max-width: 55%;
padding-left:1.25rem;
}
}
@media (min-width: 768px) {
.content {
max-width: 50%;
padding-left:1.5rem;
}
}
.content h3{
font-size: 1.25rem;
line-height: 1.1;
margin-bottom: 0.5rem;
font-family: var(--font-brand);
}
@media (min-width: 640px) {
.content h3 {
font-size: 1.5rem;
}
}
@media (min-width: 768px) {
.content h3 {
font-size: 1.75rem;
}
}
.content p{
font-size: 0.75rem;
line-height: 1.3;
font-weight: 400;
color: var(--color-neutral-400);
margin-bottom: 0;
}
.html .dark .content p{
color: var(--color-neutral-300);
}
@media (min-width: 640px) {
.content p {
font-size: 0.8125rem;
}
}
@media (min-width: 768px) {
.content p {
font-size: 0.875rem;
}
}
.explore-item{
position: relative;
border-radius: 1rem;
overflow: hidden;
cursor: pointer;
display: flex;
justify-content: start;
align-items: center;
}
.explore-item:hover .btn{
opacity: 1;
}
@media (min-width: 768px) {
.explore-item-1:hover .keyboard{
right: -48%;
}
.explore-item-3:hover .computer{
right: 5%;
}
.explore-item-4:hover .machine{
right: 5%;
}
}
@media (max-width: 767px) {
.explore-item-1:hover .keyboard{
right: -70%;
}
.explore-item-3:hover .computer{
right: -5%;
}
.explore-item-4:hover .machine{
right: -5%;
}
}
@media (max-width: 767px) {
.machine{
transform: scale(0.9);
}
}
.computer{
cursor: pointer;
transition: all .5s ease-in-out;
z-index: 10;
}
.keyboard,.game,.machine{
cursor: pointer;
transition: all .5s ease-in-out;
z-index: 10;
}
.game-container {
perspective: 1000px;
overflow: visible !important;
}
.explore-figure{
z-index: 50;
}
.explore-item-2 {
overflow: hidden;
}
.explore-column-1 {
overflow: visible;
}
.explore-list {
overflow: visible;
}
.explore-content {
overflow: visible;
}
.explore-item-2 .game {
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (min-width: 768px) {
.explore-item-2:hover .game[data-game="1"] {
right: 8%;
transform: translateX(0) scale(1.0);
z-index: 10;
}
.explore-item-2:hover .game[data-game="2"] {
right: 17%;
transform: translateX(0) scale(1.02);
z-index: 20;
}
.explore-item-2:hover .game[data-game="3"] {
right: 26%;
transform: translateX(0) scale(1.05);
z-index: 30;
}
.explore-item-2:hover .game[data-game="4"] {
right: 35%;
transform: translateX(0) scale(1.02);
z-index: 40;
}
.explore-item-2:hover .game[data-game="5"] {
right: 42%;
transform: translateX(0) scale(1.0);
z-index: 50;
}
}
@media (max-width: 767px) {
.explore-item-2:hover .game[data-game="1"] {
right: 0%;
transform: translateX(0) scale(0.95);
z-index: 10;
}
.explore-item-2:hover .game[data-game="2"] {
right: 10%;
transform: translateX(0) scale(0.97);
z-index: 20;
}
.explore-item-2:hover .game[data-game="3"] {
right: 20%;
transform: translateX(0) scale(1.0);
z-index: 30;
}
.explore-item-2:hover .game[data-game="4"] {
right: 30%;
transform: translateX(0) scale(0.97);
z-index: 40;
}
.explore-item-2:hover .game[data-game="5"] {
right: 40%;
transform: translateX(0) scale(0.95);
z-index: 50;
}
}
.explore-item-2 .game:hover {
transform: scale(1.1) !important;
z-index: 100 !important;
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25));
transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.explore-item-2 .game:active {
transform: scale(0.9) !important;
transition: all 0.1s ease;
}
@media (hover: none) {
.explore-item-2 .game {
transform: scale(0.9);
}
.explore-item-2 .game[data-game="1"] {
right: 0%;
z-index: 10;
}
.explore-item-2 .game[data-game="2"] {
right: 10%;
z-index: 20;
}
.explore-item-2 .game[data-game="3"] {
right: 20%;
z-index: 30;
}
.explore-item-2 .game[data-game="4"] {
right: 30%;
z-index: 40;
}
.explore-item-2 .game[data-game="5"] {
right: 40%;
z-index: 50;
}
}
</style>
<script is:inline>
(() => {
const videoId = 'explore-computer-video';
const video = document.getElementById(videoId);
if (!video || !(video instanceof HTMLVideoElement)) return;
let isPlaying = false;
let observer = null;
let playAttempts = 0;
const MAX_PLAY_ATTEMPTS = 3;
video.muted = true;
video.playsInline = true;
video.setAttribute('playsinline', '');
video.setAttribute('webkit-playsinline', '');
video.removeAttribute('controls');
function tryPlay() {
if (isPlaying || playAttempts >= MAX_PLAY_ATTEMPTS) return;
playAttempts++;
const playPromise = video.play();
if (playPromise !== undefined) {
playPromise
.then(() => {
isPlaying = true;
playAttempts = 0; // 成功后重置计数
console.log('Video started playing successfully');
})
.catch((error) => {
isPlaying = false;
console.debug(`Video autoplay attempt ${playAttempts} failed:`, error.name);
// 如果是用户交互问题，等待用户交互后重试
if (error.name === 'NotAllowedError') {
handleUserInteraction();
}
});
}
}
function handleUserInteraction() {
const interactionEvents = ['touchstart', 'click', 'scroll'];
function onInteraction() {
tryPlay();
interactionEvents.forEach(event => {
document.removeEventListener(event, onInteraction);
});
}
interactionEvents.forEach(event => {
document.addEventListener(event, onInteraction, { once: true, passive: true });
});
}
function setupIntersectionObserver() {
observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
if (video.paused) {
playAttempts = 0; // reset count
tryPlay();
}
} else {
// leave viewport, pause to save resources
if (!video.paused) {
video.pause();
isPlaying = false;
}
}
});
},
{
root: null,
rootMargin: '50px', // preload
threshold: 0.1
}
);
observer.observe(video);
}
/**
* Handle page visibility changes
*/
function handleVisibilityChange() {
if (!document.hidden && !video.paused) {
// Page is visible again and video should play
const rect = video.getBoundingClientRect();
const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
if (isInViewport) {
playAttempts = 0;
tryPlay();
}
}
}
// Initialize
function init() {
// Wait for video metadata to load
if (video.readyState >= 2) {
// HAVE_CURRENT_DATA
tryPlay();
} else {
video.addEventListener('loadeddata', tryPlay, { once: true });
}
// Setup viewport observer
setupIntersectionObserver();
// Listen for page visibility changes
document.addEventListener('visibilitychange', handleVisibilityChange);
// Special handling for mobile devices
if (/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
console.log('Mobile device detected, setting up additional handlers');
handleUserInteraction();
}
}
// Start
init();
})();
</script>