major styling changes

mtzsouza · Sep 20, 2023 · 3657eba · 3657eba
1 parent 72e34c5
commit 3657eba
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 12 deletions.
diff --git a/src/app.css b/src/app.css
@@ -4,7 +4,7 @@
 
 @layer utilities {
     .navItem {
-        @apply cursor-pointer font-semibold opacity-60 hover:opacity-95
+        @apply cursor-pointer font-bubbler font-bold uppercase tracking-widest opacity-60 hover:opacity-95
     }
 
     .navItem.active {

diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width" />
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Bacasime+Antique&family=Ms+Madi&display=swap" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css2?family=Bacasime+Antique&family=Bubbler+One&family=Ms+Madi&display=swap" rel="stylesheet">	
 		<script src="https://kit.fontawesome.com/2f705eb04d.js" crossorigin="anonymous"></script>
 		%sveltekit.head%
 	</head>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -29,7 +29,7 @@
   <nav class="h-10 w-[85%] bg-blue-950 bg-opacity-30 z-20 my-4 px-8 sm:px-16 rounded-lg sm:h-12 sm:w-[92%]
           flex flex-col antialiased text-gray-100 transition-all duration-500" class:h-20={menuOpen}>
           <div class="w-full flex flex-row justify-between items-center antialiased">
-            <a href="/" class="font-madi text-4xl sm:text-6xl cursor-pointer relative sm:right-6 sm:top-1">
+            <a href="/" class="font-madi text-4xl sm:text-6xl cursor-pointer relative sm:right-6 sm:top-1 lg:left-12">
               Matheus Souza
             </a>
             <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -40,15 +40,15 @@
             <!-- Desktop menu items -->
             <div class="hidden sm:flex relative bottom-1.5 gap-24">
               <a href="/" class="navItem" class:active={currentPage == '/'}>About</a>
+              <a href="/stack" class="navItem" class:active={currentPage == '/stack'}>Tech Stack</a>
               <a href="/projects" class="navItem" class:active={currentPage == '/projects'}>Projects</a>
-              <a href="/contact" class="navItem" class:active={currentPage == '/contact'}>Contact</a>
             </div>
           </div>
           <!-- Mobile menu items -->
           <div class="sm:hidden py-3 w-full flex justify-around" class:hidden={!menuItems}>
             <a href="/" class="navItem" class:active={currentPage == '/'}>About</a>
+            <a href="/stack" class="navItem" class:active={currentPage == '/stack'}>Tech Stack</a>
             <a href="/projects" class="navItem" class:active={currentPage == '/projects'}>Projects</a>
-            <a href="/contact" class="navItem" class:active={currentPage == '/contact'}>Contact</a>
           </div>
   </nav>
   <main class="h-[85%] w-[85%] sm:w-[92%] rounded-lg flex items-center justify-center bg-blue-950 bg-opacity-30 relative overflow-auto">

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,7 +4,7 @@
 
 <!-- Mobile -->
 <div class="sm:hidden max-h-[95%] max-w-[90%] grid grid-rows-3
-            text-gray-100 antialiased font-bacasime">
+            text-gray-100 antialiased font-bubbler">
     <div class="flex justify-center relative top-2">
         <img src="https://i.imgur.com/XW1tkoQ.png" alt="img" class="object-cover overflow-visible animate-bounce">
     </div>
@@ -26,21 +26,21 @@
             </a>
         </div>
         <div>
-            <span>Seeking Summer 2024 Software Engineering Internship</span>
+            <span>I'm currently seeking Summer 2024 Software Engineering Internship opportunities.</span>
         </div>
     </div>
 </div>
 
 <!-- Desktop -->
 <div class="hidden sm:flex max-h-[95%] max-w-[90%] grid grid-flow-col grid-cols-2 justify-around overflow-hidden
-            text-gray-100 antialiased font-bacasime">
-    <div class="flex flex-col gap-12 max-w-[50%]">
+            text-gray-100 antialiased font-bubbler">
+    <div class="flex flex-col gap-12 max-w-[50%] tracking-widest">
         <div class="text-4xl pt-12">
             <span>I'm <span class="font-semibold">Matheus</span>,</span>
             <span>undergraduate Computer Science student.</span>
         </div>
         <div class="text-3xl">
-            <span>Seeking Summer 2024 Software Engineering Internship</span>
+            <span>I'm currently seeking Summer 2024 Software Engineering Internship opportunities.</span>
         </div>
         <div class="flex gap-5 justify-center text-3xl">
             <a href="https://github.com/mtzsouza" target="_blank" rel="noreferrer noopener">

diff --git a/src/routes/contact/+page.svelte → src/routes/stack/+page.svelte b/src/routes/contact/+page.svelte → src/routes/stack/+page.svelte
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,8 +6,9 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        madi: "'Ms Madi', serif",
-        bacasime:"Bacasime Antique, serif"
+        madi: "'Ms Madi', cursive",
+        bacasime: "'Bacasime Antique', serif",
+        bubbler: "'Bubbler One', sans-serif"
       },
       animation: {
         bounce: 'bounce 2.5s infinite',