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

14
src/components/Card.tsx
View File

@ -1,6 +1,7 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-regular-svg-icons' import { faEnvelope } from '@fortawesome/free-regular-svg-icons'
import { faPhone } from '@fortawesome/free-solid-svg-icons' import { faPhone } from '@fortawesome/free-solid-svg-icons'
import { faXTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
export default function Card() { export default function Card() {
return ( return (
@ -20,6 +21,19 @@ export default function Card() {
<p className="font-mono left-0.5 relative"> <p className="font-mono left-0.5 relative">
<FontAwesomeIcon icon={faPhone} /> +81 70-8909-1949 <FontAwesomeIcon icon={faPhone} /> +81 70-8909-1949
</p> </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> </div>
</div> </div>