yudejp/yude.jp
1
0
Fork 0
mirror of https://github.com/yudejp/yude.jp.git synced 2025-05-10 14:08:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update responsive behaviour

Browse Source
This commit is contained in:
Sumire Isshiki 2024-01-22 18:43:54 +09:00
parent d3701ba28a
commit 0cdb322227
2 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.tsx
View File

@ -1,6 +1,6 @@
import Card from "./components/Card"
import Profile from "./components/Profile"
import Works from "./components/Works"
import Links from "./components/Links"
import { useState, useEffect } from 'react';
@ -43,21 +43,21 @@ export default function App() {
}, []);
return (
<>
<div className={`sticky top-0 -z-10 h-screen absolute`} style={{ opacity: cardOpacity }}>
<div id="card" className="fixed w-full z-10 bg-neutral-900 py-5" style={{ top: `${cardY}px` }}>
<div className="flex justify-center">
<div className={`sticky top-0 h-screen absolute`} style={{ opacity: cardOpacity }}>
<div id="card" className="fixed bg-neutral-900 py-5 -ml-40 -mt-20" style={{ top: `${cardY}px` }}>
<Card />
</div>
</div>
<div id="content" className="absolute z-10 text-white m-auto left-0 right-0 max-w-6xl p-5" style={{ top: `${contentY}px`}}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5 w-full">
<Profile />
<Works />
</div>
<div id="content" className="absolute text-white max-w-6xl" style={{ top: `${contentY}px`}}>
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-5 w-full">
<Profile />
<Links />
</div>
<div className="text-center text-gray-500">&copy; 2024 yude</div>
<div className="text-center text-gray-500">&copy; 2024 yude</div>
</div>
</>
</div>
)
}

14
src/components/Card.tsx
View File

@ -1,6 +1,7 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-regular-svg-icons'
import { faPhone } from '@fortawesome/free-solid-svg-icons'
import { faXTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
export default function Card() {
return (
@ -20,6 +21,19 @@ export default function Card() {
<p className="font-mono left-0.5 relative">
<FontAwesomeIcon icon={faPhone} /> +81 70-8909-1949
</p>
<p className="font-mono left-0.5 relative">
<a href="https://x.com/yude_jp">
<FontAwesomeIcon icon={faXTwitter} /> @yude_jp
</a>
</p>
<p className="font-mono left-0.5 relative">
<FontAwesomeIcon icon={faDiscord} /> <span className="-ml-1">yude</span>
</p>
<p className="font-mono left-0.5 relative">
<a href="https://github.com/yude">
<FontAwesomeIcon icon={faGithub} /> yude
</a>
</p>
</div>
</div>
</div>