Skip to content

Create minimalist personal website with responsive design #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
+238 −0
Draft

Create minimalist personal website with responsive design #1

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da8e082
Initial plan
Copilot Oct 3, 2025
383a823
Create minimalist personal website with responsive design
Copilot Oct 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
238 changes: 238 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Cong Sun - Personal Website">
<title>Cong Sun</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--bg-color: #ffffff;
--text-color: #2c3e50;
--accent-color: #3498db;
--secondary-color: #7f8c8d;
--border-color: #ecf0f1;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}

header {
margin-bottom: 60px;
padding-bottom: 30px;
border-bottom: 1px solid var(--border-color);
}

h1 {
font-size: 2.5em;
font-weight: 600;
margin-bottom: 10px;
color: var(--text-color);
}

.subtitle {
font-size: 1.2em;
color: var(--secondary-color);
margin-bottom: 20px;
}

section {
margin-bottom: 50px;
}

h2 {
font-size: 1.8em;
font-weight: 500;
margin-bottom: 20px;
color: var(--text-color);
}

p {
margin-bottom: 15px;
color: var(--text-color);
}

.contact-links {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
}

.contact-links a {
color: var(--accent-color);
text-decoration: none;
padding: 8px 16px;
border: 1px solid var(--accent-color);
border-radius: 4px;
transition: all 0.3s ease;
}

.contact-links a:hover {
background-color: var(--accent-color);
color: white;
}

.experience-item,
.education-item {
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid var(--border-color);
}

.experience-item:last-child,
.education-item:last-child {
border-bottom: none;
}

.item-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
margin-bottom: 10px;
}

.item-title {
font-weight: 600;
font-size: 1.1em;
color: var(--text-color);
}

.item-date {
color: var(--secondary-color);
font-size: 0.9em;
}

.item-subtitle {
color: var(--secondary-color);
margin-bottom: 10px;
}

.skills-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
}

.skills-list li {
background-color: var(--border-color);
padding: 6px 14px;
border-radius: 20px;
font-size: 0.9em;
}

footer {
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid var(--border-color);
text-align: center;
color: var(--secondary-color);
font-size: 0.9em;
}

@media (max-width: 600px) {
body {
padding: 20px 15px;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.5em;
}

.item-header {
flex-direction: column;
align-items: flex-start;
}

.contact-links {
flex-direction: column;
}

.contact-links a {
text-align: center;
}
}
</style>
</head>
<body>
<header>
<h1>Cong Sun</h1>
<p class="subtitle">Welcome to my personal website</p>
</header>

<section id="about">
<h2>About</h2>
<p>
Hello! I'm Cong Sun. This is my personal website where I share information about my background, experience, and interests.
</p>
</section>

<section id="experience">
<h2>Experience</h2>
<div class="experience-item">
<div class="item-header">
<span class="item-title">Position Title</span>
<span class="item-date">2020 - Present</span>
</div>
<div class="item-subtitle">Company Name</div>
<p>Description of your role and responsibilities.</p>
</div>
</section>

<section id="education">
<h2>Education</h2>
<div class="education-item">
<div class="item-header">
<span class="item-title">Degree Name</span>
<span class="item-date">Year</span>
</div>
<div class="item-subtitle">University Name</div>
<p>Field of study and relevant details.</p>
</div>
</section>

<section id="skills">
<h2>Skills</h2>
<ul class="skills-list">
<li>Skill 1</li>
<li>Skill 2</li>
<li>Skill 3</li>
<li>Skill 4</li>
<li>Skill 5</li>
</ul>
</section>

<section id="contact">
<h2>Contact</h2>
<p>Feel free to reach out to me through any of the following channels:</p>
<div class="contact-links">
<a href="mailto:[email protected]">Email</a>
<a href="https://github.com/Cong-SUN" target="_blank" rel="noopener noreferrer">GitHub</a>
<a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer">LinkedIn</a>
</div>
</section>

<footer>
<p>&copy; 2024 Cong Sun. All rights reserved.</p>
</footer>
</body>
</html>