diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1ec2dc7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ codecologist.dev
+
+
+
+
+
+ Bryan Ramos
+ Fullstack Developer
+
+
+
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..db67a13
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,107 @@
+:root {
+ --mainColor: lightgray;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ display: flex;
+ justify-content: center;
+}
+
+a, a:visited, a:active {
+ color: inherit;
+}
+
+/* Navigation Bar Styling */
+.navbar {
+ background-color: var(--mainColor);
+ position: fixed;
+ width: 100%;
+ border: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.socialicons {
+ justify-content: center;
+ font-size: 25px;
+ display: grid;
+ align-items: center;
+ grid-auto-flow: column;
+ border: 0;
+ padding: 0;
+ margin: 0;
+}
+
+/* Contact Icon Styling */
+ .phoneicon {
+ display: inline-block;
+ border: 0;
+ padding: 0;
+ margin: 3px 3px 0 3px;
+ font-size: 20px;
+ }
+
+ .mailicon {
+ display: inline-block;
+ border: 0;
+ padding: 0;
+ margin: 0 3px 0 3px;
+ font-size: 20px;
+ }
+
+ .githubicon {
+ display: inline-block;
+ color: black;
+ border: 0;
+ padding: 0;
+ margin: 0 3px 0 3px;
+ }
+
+ .twittericon {
+ display: inline-block;
+ color: lightblue;
+ border: 0;
+ padding: 0;
+ margin: 0 3px 0 3px;
+ }
+
+ .youtubeicon {
+ display: inline-block;
+ color: white;
+ border: 0;
+ padding: 0;
+ margin: 0 3px 0 3px;
+ }
+
+/* Heading Styling */
+
+.heading {
+ border-bottom: 5px solid black;
+ width: 100%;
+}
+
+h1 {
+ display: flex;
+ justify-content: center;
+ font-size: 60px;
+ font-family: 'Righteous', cursive;
+ border: 0;
+ padding: 0;
+ margin: 30px 0 0 0;
+}
+
+h2 {
+ display: flex;
+ justify-content: center;
+ font-size: 20px;
+ font-family: 'Righteous', cursive;
+ border: 0;
+ padding: 0;
+ margin: 10px 0 0 0;
+}
+
+
+/* Portfolio Section Styling */