1660043220
Comet Land: A Simple Blog and Resume Template with Nextjs and NextUI
Comet-land
Blog and Resume template with turborepo
한국어 문서는 다음 링크에서 확인하실 수 있습니다.
- 👔 Code highlight with line-highlight, line-numbers
- 🎨 Design with NextUI
- 🍽 Table of contents
- 🎩 Dark mode
- ⌨️ Search with KBar
- 🔨 Configurable
- 🔊 Utterances Comment
- 🔭 Google Analytics
- 🔥 Hotjar
- 🏄 Lighthouse score
Resume Feature
- 🎨 Design with NextUI
- 🎩 Dark mode
- ⌨️ Contact with KBar
- 🔨 Configurable
- 🔭 Google Analytics
- 🔥 Hotjar
- 🏄 Lighthouse score
How to start
comet-land has own generate package create-comet-land
npx create-comet-land
# or
yarn create comet-land
Or using Fork or clone this repo
- Install dependencies
yarn
- Start Turbo !
yarn turbo run dev
# or just
yarn dev
- Now you can see blog at
localhost:3000, resume atlocalhost:3001
How to configuration
Please see packages/core/constants directory.
and you can reconfigure at that directory's variable
- Analytics directory
- GA ID
- Hotjar ID
- Colors directory
- color schema
- General directory
- author image
- default open-graph image
- favicon
- SocialMedia directory
- github
and please check apps/blog/_config/index.json and apps/resume/_config/index.json.
This files are placing each app's configuration variable.
How to use it
please read following link.
How to deploy
deploy with vercel (recommend)
deploy with github pages
How to add more packages
- scope packages
cd where-you-want
yarn add package-name
- global packages
yarn add package-name -W
- global dev packages
yarn add package-name -DW
Trouble shootings
check this wiki please! it might be help
Use Case
Inspired
I inspired below blogs and resume.
Author: hyesungoh
Source code: https://github.com/hyesungoh/comet-land
License: MIT license
#react-native #Nextjs #typescript
What is GEEK
Buddha Community
1660043220
Comet Land: A Simple Blog and Resume Template with Nextjs and NextUI
Comet-land
Blog and Resume template with turborepo
한국어 문서는 다음 링크에서 확인하실 수 있습니다.
- 👔 Code highlight with line-highlight, line-numbers
- 🎨 Design with NextUI
- 🍽 Table of contents
- 🎩 Dark mode
- ⌨️ Search with KBar
- 🔨 Configurable
- 🔊 Utterances Comment
- 🔭 Google Analytics
- 🔥 Hotjar
- 🏄 Lighthouse score
Resume Feature
- 🎨 Design with NextUI
- 🎩 Dark mode
- ⌨️ Contact with KBar
- 🔨 Configurable
- 🔭 Google Analytics
- 🔥 Hotjar
- 🏄 Lighthouse score
How to start
comet-land has own generate package create-comet-land
npx create-comet-land
# or
yarn create comet-land
Or using Fork or clone this repo
- Install dependencies
yarn
- Start Turbo !
yarn turbo run dev
# or just
yarn dev
- Now you can see blog at
localhost:3000, resume atlocalhost:3001
How to configuration
Please see packages/core/constants directory.
and you can reconfigure at that directory's variable
- Analytics directory
- GA ID
- Hotjar ID
- Colors directory
- color schema
- General directory
- author image
- default open-graph image
- favicon
- SocialMedia directory
- github
and please check apps/blog/_config/index.json and apps/resume/_config/index.json.
This files are placing each app's configuration variable.
How to use it
please read following link.
How to deploy
deploy with vercel (recommend)
deploy with github pages
How to add more packages
- scope packages
cd where-you-want
yarn add package-name
- global packages
yarn add package-name -W
- global dev packages
yarn add package-name -DW
Trouble shootings
check this wiki please! it might be help
Use Case
Inspired
I inspired below blogs and resume.
Author: hyesungoh
Source code: https://github.com/hyesungoh/comet-land
License: MIT license
#react-native #Nextjs #typescript
1607523900
How To Create Tabs in Less Than 12 Minutes Using HTML CSS
In this video, We have created a Tab design in HTML and CSS without using JavaScript. I have also provided HTML and CSS code on my website, you can visit my website by clicking given link.
Subscribe: https://www.youtube.com/@CodingLabYT/featured
Source Code :
HTML :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!--<title> CSS Vertical Tabs </title>-->
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="topic">CSS Vertical Tabs.</div>
<div class="content">
<input type="radio" name="slider" checked id="home">
<input type="radio" name="slider" id="blog">
<input type="radio" name="slider" id="help">
<input type="radio" name="slider" id="code">
<input type="radio" name="slider" id="about">
<div class="list">
<label for="home" class="home">
<i class="fas fa-home"></i>
<span class="title">Home</span>
</label>
<label for="blog" class="blog">
<span class="icon"><i class="fas fa-blog"></i></span>
<span class="title">Blog</span>
</label>
<label for="help" class="help">
<span class="icon"><i class="far fa-envelope"></i></span>
<span class="title">Help</span>
</label>
<label for="code" class="code">
<span class="icon"><i class="fas fa-code"></i></span>
<span class="title">Code</span>
</label>
<label for="about" class="about">
<span class="icon"><i class="far fa-user"></i></span>
<span class="title">About</span>
</label>
<div class="slider"></div>
</div>
<div class="text-content">
<div class="home text">
<div class="title">Home Content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi excepturi ducimus sequi dignissimos expedita tempore omnis quos cum, possimus, aspernatur esse nihil commodi est maiores dolorum rem iusto atque, beatae voluptas sit eligendi architecto dolorem temporibus. Non magnam ipsam, voluptas quasi nam dicta ut. Ad corrupti aliquid obcaecati alias, nemo veritatis porro nisi eius sequi dignissimos ea repellendus quibusdam minima ipsum animi quae, libero quisquam a! Laudantium iste est sapiente, ullam itaque odio iure laborum voluptatem quaerat tempore doloremque quam modi, atque minima enim saepe! Dolorem rerum minima incidunt, officia!</p>
</div>
<div class="blog text">
<div class="title">Blog Content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias tempora, unde reprehenderit incidunt excepturi blanditiis ullam dignissimos provident quam? Fugit, enim! Architecto ad officiis dignissimos ex quae iusto amet pariatur, ea eius aut velit, tempora magnam hic autem maiores unde corrupti tenetur delectus! Voluptatum praesentium labore consectetur ea qui illum illo distinctio, sunt, ipsam rerum optio quibusdam cum a? Aut facilis non fuga molestiae voluptatem omnis reprehenderit, dignissimos commodi repellat sapiente natus ipsam, ipsa distinctio. Ducimus repudiandae fuga aliquid, numquam.</p>
</div>
<div class="help text">
<div class="title">Help Content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores error neque, officia excepturi dolores quis dolor, architecto iusto deleniti a soluta nostrum. Fuga reiciendis beatae, dicta voluptatem, vitae eligendi maxime accusamus. Amet totam aut odio velit cumque autem neque sequi provident mollitia, nisi sunt maiores facilis debitis in officiis asperiores saepe quo soluta laudantium ad non quisquam! Repellendus culpa necessitatibus aliquam quod mollitia perspiciatis ducimus doloribus perferendis autem, omnis, impedit, veniam qui dolorem? Ipsam nihil assumenda, sit ratione blanditiis eius aliquam libero iusto, dolorum aut perferendis modi laboriosam sint dolor.</p>
</div>
<div class="code text">
<div class="title">Code Content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore magnam vitae inventore blanditiis nam tenetur voluptates doloribus error atque reprehenderit, necessitatibus minima incidunt a eius corrupti placeat, quasi similique deserunt, harum? Quia ut impedit ab earum expedita soluta repellat perferendis hic tempora inventore, accusantium porro consequuntur quisquam et assumenda distinctio dignissimos doloremque enim nemo delectus deserunt! Ullam perspiciatis quae aliquid animi quam amet deleniti, at dolorum tenetur, tempore laborum.</p>
</div>
<div class="about text">
<div class="title">About Content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus incidunt possimus quas ad, sit nam veniam illo ullam sapiente, aspernatur fugiat atque. Laboriosam libero voluptatum molestiae veniam earum quisquam, laudantium aperiam, eligendi dicta animi maxime sunt non nisi, ex, ipsa! Soluta ex, quibusdam voluptatem distinctio asperiores recusandae veritatis optio dolorem illo nesciunt quos ullam, dicta numquam ipsam cumque sed. Blanditiis omnis placeat, enim sit dicta eligendi voluptatibus laborum consectetur repudiandae tempora numquam molestiae rerum mollitia nemo. Velit perspiciatis, nesciunt, quo illo quas error debitis molestiae et sapiente neque tempore natus?</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS :
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #dad3f8;
}
::selection{
background: #6d50e2;
color: #fff;
}
.container{
max-width: 950px;
width: 100%;
padding: 40px 50px 40px 40px;
background: #fff;
margin: 0 20px;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .topic{
font-size: 30px;
font-weight: 500;
margin-bottom: 20px;
}
.content{
display: flex;
align-items: center;
justify-content: space-between;
}
.content .list{
display: flex;
flex-direction: column;
width: 20%;
margin-right: 50px;
position: relative;
}
.content .list label{
height: 60px;
font-size: 22px;
font-weight: 500;
line-height: 60px;
cursor: pointer;
padding-left: 25px;
transition: all 0.5s ease;
color: #333;
z-index: 12;
}
#home:checked ~ .list label.home,
#blog:checked ~ .list label.blog,
#help:checked ~ .list label.help,
#code:checked ~ .list label.code,
#about:checked ~ .list label.about{
color: #fff;
}
.content .list label:hover{
color: #6d50e2;
}
.content .slider{
position: absolute;
left: 0;
top: 0;
height: 60px;
width: 100%;
border-radius: 12px;
background: #6d50e2;
transition: all 0.4s ease;
}
#home:checked ~ .list .slider{
top: 0;
}
#blog:checked ~ .list .slider{
top: 60px;
}
#help:checked ~ .list .slider{
top: 120px;
}
#code:checked ~ .list .slider{
top: 180px;
}
#about:checked ~ .list .slider{
top: 240px;
}
.content .text-content{
width: 80%;
height: 100%;
}
.content .text{
display: none;
}
.content .text .title{
font-size: 25px;
margin-bottom: 10px;
font-weight: 500;
}
.content .text p{
text-align: justify;
}
.content .text-content .home{
display: block;
}
#home:checked ~ .text-content .home,
#blog:checked ~ .text-content .blog,
#help:checked ~ .text-content .help,
#code:checked ~ .text-content .code,
#about:checked ~ .text-content .about{
display: block;
}
#blog:checked ~ .text-content .home,
#help:checked ~ .text-content .home,
#code:checked ~ .text-content .home,
#about:checked ~ .text-content .home{
display: none;
}
.content input{
display: none;
}#javascript #html #css
1576294406
Software Landing Page website template
Download this stylish software landing page website template from smarteyeapps.com this is one of the best landing page website template you can download it by using the following link https://www.smarteyeapps.com/software-landing-page-template
#Free website template #Landing page website template #Bootstrap landing page template
1576296200
Free Mobile Landing page website template
Mobile Landing page website template free download. download this template from smarteyeapps.com by using the link : https://www.smarteyeapps.com/free-mobile-landing-page-template
#Free website template #Bootstrap landing page template #Mobile landing page template
1603587600
How To Create a Developer Blog on DevDojo
Nowadays, creating a blog is easy. But, with all the different options available, you might go crazy by just doing the research.
Should you choose WordPress and tweak the theme to get it the way you like, or a static site generator with no admin interface and complicated build processes?
All you want is a simple blog where you can write about the shit you love.
So why can’t it be simpler? Well, now it is with the DevDojo Dev Blog!
Setting up a Domain
Your Dev Blog will have a default subdomain username.devdojo.com, and you may choose to add a custom domain as well.
If you wish to use a custom domain, add a CNAME record to your Cloudflare DNS, with your subdomain in the CONTENT section. Wait a few minutes and you’ll have your custom domain resolving in minutes.
Want a video on how to do this, You got it!
Themes
At the moment of writing this, there are 2 themes you can choose from (many more to come). Each theme will have a light/dark mode and is built for speed!
Themes are built using the awesome TailwindCSS library. If you pair that with PurgeCSS, minimal javascript, and Cloudflare caching. That’s just a recipe for a fast website.
#developer-blog #dev-blog #web-development #portfolio #blog #blogging #developer-tools #writing