[codibez] Home

by Codi Bezouka-Smith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<div id="app">
	<div class="note hint">
		<p>resize browser window to see responsive effect.</p>
		<a href="#" id="close">x</a>
	</div>
	<header>
		<ul id="menu">
			<a href="#" class="active brand"><li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1071.61 832.79">
		<path d="M1070.63,713.91V832.62a.18.18,0,0,1-.17.17H.51a.17.17,0,0,1-.17-.17V713.86l.07-.12L31,654.3a.16.16,0,0,1,.15-.09h133.5a.17.17,0,0,1,.15.25l-30.39,59a.18.18,0,0,0,.15.25h935.89A.17.17,0,0,1,1070.63,713.91Z" />
		<path d="M1071.48.17l.13,118.22a.11.11,0,0,1,0,.08L1010.74,237,949.59,356.11,888.41,475.23l-61.1,119a.16.16,0,0,1-.15.09l-646.41.74,0,0c-.91,0-1.81,0-2.72,0A178.34,178.34,0,0,1,.5,437.32v0l0-41.17v0A178.34,178.34,0,0,1,177.66,237.93l626.77-.71-.12.24-61,118.79a.17.17,0,0,1-.16.09L179.57,357c-32.31,0-60,25.06-61.2,57.34A59.55,59.55,0,0,0,177.93,476l576.49-.66a.15.15,0,0,0,.15-.09l61.11-119,61.18-119.12,61-118.88a.17.17,0,0,0-.15-.25L.3,119.08a.18.18,0,0,1-.17-.17L0,1.39a.17.17,0,0,1,.17-.17L1071.31,0A.18.18,0,0,1,1071.48.17Z" />
		</svg></li></a>
			<a href="#"><li>tutorials</li></a>
		</ul>
		<div id="selector">
			<div class="circle"></div>
		</div>
	</header>
	<main id="content">
		<section>
			<div id="photo"></div>
			<h1>Hi, I'm Codi</h1>
			<ul id="heading">
				<li>I'm a <span>fullstack web developer</span>. I'm <span id="age">/age\</span>.</li>
				<li>I'm based out of <span>New York, United States</span>.</li>
				<li>Read my <a href="#">blog posts</a> (short tutorials mostly).</li>
			</ul>
		</section>
	</main>
	<footer>
		<p>&copy; <span id="year">/year\</span> codibez all rights reserved</p>
	</footer>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

$color-active: #32A852;
$color-black: rgb(0, 0, 0);
$color-gray: rgb(26, 26, 26);
$color-offset: #EBEBEB;
$color-secondary: dodgerblue;
$color-white: rgb(255, 255, 255);
$color-yellow: #F0E68C;

$font-default: '';
$font-mono: 'Roboto Mono', serif;
$font-stack: '';

$photo-codi: 'https://i.imgur.com/3tZ26pp.jpeg';

@mixin flex ($direction, $align, $justify) {
	align-items: $align;
	display: flex;
	flex-direction: $direction;
	justify-content: $justify;
};
@mixin respond ($breakpoint) {};

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	position: relative;
}

body  {
	height: 100vh;
	
	.container { margin: 0 auto; }
	
	&.dark {
		background: $color-gray;
		color: $color-white;
		
		#app {
			#content section {
				ul#categories a {
					background: $color-white;
					color: $color-black;
					&:hover { color: $color-active; }
				}
				ul#posts .post {
					color: $color-white;

					.categories .category {
						border-color: $color-white;
						color: $color-white;
						&:hover { color: $color-active; }
					}
				}
			}
			header #menu a {
				 color: $color-white;
				 svg { fill: $color-white; }
			}
			.note { border-color: transparent; }
			#selector { 
				// @include flex(row, center, flex-end);
				background: $color-white;
				.circle {
					background: $color-black;
					left: 25px;
				}
			}
		}
	}
}

#app {
	@extend .container;
	// background: $color-white;
	// color: $color-black;
	height: 100%;
	max-width: 600px;
	padding: 10px;
	width: 100%;
	
	#content {
		width: 100%;
		
		section { 
			h1 {
				font-family: $font-mono;
				margin-bottom: 10px;
			}
			ul#categories {
				@include flex(row, center, flex-start);
				flex-wrap: wrap;
				list-style-type: none;
				width: 100%;
				
				a {
					@include flex(row, center, center);
					background: $color-black;
					color: $color-white;
					font-weight: bold;
					min-width:...

JavaScript

const fns = {
	data: {
		posts: [
			{
				id: 1,
				categories: ['html'],
				date: '',
				title: 'creating comments',
			},
			{
				id: 2,
				categories: ['css', 'html'],
				date: '',
				title: 'css flexbox',
			},
			{
				id: 3,
				categories: ['mySQL'],
				date: '',
				title: 'creating a database',
			},
			{
				id: 4,
				categories: ['node'],
				date: '',
				title: 'creating a localhost server',
			},
		],
	},
	dom: {
		elements: {
			app: {
				classList: () => {
					if (fns.dom.elements.app.el()) {
						return fns.dom.elements.app.el().classList;
					}
				},
				el: () => {
					if (document.getElementById('app')) {
						return document.getElementById('app')
					}
				},
				styles: () => {
					if (fns.dom.elements.app.el()) {
						return window.getComputedStyle(fns.dom.elements.app.el())
					}
				},
			},
			body: {
				classList: () => { return document.body.classList },
				el: () => { return document.body },
			},
			circle: {
				el: () => { return document.querySelector('.circle') },
			},
			note: {
				el: () => { return document.querySelector('.note') },
				btn: {
					el: () => { return document.getElementById('close') },
				},
			},
			selector: {
				el: () => { return document.getElementById('selector') },
			},
			tutorials: {
				el: () => { return document.getElementById('tutorials') },
				span: {
					el: () => { return document.querySelector('h1#tutorials span') }
				},
			},
		},
		listeners: {
			click: () => {
				fns.dom.elements.selector.el().addEventListener('click', () => {
					fns.dom.elements.body.classList().toggle('dark');
				});
				fns.dom.elements.note.btn.el().addEventListener('click', () => {
					fns.dom.elements.note.el().style.display = 'none';
				});
			},
		},
		set: () => {
			fns.dom.listeners.click();
			fns.setAge('age');
			fns.setCategories(fns.getCategories(fns.data.posts), 'categories');
			fns.setCount('#tutorials span');
			fns.setPosts(fns.data.posts,...