minimal portfolio template complete

nilaachandra · Aug 10, 2024 · d9abd91 · d9abd91
commit d9abd91
Show file tree

Hide file tree

Showing 9 changed files with 524 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,59 @@
+# Minimal Portfolio Website
+
+A simple and minimal portfolio website template designed for developers. This project includes a home page, blogs page, works page, and an example blog. It’s perfect for beginners who want to create a clean and straightforward portfolio with minimal HTML and CSS.
+
+
+## Features
+
+- **Minimal Design:** Focus on simplicity and usability with clean, easy-to-read layouts.
+- **Responsive Layout:** Works well on all screen sizes from mobile to desktop.
+- **Easy to Customize:** Modify the HTML and CSS to suit your personal style and needs.
+- **Example Blog:** Pre-built example blog post to help you get started with content creation.
+
+## Pages
+
+- **Home:** An introduction to who you are, your skills, and your experience.
+- **Blogs:** A collection of your blog posts.
+- **Works:** Showcase of your projects and works.
+- **Example Blog:** A sample blog post to illustrate how blog posts will look on your site.
+
+## Installation
+
+1. **Clone the repository:**
+
+   ```bash
+   git clone https://github.com/your-username/minimal-portfolio.git 
+   ```
+2. **Navigate to the project directory**
+    ```
+    cd minimal-portfolio
+    ```
+3. **Open the project:** Open the `index.html` file in your preferred web browser to view the website locally.
+Customization
+
+## Edit HTML files:
+Modify the content in the HTML files to add your personal information, projects, and blog posts.
+**Update CSS:** Customize the styles.css file to change colors, fonts, and layout to match your preferences.
+**Add your own images:** Replace the placeholder images in the images folder with your own photos and project screenshots.
+
+## Deployment
+You can deploy this website using various platforms. Here are a few options:
+
+GitHub Pages: Push your repository to GitHub and enable GitHub Pages in the repository settings.
+Netlify: Connect your GitHub repository to Netlify for automatic deployments.
+Vercel: Import your project from GitHub to Vercel for easy deployment and hosting.
+
+## Conclusion
+
+Alright, let's be real for a sec. This minimal portfolio isn't trying to win any design awards, but that's kind of the point. It's for devs who want to showcase their work without the fuss.
+
+Think of it as the coding equivalent of that plain white t-shirt in your wardrobe. It gets the job done, and hey, sometimes simple is best, right?
+
+If you found this useful (or at least mildly entertaining), consider dropping a star on the repo. It's not exactly rocket science, but a little appreciation never hurt anybody.
+
+Happy coding, and may your commits always be cleaner than this portfolio's design! 👩‍💻👨‍💻
+
+P.S. Remember, it's not a bug, it's a feature. Minimalism for the win! Also If anyone asks, yes, it's supposed to look like that. It's called "aesthetic", look it up.
+
+
+    
diff --git a/animepfp.jpg b/animepfp.jpg
diff --git a/blog-example.html b/blog-example.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nilaacodes | The Art of Minimal UI Design</title>
+    <link rel="stylesheet" href="blog.css" />
+    <link rel="icon" type="image/png" href="./animepfp.jpg" />
+  </head>
+  <body>
+    <header>
+      <a href="blogs.html">Go Back</a>
+    </header>
+    <h1>The Art of Minimal UI Design</h1>
+    <p>- Posted on 8th August 2024</p>
+    <main>
+      <h2>What is Minimal UI Design?</h2>
+      <p>
+        Minimal UI design is like a breath of fresh air in a crowded room. It’s
+        all about keeping things simple, clean, and focused. Instead of
+        cluttering your interface with tons of elements, buttons, and flashy
+        graphics, you focus on what really matters—the content and the user
+        experience.
+      </p>
+      <p>
+        Think of it as designing with purpose. Every element on the screen has a
+        reason for being there, and nothing more. This doesn’t mean your design
+        has to be boring or plain. In fact, it’s quite the opposite. When done
+        right, minimal design can be elegant, sophisticated, and incredibly
+        effective.
+      </p>
+
+      <h2>Why Go Minimal?</h2>
+      <p>
+        So, why should you care about minimal UI design? Here are a few reasons:
+      </p>
+      <ul>
+        <li>
+          <strong>Clarity and Focus:</strong> A minimal design helps users focus
+          on what’s important. By eliminating distractions, you make it easier
+          for them to navigate your site or app and find what they’re looking
+          for.
+        </li>
+        <li>
+          <strong>Better User Experience:</strong> With less clutter, users can
+          interact with your product more intuitively. They don’t have to wade
+          through unnecessary elements to get to what they need, making the
+          overall experience smoother and more enjoyable.
+        </li>
+        <li>
+          <strong>Faster Load Times:</strong> Fewer elements mean less data to
+          load, which can significantly speed up your site or app. This is
+          especially important in today’s world, where users expect things to
+          load instantly.
+        </li>
+        <li>
+          <strong>Timeless Appeal:</strong> Trends come and go, but minimal
+          design tends to have a timeless quality. By focusing on simplicity and
+          functionality, your design is less likely to look dated a few years
+          down the line.
+        </li>
+      </ul>
+
+      <h2>Key Principles of Minimal UI Design</h2>
+      <p>
+        If you’re ready to embrace the “less is more” philosophy, here are some
+        key principles to keep in mind:
+      </p>
+
+      <h3>1. Focus on Essentials</h3>
+      <p>
+        When you’re designing, ask yourself, “Is this element necessary?” If the
+        answer is no, ditch it. Focus on what’s essential for the user to
+        complete their tasks. This not only helps reduce clutter but also makes
+        your interface more intuitive.
+      </p>
+
+      <h3>2. Embrace Whitespace</h3>
+      <p>
+        Whitespace, or negative space, is your best friend in minimal design. It
+        gives your content room to breathe and helps create a sense of order and
+        simplicity. Don’t be afraid of blank space—use it to highlight what’s
+        important and guide the user’s eye through the interface.
+      </p>
+
+      <h3>3. Consistency is Key</h3>
+      <p>
+        Consistency makes your design feel cohesive and professional. Stick to a
+        limited color palette, use the same fonts throughout, and keep your
+        spacing uniform. This doesn’t mean everything has to look the same, but
+        it should all feel like part of the same design family.
+      </p>
+
+      <h3>4. Typography Matters</h3>
+      <p>
+        In minimal design, typography takes center stage. With fewer visual
+        elements, your choice of font and how you use it becomes even more
+        important. Opt for simple, readable fonts, and avoid using too many
+        different styles. Remember, the goal is clarity and readability.
+      </p>
+
+      <h3>5. Use a Limited Color Palette</h3>
+      <p>
+        A minimal color palette doesn’t mean just black and white (unless you’re
+        going for that look). It means choosing a few harmonious colors that
+        work well together and sticking with them. Neutral colors often work
+        best, with a few accent colors to draw attention where needed.
+      </p>
+
+      <h2>A Quick Example</h2>
+      <p>
+        Let’s say you’re designing a landing page for a new app. Instead of
+        loading it with images, animations, and fancy graphics, you focus on a
+        clean layout with a clear message. You might have a simple headline, a
+        brief description, and a call-to-action button, all centered on the page
+        with plenty of whitespace around them.
+      </p>
+
+      <h2>Conclusion</h2>
+      <p>
+        Minimal UI design is all about cutting out the noise and focusing on
+        what really matters. It’s not just a trend, but a timeless approach that
+        can make your interfaces more user-friendly and visually appealing. By
+        following these principles and embracing the “less is more” mentality,
+        you can create designs that are not only beautiful but also highly
+        functional.
+      </p>
+      <p>
+        So next time you’re working on a design, ask yourself: “What can I
+        remove?” You might be surprised at how much better your design becomes
+        when you start taking things away. Remember, minimal doesn’t mean
+        boring—it means smart, intentional, and effective. Happy designing!
+      </p>
+    </main>
+
+    <footer>&copy; 2024 Nilaacodes. All rights reserved.</footer>
+  </body>
+</html>
diff --git a/blog.css b/blog.css
@@ -0,0 +1,63 @@
+body {
+  font-family: sans-serif, sans-serif;
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #101010;
+  color: white;
+  max-width: 712px;
+  margin: 0 auto;
+  padding: 16px;
+}
+
+header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  line-height: 1;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+h1 {
+  font-size: 24px;
+  line-height: 0;
+}
+a {
+  color: blue;
+  font-style: italic;
+  text-decoration: none;
+  transition: all 1s ease-in;
+}
+a:hover {
+  text-decoration: underline;
+}
+section {
+  line-height: 1.4;
+  margin: 24px 0;
+}
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+ul li {
+  margin: 0.5rem 0;
+}
+ul li span {
+  color: blue;
+  font-weight: bold;
+}
+p {
+  margin-bottom: 1rem;
+}
+
+/* for code snippets */
+code {
+  display: block;
+  background-color: #f4f4f4;
+  padding: 1rem;
+  border-radius: 5px;
+  margin-bottom: 1rem;
+  font-family: monospace;
+}
diff --git a/blogs.html b/blogs.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nilaacodes | Blogs</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" type="image/jpg" href="./animepfp.jpg" />
+  </head>
+  <body>
+    <header>
+      <img src="./animepfp.jpg" alt="" height="72" width="72" />
+      <div>
+        <h1>Nilaa Laishram</h1>
+        <p>Full Stack Developer | UI Designer</p>
+      </div>
+    </header>
+    <nav>
+      <a href="index.html">Home</a>
+      <a href="works.html">Works</a>
+      <a href="blogs.html" style="text-decoration: underline; color: white;">Blogs</a>
+    </nav>
+    <main>
+      <section>
+        <h1>My Blogs</h1>
+        <ul>
+          <li>
+            <a href="blog-example.html">The Art of Minimal UI Design</a> - A
+            blog post on creating simple and effective user interfaces.
+          </li>
+        </ul>
+      </section>
+    </main>
+    <footer>&copy; 2024 Nilaacodes. All rights reserved.</footer>
+  </body>
+</html>