Skip to content

Commit 4f5acba

Browse files
vyckeyvyckey
committed
update home page
1 parent b98b85e commit 4f5acba

File tree

2 files changed

+324
-17
lines changed

2 files changed

+324
-17
lines changed

‎src/App.css‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,207 @@
3232
from {
3333
transform: rotate(0deg);
3434
}
35+
3536
to {
3637
transform: rotate(360deg);
3738
}
3839
}
40+
41+
/* Bright Homepage Styles */
42+
.bright-homepage {
43+
min-height: 100vh;
44+
background-color: #f0f2f5;
45+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
46+
}
47+
48+
.bright-header {
49+
display: flex;
50+
align-items: center;
51+
padding: 0 24px;
52+
background-color: #fff;
53+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
54+
position: sticky;
55+
top: 0;
56+
z-index: 100;
57+
}
58+
59+
.logo {
60+
margin-right: 24px;
61+
}
62+
63+
.nav-icons {
64+
display: flex;
65+
align-items: center;
66+
}
67+
68+
.nav-icon-button {
69+
font-size: 18px;
70+
margin-left: 12px;
71+
color: #1890ff;
72+
}
73+
74+
.nav-icon-button:hover {
75+
color: #40a9ff;
76+
}
77+
78+
.bright-content {
79+
padding: 24px;
80+
max-width: 1200px;
81+
margin: 0 auto;
82+
width: 100%;
83+
}
84+
85+
/* Terminal Styles */
86+
.terminal-container {
87+
background-color: #1e1e1e;
88+
border-radius: 8px;
89+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
90+
margin: 24px 0;
91+
overflow: hidden;
92+
font-family: 'Courier New', monospace;
93+
}
94+
95+
.terminal-header {
96+
background-color: #333;
97+
padding: 8px 12px;
98+
display: flex;
99+
align-items: center;
100+
}
101+
102+
.terminal-dots {
103+
display: flex;
104+
margin-right: 12px;
105+
}
106+
107+
.dot {
108+
width: 12px;
109+
height: 12px;
110+
border-radius: 50%;
111+
margin-right: 6px;
112+
}
113+
114+
.dot.red {
115+
background-color: #ff5f56;
116+
}
117+
118+
.dot.yellow {
119+
background-color: #ffbd2e;
120+
}
121+
122+
.dot.green {
123+
background-color: #27c93f;
124+
}
125+
126+
.terminal-title {
127+
color: #aaa;
128+
font-size: 14px;
129+
flex: 1;
130+
text-align: center;
131+
}
132+
133+
.terminal-body {
134+
padding: 20px;
135+
color: #ccc;
136+
line-height: 1.5;
137+
font-size: 16px;
138+
text-align: left;
139+
min-height: 400px;
140+
}
141+
142+
.terminal-line {
143+
margin-bottom: 12px;
144+
display: flex;
145+
align-items: baseline;
146+
justify-content: flex-start;
147+
}
148+
149+
.prompt {
150+
color: #4caf50;
151+
font-size: 16px;
152+
margin-right: 12px;
153+
white-space: nowrap;
154+
flex-shrink: 0;
155+
}
156+
157+
.command {
158+
color: #fff;
159+
font-size: 16px;
160+
}
161+
162+
.terminal-response {
163+
color: #ccc;
164+
margin: 0 0 16px 0;
165+
text-align: left;
166+
}
167+
168+
.terminal-response p {
169+
margin: 8px 0;
170+
font-size: 16px;
171+
}
172+
173+
.cursor {
174+
color: #fff;
175+
animation: blink 1s infinite;
176+
display: inline-block;
177+
width: 8px;
178+
height: 16px;
179+
background-color: #fff;
180+
vertical-align: middle;
181+
margin-left: 2px;
182+
}
183+
184+
@keyframes blink {
185+
186+
0%,
187+
100% {
188+
opacity: 1;
189+
}
190+
191+
50% {
192+
opacity: 0;
193+
}
194+
}
195+
196+
/* Contact Section */
197+
.contact-section {
198+
margin: 48px 0;
199+
}
200+
201+
.contact-buttons {
202+
display: flex;
203+
justify-content: center;
204+
margin-top: 24px;
205+
}
206+
207+
.contact-button {
208+
background-color: #fff;
209+
border: 1px solid #d9d9d9;
210+
border-radius: 8px;
211+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
212+
transition: all 0.3s;
213+
}
214+
215+
.contact-button:hover {
216+
transform: translateY(-4px);
217+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
218+
border-color: #1890ff;
219+
}
220+
221+
.contact-button .anticon {
222+
margin-right: 8px;
223+
}
224+
225+
/* Footer */
226+
.bright-footer {
227+
background-color: #fff;
228+
border-top: 1px solid #d9d9d9;
229+
padding: 24px 0;
230+
text-align: center;
231+
margin-top: 48px;
232+
}
233+
234+
.footer-content {
235+
max-width: 1200px;
236+
margin: 0 auto;
237+
padding: 0 24px;
238+
}

‎src/pages/Homepage.tsx‎

Lines changed: 124 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,131 @@
1-
import logo from '../logo.svg';
1+
import React, { useState, useEffect } from 'react';
2+
import { Button, Typography, Layout, Menu } from 'antd';
3+
import {
4+
GithubOutlined,
5+
MailOutlined,
6+
HomeOutlined,
7+
ToolOutlined,
8+
} from '@ant-design/icons';
29
import '../App.css';
10+
import { useNavigate } from 'react-router-dom';
11+
12+
const { Title, Paragraph } = Typography;
13+
const { Header, Footer, Content } = Layout;
314

415
function Homepage() {
16+
const navigate = useNavigate();
17+
const [currentTime, setCurrentTime] = useState(new Date());
18+
19+
useEffect(() => {
20+
// Update time every second
21+
const timer = setInterval(() => {
22+
setCurrentTime(new Date());
23+
}, 1000);
24+
25+
return () => {
26+
clearInterval(timer);
27+
};
28+
}, []);
29+
30+
const menuItems = [
31+
{
32+
key: 'home',
33+
label: 'HomePage',
34+
icon: <HomeOutlined />,
35+
},
36+
{
37+
key: 'tools',
38+
label: 'Developer Tools',
39+
icon: <ToolOutlined />,
40+
},
41+
];
42+
43+
const onClickMenu: import('antd').MenuProps['onClick'] = (e) => {
44+
if (e.key === 'home') {
45+
navigate('/');
46+
} else {
47+
navigate(`/tools/timestamp`);
48+
}
49+
};
50+
551
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer">
17-
Learn React
18-
</a>
19-
</header>
20-
</div>
52+
<Layout className='bright-homepage'>
53+
{/* Navigation Bar */}
54+
<Header className='bright-header'>
55+
<div className='logo'>
56+
<Title level={3} style={{ color: '#1890ff', margin: 0 }}>VYCKEY</Title>
57+
</div>
58+
<Menu
59+
theme='light'
60+
mode='horizontal'
61+
items={menuItems}
62+
onClick={onClickMenu}
63+
selectedKeys={['home']}
64+
style={{ flex: 1, minWidth: 0 }}
65+
/>
66+
<div className='nav-icons'>
67+
<Button
68+
type='text'
69+
icon={<GithubOutlined />}
70+
href='https://github.com/vyckey'
71+
target='_blank'
72+
className='nav-icon-button'
73+
/>
74+
<Button
75+
type='text'
76+
icon={<MailOutlined />}
77+
href='mailto:vyckey@qq.com'
78+
className='nav-icon-button'
79+
/>
80+
</div>
81+
</Header>
82+
83+
{/* Main Content */}
84+
<Content className='bright-content'>
85+
<div className='terminal-container'>
86+
<div className='terminal-header'>
87+
<div className='terminal-dots'>
88+
<span className='dot red'></span>
89+
<span className='dot yellow'></span>
90+
<span className='dot green'></span>
91+
</div>
92+
<div className='terminal-title'>vyckey@profile: ~</div>
93+
</div>
94+
<div className='terminal-body'>
95+
<div className='terminal-line'>
96+
<span className='prompt'>vyckey@developer:~$</span>
97+
<span className='command'>cat about.txt</span>
98+
</div>
99+
<div className='terminal-response'>
100+
<p>Hello! I&apos;m a passionate Full Stack Developer and Cyber Security Enthusiast.</p>
101+
<p>I specialize in creating efficient, secure, and innovative web applications using modern technologies.</p>
102+
<p>My expertise includes React, TypeScript, Node.js, and various security practices.</p>
103+
</div>
104+
<div className='terminal-line'>
105+
<span className='prompt'>vyckey@developer:~$</span>
106+
<span className='command'>cat mission.txt</span>
107+
</div>
108+
<div className='terminal-response'>
109+
<p>Building secure, efficient, and innovative applications that make a positive impact on the world.</p>
110+
</div>
111+
<div className='terminal-line'>
112+
<span className='prompt'>vyckey@developer:~$</span>
113+
<span className='cursor'>_</span>
114+
</div>
115+
</div>
116+
</div>
117+
</Content>
118+
119+
{/* Footer */}
120+
<Footer className='bright-footer'>
121+
<div className='footer-content'>
122+
<Paragraph style={{ margin: 0 }}>
123+
© {new Date().getFullYear()} Vyckey. Building the future with code | {currentTime.toLocaleString()}
124+
</Paragraph>
125+
</div>
126+
</Footer>
127+
</Layout>
21128
);
22129
}
23130

24-
export default Homepage;
131+
export default Homepage;

0 commit comments

Comments
 (0)