This commit is contained in:
parent
8370a401e7
commit
f58baba8c0
|
|
@ -22,3 +22,4 @@ dist-ssr
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
yarn.lock
|
||||
|
|
|
|||
|
|
@ -2,14 +2,18 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="https://cdn.nofated.win/mc" />
|
||||
<!--link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
||||
/ -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.sourcegcdn.com/css?family=Overpass+Mono&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Nofated • Home</title>
|
||||
<title>Home · Nofated</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
33
src/App.tsx
33
src/App.tsx
|
|
@ -3,18 +3,18 @@ import Container from '@mui/material/Container';
|
|||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
import Link from '@mui/material/Link';
|
||||
import ProTip from './ProTip';
|
||||
import Grid from '@mui/material/Unstable_Grid2';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Tabs from './Tabs';
|
||||
|
||||
function Copyright() {
|
||||
return (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary" align="center">
|
||||
{'Copyright © '}
|
||||
<Link color="inherit" href="https://github.com/Nofated095">
|
||||
<Link color="inherit" href="https://nof.moe">
|
||||
Nofated
|
||||
</Link>{' '}
|
||||
{new Date().getFullYear()}
|
||||
{'.'}
|
||||
{new Date().getFullYear()}.
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
|
@ -23,12 +23,23 @@ export default function App() {
|
|||
return (
|
||||
<Container maxWidth="sm">
|
||||
<Box sx={{ my: 4 }}>
|
||||
<Container component="main" sx={{ mt: 8, mb: 2 }} maxWidth="sm">
|
||||
<Typography variant="h2" component="h1" gutterBottom>
|
||||
Nofated
|
||||
</Typography>
|
||||
<Typography variant="body1">Forever you will be in my heart.</Typography>
|
||||
</Container>
|
||||
<Grid container spacing={2}>
|
||||
<Grid xs={4}>
|
||||
{/* <img
|
||||
src={`https://cdn.nofated.win/avatarsoss`}
|
||||
srcSet={`https://cdn.nofated.win/avatarsoss`}
|
||||
alt={'Avatar'}
|
||||
loading="lazy"
|
||||
width={128}
|
||||
/> */}
|
||||
<Avatar alt="Nofated" src="https://cdn.nofated.win/avatarsoss" sx={{ width: 128, height: 128 }} />
|
||||
</Grid>
|
||||
<Grid xs={8}>
|
||||
<Typography variant="h4" component="h1" gutterBottom>
|
||||
Nofated
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Tabs />
|
||||
<Copyright />
|
||||
</Box>
|
||||
|
|
|
|||
144
src/Tabs.tsx
144
src/Tabs.tsx
|
|
@ -3,87 +3,91 @@ import Tabs from '@mui/material/Tabs';
|
|||
import Tab from '@mui/material/Tab';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
import GitHubIcon from '@mui/icons-material/GitHub';
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
index: number;
|
||||
value: number;
|
||||
children?: React.ReactNode;
|
||||
index: number;
|
||||
value: number;
|
||||
}
|
||||
|
||||
function TabPanel(props: TabPanelProps) {
|
||||
const { children, value, index, ...other } = props;
|
||||
const { children, value, index, ...other } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="tabpanel"
|
||||
hidden={value !== index}
|
||||
id={`simple-tabpanel-${index}`}
|
||||
aria-labelledby={`simple-tab-${index}`}
|
||||
{...other}
|
||||
>
|
||||
{value === index && (
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Typography>{children}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
role="tabpanel"
|
||||
hidden={value !== index}
|
||||
id={`simple-tabpanel-${index}`}
|
||||
aria-labelledby={`simple-tab-${index}`}
|
||||
{...other}
|
||||
>
|
||||
{value === index && (
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Typography>{children}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function a11yProps(index: number) {
|
||||
return {
|
||||
id: `simple-tab-${index}`,
|
||||
'aria-controls': `simple-tabpanel-${index}`,
|
||||
};
|
||||
return {
|
||||
id: `simple-tab-${index}`,
|
||||
'aria-controls': `simple-tabpanel-${index}`,
|
||||
};
|
||||
}
|
||||
|
||||
export default function BasicTabs() {
|
||||
const [value, setValue] = React.useState(0);
|
||||
const [value, setValue] = React.useState(0);
|
||||
|
||||
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
|
||||
<Tab label="Home" {...a11yProps(0)} />
|
||||
<Tab label="About" {...a11yProps(1)} />
|
||||
<Tab label="Link" {...a11yProps(2)} />
|
||||
</Tabs>
|
||||
</Box>
|
||||
<TabPanel value={value} index={0}>
|
||||
<Typography variant="h5" component="h5" gutterBottom>
|
||||
<strong>Yoo!</strong>
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
I'm Nofated. I am a newbie in the coding world.
|
||||
</Typography>
|
||||
<Typography variant="h5" component="h5" gutterBottom>
|
||||
<strong>Misc</strong>
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
🏫 I am a student who lives in Beijing, China.<br />
|
||||
📒️ I have a blog based on the Hexo.<br />
|
||||
⌨️ Coding and open-source are great! Though I haven not learnt any languages...<br />
|
||||
🏢 I am a member of LittleSkin Community Support . I help maintain the bot and manual.<br />
|
||||
🚔 I am a fan of Minecraft, Grand Theft Auto, and anime.
|
||||
</Typography>
|
||||
</TabPanel>
|
||||
<TabPanel value={value} index={1}>
|
||||
<Typography variant="h5" component="h5" gutterBottom>
|
||||
<strong>About</strong>
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
I am in senior high and I am preparing for the Chinese College Entrance Examination, aka GaoKao.<br />
|
||||
I do open-source works, you can check them on GitHub. But I did not have a completely independent open-source project.😢
|
||||
<br />I am happy to chat. Chinese is OK but I am very poor at English listening and speaking.😰<br />
|
||||
</Typography>
|
||||
</TabPanel>
|
||||
<TabPanel value={value} index={2}>
|
||||
Link here! qwq
|
||||
</TabPanel>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
|
||||
<Tab label="Home" {...a11yProps(0)} />
|
||||
<Tab label="About" {...a11yProps(1)} />
|
||||
<Tab label="Blog" href="https://blog.nofated.win" />
|
||||
</Tabs>
|
||||
</Box>
|
||||
<TabPanel value={value} index={0}>
|
||||
<Box sx={{ my: 1 }}>
|
||||
<Typography variant="h5" component="h2" gutterBottom>
|
||||
Yoo!
|
||||
</Typography>
|
||||
I'm Nofated. I am a newbie in the coding world.<br />
|
||||
Find me on <GitHubIcon>GitHub</GitHubIcon>;GitHub, Twitter and Telegram.
|
||||
</Box>
|
||||
<Box sx={{ my: 1 }}>
|
||||
<Typography variant="h5" component="h2" gutterBottom>
|
||||
Misc
|
||||
</Typography>
|
||||
🏫 I am a student who lives in Beijing, China.<br />
|
||||
📒️ I have a blog based on the Hexo.<br />
|
||||
⌨️ Coding and open-source are great! Though I haven't learnt any languages...<br />
|
||||
🏢 I am a member of LittleSkin Community Support . I help maintain the bot and manual.<br />
|
||||
🚔 I am a fan of Minecraft, Grand Theft Auto, and anime.<br />
|
||||
</Box>
|
||||
</TabPanel>
|
||||
<TabPanel value={value} index={1}>
|
||||
<Box sx={{ my: 1 }}>
|
||||
<Typography variant="h5" component="h2" gutterBottom>
|
||||
About
|
||||
</Typography>
|
||||
I am in senior high and I'm preparing for the Chinese College Entrance Examination, aka GaoKao.<br />
|
||||
|
||||
I do open-source works, you can check them on GitHub. But I didn't have a completely independent open-source project.😢<br />
|
||||
|
||||
I am happy to chat. Chinese is OK but I am very poor at English listening and speaking.😰<br />
|
||||
</Box>
|
||||
</TabPanel>
|
||||
<TabPanel value={value} index={2}>
|
||||
Redirecting...
|
||||
</TabPanel>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -14,6 +14,21 @@ const theme = createTheme({
|
|||
main: red.A400,
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
fontFamily: [
|
||||
'Overpass Mono',
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'"Segoe UI"',
|
||||
'Roboto',
|
||||
'"Helvetica Neue"',
|
||||
'Arial',
|
||||
'sans-serif',
|
||||
'"Apple Color Emoji"',
|
||||
'"Segoe UI Emoji"',
|
||||
'"Segoe UI Symbol"',
|
||||
].join(','),
|
||||
},
|
||||
});
|
||||
|
||||
export default theme;
|
||||
|
|
|
|||
Loading…
Reference in New Issue