Skip to content

Commit

Permalink
feat: new design (#1)
Browse files Browse the repository at this point in the history 
* feat: update design

* feat: update meta tags

---------

Co-authored-by: Dmitriy Sheleg <[email protected]>
  • Loading branch information
@shelegdmitriy
shelegdmitriy and Dmitriy Sheleg authored Aug 24, 2024
1 parent f747d25 commit f01c523
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 38 deletions.
26 changes: 22 additions & 4 deletions css/brands.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,30 @@ button {
outline: none;
border-radius: 8px;
cursor: pointer;

}

}
.button {
background-color: #007aff;
color: #ffffff;
padding: 12px 20px;
margin: 10px 0;
border-radius: 10px;
text-transform: none;
font-weight: 500;
text-decoration: none;
display: block;
width: 80%;
margin: 10px auto;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
button:hover,
.button:focus {
color: #212121;
border-color: #888;
outline: #7AB8FF solid 3px
outline: #7AB8FF solid 3px;
background-color: #005bb5;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.button.button-primary {
color: #fff;
Expand All @@ -72,6 +89,7 @@ button:hover,
vertical-align: middle;
width: 20px;
height: 20px;
margin-right: 10px;
}

/* Brand Styles
Expand Down Expand Up @@ -1076,4 +1094,4 @@ button:hover,
.button.button-zoom:hover,
.button.button-zoom:focus {
filter: brightness(90%);
}
}
48 changes: 38 additions & 10 deletions css/skeleton-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,24 @@

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
position: relative;
width: 100%;
max-width: 600px;
text-align: center;
margin: 0 auto;
padding: 0 20px;
margin: 0 16px;
padding: 16px 0;
box-sizing: border-box;
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.container-left {
position: relative;
Expand All @@ -60,7 +70,8 @@
@media (min-width: 400px) {
.container {
width: 85%;
padding: 0;
margin: 0 auto;
padding: 40px 20px;
}
}

Expand Down Expand Up @@ -93,8 +104,10 @@ body {
font-size: 18px;
line-height: 24px;
font-weight: 400;
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
sans-serif;
background-color: #f5f5f7;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #1d1d1f;
text-align: center;
}

/* Typography
Expand All @@ -103,9 +116,9 @@ h1 {
margin-top: 0;
margin-bottom: 16px;
font-weight: 800;
}
h1 {
font-size: 24px;
font-size: 2.5rem;
font-weight: 600;
color: #1d1d1f;
line-height: 64px;
letter-spacing: 0;
}
Expand All @@ -119,9 +132,22 @@ h1 {
}

p {
font-size: 1.1rem;
color: #6e6e73;
margin-bottom: 40px;
margin-top: 0;
}

p a {
color: #007aff;
text-decoration: none;
font-weight: 500;
}

p a:hover {
color: #005bb5;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
Expand Down Expand Up @@ -200,10 +226,12 @@ hr {
50% (default): True circle
*/
.avatar {
width: 128px;
height: 128px;
width: 150px;
height: 150px;
margin-bottom: 20px;
object-fit: cover;
background-position: center;
border-radius: 20px;
}

/* open-sans-regular - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
Expand Down
18 changes: 18 additions & 0 deletions images/logo-dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 35 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,45 +3,56 @@

<head>
<meta charset="utf-8">
<title>LittleLink</title>
<meta name="description" content="https://littlelink.io">
<title>Dmytro Sheleh - Portfolio & Links</title>
<meta name="description" content="Explore the personal portfolio and link hub of Dmytro Sheleh, an open source enthusiast and developer.">
<meta name="author" content="Dmytro Sheleh">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="keywords" content="Dmytro Sheleh, portfolio, developer, open source, GitHub, LinkedIn, personal page, CV">
<meta name="theme-color" content="#007aff">

<meta property="og:title" content="Dmytro Sheleh - Portfolio & Links">
<meta property="og:description" content="Explore the personal portfolio and link hub of Dmytro Sheleh, an open source enthusiast and developer.">
<meta property="og:image" content="https://sheleh.vercel.app/images/icon.png">
<meta property="og:url" content="https://sheleh.vercel.app">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Dmytro Sheleh - Portfolio & Links">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Dmytro Sheleh - Portfolio & Links">
<meta name="twitter:description" content="Explore the personal portfolio and link hub of Dmytro Sheleh, an open source enthusiast and developer.">
<meta name="twitter:image" content="https://sheleh.vercel.app/images/icon.png">
<meta name="twitter:site" content="@shelegdmitriy">

<!-- Favicon and Apple Touch Icon -->
<link rel="icon" type="image/png" href="images/icon.png">
<link rel="apple-touch-icon" href="images/icon.png">

<!-- CSS Stylesheets -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton-dark.css">
<link rel="stylesheet" href="css/brands.css">
<link rel="icon" type="image/png" href="images/icon.png">
</head>

<body>
<div class="container">
<div class="row">
<div class="column" style="margin-top: 10%">

<!-- Your Image Here -->
<img src="images/logo-v3.svg" class="avatar" srcset="images/logo-v3.svg 2x" alt="">

<!-- Title -->
<h1 role="heading">Dmytro Sheleh</h1>
<body>
<div class="wrapper">
<div class="container">
<img src="images/logo-dark.svg" class="avatar" srcset="images/logo-dark.svg 2x" alt="">

<!-- Short Bio -->
<p>An open source DIY Linktree alternative.</p>
<h1 role="heading">Dmytro Sheleh</h1>

<!-- GitHub -->
<a class="button button-github" href="https://github.com/shelegdmitriy" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a><br>
<p>An open source DIY Linktree alternative.</p>

<!-- LinkedIn -->
<a class="button button-linked" href="https://www.linkedin.com/in/dmytro-sheleh" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a><br>
<a class="button button-github" href="https://github.com/shelegdmitriy" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>

<!-- Email -->
<a class="button button-default" href="mailto:[email protected]" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-email.svg" alt="Email Icon">Email</a><br>
<a class="button button-linked" href="https://www.linkedin.com/in/dmytro-sheleh" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>

<a class="button button-default" href="https://cv2you.com/resume/LMWn/" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-review.svg" alt="Review Icon">My CV</a>
<a class="button button-default" href="mailto:sheleg.dmitriy@gmail.com" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-email.svg" alt="Email Icon">Email</a>

<!-- Footer -->
<p>Powered by <a href="https://littlelink.io" target="_blank" rel="noopener" role="button">LittleLink</a>.</p>
<a class="button button-default" href="https://cv2you.com/resume/LMWn/" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-review.svg" alt="Review Icon">My CV</a>

</div>
<p>Powered by <a href="https://littlelink.io" target="_blank" rel="noopener" role="button">LittleLink</a>.</p>
</div>
</div>
</body>
Expand Down

0 comments on commit f01c523

Please sign in to comment.